High-Performance Hotel Operations & AI Agent Testing Dashboard

A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

This tailwind example is contributed by Ayyamperumal S, on 24-Feb-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans,Author box, User information,Graph,Admin Dashboard, User dashboard,Front page

Breadcrumb Hero Pricing Profile Chart Dashboard Landing Page

Author Ayyamperumal S

Tailwind v3.4 987 3

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Hotel Agent - Testing Dashboard</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style type="text/tailwindcss">
        @theme inline {
            --color-ai-primary: #8B5CF6;
            --color-ai-secondary: #06B6D4;
            --color-room-booked: #10B981;
            --color-room-pending: #F59E0B;
            --radius-neon: 24px;
        }
        body { font-family: 'Plus Jakarta Sans', sans-serif; background: #0F172A; color: #F8FAFC; }
        .glass-card { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; }
        .glass-card:hover { border-color: var(--color-ai-primary); transform: translateY(-2px); }
        .pulse-ai { animation: pulse 2s infinite; }
        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); } }
    </style>
</head>
<body class="min-h-screen overflow-x-hidden">

<div class="flex min-h-screen">
    <aside class="w-72 bg-slate-900 border-r border-slate-800 hidden lg:flex flex-col fixed h-full z-50">
        <div class="p-8">
            <a href="https://www.ayyamperumal.online/" target="_blank" class="flex items-center gap-3 group">
                <div class="w-12 h-12 bg-ai-primary rounded-xl flex items-center justify-center pulse-ai">
                    <i data-lucide="bot" class="text-white"></i>
                </div>
                <div>
                    <h1 class="font-extrabold text-xl tracking-tight bg-gradient-to-r from-ai-primary to-ai-secondary bg-clip-text text-transparent">AI-Inn Test</h1>
                    <p class="text-[10px] text-slate-500 uppercase font-bold">V 2.0.4 Stable</p>
                </div>
            </a>
        </div>

<nav class="flex-1 px-6 space-y-2">
            <p class="text-slate-500 text-[10px] font-bold uppercase mb-4 px-4">Management</p>
            <a href="#" class="flex items-center gap-3 px-4 py-3 bg-ai-primary/10 text-ai-primary rounded-neon font-semibold">
                <i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
            </a>
            <a href="https://www.ayyamperumal.online/" target="_blank" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white transition-all group">
                <i data-lucide="cpu" class="w-5 h-5 group-hover:rotate-12 transition-transform"></i> Agent Training
            </a>
            <a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white transition-all">
                <i data-lucide="bed" class="w-5 h-5"></i> Live Occupancy
            </a>
            <div class="pt-8">
                <p class="text-slate-500 text-[10px] font-bold uppercase mb-4 px-4">Diagnostics</p>
                <a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white transition-all">
                    <i data-lucide="terminal" class="w-5 h-5"></i> Raw Logs
                </a>
            </div>
        </nav>

<div class="p-6 border-t border-slate-800">
            <a href="https://www.ayyamperumal.online/" target="_blank" class="flex items-center gap-3 p-3 rounded-2xl hover:bg-slate-800 transition-colors">
                <img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?w=100&h=100&fit=crop" class="w-10 h-10 rounded-full border-2 border-ai-primary p-0.5">
                <div class="overflow-hidden">
                    <p class="text-sm font-bold truncate">Ayyamperumal</p>
                    <p class="text-xs text-slate-500 truncate">Lead Engineer</p>
                </div>
            </a>
        </div>
    </aside>

<main class="flex-1 lg:ml-72 p-6 md:p-10">
        <header class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-12">
            <div>
                <h2 class="text-4xl font-black text-white mb-2">System <span class="text-ai-primary">Overview</span></h2>
                <div class="flex items-center gap-2 text-slate-400">
                    <span class="w-2 h-2 rounded-full bg-room-booked animate-ping"></span>
                    <p id="live-status">AI Agents: 12 Active | Region: Bengaluru</p>
                </div>
            </div>
            <div class="flex gap-3">
                <button onclick="window.open('https://www.ayyamperumal.online/', '_blank')" class="px-6 py-3 bg-white text-slate-900 font-bold rounded-neon hover:scale-105 transition-transform flex items-center gap-2 shadow-lg shadow-white/10">
                    <i data-lucide="external-link" class="w-4 h-4"></i> View Portfolio
                </button>
                <button onclick="refreshData()" class="p-3 glass-card rounded-neon hover:text-ai-primary">
                    <i data-lucide="refresh-cw" class="w-5 h-5"></i>
                </button>
            </div>
        </header>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-10">
            <div class="lg:col-span-2 glass-card p-8 rounded-neon">
                <div class="flex justify-between items-center mb-8">
                    <h3 class="text-xl font-bold flex items-center gap-2">
                        <i data-lucide="activity" class="text-ai-secondary"></i> Agent Accuracy vs Load
                    </h3>
                    <select class="bg-slate-800 border-none rounded-lg px-3 py-1 text-xs outline-none">
                        <option>Last 24 Hours</option>
                        <option>Real-time</option>
                    </select>
                </div>
                <div class="h-80">
                    <canvas id="agentAccuracyChart"></canvas>
                </div>
            </div>

<div class="glass-card rounded-neon overflow-hidden">
            <div class="p-8 border-b border-slate-800 flex justify-between items-center">
                <h3 class="text-xl font-bold italic">Hotel Inventory & Agent Handling</h3>
                <span class="px-4 py-1 bg-ai-secondary/20 text-ai-secondary text-xs rounded-full font-bold">Auto-Syncing</span>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead class="bg-slate-800/50 text-slate-400 text-xs uppercase">
                        <tr>
                            <th class="px-8 py-4">Room Type</th>
                            <th class="px-8 py-4">Occupancy</th>
                            <th class="px-8 py-4">Agent Assigned</th>
                            <th class="px-8 py-4">Revenue</th>
                            <th class="px-8 py-4">Action</th>
                        </tr>
                    </thead>
                    <tbody id="inventory-body" class="text-sm">
                        </tbody>
                </table>
            </div>
        </div>

<footer class="mt-12 text-center text-slate-600">
            <p>© 2026 Core Intelligence Layer. Developed by <a href="https://www.ayyamperumal.online/" target="_blank" class="text-ai-primary hover:underline">Ayyamperumal</a></p>
        </footer>
    </main>
</div>

function initializeUI() {
        lucide.createIcons();
        renderStats();
        renderInventory();
        renderLogs();
        initChart();
    }

function renderLogs() {
        const feed = document.getElementById('terminal-feed');
        feed.innerHTML = DASHBOARD_DATA.logs.map(log => `
            <div class="flex gap-3">
                <span class="text-slate-600 shrink-0">[${log.time}]</span>
                <span class="text-ai-secondary shrink-0">${log.user}:</span>
                <span class="text-slate-300 italic">${log.msg}</span>
                <span class="ml-auto text-[10px] ${log.status === 'SUCCESS' ? 'text-room-booked' : 'text-ai-primary'}">${log.status}</span>
            </div>
        `).join('');
    }

function initChart() {
        const ctx = document.getElementById('agentAccuracyChart').getContext('2d');
        const gradient = ctx.createLinearGradient(0, 0, 0, 400);
        gradient.addColorStop(0, 'rgba(139, 92, 246, 0.5)');
        gradient.addColorStop(1, 'rgba(139, 92, 246, 0)');

new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
                datasets: [{
                    label: 'Success Rate (%)',
                    data: [94, 98, 97, 99, 95, 98, 99],
                    borderColor: '#8B5CF6',
                    backgroundColor: gradient,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 6,
                    pointBackgroundColor: '#fff',
                    pointBorderColor: '#8B5CF6',
                    pointBorderWidth: 3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#64748b' } },
                    x: { grid: { display: false }, ticks: { color: '#64748b' } }
                }
            }
        });
    }

function refreshData() {
        const btn = document.querySelector('button i[data-lucide="refresh-cw"]');
        btn.classList.add('animate-spin');
        setTimeout(() => {
            btn.classList.remove('animate-spin');
            renderLogs();
        }, 800);
    }

document.addEventListener('DOMContentLoaded', initializeUI);
</script>
</body>
</html>

Related Examples

A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
Hero

Aman kumar

2 years ago

7.7k
My Personal Landing page
This HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.

AyDin VM

2 years ago

6.7k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.5k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
Services
explore our awesome Services

ابراهيم سيد

2 years ago

3.5k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Sahil Sasapara

2 years ago

5.6k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.2k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.7k
Hero Beer

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.5k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Hezron Okoko

2 years ago

3.6k