Home
Ayyamperumal S
High-Performance Hotel Operations & AI Agent Testing Dashboard

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 CSS v3. 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

117

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

Donunt chart with chart.js and tailwind css

Author:
Kairi Greene

3 years ago

12.2k
Hero Section
Created a good and responsive web Hero Page

Author:
Ravi.Kumar Kumar

1 year ago

2.7k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

10 months ago

970
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

2 months ago

129
Hero

Author:
Aman kumar

2 years ago

7.2k
portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Author:
Lekhraj Ghimire

8 months ago

841
Profile Card

Author:
Mr Robot

3 years ago

11.8k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

11 months ago

1k
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

882
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.

Author:
AyDin VM

1 year ago

6.2k
quora/reddit
reddit / quora have some kind of same template. looksalikes. brothas

Author:
Katherine Glenn

1 year ago

1.8k
Pricing card with CTA

Author:
Laurits

3 years ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components