0da5b0e73d
Complete suite of HTML dashboards for AI tool usage and conversation reporting via webhook APIs. Includes main navigation dashboard, multiple conversation reports (Latam, SBII, Sidekick), and AI tools usage report with comprehensive analytics. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
151 lines
No EOL
5.3 KiB
HTML
151 lines
No EOL
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Reporting Dashboard</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Montserrat', sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
font-size: 28px;
|
|
}
|
|
.reports-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
}
|
|
.report-card {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.report-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
|
|
}
|
|
.card-header {
|
|
background-color: #4285f4;
|
|
color: white;
|
|
padding: 15px;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
}
|
|
.card-content {
|
|
padding: 15px;
|
|
color: #555;
|
|
font-size: 14px;
|
|
}
|
|
.card-footer {
|
|
padding: 15px;
|
|
text-align: center;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.btn {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
color: white;
|
|
background-color: #4285f4;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
.btn:hover {
|
|
background-color: #3367d6;
|
|
}
|
|
.description {
|
|
text-align: center;
|
|
max-width: 700px;
|
|
margin: 0 auto 30px auto;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
}
|
|
.ai-tools { background-color: #4285f4; }
|
|
.latam { background-color: #ea4335; }
|
|
.sbii { background-color: #34a853; }
|
|
.sidekick { background-color: #fbbc05; }
|
|
.conversations { background-color: #673ab7; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>AI Reporting Dashboard</h1>
|
|
|
|
<div class="description">
|
|
Welcome to the AI Reporting Dashboard. Select one of the reporting tools below to access detailed analytics and usage data for various AI services and platforms.
|
|
</div>
|
|
|
|
<div class="reports-grid">
|
|
<div class="report-card">
|
|
<div class="card-header ai-tools">SANDBOX AI Tools</div>
|
|
<div class="card-content">
|
|
Track usage of AI tools like Text-to-Voice and Text-to-Image services with comprehensive analytics by user, model, and sub-tool.
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="SANDBOX-ai-tools-report.html" class="btn">Open Report</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="report-card">
|
|
<div class="card-header latam">Latam Report</div>
|
|
<div class="card-content">
|
|
View analytics and data specifically for Latin American operations and AI tool usage across the region.
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="index-Latam.html" class="btn">Open Report</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="report-card">
|
|
<div class="card-header sbii">SBII Report</div>
|
|
<div class="card-content">
|
|
Access data and metrics for the SBII platform, including usage patterns and performance analytics.
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="index-SBII.html" class="btn">Open Report</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="report-card">
|
|
<div class="card-header sidekick">Sidekick Report</div>
|
|
<div class="card-content">
|
|
View data for Sidekick assistant usage, including conversation metrics and user engagement analysis.
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="index-sidekick.html" class="btn">Open Report</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="report-card">
|
|
<div class="card-header conversations">LLM Report</div>
|
|
<div class="card-content">
|
|
Detailed analytics on conversations LLM platforms, with user metrics and interaction data.
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="https://sb-llm-reporting:8890/" class="btn">Open Report</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |