commit 0da5b0e73d3b70bb962b0c08014c162275dc3d4d
Author: DJP <DJP>
Date:   Mon Sep 15 10:41:07 2025 -0400

    Initial commit: AI Tool Usage Reporting Dashboard
    
    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>

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..f8c76bb
Binary files /dev/null and b/.DS_Store differ
diff --git a/Archive.zip b/Archive.zip
new file mode 100644
index 0000000..b8dc273
Binary files /dev/null and b/Archive.zip differ
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4f10053
--- /dev/null
+++ b/README.md
@@ -0,0 +1,147 @@
+# AI Tool Usage Reporting Dashboard
+
+A comprehensive suite of HTML dashboards for reporting on AI tool usage and conversation data via webhook APIs.
+
+Total cost: $6.36
+Total duration (API): 17m 17.1s
+Total duration (wall): 3h 40m 1.3s
+
+## Overview
+
+This repository contains several connected reporting tools:
+
+1. **Main Navigation Dashboard** (`main-index.html`): Central hub for accessing all reports
+2. **Conversation Reports**:
+   - **Latam Report** (`index-Latam.html`): Latin America conversation metrics
+   - **SBII Report** (`index-SBII.html`): SBII platform conversation metrics
+   - **Sidekick Report** (`index-sidekick.html`): Sidekick assistant conversation metrics
+3. **AI Tool Usage Report** (`SANDBOX-ai-tools-report.html`): Monitors usage of AI tools like Text-to-Voice and Text-to-Image services
+
+## Main Navigation Dashboard
+
+A clean, card-based interface for navigating between all available reports. Each report is represented by a color-coded card with a description of its purpose and a direct link to open it.
+
+## Conversation Reports
+
+### Features
+
+- **Simple Interface**: Clean, compact design using Montserrat font
+- **Data Selection**: Dropdown menu to select different conversation datasets
+- **Assistant Name Resolution**: 
+  - Automatically looks up friendly names for assistant IDs
+  - Displays both name and ID in reports for easy identification
+  - Handles multiple assistant databases for Latam report
+- **Pivot Table View**: 
+  - Groups data by Assistant
+  - Shows conversation count per user
+  - Includes subtotals per Assistant
+  - Displays grand total of all conversations
+- **Usage Graph**:
+  - Interactive line chart showing usage over time
+  - Filter data by time period (Today, 7 days, 30 days, 3 months, All time)
+  - Color-coded lines for different assistants
+  - Assistants labeled by name instead of ID for readability
+- **CSV Export**: 
+  - Export all raw data in CSV format
+  - Includes both assistant IDs and names in separate columns
+  - Timestamp included in filename for version tracking
+
+### How to Use Conversation Reports
+
+1. Open `main-index.html` in a web browser to access the navigation dashboard
+2. Select the desired report from the available options
+3. In each report, select the desired dataset from the dropdown (if applicable)
+4. Click "Send Request" to fetch the data
+5. View the usage graph showing trends over time, and use time filters to focus on specific periods
+6. Explore the detailed pivot table showing conversation metrics
+7. Use the "Export CSV" button to download the raw data as a CSV file
+
+## AI Tool Usage Report
+
+### Features
+
+- **Multi-view Dashboard**: Comprehensive analytics with multiple views
+- **Data Filtering**: Filter by date range, user, model and sub-tool
+- **Summary Cards**: Quick overview of usage metrics
+- **Multiple Pivot Tables**:
+  - By User: See which users are using which tools
+  - By Model: Track usage across different AI models
+  - By Sub-Tool: Analyze which sub-tools are most popular
+- **Detailed View**: See all usage entries with full details
+- **CSV Export**: Download full raw data as a CSV file
+
+### How to Use AI Tools Report
+
+1. Open the AI Tools Report from the main dashboard
+2. Select report type from dropdown (All Tools, Text-to-Voice, Text-to-Image)
+3. Click "Send Request" to fetch the data
+4. Use the filters to narrow down results by date, user, model or sub-tool
+5. Navigate between tabs to see different views of the data
+
+## Technical Details
+
+- **Pure HTML/CSS/JavaScript**: Uses native web technologies
+- **Chart.js Integration**: For interactive data visualization
+- **Multiple API Endpoints**: 
+  - Each report connects to appropriate data webhooks
+  - Assistant name lookup uses separate assistant database webhooks 
+- **Parallel API Calls**: Makes simultaneous requests to improve loading performance
+- **Authentication**: Includes secure auth_code token with each request
+- **Error Handling**: Gracefully handles API errors and displays user-friendly messages
+- **Responsive Design**: Works on desktop and tablet devices
+
+## Data Structures
+
+### Conversation Data
+
+```json
+[
+  {
+    "data": {
+      "User_ID": "example@domain.com",
+      "StartTime": "2024-10-21T21:29:47.470Z",
+      "Brand Voice Setting": "standard",
+      "Title": "Example Title",
+      "EndTime": "2024-10-21T21:29:57.203Z",
+      "Assistant_ID": "asst_identifier",
+      "Assistant_Key": "key_value",
+      "Conversation_ID": "conversation_id",
+      "Vision_Images": ""
+    }
+  }
+]
+```
+
+### Assistant Data
+
+```json
+[
+  {
+    "data": {
+      "Name": "Friendly Assistant Name",
+      "Assistant ID": "asst_identifier",
+      "Instructions": "Assistant instructions...",
+      "Model": "claude-3-sonnet-20240229"
+    }
+  }
+]
+```
+
+### AI Tool Usage Data
+
+```json
+[
+  {
+    "data": {
+      "Date": "2024-05-15T23:00:00.000Z",
+      "TOOL": "TEXT2VOICE",
+      "USER": "user@example.com",
+      "MODEL": "eleven_multilingual_v2",
+      "PROMPT": "Example prompt text",
+      "SUB_TOOL": "Elevenlabs",
+      "SETTINGS": "Voice settings",
+      "BOX_FILE_ID": "123456"
+    }
+  }
+]
+```
\ No newline at end of file
diff --git a/SANDBOX-ai-tools-report.html b/SANDBOX-ai-tools-report.html
new file mode 100644
index 0000000..05a7313
--- /dev/null
+++ b/SANDBOX-ai-tools-report.html
@@ -0,0 +1,1110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Tool Usage Report</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: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 22px;
+        }
+        .controls {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+            align-items: center;
+            justify-content: center;
+        }
+        select {
+            padding: 10px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 14px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #4285f4;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 14px;
+            font-weight: 500;
+        }
+        button:hover {
+            background-color: #3367d6;
+        }
+        .filters {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 15px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        .filter-group {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+        .filter-group label {
+            font-size: 12px;
+            font-weight: 600;
+            color: #555;
+        }
+        .loading {
+            text-align: center;
+            display: none;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 2s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .results {
+            margin-top: 15px;
+        }
+        .summary {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 15px;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .summary-card {
+            background-color: #f8f9fa;
+            padding: 10px 15px;
+            border-radius: 6px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            flex: 1;
+            min-width: 200px;
+        }
+        .summary-card h3 {
+            margin: 0 0 5px 0;
+            font-size: 14px;
+            color: #555;
+        }
+        .summary-card p {
+            margin: 0;
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+        th, td {
+            padding: 6px 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+            line-height: 1.3;
+        }
+        th {
+            background-color: #f8f9fa;
+            font-weight: 600;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .error {
+            color: red;
+            text-align: center;
+            margin-top: 20px;
+            font-weight: 500;
+        }
+        .tab-container {
+            margin-bottom: 15px;
+        }
+        .tabs {
+            display: flex;
+            gap: 2px;
+            border-bottom: 1px solid #ddd;
+            margin-bottom: 15px;
+        }
+        .tab {
+            padding: 8px 15px;
+            background-color: #f1f1f1;
+            border: 1px solid #ddd;
+            border-bottom: none;
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
+            cursor: pointer;
+            font-size: 13px;
+        }
+        .tab.active {
+            background-color: white;
+            border-bottom: 1px solid white;
+            margin-bottom: -1px;
+            font-weight: 600;
+        }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        .export-btn {
+            margin-top: 15px;
+            display: flex;
+            justify-content: flex-end;
+        }
+        .export-btn button {
+            padding: 6px 12px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .export-btn button:hover {
+            background-color: #45a049;
+        }
+        .export-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>AI Tool Usage Report</h1>
+        
+        <div class="controls">
+            <select id="optionSelect">
+                <option value="all-tools">All AI Tool Usage</option>
+                <option value="text2voice">Text-to-Voice Usage</option>
+                <option value="text2image">Text-to-Image Usage</option>
+            </select>
+            <button id="sendButton">Send Request</button>
+            <div id="exportContainer" class="export-btn" style="display: none;">
+                <button id="exportCsvButton">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>
+                    Export CSV
+                </button>
+            </div>
+        </div>
+        
+        <div class="filters">
+            <div class="filter-group">
+                <label for="dateFilter">Date Range</label>
+                <select id="dateFilter">
+                    <option value="all">All Time</option>
+                    <option value="today">Today</option>
+                    <option value="yesterday">Yesterday</option>
+                    <option value="7days">Last 7 Days</option>
+                    <option value="30days">Last 30 Days</option>
+                </select>
+            </div>
+            <div class="filter-group">
+                <label for="userFilter">User</label>
+                <select id="userFilter">
+                    <option value="all">All Users</option>
+                    <!-- Will be populated dynamically -->
+                </select>
+            </div>
+            <div class="filter-group">
+                <label for="modelFilter">Model</label>
+                <select id="modelFilter">
+                    <option value="all">All Models</option>
+                    <!-- Will be populated dynamically -->
+                </select>
+            </div>
+            <div class="filter-group">
+                <label for="subToolFilter">Sub-Tool</label>
+                <select id="subToolFilter">
+                    <option value="all">All Sub-Tools</option>
+                    <!-- Will be populated dynamically -->
+                </select>
+            </div>
+        </div>
+        
+        <div id="loading" class="loading">
+            <div class="loader"></div>
+            <p>Loading data, please wait...</p>
+        </div>
+        
+        <div id="error" class="error"></div>
+        
+        <div id="results" class="results">
+            <div class="tab-container">
+                <div class="tabs">
+                    <div class="tab active" data-tab="summary">Summary</div>
+                    <div class="tab" data-tab="byUser">By User</div>
+                    <div class="tab" data-tab="byModel">By Model</div>
+                    <div class="tab" data-tab="bySubTool">By Sub-Tool</div>
+                    <div class="tab" data-tab="details">Detailed View</div>
+                </div>
+                
+                <div id="tab-summary" class="tab-content active">
+                    <div class="summary">
+                        <!-- Summary cards will be dynamically inserted here -->
+                    </div>
+                </div>
+                
+                <div id="tab-byUser" class="tab-content">
+                    <!-- User pivot table will be dynamically inserted here -->
+                </div>
+                
+                <div id="tab-byModel" class="tab-content">
+                    <!-- Model pivot table will be dynamically inserted here -->
+                </div>
+                
+                <div id="tab-bySubTool" class="tab-content">
+                    <!-- Sub-tool pivot table will be dynamically inserted here -->
+                </div>
+                
+                <div id="tab-details" class="tab-content">
+                    <!-- Detailed table will be dynamically inserted here -->
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Global variable to store the data
+            let currentData = [];
+            
+            // Tab handling
+            const tabs = document.querySelectorAll('.tab');
+            tabs.forEach(tab => {
+                tab.addEventListener('click', () => {
+                    const tabName = tab.getAttribute('data-tab');
+                    
+                    // Update active tab
+                    tabs.forEach(t => t.classList.remove('active'));
+                    tab.classList.add('active');
+                    
+                    // Update active content
+                    document.querySelectorAll('.tab-content').forEach(content => {
+                        content.classList.remove('active');
+                    });
+                    document.getElementById(`tab-${tabName}`).classList.add('active');
+                });
+            });
+            
+            // CSV Export functionality
+            document.getElementById('exportCsvButton').addEventListener('click', () => {
+                exportToCSV(currentData);
+            });
+            
+            function exportToCSV(data) {
+                // Define columns for the CSV
+                const columns = [
+                    'Date', 'Tool', 'User', 'Model', 'Sub-Tool', 'Prompt', 
+                    'Settings', 'Box File ID', 'Negative Prompt'
+                ];
+                
+                // Create CSV header row
+                let csvContent = columns.join(',') + '\n';
+                
+                // Add data rows
+                data.forEach(item => {
+                    if (!item.data || Object.keys(item.data).length === 0) return;
+                    
+                    const d = item.data;
+                    const row = [
+                        d.Date ? `"${new Date(d.Date).toLocaleString()}"` : '',
+                        d.TOOL ? `"${d.TOOL}"` : '',
+                        d.USER ? `"${d.USER}"` : '',
+                        d.MODEL ? `"${d.MODEL}"` : '',
+                        d.SUB_TOOL ? `"${d.SUB_TOOL}"` : '',
+                        d.PROMPT ? `"${d.PROMPT.replace(/"/g, '""')}"` : '',
+                        d.SETTINGS ? `"${d.SETTINGS}"` : '',
+                        d.BOX_FILE_ID ? `"${d.BOX_FILE_ID}"` : '',
+                        d['PROMPT-NEGATIVE'] ? `"${d['PROMPT-NEGATIVE']}"` : ''
+                    ];
+                    
+                    csvContent += row.join(',') + '\n';
+                });
+                
+                // Create a download link
+                const encodedUri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
+                const link = document.createElement('a');
+                link.setAttribute('href', encodedUri);
+                link.setAttribute('download', `ai-tool-usage-${new Date().toISOString().split('T')[0]}.csv`);
+                document.body.appendChild(link);
+                
+                // Trigger download and remove link
+                link.click();
+                document.body.removeChild(link);
+            }
+            
+            // Send button handler
+            document.getElementById('sendButton').addEventListener('click', async () => {
+                const selectedOption = document.getElementById('optionSelect').value;
+                const loadingDiv = document.getElementById('loading');
+                const errorDiv = document.getElementById('error');
+                const resultsDiv = document.getElementById('results');
+                
+                // Clear previous results
+                errorDiv.textContent = '';
+                document.querySelectorAll('.tab-content').forEach(content => {
+                    while (content.firstChild && !content.firstChild.classList?.contains('tabs')) {
+                        content.removeChild(content.firstChild);
+                    }
+                });
+                loadingDiv.style.display = 'block';
+                
+                try {
+                    // Use the actual webhook URL
+                    const response = await fetch('https://hook.us1.make.celonis.com/ewnkda13g1b65s1h2on2clo8ql7vdkl0', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ 
+                            option: selectedOption,
+                            auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                        })
+                    });
+                    
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    
+                    // Sample data for testing - this would normally come from the response
+                    const sampleData = [
+                        {"data":{"Date":"2024-05-15T23:00:00.000Z","TOOL":"TXT2IMAGE","USER":"daveporter@oliver.agency","MODEL":"Stable Diffusio","PROMPT":"cat in a tree","SUB_TOOL":"NONE","BOX_FILE_ID":"231654654","PROMPT-NEGATIVE":"low res"}},
+                        {"data":{"Date":"2024-05-09T20:19:08.000Z","TOOL":"TEXT2VOICE","USER":"setup@oliver.agency","MODEL":"eleven_multilingual_v2","PROMPT":"hi im rachel","SUB_TOOL":"Elevenlabs"}},
+                        {"data":{}},
+                        {"data":{}},
+                        {"data":{"Date":"2024-05-15T23:00:00.000Z","TOOL":"TEXT2VOICE","USER":"setup2@oliver.agency","MODEL":"ELEVEN LABS","PROMPT":"hello Im dave","SUB_TOOL":"NONE","BOX_FILE_ID":"132323","PROMPT-NEGATIVE":"NONE"}},
+                        {"data":{"Date":"2024-05-09T20:34:34.000Z","TOOL":"TEXT2VOICE","USER":"setup@oliver.agency","MODEL":"eleven_multilingual_v2","PROMPT":"hi im devo","SUB_TOOL":"Elevenlabs"}},
+                        {"data":{"Date":"2024-05-10T18:58:43.267Z","TOOL":"TEXT2IMAGE","USER":"setupt2i@oliver.agency","MODEL":"SD","PROMPT":"cat in a basket SD","SETTINGS":"ANY IMAGE SIZE SETTINGS","SUB_TOOL":"SD"}}
+                    ];
+                    
+                    // Use the actual response data
+                    const data = await response.json();
+                    
+                    // Store the data globally for CSV export
+                    currentData = data;
+                    
+                    // Show export button
+                    document.getElementById('exportContainer').style.display = 'block';
+                    
+                    // Filter out empty data entries
+                    const validData = data.filter(item => item.data && Object.keys(item.data).length > 0);
+                    
+                    // Populate filter dropdowns
+                    populateFilterDropdowns(validData);
+                    
+                    // Apply initial filtering
+                    const filteredData = applyFilters(validData);
+                    
+                    // Process the data for each view
+                    processDataForAllViews(filteredData);
+                    
+                    // Show the first tab
+                    tabs[0].click();
+                    
+                    // Add filter change handlers
+                    document.querySelectorAll('.filter-group select').forEach(select => {
+                        select.addEventListener('change', () => {
+                            const filteredData = applyFilters(validData);
+                            processDataForAllViews(filteredData);
+                        });
+                    });
+                    
+                } catch (error) {
+                    errorDiv.textContent = `Error: ${error.message}`;
+                    console.error('Error:', error);
+                    document.getElementById('exportContainer').style.display = 'none';
+                } finally {
+                    loadingDiv.style.display = 'none';
+                }
+            });
+            
+            function populateFilterDropdowns(data) {
+                // Extract unique values for each filter
+                const users = new Set();
+                const models = new Set();
+                const subTools = new Set();
+                
+                data.forEach(item => {
+                    if (item.data.USER) users.add(item.data.USER);
+                    if (item.data.MODEL) models.add(item.data.MODEL);
+                    if (item.data.SUB_TOOL) subTools.add(item.data.SUB_TOOL);
+                });
+                
+                // Populate user filter
+                const userFilter = document.getElementById('userFilter');
+                userFilter.innerHTML = '<option value="all">All Users</option>';
+                Array.from(users).sort().forEach(user => {
+                    const option = document.createElement('option');
+                    option.value = user;
+                    option.textContent = user;
+                    userFilter.appendChild(option);
+                });
+                
+                // Populate model filter
+                const modelFilter = document.getElementById('modelFilter');
+                modelFilter.innerHTML = '<option value="all">All Models</option>';
+                Array.from(models).sort().forEach(model => {
+                    const option = document.createElement('option');
+                    option.value = model;
+                    option.textContent = model;
+                    modelFilter.appendChild(option);
+                });
+                
+                // Populate sub-tool filter
+                const subToolFilter = document.getElementById('subToolFilter');
+                subToolFilter.innerHTML = '<option value="all">All Sub-Tools</option>';
+                Array.from(subTools).sort().forEach(subTool => {
+                    const option = document.createElement('option');
+                    option.value = subTool;
+                    option.textContent = subTool;
+                    subToolFilter.appendChild(option);
+                });
+            }
+            
+            function applyFilters(data) {
+                const selectedOption = document.getElementById('optionSelect').value;
+                const dateFilter = document.getElementById('dateFilter').value;
+                const userFilter = document.getElementById('userFilter').value;
+                const modelFilter = document.getElementById('modelFilter').value;
+                const subToolFilter = document.getElementById('subToolFilter').value;
+                
+                let now = new Date();
+                let dateLimit = null;
+                
+                // Calculate date limits
+                if (dateFilter === 'today') {
+                    dateLimit = new Date(now.setHours(0, 0, 0, 0));
+                } else if (dateFilter === 'yesterday') {
+                    dateLimit = new Date(now);
+                    dateLimit.setDate(dateLimit.getDate() - 1);
+                    dateLimit.setHours(0, 0, 0, 0);
+                    
+                    const endOfYesterday = new Date(now);
+                    endOfYesterday.setDate(endOfYesterday.getDate() - 1);
+                    endOfYesterday.setHours(23, 59, 59, 999);
+                } else if (dateFilter === '7days') {
+                    dateLimit = new Date(now);
+                    dateLimit.setDate(dateLimit.getDate() - 7);
+                } else if (dateFilter === '30days') {
+                    dateLimit = new Date(now);
+                    dateLimit.setDate(dateLimit.getDate() - 30);
+                }
+                
+                return data.filter(item => {
+                    // Tool type filter
+                    if (selectedOption === 'text2voice' && item.data.TOOL !== 'TEXT2VOICE') {
+                        return false;
+                    }
+                    if (selectedOption === 'text2image' && 
+                        item.data.TOOL !== 'TEXT2IMAGE' && 
+                        item.data.TOOL !== 'TXT2IMAGE') {
+                        return false;
+                    }
+                    
+                    // Date filter
+                    if (dateLimit && item.data.Date) {
+                        const itemDate = new Date(item.data.Date);
+                        if (dateFilter === 'yesterday') {
+                            const endOfYesterday = new Date(dateLimit);
+                            endOfYesterday.setHours(23, 59, 59, 999);
+                            if (itemDate < dateLimit || itemDate > endOfYesterday) {
+                                return false;
+                            }
+                        } else if (itemDate < dateLimit) {
+                            return false;
+                        }
+                    }
+                    
+                    // User filter
+                    if (userFilter !== 'all' && item.data.USER !== userFilter) {
+                        return false;
+                    }
+                    
+                    // Model filter
+                    if (modelFilter !== 'all' && item.data.MODEL !== modelFilter) {
+                        return false;
+                    }
+                    
+                    // Sub-tool filter
+                    if (subToolFilter !== 'all' && item.data.SUB_TOOL !== subToolFilter) {
+                        return false;
+                    }
+                    
+                    return true;
+                });
+            }
+            
+            function processDataForAllViews(data) {
+                // Process for summary view
+                processSummaryView(data);
+                
+                // Process for user pivot
+                processUserPivot(data);
+                
+                // Process for model pivot
+                processModelPivot(data);
+                
+                // Process for sub-tool pivot
+                processSubToolPivot(data);
+                
+                // Process for details view
+                processDetailsView(data);
+            }
+            
+            function processSummaryView(data) {
+                const summaryDiv = document.querySelector('#tab-summary');
+                summaryDiv.innerHTML = '';
+                
+                const summaryContainer = document.createElement('div');
+                summaryContainer.className = 'summary';
+                
+                // Calculate summary metrics
+                const totalRequests = data.length;
+                
+                // Count by tool type
+                const toolCounts = data.reduce((acc, item) => {
+                    const tool = item.data.TOOL || 'Unknown';
+                    acc[tool] = (acc[tool] || 0) + 1;
+                    return acc;
+                }, {});
+                
+                // Count unique users
+                const uniqueUsers = new Set(data.map(item => item.data.USER)).size;
+                
+                // Create summary cards
+                const totalCard = createSummaryCard('Total Requests', totalRequests);
+                summaryContainer.appendChild(totalCard);
+                
+                for (const [tool, count] of Object.entries(toolCounts)) {
+                    const toolName = tool === 'TEXT2VOICE' ? 'Text-to-Voice' : 
+                                   (tool === 'TEXT2IMAGE' || tool === 'TXT2IMAGE') ? 'Text-to-Image' : tool;
+                    const card = createSummaryCard(toolName, count);
+                    summaryContainer.appendChild(card);
+                }
+                
+                const usersCard = createSummaryCard('Unique Users', uniqueUsers);
+                summaryContainer.appendChild(usersCard);
+                
+                summaryDiv.appendChild(summaryContainer);
+            }
+            
+            function createSummaryCard(title, value) {
+                const card = document.createElement('div');
+                card.className = 'summary-card';
+                
+                const heading = document.createElement('h3');
+                heading.textContent = title;
+                
+                const valueElement = document.createElement('p');
+                valueElement.textContent = value;
+                
+                card.appendChild(heading);
+                card.appendChild(valueElement);
+                
+                return card;
+            }
+            
+            function processUserPivot(data) {
+                const userPivotDiv = document.querySelector('#tab-byUser');
+                userPivotDiv.innerHTML = '';
+                
+                // Group by user
+                const userGroups = {};
+                
+                data.forEach(item => {
+                    const user = item.data.USER || 'Unknown';
+                    const tool = item.data.TOOL || 'Unknown';
+                    
+                    if (!userGroups[user]) {
+                        userGroups[user] = {
+                            tools: {},
+                            totalCount: 0
+                        };
+                    }
+                    
+                    if (!userGroups[user].tools[tool]) {
+                        userGroups[user].tools[tool] = 0;
+                    }
+                    
+                    userGroups[user].tools[tool]++;
+                    userGroups[user].totalCount++;
+                });
+                
+                // Create the table
+                const table = document.createElement('table');
+                const thead = document.createElement('thead');
+                const tbody = document.createElement('tbody');
+                
+                // Create header row
+                const headerRow = document.createElement('tr');
+                
+                const headers = ['User', 'Tool Type', 'Count'];
+                headers.forEach(headerText => {
+                    const header = document.createElement('th');
+                    header.textContent = headerText;
+                    headerRow.appendChild(header);
+                });
+                
+                thead.appendChild(headerRow);
+                table.appendChild(thead);
+                
+                // Create table body
+                let grandTotal = 0;
+                
+                for (const user in userGroups) {
+                    const userData = userGroups[user];
+                    let firstRow = true;
+                    
+                    for (const tool in userData.tools) {
+                        const row = document.createElement('tr');
+                        
+                        // User column (only show in first row of group)
+                        const userCell = document.createElement('td');
+                        userCell.textContent = firstRow ? user : '';
+                        if (firstRow) {
+                            userCell.style.fontWeight = 'bold';
+                        }
+                        row.appendChild(userCell);
+                        
+                        // Tool column
+                        const toolCell = document.createElement('td');
+                        toolCell.textContent = tool;
+                        row.appendChild(toolCell);
+                        
+                        // Count column
+                        const countCell = document.createElement('td');
+                        countCell.textContent = userData.tools[tool];
+                        row.appendChild(countCell);
+                        
+                        tbody.appendChild(row);
+                        firstRow = false;
+                    }
+                    
+                    // Add a total row for this user
+                    const totalRow = document.createElement('tr');
+                    
+                    const totalLabelCell = document.createElement('td');
+                    totalLabelCell.textContent = '';
+                    totalRow.appendChild(totalLabelCell);
+                    
+                    const totalToolCell = document.createElement('td');
+                    totalToolCell.textContent = 'Total';
+                    totalToolCell.style.fontWeight = 'bold';
+                    totalRow.appendChild(totalToolCell);
+                    
+                    const totalCountCell = document.createElement('td');
+                    totalCountCell.textContent = userData.totalCount;
+                    totalCountCell.style.fontWeight = 'bold';
+                    totalRow.appendChild(totalCountCell);
+                    
+                    tbody.appendChild(totalRow);
+                    
+                    // Add an empty row as a separator
+                    const spacerRow = document.createElement('tr');
+                    const spacerCell = document.createElement('td');
+                    spacerCell.setAttribute('colspan', '3');
+                    spacerCell.style.height = '4px';
+                    spacerRow.appendChild(spacerCell);
+                    tbody.appendChild(spacerRow);
+                    
+                    grandTotal += userData.totalCount;
+                }
+                
+                // Add grand total row
+                const grandTotalRow = document.createElement('tr');
+                
+                const grandTotalLabelCell = document.createElement('td');
+                grandTotalLabelCell.textContent = 'GRAND TOTAL';
+                grandTotalLabelCell.style.fontWeight = 'bold';
+                grandTotalLabelCell.style.fontSize = '14px';
+                grandTotalRow.appendChild(grandTotalLabelCell);
+                
+                const grandTotalBlankCell = document.createElement('td');
+                grandTotalRow.appendChild(grandTotalBlankCell);
+                
+                const grandTotalCountCell = document.createElement('td');
+                grandTotalCountCell.textContent = grandTotal;
+                grandTotalCountCell.style.fontWeight = 'bold';
+                grandTotalCountCell.style.fontSize = '14px';
+                grandTotalRow.appendChild(grandTotalCountCell);
+                
+                tbody.appendChild(grandTotalRow);
+                
+                table.appendChild(tbody);
+                userPivotDiv.appendChild(table);
+            }
+            
+            function processModelPivot(data) {
+                const modelPivotDiv = document.querySelector('#tab-byModel');
+                modelPivotDiv.innerHTML = '';
+                
+                // Group by model
+                const modelGroups = {};
+                
+                data.forEach(item => {
+                    const model = item.data.MODEL || 'Unknown';
+                    const tool = item.data.TOOL || 'Unknown';
+                    
+                    if (!modelGroups[model]) {
+                        modelGroups[model] = {
+                            tools: {},
+                            totalCount: 0
+                        };
+                    }
+                    
+                    if (!modelGroups[model].tools[tool]) {
+                        modelGroups[model].tools[tool] = 0;
+                    }
+                    
+                    modelGroups[model].tools[tool]++;
+                    modelGroups[model].totalCount++;
+                });
+                
+                // Create the table
+                const table = document.createElement('table');
+                const thead = document.createElement('thead');
+                const tbody = document.createElement('tbody');
+                
+                // Create header row
+                const headerRow = document.createElement('tr');
+                
+                const headers = ['Model', 'Tool Type', 'Count'];
+                headers.forEach(headerText => {
+                    const header = document.createElement('th');
+                    header.textContent = headerText;
+                    headerRow.appendChild(header);
+                });
+                
+                thead.appendChild(headerRow);
+                table.appendChild(thead);
+                
+                // Create table body
+                let grandTotal = 0;
+                
+                for (const model in modelGroups) {
+                    const modelData = modelGroups[model];
+                    let firstRow = true;
+                    
+                    for (const tool in modelData.tools) {
+                        const row = document.createElement('tr');
+                        
+                        // Model column (only show in first row of group)
+                        const modelCell = document.createElement('td');
+                        modelCell.textContent = firstRow ? model : '';
+                        if (firstRow) {
+                            modelCell.style.fontWeight = 'bold';
+                        }
+                        row.appendChild(modelCell);
+                        
+                        // Tool column
+                        const toolCell = document.createElement('td');
+                        toolCell.textContent = tool;
+                        row.appendChild(toolCell);
+                        
+                        // Count column
+                        const countCell = document.createElement('td');
+                        countCell.textContent = modelData.tools[tool];
+                        row.appendChild(countCell);
+                        
+                        tbody.appendChild(row);
+                        firstRow = false;
+                    }
+                    
+                    // Add a total row for this model
+                    const totalRow = document.createElement('tr');
+                    
+                    const totalLabelCell = document.createElement('td');
+                    totalLabelCell.textContent = '';
+                    totalRow.appendChild(totalLabelCell);
+                    
+                    const totalToolCell = document.createElement('td');
+                    totalToolCell.textContent = 'Total';
+                    totalToolCell.style.fontWeight = 'bold';
+                    totalRow.appendChild(totalToolCell);
+                    
+                    const totalCountCell = document.createElement('td');
+                    totalCountCell.textContent = modelData.totalCount;
+                    totalCountCell.style.fontWeight = 'bold';
+                    totalRow.appendChild(totalCountCell);
+                    
+                    tbody.appendChild(totalRow);
+                    
+                    // Add an empty row as a separator
+                    const spacerRow = document.createElement('tr');
+                    const spacerCell = document.createElement('td');
+                    spacerCell.setAttribute('colspan', '3');
+                    spacerCell.style.height = '4px';
+                    spacerRow.appendChild(spacerCell);
+                    tbody.appendChild(spacerRow);
+                    
+                    grandTotal += modelData.totalCount;
+                }
+                
+                // Add grand total row
+                const grandTotalRow = document.createElement('tr');
+                
+                const grandTotalLabelCell = document.createElement('td');
+                grandTotalLabelCell.textContent = 'GRAND TOTAL';
+                grandTotalLabelCell.style.fontWeight = 'bold';
+                grandTotalLabelCell.style.fontSize = '14px';
+                grandTotalRow.appendChild(grandTotalLabelCell);
+                
+                const grandTotalBlankCell = document.createElement('td');
+                grandTotalRow.appendChild(grandTotalBlankCell);
+                
+                const grandTotalCountCell = document.createElement('td');
+                grandTotalCountCell.textContent = grandTotal;
+                grandTotalCountCell.style.fontWeight = 'bold';
+                grandTotalCountCell.style.fontSize = '14px';
+                grandTotalRow.appendChild(grandTotalCountCell);
+                
+                tbody.appendChild(grandTotalRow);
+                
+                table.appendChild(tbody);
+                modelPivotDiv.appendChild(table);
+            }
+            
+            function processSubToolPivot(data) {
+                const subToolPivotDiv = document.querySelector('#tab-bySubTool');
+                subToolPivotDiv.innerHTML = '';
+                
+                // Group by sub-tool
+                const subToolGroups = {};
+                
+                data.forEach(item => {
+                    const subTool = item.data.SUB_TOOL || 'Unknown';
+                    const tool = item.data.TOOL || 'Unknown';
+                    
+                    if (!subToolGroups[subTool]) {
+                        subToolGroups[subTool] = {
+                            tools: {},
+                            totalCount: 0
+                        };
+                    }
+                    
+                    if (!subToolGroups[subTool].tools[tool]) {
+                        subToolGroups[subTool].tools[tool] = 0;
+                    }
+                    
+                    subToolGroups[subTool].tools[tool]++;
+                    subToolGroups[subTool].totalCount++;
+                });
+                
+                // Create the table
+                const table = document.createElement('table');
+                const thead = document.createElement('thead');
+                const tbody = document.createElement('tbody');
+                
+                // Create header row
+                const headerRow = document.createElement('tr');
+                
+                const headers = ['Sub-Tool', 'Tool Type', 'Count'];
+                headers.forEach(headerText => {
+                    const header = document.createElement('th');
+                    header.textContent = headerText;
+                    headerRow.appendChild(header);
+                });
+                
+                thead.appendChild(headerRow);
+                table.appendChild(thead);
+                
+                // Create table body
+                let grandTotal = 0;
+                
+                for (const subTool in subToolGroups) {
+                    const subToolData = subToolGroups[subTool];
+                    let firstRow = true;
+                    
+                    for (const tool in subToolData.tools) {
+                        const row = document.createElement('tr');
+                        
+                        // Sub-tool column (only show in first row of group)
+                        const subToolCell = document.createElement('td');
+                        subToolCell.textContent = firstRow ? subTool : '';
+                        if (firstRow) {
+                            subToolCell.style.fontWeight = 'bold';
+                        }
+                        row.appendChild(subToolCell);
+                        
+                        // Tool column
+                        const toolCell = document.createElement('td');
+                        toolCell.textContent = tool;
+                        row.appendChild(toolCell);
+                        
+                        // Count column
+                        const countCell = document.createElement('td');
+                        countCell.textContent = subToolData.tools[tool];
+                        row.appendChild(countCell);
+                        
+                        tbody.appendChild(row);
+                        firstRow = false;
+                    }
+                    
+                    // Add a total row for this sub-tool
+                    const totalRow = document.createElement('tr');
+                    
+                    const totalLabelCell = document.createElement('td');
+                    totalLabelCell.textContent = '';
+                    totalRow.appendChild(totalLabelCell);
+                    
+                    const totalToolCell = document.createElement('td');
+                    totalToolCell.textContent = 'Total';
+                    totalToolCell.style.fontWeight = 'bold';
+                    totalRow.appendChild(totalToolCell);
+                    
+                    const totalCountCell = document.createElement('td');
+                    totalCountCell.textContent = subToolData.totalCount;
+                    totalCountCell.style.fontWeight = 'bold';
+                    totalRow.appendChild(totalCountCell);
+                    
+                    tbody.appendChild(totalRow);
+                    
+                    // Add an empty row as a separator
+                    const spacerRow = document.createElement('tr');
+                    const spacerCell = document.createElement('td');
+                    spacerCell.setAttribute('colspan', '3');
+                    spacerCell.style.height = '4px';
+                    spacerRow.appendChild(spacerCell);
+                    tbody.appendChild(spacerRow);
+                    
+                    grandTotal += subToolData.totalCount;
+                }
+                
+                // Add grand total row
+                const grandTotalRow = document.createElement('tr');
+                
+                const grandTotalLabelCell = document.createElement('td');
+                grandTotalLabelCell.textContent = 'GRAND TOTAL';
+                grandTotalLabelCell.style.fontWeight = 'bold';
+                grandTotalLabelCell.style.fontSize = '14px';
+                grandTotalRow.appendChild(grandTotalLabelCell);
+                
+                const grandTotalBlankCell = document.createElement('td');
+                grandTotalRow.appendChild(grandTotalBlankCell);
+                
+                const grandTotalCountCell = document.createElement('td');
+                grandTotalCountCell.textContent = grandTotal;
+                grandTotalCountCell.style.fontWeight = 'bold';
+                grandTotalCountCell.style.fontSize = '14px';
+                grandTotalRow.appendChild(grandTotalCountCell);
+                
+                tbody.appendChild(grandTotalRow);
+                
+                table.appendChild(tbody);
+                subToolPivotDiv.appendChild(table);
+            }
+            
+            function processDetailsView(data) {
+                const detailsDiv = document.querySelector('#tab-details');
+                detailsDiv.innerHTML = '';
+                
+                // Create the table
+                const table = document.createElement('table');
+                const thead = document.createElement('thead');
+                const tbody = document.createElement('tbody');
+                
+                // Create header row
+                const headerRow = document.createElement('tr');
+                
+                const headers = ['Date', 'Tool', 'User', 'Model', 'Sub-Tool', 'Prompt'];
+                headers.forEach(headerText => {
+                    const header = document.createElement('th');
+                    header.textContent = headerText;
+                    headerRow.appendChild(header);
+                });
+                
+                thead.appendChild(headerRow);
+                table.appendChild(thead);
+                
+                // Sort data by date (newest first)
+                const sortedData = [...data].sort((a, b) => {
+                    const dateA = new Date(a.data.Date || 0);
+                    const dateB = new Date(b.data.Date || 0);
+                    return dateB - dateA;
+                });
+                
+                // Create table body
+                sortedData.forEach(item => {
+                    const row = document.createElement('tr');
+                    
+                    // Date column
+                    const dateCell = document.createElement('td');
+                    if (item.data.Date) {
+                        const date = new Date(item.data.Date);
+                        dateCell.textContent = date.toLocaleDateString() + ' ' + 
+                                            date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                    } else {
+                        dateCell.textContent = 'N/A';
+                    }
+                    row.appendChild(dateCell);
+                    
+                    // Tool column
+                    const toolCell = document.createElement('td');
+                    toolCell.textContent = item.data.TOOL || 'N/A';
+                    row.appendChild(toolCell);
+                    
+                    // User column
+                    const userCell = document.createElement('td');
+                    userCell.textContent = item.data.USER || 'N/A';
+                    row.appendChild(userCell);
+                    
+                    // Model column
+                    const modelCell = document.createElement('td');
+                    modelCell.textContent = item.data.MODEL || 'N/A';
+                    row.appendChild(modelCell);
+                    
+                    // Sub-tool column
+                    const subToolCell = document.createElement('td');
+                    subToolCell.textContent = item.data.SUB_TOOL || 'N/A';
+                    row.appendChild(subToolCell);
+                    
+                    // Prompt column
+                    const promptCell = document.createElement('td');
+                    promptCell.textContent = item.data.PROMPT || 'N/A';
+                    row.appendChild(promptCell);
+                    
+                    tbody.appendChild(row);
+                });
+                
+                table.appendChild(tbody);
+                detailsDiv.appendChild(table);
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Versions/.DS_Store b/Versions/.DS_Store
new file mode 100644
index 0000000..e145e88
Binary files /dev/null and b/Versions/.DS_Store differ
diff --git a/Versions/Archive.zip b/Versions/Archive.zip
new file mode 100644
index 0000000..8aded87
Binary files /dev/null and b/Versions/Archive.zip differ
diff --git a/Versions/V0.1/README.md b/Versions/V0.1/README.md
new file mode 100644
index 0000000..4f10053
--- /dev/null
+++ b/Versions/V0.1/README.md
@@ -0,0 +1,147 @@
+# AI Tool Usage Reporting Dashboard
+
+A comprehensive suite of HTML dashboards for reporting on AI tool usage and conversation data via webhook APIs.
+
+Total cost: $6.36
+Total duration (API): 17m 17.1s
+Total duration (wall): 3h 40m 1.3s
+
+## Overview
+
+This repository contains several connected reporting tools:
+
+1. **Main Navigation Dashboard** (`main-index.html`): Central hub for accessing all reports
+2. **Conversation Reports**:
+   - **Latam Report** (`index-Latam.html`): Latin America conversation metrics
+   - **SBII Report** (`index-SBII.html`): SBII platform conversation metrics
+   - **Sidekick Report** (`index-sidekick.html`): Sidekick assistant conversation metrics
+3. **AI Tool Usage Report** (`SANDBOX-ai-tools-report.html`): Monitors usage of AI tools like Text-to-Voice and Text-to-Image services
+
+## Main Navigation Dashboard
+
+A clean, card-based interface for navigating between all available reports. Each report is represented by a color-coded card with a description of its purpose and a direct link to open it.
+
+## Conversation Reports
+
+### Features
+
+- **Simple Interface**: Clean, compact design using Montserrat font
+- **Data Selection**: Dropdown menu to select different conversation datasets
+- **Assistant Name Resolution**: 
+  - Automatically looks up friendly names for assistant IDs
+  - Displays both name and ID in reports for easy identification
+  - Handles multiple assistant databases for Latam report
+- **Pivot Table View**: 
+  - Groups data by Assistant
+  - Shows conversation count per user
+  - Includes subtotals per Assistant
+  - Displays grand total of all conversations
+- **Usage Graph**:
+  - Interactive line chart showing usage over time
+  - Filter data by time period (Today, 7 days, 30 days, 3 months, All time)
+  - Color-coded lines for different assistants
+  - Assistants labeled by name instead of ID for readability
+- **CSV Export**: 
+  - Export all raw data in CSV format
+  - Includes both assistant IDs and names in separate columns
+  - Timestamp included in filename for version tracking
+
+### How to Use Conversation Reports
+
+1. Open `main-index.html` in a web browser to access the navigation dashboard
+2. Select the desired report from the available options
+3. In each report, select the desired dataset from the dropdown (if applicable)
+4. Click "Send Request" to fetch the data
+5. View the usage graph showing trends over time, and use time filters to focus on specific periods
+6. Explore the detailed pivot table showing conversation metrics
+7. Use the "Export CSV" button to download the raw data as a CSV file
+
+## AI Tool Usage Report
+
+### Features
+
+- **Multi-view Dashboard**: Comprehensive analytics with multiple views
+- **Data Filtering**: Filter by date range, user, model and sub-tool
+- **Summary Cards**: Quick overview of usage metrics
+- **Multiple Pivot Tables**:
+  - By User: See which users are using which tools
+  - By Model: Track usage across different AI models
+  - By Sub-Tool: Analyze which sub-tools are most popular
+- **Detailed View**: See all usage entries with full details
+- **CSV Export**: Download full raw data as a CSV file
+
+### How to Use AI Tools Report
+
+1. Open the AI Tools Report from the main dashboard
+2. Select report type from dropdown (All Tools, Text-to-Voice, Text-to-Image)
+3. Click "Send Request" to fetch the data
+4. Use the filters to narrow down results by date, user, model or sub-tool
+5. Navigate between tabs to see different views of the data
+
+## Technical Details
+
+- **Pure HTML/CSS/JavaScript**: Uses native web technologies
+- **Chart.js Integration**: For interactive data visualization
+- **Multiple API Endpoints**: 
+  - Each report connects to appropriate data webhooks
+  - Assistant name lookup uses separate assistant database webhooks 
+- **Parallel API Calls**: Makes simultaneous requests to improve loading performance
+- **Authentication**: Includes secure auth_code token with each request
+- **Error Handling**: Gracefully handles API errors and displays user-friendly messages
+- **Responsive Design**: Works on desktop and tablet devices
+
+## Data Structures
+
+### Conversation Data
+
+```json
+[
+  {
+    "data": {
+      "User_ID": "example@domain.com",
+      "StartTime": "2024-10-21T21:29:47.470Z",
+      "Brand Voice Setting": "standard",
+      "Title": "Example Title",
+      "EndTime": "2024-10-21T21:29:57.203Z",
+      "Assistant_ID": "asst_identifier",
+      "Assistant_Key": "key_value",
+      "Conversation_ID": "conversation_id",
+      "Vision_Images": ""
+    }
+  }
+]
+```
+
+### Assistant Data
+
+```json
+[
+  {
+    "data": {
+      "Name": "Friendly Assistant Name",
+      "Assistant ID": "asst_identifier",
+      "Instructions": "Assistant instructions...",
+      "Model": "claude-3-sonnet-20240229"
+    }
+  }
+]
+```
+
+### AI Tool Usage Data
+
+```json
+[
+  {
+    "data": {
+      "Date": "2024-05-15T23:00:00.000Z",
+      "TOOL": "TEXT2VOICE",
+      "USER": "user@example.com",
+      "MODEL": "eleven_multilingual_v2",
+      "PROMPT": "Example prompt text",
+      "SUB_TOOL": "Elevenlabs",
+      "SETTINGS": "Voice settings",
+      "BOX_FILE_ID": "123456"
+    }
+  }
+]
+```
\ No newline at end of file
diff --git a/Versions/V0.1/SANDBOX-ai-tools-report.html b/Versions/V0.1/SANDBOX-ai-tools-report.html
new file mode 100644
index 0000000..05a7313
--- /dev/null
+++ b/Versions/V0.1/SANDBOX-ai-tools-report.html
@@ -0,0 +1,1110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Tool Usage Report</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: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 22px;
+        }
+        .controls {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+            align-items: center;
+            justify-content: center;
+        }
+        select {
+            padding: 10px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 14px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #4285f4;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 14px;
+            font-weight: 500;
+        }
+        button:hover {
+            background-color: #3367d6;
+        }
+        .filters {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 15px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        .filter-group {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+        .filter-group label {
+            font-size: 12px;
+            font-weight: 600;
+            color: #555;
+        }
+        .loading {
+            text-align: center;
+            display: none;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 2s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .results {
+            margin-top: 15px;
+        }
+        .summary {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 15px;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .summary-card {
+            background-color: #f8f9fa;
+            padding: 10px 15px;
+            border-radius: 6px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            flex: 1;
+            min-width: 200px;
+        }
+        .summary-card h3 {
+            margin: 0 0 5px 0;
+            font-size: 14px;
+            color: #555;
+        }
+        .summary-card p {
+            margin: 0;
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+        th, td {
+            padding: 6px 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+            line-height: 1.3;
+        }
+        th {
+            background-color: #f8f9fa;
+            font-weight: 600;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .error {
+            color: red;
+            text-align: center;
+            margin-top: 20px;
+            font-weight: 500;
+        }
+        .tab-container {
+            margin-bottom: 15px;
+        }
+        .tabs {
+            display: flex;
+            gap: 2px;
+            border-bottom: 1px solid #ddd;
+            margin-bottom: 15px;
+        }
+        .tab {
+            padding: 8px 15px;
+            background-color: #f1f1f1;
+            border: 1px solid #ddd;
+            border-bottom: none;
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
+            cursor: pointer;
+            font-size: 13px;
+        }
+        .tab.active {
+            background-color: white;
+            border-bottom: 1px solid white;
+            margin-bottom: -1px;
+            font-weight: 600;
+        }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        .export-btn {
+            margin-top: 15px;
+            display: flex;
+            justify-content: flex-end;
+        }
+        .export-btn button {
+            padding: 6px 12px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .export-btn button:hover {
+            background-color: #45a049;
+        }
+        .export-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>AI Tool Usage Report</h1>
+        
+        <div class="controls">
+            <select id="optionSelect">
+                <option value="all-tools">All AI Tool Usage</option>
+                <option value="text2voice">Text-to-Voice Usage</option>
+                <option value="text2image">Text-to-Image Usage</option>
+            </select>
+            <button id="sendButton">Send Request</button>
+            <div id="exportContainer" class="export-btn" style="display: none;">
+                <button id="exportCsvButton">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>
+                    Export CSV
+                </button>
+            </div>
+        </div>
+        
+        <div class="filters">
+            <div class="filter-group">
+                <label for="dateFilter">Date Range</label>
+                <select id="dateFilter">
+                    <option value="all">All Time</option>
+                    <option value="today">Today</option>
+                    <option value="yesterday">Yesterday</option>
+                    <option value="7days">Last 7 Days</option>
+                    <option value="30days">Last 30 Days</option>
+                </select>
+            </div>
+            <div class="filter-group">
+                <label for="userFilter">User</label>
+                <select id="userFilter">
+                    <option value="all">All Users</option>
+                    <!-- Will be populated dynamically -->
+                </select>
+            </div>
+            <div class="filter-group">
+                <label for="modelFilter">Model</label>
+                <select id="modelFilter">
+                    <option value="all">All Models</option>
+                    <!-- Will be populated dynamically -->
+                </select>
+            </div>
+            <div class="filter-group">
+                <label for="subToolFilter">Sub-Tool</label>
+                <select id="subToolFilter">
+                    <option value="all">All Sub-Tools</option>
+                    <!-- Will be populated dynamically -->
+                </select>
+            </div>
+        </div>
+        
+        <div id="loading" class="loading">
+            <div class="loader"></div>
+            <p>Loading data, please wait...</p>
+        </div>
+        
+        <div id="error" class="error"></div>
+        
+        <div id="results" class="results">
+            <div class="tab-container">
+                <div class="tabs">
+                    <div class="tab active" data-tab="summary">Summary</div>
+                    <div class="tab" data-tab="byUser">By User</div>
+                    <div class="tab" data-tab="byModel">By Model</div>
+                    <div class="tab" data-tab="bySubTool">By Sub-Tool</div>
+                    <div class="tab" data-tab="details">Detailed View</div>
+                </div>
+                
+                <div id="tab-summary" class="tab-content active">
+                    <div class="summary">
+                        <!-- Summary cards will be dynamically inserted here -->
+                    </div>
+                </div>
+                
+                <div id="tab-byUser" class="tab-content">
+                    <!-- User pivot table will be dynamically inserted here -->
+                </div>
+                
+                <div id="tab-byModel" class="tab-content">
+                    <!-- Model pivot table will be dynamically inserted here -->
+                </div>
+                
+                <div id="tab-bySubTool" class="tab-content">
+                    <!-- Sub-tool pivot table will be dynamically inserted here -->
+                </div>
+                
+                <div id="tab-details" class="tab-content">
+                    <!-- Detailed table will be dynamically inserted here -->
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Global variable to store the data
+            let currentData = [];
+            
+            // Tab handling
+            const tabs = document.querySelectorAll('.tab');
+            tabs.forEach(tab => {
+                tab.addEventListener('click', () => {
+                    const tabName = tab.getAttribute('data-tab');
+                    
+                    // Update active tab
+                    tabs.forEach(t => t.classList.remove('active'));
+                    tab.classList.add('active');
+                    
+                    // Update active content
+                    document.querySelectorAll('.tab-content').forEach(content => {
+                        content.classList.remove('active');
+                    });
+                    document.getElementById(`tab-${tabName}`).classList.add('active');
+                });
+            });
+            
+            // CSV Export functionality
+            document.getElementById('exportCsvButton').addEventListener('click', () => {
+                exportToCSV(currentData);
+            });
+            
+            function exportToCSV(data) {
+                // Define columns for the CSV
+                const columns = [
+                    'Date', 'Tool', 'User', 'Model', 'Sub-Tool', 'Prompt', 
+                    'Settings', 'Box File ID', 'Negative Prompt'
+                ];
+                
+                // Create CSV header row
+                let csvContent = columns.join(',') + '\n';
+                
+                // Add data rows
+                data.forEach(item => {
+                    if (!item.data || Object.keys(item.data).length === 0) return;
+                    
+                    const d = item.data;
+                    const row = [
+                        d.Date ? `"${new Date(d.Date).toLocaleString()}"` : '',
+                        d.TOOL ? `"${d.TOOL}"` : '',
+                        d.USER ? `"${d.USER}"` : '',
+                        d.MODEL ? `"${d.MODEL}"` : '',
+                        d.SUB_TOOL ? `"${d.SUB_TOOL}"` : '',
+                        d.PROMPT ? `"${d.PROMPT.replace(/"/g, '""')}"` : '',
+                        d.SETTINGS ? `"${d.SETTINGS}"` : '',
+                        d.BOX_FILE_ID ? `"${d.BOX_FILE_ID}"` : '',
+                        d['PROMPT-NEGATIVE'] ? `"${d['PROMPT-NEGATIVE']}"` : ''
+                    ];
+                    
+                    csvContent += row.join(',') + '\n';
+                });
+                
+                // Create a download link
+                const encodedUri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
+                const link = document.createElement('a');
+                link.setAttribute('href', encodedUri);
+                link.setAttribute('download', `ai-tool-usage-${new Date().toISOString().split('T')[0]}.csv`);
+                document.body.appendChild(link);
+                
+                // Trigger download and remove link
+                link.click();
+                document.body.removeChild(link);
+            }
+            
+            // Send button handler
+            document.getElementById('sendButton').addEventListener('click', async () => {
+                const selectedOption = document.getElementById('optionSelect').value;
+                const loadingDiv = document.getElementById('loading');
+                const errorDiv = document.getElementById('error');
+                const resultsDiv = document.getElementById('results');
+                
+                // Clear previous results
+                errorDiv.textContent = '';
+                document.querySelectorAll('.tab-content').forEach(content => {
+                    while (content.firstChild && !content.firstChild.classList?.contains('tabs')) {
+                        content.removeChild(content.firstChild);
+                    }
+                });
+                loadingDiv.style.display = 'block';
+                
+                try {
+                    // Use the actual webhook URL
+                    const response = await fetch('https://hook.us1.make.celonis.com/ewnkda13g1b65s1h2on2clo8ql7vdkl0', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ 
+                            option: selectedOption,
+                            auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                        })
+                    });
+                    
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    
+                    // Sample data for testing - this would normally come from the response
+                    const sampleData = [
+                        {"data":{"Date":"2024-05-15T23:00:00.000Z","TOOL":"TXT2IMAGE","USER":"daveporter@oliver.agency","MODEL":"Stable Diffusio","PROMPT":"cat in a tree","SUB_TOOL":"NONE","BOX_FILE_ID":"231654654","PROMPT-NEGATIVE":"low res"}},
+                        {"data":{"Date":"2024-05-09T20:19:08.000Z","TOOL":"TEXT2VOICE","USER":"setup@oliver.agency","MODEL":"eleven_multilingual_v2","PROMPT":"hi im rachel","SUB_TOOL":"Elevenlabs"}},
+                        {"data":{}},
+                        {"data":{}},
+                        {"data":{"Date":"2024-05-15T23:00:00.000Z","TOOL":"TEXT2VOICE","USER":"setup2@oliver.agency","MODEL":"ELEVEN LABS","PROMPT":"hello Im dave","SUB_TOOL":"NONE","BOX_FILE_ID":"132323","PROMPT-NEGATIVE":"NONE"}},
+                        {"data":{"Date":"2024-05-09T20:34:34.000Z","TOOL":"TEXT2VOICE","USER":"setup@oliver.agency","MODEL":"eleven_multilingual_v2","PROMPT":"hi im devo","SUB_TOOL":"Elevenlabs"}},
+                        {"data":{"Date":"2024-05-10T18:58:43.267Z","TOOL":"TEXT2IMAGE","USER":"setupt2i@oliver.agency","MODEL":"SD","PROMPT":"cat in a basket SD","SETTINGS":"ANY IMAGE SIZE SETTINGS","SUB_TOOL":"SD"}}
+                    ];
+                    
+                    // Use the actual response data
+                    const data = await response.json();
+                    
+                    // Store the data globally for CSV export
+                    currentData = data;
+                    
+                    // Show export button
+                    document.getElementById('exportContainer').style.display = 'block';
+                    
+                    // Filter out empty data entries
+                    const validData = data.filter(item => item.data && Object.keys(item.data).length > 0);
+                    
+                    // Populate filter dropdowns
+                    populateFilterDropdowns(validData);
+                    
+                    // Apply initial filtering
+                    const filteredData = applyFilters(validData);
+                    
+                    // Process the data for each view
+                    processDataForAllViews(filteredData);
+                    
+                    // Show the first tab
+                    tabs[0].click();
+                    
+                    // Add filter change handlers
+                    document.querySelectorAll('.filter-group select').forEach(select => {
+                        select.addEventListener('change', () => {
+                            const filteredData = applyFilters(validData);
+                            processDataForAllViews(filteredData);
+                        });
+                    });
+                    
+                } catch (error) {
+                    errorDiv.textContent = `Error: ${error.message}`;
+                    console.error('Error:', error);
+                    document.getElementById('exportContainer').style.display = 'none';
+                } finally {
+                    loadingDiv.style.display = 'none';
+                }
+            });
+            
+            function populateFilterDropdowns(data) {
+                // Extract unique values for each filter
+                const users = new Set();
+                const models = new Set();
+                const subTools = new Set();
+                
+                data.forEach(item => {
+                    if (item.data.USER) users.add(item.data.USER);
+                    if (item.data.MODEL) models.add(item.data.MODEL);
+                    if (item.data.SUB_TOOL) subTools.add(item.data.SUB_TOOL);
+                });
+                
+                // Populate user filter
+                const userFilter = document.getElementById('userFilter');
+                userFilter.innerHTML = '<option value="all">All Users</option>';
+                Array.from(users).sort().forEach(user => {
+                    const option = document.createElement('option');
+                    option.value = user;
+                    option.textContent = user;
+                    userFilter.appendChild(option);
+                });
+                
+                // Populate model filter
+                const modelFilter = document.getElementById('modelFilter');
+                modelFilter.innerHTML = '<option value="all">All Models</option>';
+                Array.from(models).sort().forEach(model => {
+                    const option = document.createElement('option');
+                    option.value = model;
+                    option.textContent = model;
+                    modelFilter.appendChild(option);
+                });
+                
+                // Populate sub-tool filter
+                const subToolFilter = document.getElementById('subToolFilter');
+                subToolFilter.innerHTML = '<option value="all">All Sub-Tools</option>';
+                Array.from(subTools).sort().forEach(subTool => {
+                    const option = document.createElement('option');
+                    option.value = subTool;
+                    option.textContent = subTool;
+                    subToolFilter.appendChild(option);
+                });
+            }
+            
+            function applyFilters(data) {
+                const selectedOption = document.getElementById('optionSelect').value;
+                const dateFilter = document.getElementById('dateFilter').value;
+                const userFilter = document.getElementById('userFilter').value;
+                const modelFilter = document.getElementById('modelFilter').value;
+                const subToolFilter = document.getElementById('subToolFilter').value;
+                
+                let now = new Date();
+                let dateLimit = null;
+                
+                // Calculate date limits
+                if (dateFilter === 'today') {
+                    dateLimit = new Date(now.setHours(0, 0, 0, 0));
+                } else if (dateFilter === 'yesterday') {
+                    dateLimit = new Date(now);
+                    dateLimit.setDate(dateLimit.getDate() - 1);
+                    dateLimit.setHours(0, 0, 0, 0);
+                    
+                    const endOfYesterday = new Date(now);
+                    endOfYesterday.setDate(endOfYesterday.getDate() - 1);
+                    endOfYesterday.setHours(23, 59, 59, 999);
+                } else if (dateFilter === '7days') {
+                    dateLimit = new Date(now);
+                    dateLimit.setDate(dateLimit.getDate() - 7);
+                } else if (dateFilter === '30days') {
+                    dateLimit = new Date(now);
+                    dateLimit.setDate(dateLimit.getDate() - 30);
+                }
+                
+                return data.filter(item => {
+                    // Tool type filter
+                    if (selectedOption === 'text2voice' && item.data.TOOL !== 'TEXT2VOICE') {
+                        return false;
+                    }
+                    if (selectedOption === 'text2image' && 
+                        item.data.TOOL !== 'TEXT2IMAGE' && 
+                        item.data.TOOL !== 'TXT2IMAGE') {
+                        return false;
+                    }
+                    
+                    // Date filter
+                    if (dateLimit && item.data.Date) {
+                        const itemDate = new Date(item.data.Date);
+                        if (dateFilter === 'yesterday') {
+                            const endOfYesterday = new Date(dateLimit);
+                            endOfYesterday.setHours(23, 59, 59, 999);
+                            if (itemDate < dateLimit || itemDate > endOfYesterday) {
+                                return false;
+                            }
+                        } else if (itemDate < dateLimit) {
+                            return false;
+                        }
+                    }
+                    
+                    // User filter
+                    if (userFilter !== 'all' && item.data.USER !== userFilter) {
+                        return false;
+                    }
+                    
+                    // Model filter
+                    if (modelFilter !== 'all' && item.data.MODEL !== modelFilter) {
+                        return false;
+                    }
+                    
+                    // Sub-tool filter
+                    if (subToolFilter !== 'all' && item.data.SUB_TOOL !== subToolFilter) {
+                        return false;
+                    }
+                    
+                    return true;
+                });
+            }
+            
+            function processDataForAllViews(data) {
+                // Process for summary view
+                processSummaryView(data);
+                
+                // Process for user pivot
+                processUserPivot(data);
+                
+                // Process for model pivot
+                processModelPivot(data);
+                
+                // Process for sub-tool pivot
+                processSubToolPivot(data);
+                
+                // Process for details view
+                processDetailsView(data);
+            }
+            
+            function processSummaryView(data) {
+                const summaryDiv = document.querySelector('#tab-summary');
+                summaryDiv.innerHTML = '';
+                
+                const summaryContainer = document.createElement('div');
+                summaryContainer.className = 'summary';
+                
+                // Calculate summary metrics
+                const totalRequests = data.length;
+                
+                // Count by tool type
+                const toolCounts = data.reduce((acc, item) => {
+                    const tool = item.data.TOOL || 'Unknown';
+                    acc[tool] = (acc[tool] || 0) + 1;
+                    return acc;
+                }, {});
+                
+                // Count unique users
+                const uniqueUsers = new Set(data.map(item => item.data.USER)).size;
+                
+                // Create summary cards
+                const totalCard = createSummaryCard('Total Requests', totalRequests);
+                summaryContainer.appendChild(totalCard);
+                
+                for (const [tool, count] of Object.entries(toolCounts)) {
+                    const toolName = tool === 'TEXT2VOICE' ? 'Text-to-Voice' : 
+                                   (tool === 'TEXT2IMAGE' || tool === 'TXT2IMAGE') ? 'Text-to-Image' : tool;
+                    const card = createSummaryCard(toolName, count);
+                    summaryContainer.appendChild(card);
+                }
+                
+                const usersCard = createSummaryCard('Unique Users', uniqueUsers);
+                summaryContainer.appendChild(usersCard);
+                
+                summaryDiv.appendChild(summaryContainer);
+            }
+            
+            function createSummaryCard(title, value) {
+                const card = document.createElement('div');
+                card.className = 'summary-card';
+                
+                const heading = document.createElement('h3');
+                heading.textContent = title;
+                
+                const valueElement = document.createElement('p');
+                valueElement.textContent = value;
+                
+                card.appendChild(heading);
+                card.appendChild(valueElement);
+                
+                return card;
+            }
+            
+            function processUserPivot(data) {
+                const userPivotDiv = document.querySelector('#tab-byUser');
+                userPivotDiv.innerHTML = '';
+                
+                // Group by user
+                const userGroups = {};
+                
+                data.forEach(item => {
+                    const user = item.data.USER || 'Unknown';
+                    const tool = item.data.TOOL || 'Unknown';
+                    
+                    if (!userGroups[user]) {
+                        userGroups[user] = {
+                            tools: {},
+                            totalCount: 0
+                        };
+                    }
+                    
+                    if (!userGroups[user].tools[tool]) {
+                        userGroups[user].tools[tool] = 0;
+                    }
+                    
+                    userGroups[user].tools[tool]++;
+                    userGroups[user].totalCount++;
+                });
+                
+                // Create the table
+                const table = document.createElement('table');
+                const thead = document.createElement('thead');
+                const tbody = document.createElement('tbody');
+                
+                // Create header row
+                const headerRow = document.createElement('tr');
+                
+                const headers = ['User', 'Tool Type', 'Count'];
+                headers.forEach(headerText => {
+                    const header = document.createElement('th');
+                    header.textContent = headerText;
+                    headerRow.appendChild(header);
+                });
+                
+                thead.appendChild(headerRow);
+                table.appendChild(thead);
+                
+                // Create table body
+                let grandTotal = 0;
+                
+                for (const user in userGroups) {
+                    const userData = userGroups[user];
+                    let firstRow = true;
+                    
+                    for (const tool in userData.tools) {
+                        const row = document.createElement('tr');
+                        
+                        // User column (only show in first row of group)
+                        const userCell = document.createElement('td');
+                        userCell.textContent = firstRow ? user : '';
+                        if (firstRow) {
+                            userCell.style.fontWeight = 'bold';
+                        }
+                        row.appendChild(userCell);
+                        
+                        // Tool column
+                        const toolCell = document.createElement('td');
+                        toolCell.textContent = tool;
+                        row.appendChild(toolCell);
+                        
+                        // Count column
+                        const countCell = document.createElement('td');
+                        countCell.textContent = userData.tools[tool];
+                        row.appendChild(countCell);
+                        
+                        tbody.appendChild(row);
+                        firstRow = false;
+                    }
+                    
+                    // Add a total row for this user
+                    const totalRow = document.createElement('tr');
+                    
+                    const totalLabelCell = document.createElement('td');
+                    totalLabelCell.textContent = '';
+                    totalRow.appendChild(totalLabelCell);
+                    
+                    const totalToolCell = document.createElement('td');
+                    totalToolCell.textContent = 'Total';
+                    totalToolCell.style.fontWeight = 'bold';
+                    totalRow.appendChild(totalToolCell);
+                    
+                    const totalCountCell = document.createElement('td');
+                    totalCountCell.textContent = userData.totalCount;
+                    totalCountCell.style.fontWeight = 'bold';
+                    totalRow.appendChild(totalCountCell);
+                    
+                    tbody.appendChild(totalRow);
+                    
+                    // Add an empty row as a separator
+                    const spacerRow = document.createElement('tr');
+                    const spacerCell = document.createElement('td');
+                    spacerCell.setAttribute('colspan', '3');
+                    spacerCell.style.height = '4px';
+                    spacerRow.appendChild(spacerCell);
+                    tbody.appendChild(spacerRow);
+                    
+                    grandTotal += userData.totalCount;
+                }
+                
+                // Add grand total row
+                const grandTotalRow = document.createElement('tr');
+                
+                const grandTotalLabelCell = document.createElement('td');
+                grandTotalLabelCell.textContent = 'GRAND TOTAL';
+                grandTotalLabelCell.style.fontWeight = 'bold';
+                grandTotalLabelCell.style.fontSize = '14px';
+                grandTotalRow.appendChild(grandTotalLabelCell);
+                
+                const grandTotalBlankCell = document.createElement('td');
+                grandTotalRow.appendChild(grandTotalBlankCell);
+                
+                const grandTotalCountCell = document.createElement('td');
+                grandTotalCountCell.textContent = grandTotal;
+                grandTotalCountCell.style.fontWeight = 'bold';
+                grandTotalCountCell.style.fontSize = '14px';
+                grandTotalRow.appendChild(grandTotalCountCell);
+                
+                tbody.appendChild(grandTotalRow);
+                
+                table.appendChild(tbody);
+                userPivotDiv.appendChild(table);
+            }
+            
+            function processModelPivot(data) {
+                const modelPivotDiv = document.querySelector('#tab-byModel');
+                modelPivotDiv.innerHTML = '';
+                
+                // Group by model
+                const modelGroups = {};
+                
+                data.forEach(item => {
+                    const model = item.data.MODEL || 'Unknown';
+                    const tool = item.data.TOOL || 'Unknown';
+                    
+                    if (!modelGroups[model]) {
+                        modelGroups[model] = {
+                            tools: {},
+                            totalCount: 0
+                        };
+                    }
+                    
+                    if (!modelGroups[model].tools[tool]) {
+                        modelGroups[model].tools[tool] = 0;
+                    }
+                    
+                    modelGroups[model].tools[tool]++;
+                    modelGroups[model].totalCount++;
+                });
+                
+                // Create the table
+                const table = document.createElement('table');
+                const thead = document.createElement('thead');
+                const tbody = document.createElement('tbody');
+                
+                // Create header row
+                const headerRow = document.createElement('tr');
+                
+                const headers = ['Model', 'Tool Type', 'Count'];
+                headers.forEach(headerText => {
+                    const header = document.createElement('th');
+                    header.textContent = headerText;
+                    headerRow.appendChild(header);
+                });
+                
+                thead.appendChild(headerRow);
+                table.appendChild(thead);
+                
+                // Create table body
+                let grandTotal = 0;
+                
+                for (const model in modelGroups) {
+                    const modelData = modelGroups[model];
+                    let firstRow = true;
+                    
+                    for (const tool in modelData.tools) {
+                        const row = document.createElement('tr');
+                        
+                        // Model column (only show in first row of group)
+                        const modelCell = document.createElement('td');
+                        modelCell.textContent = firstRow ? model : '';
+                        if (firstRow) {
+                            modelCell.style.fontWeight = 'bold';
+                        }
+                        row.appendChild(modelCell);
+                        
+                        // Tool column
+                        const toolCell = document.createElement('td');
+                        toolCell.textContent = tool;
+                        row.appendChild(toolCell);
+                        
+                        // Count column
+                        const countCell = document.createElement('td');
+                        countCell.textContent = modelData.tools[tool];
+                        row.appendChild(countCell);
+                        
+                        tbody.appendChild(row);
+                        firstRow = false;
+                    }
+                    
+                    // Add a total row for this model
+                    const totalRow = document.createElement('tr');
+                    
+                    const totalLabelCell = document.createElement('td');
+                    totalLabelCell.textContent = '';
+                    totalRow.appendChild(totalLabelCell);
+                    
+                    const totalToolCell = document.createElement('td');
+                    totalToolCell.textContent = 'Total';
+                    totalToolCell.style.fontWeight = 'bold';
+                    totalRow.appendChild(totalToolCell);
+                    
+                    const totalCountCell = document.createElement('td');
+                    totalCountCell.textContent = modelData.totalCount;
+                    totalCountCell.style.fontWeight = 'bold';
+                    totalRow.appendChild(totalCountCell);
+                    
+                    tbody.appendChild(totalRow);
+                    
+                    // Add an empty row as a separator
+                    const spacerRow = document.createElement('tr');
+                    const spacerCell = document.createElement('td');
+                    spacerCell.setAttribute('colspan', '3');
+                    spacerCell.style.height = '4px';
+                    spacerRow.appendChild(spacerCell);
+                    tbody.appendChild(spacerRow);
+                    
+                    grandTotal += modelData.totalCount;
+                }
+                
+                // Add grand total row
+                const grandTotalRow = document.createElement('tr');
+                
+                const grandTotalLabelCell = document.createElement('td');
+                grandTotalLabelCell.textContent = 'GRAND TOTAL';
+                grandTotalLabelCell.style.fontWeight = 'bold';
+                grandTotalLabelCell.style.fontSize = '14px';
+                grandTotalRow.appendChild(grandTotalLabelCell);
+                
+                const grandTotalBlankCell = document.createElement('td');
+                grandTotalRow.appendChild(grandTotalBlankCell);
+                
+                const grandTotalCountCell = document.createElement('td');
+                grandTotalCountCell.textContent = grandTotal;
+                grandTotalCountCell.style.fontWeight = 'bold';
+                grandTotalCountCell.style.fontSize = '14px';
+                grandTotalRow.appendChild(grandTotalCountCell);
+                
+                tbody.appendChild(grandTotalRow);
+                
+                table.appendChild(tbody);
+                modelPivotDiv.appendChild(table);
+            }
+            
+            function processSubToolPivot(data) {
+                const subToolPivotDiv = document.querySelector('#tab-bySubTool');
+                subToolPivotDiv.innerHTML = '';
+                
+                // Group by sub-tool
+                const subToolGroups = {};
+                
+                data.forEach(item => {
+                    const subTool = item.data.SUB_TOOL || 'Unknown';
+                    const tool = item.data.TOOL || 'Unknown';
+                    
+                    if (!subToolGroups[subTool]) {
+                        subToolGroups[subTool] = {
+                            tools: {},
+                            totalCount: 0
+                        };
+                    }
+                    
+                    if (!subToolGroups[subTool].tools[tool]) {
+                        subToolGroups[subTool].tools[tool] = 0;
+                    }
+                    
+                    subToolGroups[subTool].tools[tool]++;
+                    subToolGroups[subTool].totalCount++;
+                });
+                
+                // Create the table
+                const table = document.createElement('table');
+                const thead = document.createElement('thead');
+                const tbody = document.createElement('tbody');
+                
+                // Create header row
+                const headerRow = document.createElement('tr');
+                
+                const headers = ['Sub-Tool', 'Tool Type', 'Count'];
+                headers.forEach(headerText => {
+                    const header = document.createElement('th');
+                    header.textContent = headerText;
+                    headerRow.appendChild(header);
+                });
+                
+                thead.appendChild(headerRow);
+                table.appendChild(thead);
+                
+                // Create table body
+                let grandTotal = 0;
+                
+                for (const subTool in subToolGroups) {
+                    const subToolData = subToolGroups[subTool];
+                    let firstRow = true;
+                    
+                    for (const tool in subToolData.tools) {
+                        const row = document.createElement('tr');
+                        
+                        // Sub-tool column (only show in first row of group)
+                        const subToolCell = document.createElement('td');
+                        subToolCell.textContent = firstRow ? subTool : '';
+                        if (firstRow) {
+                            subToolCell.style.fontWeight = 'bold';
+                        }
+                        row.appendChild(subToolCell);
+                        
+                        // Tool column
+                        const toolCell = document.createElement('td');
+                        toolCell.textContent = tool;
+                        row.appendChild(toolCell);
+                        
+                        // Count column
+                        const countCell = document.createElement('td');
+                        countCell.textContent = subToolData.tools[tool];
+                        row.appendChild(countCell);
+                        
+                        tbody.appendChild(row);
+                        firstRow = false;
+                    }
+                    
+                    // Add a total row for this sub-tool
+                    const totalRow = document.createElement('tr');
+                    
+                    const totalLabelCell = document.createElement('td');
+                    totalLabelCell.textContent = '';
+                    totalRow.appendChild(totalLabelCell);
+                    
+                    const totalToolCell = document.createElement('td');
+                    totalToolCell.textContent = 'Total';
+                    totalToolCell.style.fontWeight = 'bold';
+                    totalRow.appendChild(totalToolCell);
+                    
+                    const totalCountCell = document.createElement('td');
+                    totalCountCell.textContent = subToolData.totalCount;
+                    totalCountCell.style.fontWeight = 'bold';
+                    totalRow.appendChild(totalCountCell);
+                    
+                    tbody.appendChild(totalRow);
+                    
+                    // Add an empty row as a separator
+                    const spacerRow = document.createElement('tr');
+                    const spacerCell = document.createElement('td');
+                    spacerCell.setAttribute('colspan', '3');
+                    spacerCell.style.height = '4px';
+                    spacerRow.appendChild(spacerCell);
+                    tbody.appendChild(spacerRow);
+                    
+                    grandTotal += subToolData.totalCount;
+                }
+                
+                // Add grand total row
+                const grandTotalRow = document.createElement('tr');
+                
+                const grandTotalLabelCell = document.createElement('td');
+                grandTotalLabelCell.textContent = 'GRAND TOTAL';
+                grandTotalLabelCell.style.fontWeight = 'bold';
+                grandTotalLabelCell.style.fontSize = '14px';
+                grandTotalRow.appendChild(grandTotalLabelCell);
+                
+                const grandTotalBlankCell = document.createElement('td');
+                grandTotalRow.appendChild(grandTotalBlankCell);
+                
+                const grandTotalCountCell = document.createElement('td');
+                grandTotalCountCell.textContent = grandTotal;
+                grandTotalCountCell.style.fontWeight = 'bold';
+                grandTotalCountCell.style.fontSize = '14px';
+                grandTotalRow.appendChild(grandTotalCountCell);
+                
+                tbody.appendChild(grandTotalRow);
+                
+                table.appendChild(tbody);
+                subToolPivotDiv.appendChild(table);
+            }
+            
+            function processDetailsView(data) {
+                const detailsDiv = document.querySelector('#tab-details');
+                detailsDiv.innerHTML = '';
+                
+                // Create the table
+                const table = document.createElement('table');
+                const thead = document.createElement('thead');
+                const tbody = document.createElement('tbody');
+                
+                // Create header row
+                const headerRow = document.createElement('tr');
+                
+                const headers = ['Date', 'Tool', 'User', 'Model', 'Sub-Tool', 'Prompt'];
+                headers.forEach(headerText => {
+                    const header = document.createElement('th');
+                    header.textContent = headerText;
+                    headerRow.appendChild(header);
+                });
+                
+                thead.appendChild(headerRow);
+                table.appendChild(thead);
+                
+                // Sort data by date (newest first)
+                const sortedData = [...data].sort((a, b) => {
+                    const dateA = new Date(a.data.Date || 0);
+                    const dateB = new Date(b.data.Date || 0);
+                    return dateB - dateA;
+                });
+                
+                // Create table body
+                sortedData.forEach(item => {
+                    const row = document.createElement('tr');
+                    
+                    // Date column
+                    const dateCell = document.createElement('td');
+                    if (item.data.Date) {
+                        const date = new Date(item.data.Date);
+                        dateCell.textContent = date.toLocaleDateString() + ' ' + 
+                                            date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                    } else {
+                        dateCell.textContent = 'N/A';
+                    }
+                    row.appendChild(dateCell);
+                    
+                    // Tool column
+                    const toolCell = document.createElement('td');
+                    toolCell.textContent = item.data.TOOL || 'N/A';
+                    row.appendChild(toolCell);
+                    
+                    // User column
+                    const userCell = document.createElement('td');
+                    userCell.textContent = item.data.USER || 'N/A';
+                    row.appendChild(userCell);
+                    
+                    // Model column
+                    const modelCell = document.createElement('td');
+                    modelCell.textContent = item.data.MODEL || 'N/A';
+                    row.appendChild(modelCell);
+                    
+                    // Sub-tool column
+                    const subToolCell = document.createElement('td');
+                    subToolCell.textContent = item.data.SUB_TOOL || 'N/A';
+                    row.appendChild(subToolCell);
+                    
+                    // Prompt column
+                    const promptCell = document.createElement('td');
+                    promptCell.textContent = item.data.PROMPT || 'N/A';
+                    row.appendChild(promptCell);
+                    
+                    tbody.appendChild(row);
+                });
+                
+                table.appendChild(tbody);
+                detailsDiv.appendChild(table);
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Versions/V0.1/index-Latam.html b/Versions/V0.1/index-Latam.html
new file mode 100644
index 0000000..4faaba7
--- /dev/null
+++ b/Versions/V0.1/index-Latam.html
@@ -0,0 +1,703 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conversation Reporting Tool</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 22px;
+        }
+        .controls {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+            align-items: center;
+            justify-content: center;
+        }
+        select {
+            padding: 10px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #4285f4;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+            font-weight: 500;
+        }
+        button:hover {
+            background-color: #3367d6;
+        }
+        .loading {
+            text-align: center;
+            display: none;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 2s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .results {
+            margin-top: 15px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+        th, td {
+            padding: 6px 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+            line-height: 1.3;
+        }
+        th {
+            background-color: #f8f9fa;
+            font-weight: 600;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .error {
+            color: red;
+            text-align: center;
+            margin-top: 20px;
+            font-weight: 500;
+        }
+        .export-btn {
+            margin-top: 15px;
+            display: flex;
+            justify-content: flex-end;
+        }
+        .export-btn button {
+            padding: 6px 12px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .export-btn button:hover {
+            background-color: #45a049;
+        }
+        .export-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+        .time-filter {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .time-filter button {
+            padding: 6px 12px;
+            background-color: #f0f0f0;
+            color: #333;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            font-weight: 500;
+        }
+        .time-filter button.active {
+            background-color: #4285f4;
+            color: white;
+            border-color: #4285f4;
+        }
+        .time-filter button:hover:not(.active) {
+            background-color: #e0e0e0;
+        }
+        .chart-container {
+            margin-top: 30px;
+            margin-bottom: 30px;
+            height: 300px;
+            width: 100%;
+        }
+        .panel {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            padding: 15px;
+            margin-bottom: 15px;
+        }
+        .panel-title {
+            margin-top: 0;
+            margin-bottom: 15px;
+            font-size: 16px;
+            color: #333;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Conversation Reporting Tool</h1>
+        
+        <div class="controls">
+            <select id="optionSelect">
+                <option value="itau2-Conversations">itau2-Conversations</option>
+                <option value="Oliver Latam-Conversations">Oliver Latam-Conversations</option>
+                <option value="Ancar-Conversations">Ancar-Conversations</option>
+            </select>
+            <button id="sendButton">Send Request</button>
+            <div id="exportContainer" class="export-btn" style="display: none;">
+                <button id="exportCsvButton">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>
+                    Export CSV
+                </button>
+            </div>
+        </div>
+        
+        <div class="time-filter" id="timeFilter" style="display: none;">
+            <button data-days="1" class="active">Today</button>
+            <button data-days="7">Last 7 Days</button>
+            <button data-days="30">Last 30 Days</button>
+            <button data-days="90">Last 3 Months</button>
+            <button data-days="all">All Time</button>
+        </div>
+        
+        <div id="loading" class="loading">
+            <div class="loader"></div>
+            <p>Loading data, please wait...</p>
+        </div>
+        
+        <div id="error" class="error"></div>
+        
+        <div id="usage-chart-container" class="chart-container panel" style="display: none;">
+            <h3 class="panel-title">Conversation Usage Over Time</h3>
+            <canvas id="usageChart"></canvas>
+        </div>
+        
+        <div id="results" class="results">
+            <!-- Results will be dynamically inserted here -->
+        </div>
+    </div>
+    
+    <script>
+        // Global variables
+        let currentData = [];
+        let assistantData = [];
+        let usageChart = null;
+        
+        // Map to store assistant IDs to names
+        let assistantNames = {};
+        
+        // CSV Export functionality
+        document.getElementById('exportCsvButton').addEventListener('click', () => {
+            exportToCSV(currentData);
+        });
+        
+        function exportToCSV(data) {
+            // Define columns for the CSV
+            const columns = [
+                'User ID', 'Start Time', 'Brand Voice Setting', 'Title', 
+                'End Time', 'Assistant ID', 'Assistant Name', 'Assistant Key', 'Conversation ID',
+                'Vision Images'
+            ];
+            
+            // Create CSV header row
+            let csvContent = columns.join(',') + '\n';
+            
+            // Add data rows
+            data.forEach(item => {
+                if (!item.data || Object.keys(item.data).length === 0) return;
+                
+                const d = item.data;
+                const assistantId = d.Assistant_ID || '';
+                const assistantName = assistantNames[assistantId] || '';
+                
+                const row = [
+                    d.User_ID ? `"${d.User_ID}"` : '',
+                    d.StartTime ? `"${d.StartTime}"` : '',
+                    d['Brand Voice Setting'] ? `"${d['Brand Voice Setting'].replace(/"/g, '""')}"` : '',
+                    d.Title ? `"${d.Title.replace(/"/g, '""')}"` : '',
+                    d.EndTime ? `"${d.EndTime}"` : '',
+                    assistantId ? `"${assistantId}"` : '',
+                    assistantName ? `"${assistantName.replace(/"/g, '""')}"` : '',
+                    d.Assistant_Key ? `"${d.Assistant_Key}"` : '',
+                    d.Conversation_ID ? `"${d.Conversation_ID}"` : '',
+                    d.Vision_Images ? `"${d.Vision_Images}"` : ''
+                ];
+                
+                csvContent += row.join(',') + '\n';
+            });
+            
+            // Create a download link
+            const encodedUri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
+            const link = document.createElement('a');
+            link.setAttribute('href', encodedUri);
+            link.setAttribute('download', `latam-conversations-${new Date().toISOString().split('T')[0]}.csv`);
+            document.body.appendChild(link);
+            
+            // Trigger download and remove link
+            link.click();
+            document.body.removeChild(link);
+        }
+        
+        // Function to fetch assistant data
+        async function fetchAssistantData(option) {
+            try {
+                const response = await fetch('https://hook.us1.make.celonis.com/g2199hlyi5bn0ggve51xeda5d51o3tpi', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        option: option, // Pass the selected option to get the right assistants DB
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error fetching assistant data! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data;
+            } catch (error) {
+                console.error('Error fetching assistant data:', error);
+                return [];
+            }
+        }
+        
+        // Build assistant name mapping
+        function buildAssistantMapping(data) {
+            const mapping = {};
+            
+            data.forEach(item => {
+                if (item.data && item.data['Assistant ID'] && item.data['Name']) {
+                    mapping[item.data['Assistant ID']] = item.data['Name'];
+                }
+            });
+            
+            return mapping;
+        }
+
+        document.getElementById('sendButton').addEventListener('click', async () => {
+            const selectedOption = document.getElementById('optionSelect').value;
+            const loadingDiv = document.getElementById('loading');
+            const errorDiv = document.getElementById('error');
+            const resultsDiv = document.getElementById('results');
+            
+            // Clear previous results
+            errorDiv.textContent = '';
+            resultsDiv.innerHTML = '';
+            loadingDiv.style.display = 'block';
+            
+            try {
+                // First, fetch assistant data in parallel with conversation data
+                // Pass the selected option to get the correct assistant database
+                const assistantDataPromise = fetchAssistantData(selectedOption);
+                
+                // Fetch conversation data
+                const response = await fetch('https://hook.us1.make.celonis.com/6arvs3ebpel494664x7xl4if9az91oh2', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        option: selectedOption,
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                
+                // Wait for assistant data and build mapping
+                assistantData = await assistantDataPromise;
+                assistantNames = buildAssistantMapping(assistantData);
+                
+                // Store the data globally for CSV export
+                currentData = data;
+                
+                // Show export button and time filter
+                document.getElementById('exportContainer').style.display = 'block';
+                document.getElementById('timeFilter').style.display = 'flex';
+                
+                // Process the data for pivot table
+                const pivotData = processPivotData(data);
+                
+                // Initialize the usage chart
+                initializeTimeFilter(data);
+                createUsageChart(data, 1); // Default to showing 1 day (today)
+                
+                // Generate and display the table
+                displayPivotTable(pivotData);
+                
+            } catch (error) {
+                errorDiv.textContent = `Error: ${error.message}`;
+                console.error('Error:', error);
+                document.getElementById('exportContainer').style.display = 'none';
+                document.getElementById('timeFilter').style.display = 'none';
+                document.getElementById('usage-chart-container').style.display = 'none';
+            } finally {
+                loadingDiv.style.display = 'none';
+            }
+        });
+        
+        function processPivotData(data) {
+            // Group conversations by Assistant_ID
+            const assistantGroups = {};
+            
+            data.forEach(item => {
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                const userId = item.data.User_ID || 'Unknown';
+                
+                if (!assistantGroups[assistantId]) {
+                    assistantGroups[assistantId] = {
+                        users: {},
+                        totalCount: 0
+                    };
+                }
+                
+                if (!assistantGroups[assistantId].users[userId]) {
+                    assistantGroups[assistantId].users[userId] = 0;
+                }
+                
+                assistantGroups[assistantId].users[userId]++;
+                assistantGroups[assistantId].totalCount++;
+            });
+            
+            return assistantGroups;
+        }
+        
+        // Initialize time filter buttons
+        function initializeTimeFilter(data) {
+            const timeFilterButtons = document.querySelectorAll('#timeFilter button');
+            
+            timeFilterButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    // Update active button
+                    timeFilterButtons.forEach(btn => btn.classList.remove('active'));
+                    button.classList.add('active');
+                    
+                    // Get the day filter value
+                    const days = button.getAttribute('data-days');
+                    
+                    // Update chart
+                    createUsageChart(data, days === 'all' ? null : parseInt(days));
+                });
+            });
+        }
+        
+        // Create usage chart
+        function createUsageChart(data, days) {
+            // Show chart container
+            document.getElementById('usage-chart-container').style.display = 'block';
+            
+            // Filter data based on days
+            const filteredData = filterDataByDays(data, days);
+            
+            // Process data for the chart
+            const { labels, datasets } = processDataForChart(filteredData);
+            
+            // Create or update chart
+            if (usageChart) {
+                usageChart.data.labels = labels;
+                usageChart.data.datasets = datasets;
+                usageChart.update();
+            } else {
+                const ctx = document.getElementById('usageChart').getContext('2d');
+                usageChart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: datasets
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            title: {
+                                display: false
+                            },
+                            legend: {
+                                position: 'top',
+                            }
+                        },
+                        scales: {
+                            x: {
+                                grid: {
+                                    display: false
+                                }
+                            },
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    precision: 0,
+                                    stepSize: 1
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+        
+        // Filter data by time range
+        function filterDataByDays(data, days) {
+            if (!days) return data; // Return all data if no day filter
+            
+            const now = new Date();
+            const cutoffDate = new Date(now);
+            cutoffDate.setDate(cutoffDate.getDate() - days);
+            
+            return data.filter(item => {
+                if (!item.data || !item.data.StartTime) return false;
+                const startTime = new Date(item.data.StartTime);
+                return startTime >= cutoffDate;
+            });
+        }
+        
+        // Process data for chart
+        function processDataForChart(data) {
+            // Get date range
+            const groupedByDate = {};
+            const groupedByAssistant = {};
+            const assistantColors = {};
+            const colorPalette = [
+                '#4285F4', '#EA4335', '#FBBC05', '#34A853', 
+                '#673AB7', '#FF9800', '#00BCD4', '#795548',
+                '#9C27B0', '#607D8B', '#3F51B5', '#CDDC39'
+            ];
+            
+            // Group data by date and assistant
+            data.forEach(item => {
+                if (!item.data || !item.data.StartTime) return;
+                
+                const date = new Date(item.data.StartTime);
+                const dateStr = date.toISOString().split('T')[0]; // YYYY-MM-DD
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                
+                // Track for this date
+                if (!groupedByDate[dateStr]) {
+                    groupedByDate[dateStr] = {};
+                }
+                if (!groupedByDate[dateStr][assistantId]) {
+                    groupedByDate[dateStr][assistantId] = 0;
+                }
+                groupedByDate[dateStr][assistantId]++;
+                
+                // Track assistants
+                if (!groupedByAssistant[assistantId]) {
+                    groupedByAssistant[assistantId] = 0;
+                    // Assign color
+                    const colorIndex = Object.keys(groupedByAssistant).length - 1;
+                    assistantColors[assistantId] = colorPalette[colorIndex % colorPalette.length];
+                }
+                groupedByAssistant[assistantId]++;
+            });
+            
+            // Sort dates
+            const sortedDates = Object.keys(groupedByDate).sort();
+            
+            // Create datasets for each assistant
+            const datasets = [];
+            
+            for (const assistantId in groupedByAssistant) {
+                // Get assistant name for label if available
+                const assistantName = assistantNames[assistantId] || assistantId;
+                
+                const dataset = {
+                    label: assistantName,
+                    data: [],
+                    borderColor: assistantColors[assistantId],
+                    backgroundColor: assistantColors[assistantId] + '20', // Add transparency
+                    tension: 0.3,
+                    fill: true
+                };
+                
+                // Add data for each date
+                for (const date of sortedDates) {
+                    dataset.data.push(groupedByDate[date][assistantId] || 0);
+                }
+                
+                datasets.push(dataset);
+            }
+            
+            return {
+                labels: sortedDates,
+                datasets: datasets
+            };
+        }
+        
+        function displayPivotTable(pivotData) {
+            const resultsDiv = document.getElementById('results');
+            
+            // Create the table
+            const table = document.createElement('table');
+            const thead = document.createElement('thead');
+            const tbody = document.createElement('tbody');
+            
+            // Create header row
+            const headerRow = document.createElement('tr');
+            const headers = ['Assistant', 'User ID', 'Conversation Count'];
+            
+            headers.forEach(headerText => {
+                const header = document.createElement('th');
+                header.textContent = headerText;
+                headerRow.appendChild(header);
+            });
+            
+            thead.appendChild(headerRow);
+            table.appendChild(thead);
+            
+            // Create table body
+            for (const assistantId in pivotData) {
+                const assistantData = pivotData[assistantId];
+                let firstRow = true;
+                
+                for (const userId in assistantData.users) {
+                    const row = document.createElement('tr');
+                    
+                    // Assistant column (ID and Name, only show in first row of group)
+                    const assistantCell = document.createElement('td');
+                    
+                    if (firstRow) {
+                        // Get assistant name if available
+                        const assistantName = assistantNames[assistantId] || null;
+                        
+                        if (assistantName) {
+                            // If we have a name, show "Name (ID)"
+                            assistantCell.textContent = `${assistantName} (${assistantId})`;
+                            
+                            // Add title attribute for hover tooltip with full ID
+                            assistantCell.title = assistantId;
+                        } else {
+                            // If no name, just show ID
+                            assistantCell.textContent = assistantId;
+                        }
+                        
+                        assistantCell.style.fontWeight = 'bold';
+                    } else {
+                        assistantCell.textContent = '';
+                    }
+                    
+                    row.appendChild(assistantCell);
+                    
+                    // User ID column
+                    const userCell = document.createElement('td');
+                    userCell.textContent = userId;
+                    row.appendChild(userCell);
+                    
+                    // Count column
+                    const countCell = document.createElement('td');
+                    countCell.textContent = assistantData.users[userId];
+                    row.appendChild(countCell);
+                    
+                    tbody.appendChild(row);
+                    firstRow = false;
+                }
+                
+                // Add a total row for this assistant
+                const totalRow = document.createElement('tr');
+                
+                const totalLabelCell = document.createElement('td');
+                totalLabelCell.textContent = '';
+                totalRow.appendChild(totalLabelCell);
+                
+                const totalUserCell = document.createElement('td');
+                totalUserCell.textContent = 'Total';
+                totalUserCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalUserCell);
+                
+                const totalCountCell = document.createElement('td');
+                totalCountCell.textContent = assistantData.totalCount;
+                totalCountCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalCountCell);
+                
+                tbody.appendChild(totalRow);
+                
+                // Add an empty row as a separator
+                const spacerRow = document.createElement('tr');
+                const spacerCell = document.createElement('td');
+                spacerCell.setAttribute('colspan', '3');
+                spacerCell.style.height = '4px';
+                spacerRow.appendChild(spacerCell);
+                tbody.appendChild(spacerRow);
+            }
+            
+            // Add grand total row
+            const grandTotalRow = document.createElement('tr');
+            
+            // Create grand total cells
+            const grandTotalLabelCell = document.createElement('td');
+            grandTotalLabelCell.textContent = 'GRAND TOTAL';
+            grandTotalLabelCell.style.fontWeight = 'bold';
+            grandTotalLabelCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalLabelCell);
+            
+            const grandTotalBlankCell = document.createElement('td');
+            grandTotalRow.appendChild(grandTotalBlankCell);
+            
+            // Calculate grand total
+            let grandTotal = 0;
+            for (const assistantId in pivotData) {
+                grandTotal += pivotData[assistantId].totalCount;
+            }
+            
+            const grandTotalCountCell = document.createElement('td');
+            grandTotalCountCell.textContent = grandTotal;
+            grandTotalCountCell.style.fontWeight = 'bold';
+            grandTotalCountCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalCountCell);
+            
+            tbody.appendChild(grandTotalRow);
+            
+            table.appendChild(tbody);
+            resultsDiv.appendChild(table);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Versions/V0.1/index-Latam.html.zip b/Versions/V0.1/index-Latam.html.zip
new file mode 100644
index 0000000..807c5fb
Binary files /dev/null and b/Versions/V0.1/index-Latam.html.zip differ
diff --git a/Versions/V0.1/index-SBII.html b/Versions/V0.1/index-SBII.html
new file mode 100644
index 0000000..c65bc60
--- /dev/null
+++ b/Versions/V0.1/index-SBII.html
@@ -0,0 +1,699 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conversation Reporting Tool</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 22px;
+        }
+        .controls {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+            align-items: center;
+            justify-content: center;
+        }
+        select {
+            padding: 10px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #4285f4;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+            font-weight: 500;
+        }
+        button:hover {
+            background-color: #3367d6;
+        }
+        .loading {
+            text-align: center;
+            display: none;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 2s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .results {
+            margin-top: 15px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+        th, td {
+            padding: 6px 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+            line-height: 1.3;
+        }
+        th {
+            background-color: #f8f9fa;
+            font-weight: 600;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .error {
+            color: red;
+            text-align: center;
+            margin-top: 20px;
+            font-weight: 500;
+        }
+        .export-btn {
+            margin-top: 15px;
+            display: flex;
+            justify-content: flex-end;
+        }
+        .export-btn button {
+            padding: 6px 12px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .export-btn button:hover {
+            background-color: #45a049;
+        }
+        .export-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+        .time-filter {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .time-filter button {
+            padding: 6px 12px;
+            background-color: #f0f0f0;
+            color: #333;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            font-weight: 500;
+        }
+        .time-filter button.active {
+            background-color: #4285f4;
+            color: white;
+            border-color: #4285f4;
+        }
+        .time-filter button:hover:not(.active) {
+            background-color: #e0e0e0;
+        }
+        .chart-container {
+            margin-top: 30px;
+            margin-bottom: 30px;
+            height: 300px;
+            width: 100%;
+        }
+        .panel {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            padding: 15px;
+            margin-bottom: 15px;
+        }
+        .panel-title {
+            margin-top: 0;
+            margin-bottom: 15px;
+            font-size: 16px;
+            color: #333;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Conversation Reporting Tool</h1>
+        
+        <div class="controls">
+            <select id="optionSelect">
+                <option value="itau2-Conversations">SBII-Conversations</option>
+            </select>
+            <button id="sendButton">Send Request</button>
+            <div id="exportContainer" class="export-btn" style="display: none;">
+                <button id="exportCsvButton">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>
+                    Export CSV
+                </button>
+            </div>
+        </div>
+        
+        <div class="time-filter" id="timeFilter" style="display: none;">
+            <button data-days="1" class="active">Today</button>
+            <button data-days="7">Last 7 Days</button>
+            <button data-days="30">Last 30 Days</button>
+            <button data-days="90">Last 3 Months</button>
+            <button data-days="all">All Time</button>
+        </div>
+        
+        <div id="loading" class="loading">
+            <div class="loader"></div>
+            <p>Loading data, please wait...</p>
+        </div>
+        
+        <div id="error" class="error"></div>
+        
+        <div id="usage-chart-container" class="chart-container panel" style="display: none;">
+            <h3 class="panel-title">Conversation Usage Over Time</h3>
+            <canvas id="usageChart"></canvas>
+        </div>
+        
+        <div id="results" class="results">
+            <!-- Results will be dynamically inserted here -->
+        </div>
+    </div>
+    
+    <script>
+        // Global variables
+        let currentData = [];
+        let assistantData = [];
+        let usageChart = null;
+        
+        // Map to store assistant IDs to names
+        let assistantNames = {};
+        
+        // CSV Export functionality
+        document.getElementById('exportCsvButton').addEventListener('click', () => {
+            exportToCSV(currentData);
+        });
+        
+        function exportToCSV(data) {
+            // Define columns for the CSV
+            const columns = [
+                'User ID', 'Start Time', 'Brand Voice Setting', 'Title', 
+                'End Time', 'Assistant ID', 'Assistant Name', 'Assistant Key', 'Conversation ID',
+                'Vision Images'
+            ];
+            
+            // Create CSV header row
+            let csvContent = columns.join(',') + '\n';
+            
+            // Add data rows
+            data.forEach(item => {
+                if (!item.data || Object.keys(item.data).length === 0) return;
+                
+                const d = item.data;
+                const assistantId = d.Assistant_ID || '';
+                const assistantName = assistantNames[assistantId] || '';
+                
+                const row = [
+                    d.User_ID ? `"${d.User_ID}"` : '',
+                    d.StartTime ? `"${d.StartTime}"` : '',
+                    d['Brand Voice Setting'] ? `"${d['Brand Voice Setting'].replace(/"/g, '""')}"` : '',
+                    d.Title ? `"${d.Title.replace(/"/g, '""')}"` : '',
+                    d.EndTime ? `"${d.EndTime}"` : '',
+                    assistantId ? `"${assistantId}"` : '',
+                    assistantName ? `"${assistantName.replace(/"/g, '""')}"` : '',
+                    d.Assistant_Key ? `"${d.Assistant_Key}"` : '',
+                    d.Conversation_ID ? `"${d.Conversation_ID}"` : '',
+                    d.Vision_Images ? `"${d.Vision_Images}"` : ''
+                ];
+                
+                csvContent += row.join(',') + '\n';
+            });
+            
+            // Create a download link
+            const encodedUri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
+            const link = document.createElement('a');
+            link.setAttribute('href', encodedUri);
+            link.setAttribute('download', `sbii-conversations-${new Date().toISOString().split('T')[0]}.csv`);
+            document.body.appendChild(link);
+            
+            // Trigger download and remove link
+            link.click();
+            document.body.removeChild(link);
+        }
+        
+        // Function to fetch assistant data
+        async function fetchAssistantData() {
+            try {
+                const response = await fetch('https://hook.us1.make.celonis.com/qyrswn18r3rrs8rpvo4n62mny6rorhah', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error fetching assistant data! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data;
+            } catch (error) {
+                console.error('Error fetching assistant data:', error);
+                return [];
+            }
+        }
+        
+        // Build assistant name mapping
+        function buildAssistantMapping(data) {
+            const mapping = {};
+            
+            data.forEach(item => {
+                if (item.data && item.data['Assistant ID'] && item.data['Name']) {
+                    mapping[item.data['Assistant ID']] = item.data['Name'];
+                }
+            });
+            
+            return mapping;
+        }
+
+        document.getElementById('sendButton').addEventListener('click', async () => {
+            const selectedOption = document.getElementById('optionSelect').value;
+            const loadingDiv = document.getElementById('loading');
+            const errorDiv = document.getElementById('error');
+            const resultsDiv = document.getElementById('results');
+            
+            // Clear previous results
+            errorDiv.textContent = '';
+            resultsDiv.innerHTML = '';
+            loadingDiv.style.display = 'block';
+            
+            try {
+                // First, fetch assistant data in parallel with conversation data
+                const assistantDataPromise = fetchAssistantData();
+                
+                // Fetch conversation data
+                const response = await fetch('https://hook.us1.make.celonis.com/sqombh44pan463cgfw99f12j9vmugtvg', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        option: selectedOption,
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                
+                // Wait for assistant data and build mapping
+                assistantData = await assistantDataPromise;
+                assistantNames = buildAssistantMapping(assistantData);
+                
+                // Store the data globally for CSV export
+                currentData = data;
+                
+                // Show export button and time filter
+                document.getElementById('exportContainer').style.display = 'block';
+                document.getElementById('timeFilter').style.display = 'flex';
+                
+                // Process the data for pivot table
+                const pivotData = processPivotData(data);
+                
+                // Initialize the usage chart
+                initializeTimeFilter(data);
+                createUsageChart(data, 1); // Default to showing 1 day (today)
+                
+                // Generate and display the table
+                displayPivotTable(pivotData);
+                
+            } catch (error) {
+                errorDiv.textContent = `Error: ${error.message}`;
+                console.error('Error:', error);
+                document.getElementById('exportContainer').style.display = 'none';
+                document.getElementById('timeFilter').style.display = 'none';
+                document.getElementById('usage-chart-container').style.display = 'none';
+            } finally {
+                loadingDiv.style.display = 'none';
+            }
+        });
+        
+        function processPivotData(data) {
+            // Group conversations by Assistant_ID
+            const assistantGroups = {};
+            
+            data.forEach(item => {
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                const userId = item.data.User_ID || 'Unknown';
+                
+                if (!assistantGroups[assistantId]) {
+                    assistantGroups[assistantId] = {
+                        users: {},
+                        totalCount: 0
+                    };
+                }
+                
+                if (!assistantGroups[assistantId].users[userId]) {
+                    assistantGroups[assistantId].users[userId] = 0;
+                }
+                
+                assistantGroups[assistantId].users[userId]++;
+                assistantGroups[assistantId].totalCount++;
+            });
+            
+            return assistantGroups;
+        }
+        
+        // Initialize time filter buttons
+        function initializeTimeFilter(data) {
+            const timeFilterButtons = document.querySelectorAll('#timeFilter button');
+            
+            timeFilterButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    // Update active button
+                    timeFilterButtons.forEach(btn => btn.classList.remove('active'));
+                    button.classList.add('active');
+                    
+                    // Get the day filter value
+                    const days = button.getAttribute('data-days');
+                    
+                    // Update chart
+                    createUsageChart(data, days === 'all' ? null : parseInt(days));
+                });
+            });
+        }
+        
+        // Create usage chart
+        function createUsageChart(data, days) {
+            // Show chart container
+            document.getElementById('usage-chart-container').style.display = 'block';
+            
+            // Filter data based on days
+            const filteredData = filterDataByDays(data, days);
+            
+            // Process data for the chart
+            const { labels, datasets } = processDataForChart(filteredData);
+            
+            // Create or update chart
+            if (usageChart) {
+                usageChart.data.labels = labels;
+                usageChart.data.datasets = datasets;
+                usageChart.update();
+            } else {
+                const ctx = document.getElementById('usageChart').getContext('2d');
+                usageChart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: datasets
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            title: {
+                                display: false
+                            },
+                            legend: {
+                                position: 'top',
+                            }
+                        },
+                        scales: {
+                            x: {
+                                grid: {
+                                    display: false
+                                }
+                            },
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    precision: 0,
+                                    stepSize: 1
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+        
+        // Filter data by time range
+        function filterDataByDays(data, days) {
+            if (!days) return data; // Return all data if no day filter
+            
+            const now = new Date();
+            const cutoffDate = new Date(now);
+            cutoffDate.setDate(cutoffDate.getDate() - days);
+            
+            return data.filter(item => {
+                if (!item.data || !item.data.StartTime) return false;
+                const startTime = new Date(item.data.StartTime);
+                return startTime >= cutoffDate;
+            });
+        }
+        
+        // Process data for chart
+        function processDataForChart(data) {
+            // Get date range
+            const groupedByDate = {};
+            const groupedByAssistant = {};
+            const assistantColors = {};
+            const colorPalette = [
+                '#4285F4', '#EA4335', '#FBBC05', '#34A853', 
+                '#673AB7', '#FF9800', '#00BCD4', '#795548',
+                '#9C27B0', '#607D8B', '#3F51B5', '#CDDC39'
+            ];
+            
+            // Group data by date and assistant
+            data.forEach(item => {
+                if (!item.data || !item.data.StartTime) return;
+                
+                const date = new Date(item.data.StartTime);
+                const dateStr = date.toISOString().split('T')[0]; // YYYY-MM-DD
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                
+                // Track for this date
+                if (!groupedByDate[dateStr]) {
+                    groupedByDate[dateStr] = {};
+                }
+                if (!groupedByDate[dateStr][assistantId]) {
+                    groupedByDate[dateStr][assistantId] = 0;
+                }
+                groupedByDate[dateStr][assistantId]++;
+                
+                // Track assistants
+                if (!groupedByAssistant[assistantId]) {
+                    groupedByAssistant[assistantId] = 0;
+                    // Assign color
+                    const colorIndex = Object.keys(groupedByAssistant).length - 1;
+                    assistantColors[assistantId] = colorPalette[colorIndex % colorPalette.length];
+                }
+                groupedByAssistant[assistantId]++;
+            });
+            
+            // Sort dates
+            const sortedDates = Object.keys(groupedByDate).sort();
+            
+            // Create datasets for each assistant
+            const datasets = [];
+            
+            for (const assistantId in groupedByAssistant) {
+                // Get assistant name for label if available
+                const assistantName = assistantNames[assistantId] || assistantId;
+                
+                const dataset = {
+                    label: assistantName,
+                    data: [],
+                    borderColor: assistantColors[assistantId],
+                    backgroundColor: assistantColors[assistantId] + '20', // Add transparency
+                    tension: 0.3,
+                    fill: true
+                };
+                
+                // Add data for each date
+                for (const date of sortedDates) {
+                    dataset.data.push(groupedByDate[date][assistantId] || 0);
+                }
+                
+                datasets.push(dataset);
+            }
+            
+            return {
+                labels: sortedDates,
+                datasets: datasets
+            };
+        }
+        
+        function displayPivotTable(pivotData) {
+            const resultsDiv = document.getElementById('results');
+            
+            // Create the table
+            const table = document.createElement('table');
+            const thead = document.createElement('thead');
+            const tbody = document.createElement('tbody');
+            
+            // Create header row
+            const headerRow = document.createElement('tr');
+            const headers = ['Assistant', 'User ID', 'Conversation Count'];
+            
+            headers.forEach(headerText => {
+                const header = document.createElement('th');
+                header.textContent = headerText;
+                headerRow.appendChild(header);
+            });
+            
+            thead.appendChild(headerRow);
+            table.appendChild(thead);
+            
+            // Create table body
+            for (const assistantId in pivotData) {
+                const assistantData = pivotData[assistantId];
+                let firstRow = true;
+                
+                for (const userId in assistantData.users) {
+                    const row = document.createElement('tr');
+                    
+                    // Assistant column (ID and Name, only show in first row of group)
+                    const assistantCell = document.createElement('td');
+                    
+                    if (firstRow) {
+                        // Get assistant name if available
+                        const assistantName = assistantNames[assistantId] || null;
+                        
+                        if (assistantName) {
+                            // If we have a name, show "Name (ID)"
+                            assistantCell.textContent = `${assistantName} (${assistantId})`;
+                            
+                            // Add title attribute for hover tooltip with full ID
+                            assistantCell.title = assistantId;
+                        } else {
+                            // If no name, just show ID
+                            assistantCell.textContent = assistantId;
+                        }
+                        
+                        assistantCell.style.fontWeight = 'bold';
+                    } else {
+                        assistantCell.textContent = '';
+                    }
+                    
+                    row.appendChild(assistantCell);
+                    
+                    // User ID column
+                    const userCell = document.createElement('td');
+                    userCell.textContent = userId;
+                    row.appendChild(userCell);
+                    
+                    // Count column
+                    const countCell = document.createElement('td');
+                    countCell.textContent = assistantData.users[userId];
+                    row.appendChild(countCell);
+                    
+                    tbody.appendChild(row);
+                    firstRow = false;
+                }
+                
+                // Add a total row for this assistant
+                const totalRow = document.createElement('tr');
+                
+                const totalLabelCell = document.createElement('td');
+                totalLabelCell.textContent = '';
+                totalRow.appendChild(totalLabelCell);
+                
+                const totalUserCell = document.createElement('td');
+                totalUserCell.textContent = 'Total';
+                totalUserCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalUserCell);
+                
+                const totalCountCell = document.createElement('td');
+                totalCountCell.textContent = assistantData.totalCount;
+                totalCountCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalCountCell);
+                
+                tbody.appendChild(totalRow);
+                
+                // Add an empty row as a separator
+                const spacerRow = document.createElement('tr');
+                const spacerCell = document.createElement('td');
+                spacerCell.setAttribute('colspan', '3');
+                spacerCell.style.height = '4px';
+                spacerRow.appendChild(spacerCell);
+                tbody.appendChild(spacerRow);
+            }
+            
+            // Add grand total row
+            const grandTotalRow = document.createElement('tr');
+            
+            // Create grand total cells
+            const grandTotalLabelCell = document.createElement('td');
+            grandTotalLabelCell.textContent = 'GRAND TOTAL';
+            grandTotalLabelCell.style.fontWeight = 'bold';
+            grandTotalLabelCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalLabelCell);
+            
+            const grandTotalBlankCell = document.createElement('td');
+            grandTotalRow.appendChild(grandTotalBlankCell);
+            
+            // Calculate grand total
+            let grandTotal = 0;
+            for (const assistantId in pivotData) {
+                grandTotal += pivotData[assistantId].totalCount;
+            }
+            
+            const grandTotalCountCell = document.createElement('td');
+            grandTotalCountCell.textContent = grandTotal;
+            grandTotalCountCell.style.fontWeight = 'bold';
+            grandTotalCountCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalCountCell);
+            
+            tbody.appendChild(grandTotalRow);
+            
+            table.appendChild(tbody);
+            resultsDiv.appendChild(table);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Versions/V0.1/index-SBII.html.zip b/Versions/V0.1/index-SBII.html.zip
new file mode 100644
index 0000000..6cc08c1
Binary files /dev/null and b/Versions/V0.1/index-SBII.html.zip differ
diff --git a/Versions/V0.1/index-convo.html b/Versions/V0.1/index-convo.html
new file mode 100644
index 0000000..0d68558
--- /dev/null
+++ b/Versions/V0.1/index-convo.html
@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conversation Reporting Tool</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: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 22px;
+        }
+        .controls {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+            align-items: center;
+            justify-content: center;
+        }
+        select {
+            padding: 10px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #4285f4;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+            font-weight: 500;
+        }
+        button:hover {
+            background-color: #3367d6;
+        }
+        .loading {
+            text-align: center;
+            display: none;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 2s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .results {
+            margin-top: 15px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+        th, td {
+            padding: 6px 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+            line-height: 1.3;
+        }
+        th {
+            background-color: #f8f9fa;
+            font-weight: 600;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .error {
+            color: red;
+            text-align: center;
+            margin-top: 20px;
+            font-weight: 500;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Conversation Reporting Tool</h1>
+        
+        <div class="controls">
+            <select id="optionSelect">
+                <option value="itau2-Conversations">itau2-Conversations</option>
+                <option value="Oliver Latam-Conversations">Oliver Latam-Conversations</option>
+                <option value="Ancar-Conversations">Ancar-Conversations</option>
+            </select>
+            <button id="sendButton">Send Request</button>
+        </div>
+        
+        <div id="loading" class="loading">
+            <div class="loader"></div>
+            <p>Loading data, please wait...</p>
+        </div>
+        
+        <div id="error" class="error"></div>
+        
+        <div id="results" class="results">
+            <!-- Results will be dynamically inserted here -->
+        </div>
+    </div>
+    
+    <script>
+        document.getElementById('sendButton').addEventListener('click', async () => {
+            const selectedOption = document.getElementById('optionSelect').value;
+            const loadingDiv = document.getElementById('loading');
+            const errorDiv = document.getElementById('error');
+            const resultsDiv = document.getElementById('results');
+            
+            // Clear previous results
+            errorDiv.textContent = '';
+            resultsDiv.innerHTML = '';
+            loadingDiv.style.display = 'block';
+            
+            try {
+                const response = await fetch('https://hook.us1.make.celonis.com/ewnkda13g1b65s1h2on2clo8ql7vdkl0', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        option: selectedOption,
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                
+                // Process the data for pivot table
+                const pivotData = processPivotData(data);
+                
+                // Generate and display the table
+                displayPivotTable(pivotData);
+                
+            } catch (error) {
+                errorDiv.textContent = `Error: ${error.message}`;
+                console.error('Error:', error);
+            } finally {
+                loadingDiv.style.display = 'none';
+            }
+        });
+        
+        function processPivotData(data) {
+            // Group conversations by Assistant_ID
+            const assistantGroups = {};
+            
+            data.forEach(item => {
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                const userId = item.data.User_ID || 'Unknown';
+                
+                if (!assistantGroups[assistantId]) {
+                    assistantGroups[assistantId] = {
+                        users: {},
+                        totalCount: 0
+                    };
+                }
+                
+                if (!assistantGroups[assistantId].users[userId]) {
+                    assistantGroups[assistantId].users[userId] = 0;
+                }
+                
+                assistantGroups[assistantId].users[userId]++;
+                assistantGroups[assistantId].totalCount++;
+            });
+            
+            return assistantGroups;
+        }
+        
+        function displayPivotTable(pivotData) {
+            const resultsDiv = document.getElementById('results');
+            
+            // Create the table
+            const table = document.createElement('table');
+            const thead = document.createElement('thead');
+            const tbody = document.createElement('tbody');
+            
+            // Create header row
+            const headerRow = document.createElement('tr');
+            const headers = ['Assistant ID', 'User ID', 'Conversation Count'];
+            
+            headers.forEach(headerText => {
+                const header = document.createElement('th');
+                header.textContent = headerText;
+                headerRow.appendChild(header);
+            });
+            
+            thead.appendChild(headerRow);
+            table.appendChild(thead);
+            
+            // Create table body
+            for (const assistantId in pivotData) {
+                const assistantData = pivotData[assistantId];
+                let firstRow = true;
+                
+                for (const userId in assistantData.users) {
+                    const row = document.createElement('tr');
+                    
+                    // Assistant ID column (only show in first row of group)
+                    const assistantCell = document.createElement('td');
+                    assistantCell.textContent = firstRow ? assistantId : '';
+                    if (firstRow) {
+                        assistantCell.style.fontWeight = 'bold';
+                    }
+                    row.appendChild(assistantCell);
+                    
+                    // User ID column
+                    const userCell = document.createElement('td');
+                    userCell.textContent = userId;
+                    row.appendChild(userCell);
+                    
+                    // Count column
+                    const countCell = document.createElement('td');
+                    countCell.textContent = assistantData.users[userId];
+                    row.appendChild(countCell);
+                    
+                    tbody.appendChild(row);
+                    firstRow = false;
+                }
+                
+                // Add a total row for this assistant
+                const totalRow = document.createElement('tr');
+                
+                const totalLabelCell = document.createElement('td');
+                totalLabelCell.textContent = '';
+                totalRow.appendChild(totalLabelCell);
+                
+                const totalUserCell = document.createElement('td');
+                totalUserCell.textContent = 'Total';
+                totalUserCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalUserCell);
+                
+                const totalCountCell = document.createElement('td');
+                totalCountCell.textContent = assistantData.totalCount;
+                totalCountCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalCountCell);
+                
+                tbody.appendChild(totalRow);
+                
+                // Add an empty row as a separator
+                const spacerRow = document.createElement('tr');
+                const spacerCell = document.createElement('td');
+                spacerCell.setAttribute('colspan', '3');
+                spacerCell.style.height = '4px';
+                spacerRow.appendChild(spacerCell);
+                tbody.appendChild(spacerRow);
+            }
+            
+            // Add grand total row
+            const grandTotalRow = document.createElement('tr');
+            
+            // Create grand total cells
+            const grandTotalLabelCell = document.createElement('td');
+            grandTotalLabelCell.textContent = 'GRAND TOTAL';
+            grandTotalLabelCell.style.fontWeight = 'bold';
+            grandTotalLabelCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalLabelCell);
+            
+            const grandTotalBlankCell = document.createElement('td');
+            grandTotalRow.appendChild(grandTotalBlankCell);
+            
+            // Calculate grand total
+            let grandTotal = 0;
+            for (const assistantId in pivotData) {
+                grandTotal += pivotData[assistantId].totalCount;
+            }
+            
+            const grandTotalCountCell = document.createElement('td');
+            grandTotalCountCell.textContent = grandTotal;
+            grandTotalCountCell.style.fontWeight = 'bold';
+            grandTotalCountCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalCountCell);
+            
+            tbody.appendChild(grandTotalRow);
+            
+            table.appendChild(tbody);
+            resultsDiv.appendChild(table);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Versions/V0.1/index-sidekick.html b/Versions/V0.1/index-sidekick.html
new file mode 100644
index 0000000..06b2b3f
--- /dev/null
+++ b/Versions/V0.1/index-sidekick.html
@@ -0,0 +1,699 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conversation Reporting Tool</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 22px;
+        }
+        .controls {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+            align-items: center;
+            justify-content: center;
+        }
+        select {
+            padding: 10px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #4285f4;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+            font-weight: 500;
+        }
+        button:hover {
+            background-color: #3367d6;
+        }
+        .loading {
+            text-align: center;
+            display: none;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 2s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .results {
+            margin-top: 15px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+        th, td {
+            padding: 6px 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+            line-height: 1.3;
+        }
+        th {
+            background-color: #f8f9fa;
+            font-weight: 600;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .error {
+            color: red;
+            text-align: center;
+            margin-top: 20px;
+            font-weight: 500;
+        }
+        .export-btn {
+            margin-top: 15px;
+            display: flex;
+            justify-content: flex-end;
+        }
+        .export-btn button {
+            padding: 6px 12px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .export-btn button:hover {
+            background-color: #45a049;
+        }
+        .export-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+        .time-filter {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .time-filter button {
+            padding: 6px 12px;
+            background-color: #f0f0f0;
+            color: #333;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            font-weight: 500;
+        }
+        .time-filter button.active {
+            background-color: #4285f4;
+            color: white;
+            border-color: #4285f4;
+        }
+        .time-filter button:hover:not(.active) {
+            background-color: #e0e0e0;
+        }
+        .chart-container {
+            margin-top: 30px;
+            margin-bottom: 30px;
+            height: 300px;
+            width: 100%;
+        }
+        .panel {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            padding: 15px;
+            margin-bottom: 15px;
+        }
+        .panel-title {
+            margin-top: 0;
+            margin-bottom: 15px;
+            font-size: 16px;
+            color: #333;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Conversation Reporting Tool</h1>
+        
+        <div class="controls">
+            <select id="optionSelect">
+                <option value="sidekick_conversations">sidekick_conversations</option>
+            </select>
+            <button id="sendButton">Send Request</button>
+            <div id="exportContainer" class="export-btn" style="display: none;">
+                <button id="exportCsvButton">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>
+                    Export CSV
+                </button>
+            </div>
+        </div>
+        
+        <div class="time-filter" id="timeFilter" style="display: none;">
+            <button data-days="1" class="active">Today</button>
+            <button data-days="7">Last 7 Days</button>
+            <button data-days="30">Last 30 Days</button>
+            <button data-days="90">Last 3 Months</button>
+            <button data-days="all">All Time</button>
+        </div>
+        
+        <div id="loading" class="loading">
+            <div class="loader"></div>
+            <p>Loading data, please wait...</p>
+        </div>
+        
+        <div id="error" class="error"></div>
+        
+        <div id="usage-chart-container" class="chart-container panel" style="display: none;">
+            <h3 class="panel-title">Conversation Usage Over Time</h3>
+            <canvas id="usageChart"></canvas>
+        </div>
+        
+        <div id="results" class="results">
+            <!-- Results will be dynamically inserted here -->
+        </div>
+    </div>
+    
+    <script>
+        // Global variables
+        let currentData = [];
+        let assistantData = [];
+        let usageChart = null;
+        
+        // Map to store assistant IDs to names
+        let assistantNames = {};
+        
+        // CSV Export functionality
+        document.getElementById('exportCsvButton').addEventListener('click', () => {
+            exportToCSV(currentData);
+        });
+        
+        function exportToCSV(data) {
+            // Define columns for the CSV
+            const columns = [
+                'User ID', 'Start Time', 'Brand Voice Setting', 'Title', 
+                'End Time', 'Assistant ID', 'Assistant Name', 'Assistant Key', 'Conversation ID',
+                'Vision Images'
+            ];
+            
+            // Create CSV header row
+            let csvContent = columns.join(',') + '\n';
+            
+            // Add data rows
+            data.forEach(item => {
+                if (!item.data || Object.keys(item.data).length === 0) return;
+                
+                const d = item.data;
+                const assistantId = d.Assistant_ID || '';
+                const assistantName = assistantNames[assistantId] || '';
+                
+                const row = [
+                    d.User_ID ? `"${d.User_ID}"` : '',
+                    d.StartTime ? `"${d.StartTime}"` : '',
+                    d['Brand Voice Setting'] ? `"${d['Brand Voice Setting'].replace(/"/g, '""')}"` : '',
+                    d.Title ? `"${d.Title.replace(/"/g, '""')}"` : '',
+                    d.EndTime ? `"${d.EndTime}"` : '',
+                    assistantId ? `"${assistantId}"` : '',
+                    assistantName ? `"${assistantName.replace(/"/g, '""')}"` : '',
+                    d.Assistant_Key ? `"${d.Assistant_Key}"` : '',
+                    d.Conversation_ID ? `"${d.Conversation_ID}"` : '',
+                    d.Vision_Images ? `"${d.Vision_Images}"` : ''
+                ];
+                
+                csvContent += row.join(',') + '\n';
+            });
+            
+            // Create a download link
+            const encodedUri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
+            const link = document.createElement('a');
+            link.setAttribute('href', encodedUri);
+            link.setAttribute('download', `sidekick-conversations-${new Date().toISOString().split('T')[0]}.csv`);
+            document.body.appendChild(link);
+            
+            // Trigger download and remove link
+            link.click();
+            document.body.removeChild(link);
+        }
+        
+        // Function to fetch assistant data
+        async function fetchAssistantData() {
+            try {
+                const response = await fetch('https://hook.us1.make.celonis.com/y1o8pqxv40a4qhk55rbsdklpyjyt4nvd', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error fetching assistant data! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data;
+            } catch (error) {
+                console.error('Error fetching assistant data:', error);
+                return [];
+            }
+        }
+        
+        // Build assistant name mapping
+        function buildAssistantMapping(data) {
+            const mapping = {};
+            
+            data.forEach(item => {
+                if (item.data && item.data['Assistant ID'] && item.data['Name']) {
+                    mapping[item.data['Assistant ID']] = item.data['Name'];
+                }
+            });
+            
+            return mapping;
+        }
+
+        document.getElementById('sendButton').addEventListener('click', async () => {
+            const selectedOption = document.getElementById('optionSelect').value;
+            const loadingDiv = document.getElementById('loading');
+            const errorDiv = document.getElementById('error');
+            const resultsDiv = document.getElementById('results');
+            
+            // Clear previous results
+            errorDiv.textContent = '';
+            resultsDiv.innerHTML = '';
+            loadingDiv.style.display = 'block';
+            
+            try {
+                // First, fetch assistant data in parallel with conversation data
+                const assistantDataPromise = fetchAssistantData();
+                
+                // Fetch conversation data
+                const response = await fetch('https://hook.us1.make.celonis.com/ewnkda13g1b65s1h2on2clo8ql7vdkl0', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        option: selectedOption,
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                
+                // Wait for assistant data and build mapping
+                assistantData = await assistantDataPromise;
+                assistantNames = buildAssistantMapping(assistantData);
+                
+                // Store the data globally for CSV export
+                currentData = data;
+                
+                // Show export button and time filter
+                document.getElementById('exportContainer').style.display = 'block';
+                document.getElementById('timeFilter').style.display = 'flex';
+                
+                // Process the data for pivot table
+                const pivotData = processPivotData(data);
+                
+                // Initialize the usage chart
+                initializeTimeFilter(data);
+                createUsageChart(data, 1); // Default to showing 1 day (today)
+                
+                // Generate and display the table
+                displayPivotTable(pivotData);
+                
+            } catch (error) {
+                errorDiv.textContent = `Error: ${error.message}`;
+                console.error('Error:', error);
+                document.getElementById('exportContainer').style.display = 'none';
+                document.getElementById('timeFilter').style.display = 'none';
+                document.getElementById('usage-chart-container').style.display = 'none';
+            } finally {
+                loadingDiv.style.display = 'none';
+            }
+        });
+        
+        function processPivotData(data) {
+            // Group conversations by Assistant_ID
+            const assistantGroups = {};
+            
+            data.forEach(item => {
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                const userId = item.data.User_ID || 'Unknown';
+                
+                if (!assistantGroups[assistantId]) {
+                    assistantGroups[assistantId] = {
+                        users: {},
+                        totalCount: 0
+                    };
+                }
+                
+                if (!assistantGroups[assistantId].users[userId]) {
+                    assistantGroups[assistantId].users[userId] = 0;
+                }
+                
+                assistantGroups[assistantId].users[userId]++;
+                assistantGroups[assistantId].totalCount++;
+            });
+            
+            return assistantGroups;
+        }
+        
+        // Initialize time filter buttons
+        function initializeTimeFilter(data) {
+            const timeFilterButtons = document.querySelectorAll('#timeFilter button');
+            
+            timeFilterButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    // Update active button
+                    timeFilterButtons.forEach(btn => btn.classList.remove('active'));
+                    button.classList.add('active');
+                    
+                    // Get the day filter value
+                    const days = button.getAttribute('data-days');
+                    
+                    // Update chart
+                    createUsageChart(data, days === 'all' ? null : parseInt(days));
+                });
+            });
+        }
+        
+        // Create usage chart
+        function createUsageChart(data, days) {
+            // Show chart container
+            document.getElementById('usage-chart-container').style.display = 'block';
+            
+            // Filter data based on days
+            const filteredData = filterDataByDays(data, days);
+            
+            // Process data for the chart
+            const { labels, datasets } = processDataForChart(filteredData);
+            
+            // Create or update chart
+            if (usageChart) {
+                usageChart.data.labels = labels;
+                usageChart.data.datasets = datasets;
+                usageChart.update();
+            } else {
+                const ctx = document.getElementById('usageChart').getContext('2d');
+                usageChart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: datasets
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            title: {
+                                display: false
+                            },
+                            legend: {
+                                position: 'top',
+                            }
+                        },
+                        scales: {
+                            x: {
+                                grid: {
+                                    display: false
+                                }
+                            },
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    precision: 0,
+                                    stepSize: 1
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+        
+        // Filter data by time range
+        function filterDataByDays(data, days) {
+            if (!days) return data; // Return all data if no day filter
+            
+            const now = new Date();
+            const cutoffDate = new Date(now);
+            cutoffDate.setDate(cutoffDate.getDate() - days);
+            
+            return data.filter(item => {
+                if (!item.data || !item.data.StartTime) return false;
+                const startTime = new Date(item.data.StartTime);
+                return startTime >= cutoffDate;
+            });
+        }
+        
+        // Process data for chart
+        function processDataForChart(data) {
+            // Get date range
+            const groupedByDate = {};
+            const groupedByAssistant = {};
+            const assistantColors = {};
+            const colorPalette = [
+                '#4285F4', '#EA4335', '#FBBC05', '#34A853', 
+                '#673AB7', '#FF9800', '#00BCD4', '#795548',
+                '#9C27B0', '#607D8B', '#3F51B5', '#CDDC39'
+            ];
+            
+            // Group data by date and assistant
+            data.forEach(item => {
+                if (!item.data || !item.data.StartTime) return;
+                
+                const date = new Date(item.data.StartTime);
+                const dateStr = date.toISOString().split('T')[0]; // YYYY-MM-DD
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                
+                // Track for this date
+                if (!groupedByDate[dateStr]) {
+                    groupedByDate[dateStr] = {};
+                }
+                if (!groupedByDate[dateStr][assistantId]) {
+                    groupedByDate[dateStr][assistantId] = 0;
+                }
+                groupedByDate[dateStr][assistantId]++;
+                
+                // Track assistants
+                if (!groupedByAssistant[assistantId]) {
+                    groupedByAssistant[assistantId] = 0;
+                    // Assign color
+                    const colorIndex = Object.keys(groupedByAssistant).length - 1;
+                    assistantColors[assistantId] = colorPalette[colorIndex % colorPalette.length];
+                }
+                groupedByAssistant[assistantId]++;
+            });
+            
+            // Sort dates
+            const sortedDates = Object.keys(groupedByDate).sort();
+            
+            // Create datasets for each assistant
+            const datasets = [];
+            
+            for (const assistantId in groupedByAssistant) {
+                // Get assistant name for label if available
+                const assistantName = assistantNames[assistantId] || assistantId;
+                
+                const dataset = {
+                    label: assistantName,
+                    data: [],
+                    borderColor: assistantColors[assistantId],
+                    backgroundColor: assistantColors[assistantId] + '20', // Add transparency
+                    tension: 0.3,
+                    fill: true
+                };
+                
+                // Add data for each date
+                for (const date of sortedDates) {
+                    dataset.data.push(groupedByDate[date][assistantId] || 0);
+                }
+                
+                datasets.push(dataset);
+            }
+            
+            return {
+                labels: sortedDates,
+                datasets: datasets
+            };
+        }
+        
+        function displayPivotTable(pivotData) {
+            const resultsDiv = document.getElementById('results');
+            
+            // Create the table
+            const table = document.createElement('table');
+            const thead = document.createElement('thead');
+            const tbody = document.createElement('tbody');
+            
+            // Create header row
+            const headerRow = document.createElement('tr');
+            const headers = ['Assistant', 'User ID', 'Conversation Count'];
+            
+            headers.forEach(headerText => {
+                const header = document.createElement('th');
+                header.textContent = headerText;
+                headerRow.appendChild(header);
+            });
+            
+            thead.appendChild(headerRow);
+            table.appendChild(thead);
+            
+            // Create table body
+            for (const assistantId in pivotData) {
+                const assistantData = pivotData[assistantId];
+                let firstRow = true;
+                
+                for (const userId in assistantData.users) {
+                    const row = document.createElement('tr');
+                    
+                    // Assistant column (ID and Name, only show in first row of group)
+                    const assistantCell = document.createElement('td');
+                    
+                    if (firstRow) {
+                        // Get assistant name if available
+                        const assistantName = assistantNames[assistantId] || null;
+                        
+                        if (assistantName) {
+                            // If we have a name, show "Name (ID)"
+                            assistantCell.textContent = `${assistantName} (${assistantId})`;
+                            
+                            // Add title attribute for hover tooltip with full ID
+                            assistantCell.title = assistantId;
+                        } else {
+                            // If no name, just show ID
+                            assistantCell.textContent = assistantId;
+                        }
+                        
+                        assistantCell.style.fontWeight = 'bold';
+                    } else {
+                        assistantCell.textContent = '';
+                    }
+                    
+                    row.appendChild(assistantCell);
+                    
+                    // User ID column
+                    const userCell = document.createElement('td');
+                    userCell.textContent = userId;
+                    row.appendChild(userCell);
+                    
+                    // Count column
+                    const countCell = document.createElement('td');
+                    countCell.textContent = assistantData.users[userId];
+                    row.appendChild(countCell);
+                    
+                    tbody.appendChild(row);
+                    firstRow = false;
+                }
+                
+                // Add a total row for this assistant
+                const totalRow = document.createElement('tr');
+                
+                const totalLabelCell = document.createElement('td');
+                totalLabelCell.textContent = '';
+                totalRow.appendChild(totalLabelCell);
+                
+                const totalUserCell = document.createElement('td');
+                totalUserCell.textContent = 'Total';
+                totalUserCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalUserCell);
+                
+                const totalCountCell = document.createElement('td');
+                totalCountCell.textContent = assistantData.totalCount;
+                totalCountCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalCountCell);
+                
+                tbody.appendChild(totalRow);
+                
+                // Add an empty row as a separator
+                const spacerRow = document.createElement('tr');
+                const spacerCell = document.createElement('td');
+                spacerCell.setAttribute('colspan', '3');
+                spacerCell.style.height = '4px';
+                spacerRow.appendChild(spacerCell);
+                tbody.appendChild(spacerRow);
+            }
+            
+            // Add grand total row
+            const grandTotalRow = document.createElement('tr');
+            
+            // Create grand total cells
+            const grandTotalLabelCell = document.createElement('td');
+            grandTotalLabelCell.textContent = 'GRAND TOTAL';
+            grandTotalLabelCell.style.fontWeight = 'bold';
+            grandTotalLabelCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalLabelCell);
+            
+            const grandTotalBlankCell = document.createElement('td');
+            grandTotalRow.appendChild(grandTotalBlankCell);
+            
+            // Calculate grand total
+            let grandTotal = 0;
+            for (const assistantId in pivotData) {
+                grandTotal += pivotData[assistantId].totalCount;
+            }
+            
+            const grandTotalCountCell = document.createElement('td');
+            grandTotalCountCell.textContent = grandTotal;
+            grandTotalCountCell.style.fontWeight = 'bold';
+            grandTotalCountCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalCountCell);
+            
+            tbody.appendChild(grandTotalRow);
+            
+            table.appendChild(tbody);
+            resultsDiv.appendChild(table);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Versions/V0.1/index.html b/Versions/V0.1/index.html
new file mode 100644
index 0000000..d24f9a1
--- /dev/null
+++ b/Versions/V0.1/index.html
@@ -0,0 +1,151 @@
+<!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="llm_report.html" class="btn">Open Report</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Versions/index-Latam.html.zip b/Versions/index-Latam.html.zip
new file mode 100644
index 0000000..807c5fb
Binary files /dev/null and b/Versions/index-Latam.html.zip differ
diff --git a/Versions/index-SBII.html.zip b/Versions/index-SBII.html.zip
new file mode 100644
index 0000000..6cc08c1
Binary files /dev/null and b/Versions/index-SBII.html.zip differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..f9013af
Binary files /dev/null and b/favicon.ico differ
diff --git a/index-Latam.html b/index-Latam.html
new file mode 100644
index 0000000..d1fe835
--- /dev/null
+++ b/index-Latam.html
@@ -0,0 +1,1195 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conversation Reporting Tool</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 22px;
+        }
+        .controls {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+            align-items: center;
+            justify-content: center;
+        }
+        select {
+            padding: 10px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #4285f4;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+            font-weight: 500;
+        }
+        button:hover {
+            background-color: #3367d6;
+        }
+        .loading {
+            text-align: center;
+            display: none;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 2s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .results {
+            margin-top: 15px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+        th, td {
+            padding: 6px 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+            line-height: 1.3;
+        }
+        th {
+            background-color: #f8f9fa;
+            font-weight: 600;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .error {
+            color: red;
+            text-align: center;
+            margin-top: 20px;
+            font-weight: 500;
+        }
+        .export-btn {
+            margin-top: 15px;
+            display: flex;
+            justify-content: flex-end;
+        }
+        .export-btn button {
+            padding: 6px 12px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .export-btn button:hover {
+            background-color: #45a049;
+        }
+        .export-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+        .time-filter {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .time-filter button {
+            padding: 6px 12px;
+            background-color: #f0f0f0;
+            color: #333;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            font-weight: 500;
+        }
+        .time-filter button.active {
+            background-color: #4285f4;
+            color: white;
+            border-color: #4285f4;
+        }
+        .time-filter button:hover:not(.active) {
+            background-color: #e0e0e0;
+        }
+        .view-toggle {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .view-toggle button {
+            padding: 6px 12px;
+            background-color: #f0f0f0;
+            color: #333;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            font-weight: 500;
+        }
+        .view-toggle button.active {
+            background-color: #4285f4;
+            color: white;
+            border-color: #4285f4;
+        }
+        .view-toggle button:hover:not(.active) {
+            background-color: #e0e0e0;
+        }
+        .chart-container {
+            margin-top: 30px;
+            margin-bottom: 30px;
+            height: 300px;
+            width: 100%;
+        }
+        .panel {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            padding: 15px;
+            margin-bottom: 15px;
+        }
+        .panel-title {
+            margin-top: 0;
+            margin-bottom: 15px;
+            font-size: 16px;
+            color: #333;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Conversation Reporting Tool</h1>
+        
+        <div class="controls">
+            <select id="optionSelect">
+                <option value="itau2-Conversations">itau2-Conversations</option>
+                <option value="Oliver Latam-Conversations">Oliver Latam-Conversations</option>
+                <option value="Ancar-Conversations">Ancar-Conversations</option>
+            </select>
+            <button id="sendButton">Send Request</button>
+            <div id="exportContainer" class="export-btn" style="display: none;">
+                <button id="exportCsvButton">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>
+                    Export CSV
+                </button>
+            </div>
+        </div>
+        
+        <div class="view-toggle" id="viewToggle" style="display: none;">
+            <button data-view="conversations" class="active">Conversations</button>
+            <button data-view="users">Unique Users</button>
+        </div>
+        
+        <div class="time-filter" id="timeFilter" style="display: none;">
+            <button data-days="1" class="active">Today</button>
+            <button data-days="7">Last 7 Days</button>
+            <button data-days="30">Last 30 Days</button>
+            <button data-days="90">Last 3 Months</button>
+            <button data-days="all">All Time</button>
+        </div>
+        
+        <div id="loading" class="loading">
+            <div class="loader"></div>
+            <p>Loading data, please wait...</p>
+        </div>
+        
+        <div id="error" class="error"></div>
+        
+        <div id="usage-chart-container" class="chart-container panel" style="display: none;">
+            <h3 class="panel-title">Conversation Usage Over Time</h3>
+            <canvas id="usageChart"></canvas>
+        </div>
+        
+        <div id="users-chart-container" class="chart-container panel" style="display: none;">
+            <h3 class="panel-title">Unique Users Over Time</h3>
+            <canvas id="usersChart"></canvas>
+        </div>
+        
+        <div id="results" class="results">
+            <!-- Results will be dynamically inserted here -->
+        </div>
+    </div>
+    
+    <script>
+        // Global variables
+        let currentData = [];
+        let assistantData = [];
+        let usageChart = null;
+        let usersChart = null;
+        let currentView = 'conversations'; // Default view
+        
+        // Map to store assistant IDs to names
+        let assistantNames = {};
+        
+        // CSV Export functionality
+        document.getElementById('exportCsvButton').addEventListener('click', () => {
+            exportToCSV(currentData);
+        });
+        
+        function exportToCSV(data) {
+            // Define columns for the CSV
+            const columns = [
+                'User ID', 'Start Time', 'Brand Voice Setting', 'Title', 
+                'End Time', 'Assistant ID', 'Assistant Name', 'Assistant Key', 'Conversation ID',
+                'Vision Images'
+            ];
+            
+            // Create CSV header row
+            let csvContent = columns.join(',') + '\n';
+            
+            // Add data rows
+            data.forEach(item => {
+                if (!item.data || Object.keys(item.data).length === 0) return;
+                
+                const d = item.data;
+                const assistantId = d.Assistant_ID || '';
+                const assistantName = assistantNames[assistantId] || '';
+                
+                const row = [
+                    d.User_ID ? `"${d.User_ID}"` : '',
+                    d.StartTime ? `"${d.StartTime}"` : '',
+                    d['Brand Voice Setting'] ? `"${d['Brand Voice Setting'].replace(/"/g, '""')}"` : '',
+                    d.Title ? `"${d.Title.replace(/"/g, '""')}"` : '',
+                    d.EndTime ? `"${d.EndTime}"` : '',
+                    assistantId ? `"${assistantId}"` : '',
+                    assistantName ? `"${assistantName.replace(/"/g, '""')}"` : '',
+                    d.Assistant_Key ? `"${d.Assistant_Key}"` : '',
+                    d.Conversation_ID ? `"${d.Conversation_ID}"` : '',
+                    d.Vision_Images ? `"${d.Vision_Images}"` : ''
+                ];
+                
+                csvContent += row.join(',') + '\n';
+            });
+            
+            // Create a download link
+            const encodedUri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
+            const link = document.createElement('a');
+            link.setAttribute('href', encodedUri);
+            link.setAttribute('download', `latam-conversations-${new Date().toISOString().split('T')[0]}.csv`);
+            document.body.appendChild(link);
+            
+            // Trigger download and remove link
+            link.click();
+            document.body.removeChild(link);
+        }
+        
+        // Function to fetch assistant data
+        async function fetchAssistantData(option) {
+            try {
+                const response = await fetch('https://hook.us1.make.celonis.com/g2199hlyi5bn0ggve51xeda5d51o3tpi', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        option: option, // Pass the selected option to get the right assistants DB
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error fetching assistant data! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data;
+            } catch (error) {
+                console.error('Error fetching assistant data:', error);
+                return [];
+            }
+        }
+        
+        // Build assistant name mapping
+        function buildAssistantMapping(data) {
+            const mapping = {};
+            
+            data.forEach(item => {
+                if (item.data && item.data['Assistant ID'] && item.data['Name']) {
+                    mapping[item.data['Assistant ID']] = item.data['Name'];
+                }
+            });
+            
+            return mapping;
+        }
+
+        // Initialize view toggle buttons
+        function initializeViewToggle() {
+            const viewToggleButtons = document.querySelectorAll('#viewToggle button');
+            
+            viewToggleButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    // Update active button
+                    viewToggleButtons.forEach(btn => btn.classList.remove('active'));
+                    button.classList.add('active');
+                    
+                    // Get the view type
+                    const view = button.getAttribute('data-view');
+                    currentView = view;
+                    
+                    // Toggle chart and result displays based on view
+                    updateViewDisplay();
+                    
+                    // Get the current time filter
+                    const activeTimeFilter = document.querySelector('#timeFilter button.active');
+                    const days = activeTimeFilter ? activeTimeFilter.getAttribute('data-days') : '1';
+                    
+                    // Update display based on selected view
+                    if (view === 'conversations') {
+                        createUsageChart(currentData, days === 'all' ? null : parseInt(days));
+                        const pivotData = processPivotData(currentData);
+                        displayPivotTable(pivotData);
+                    } else if (view === 'users') {
+                        createUsersChart(currentData, days === 'all' ? null : parseInt(days));
+                        const uniqueUsersData = processUniqueUsersData(currentData);
+                        displayUniqueUsersTable(uniqueUsersData);
+                    }
+                });
+            });
+        }
+        
+        // Toggle display based on current view
+        function updateViewDisplay() {
+            if (currentView === 'conversations') {
+                document.getElementById('usage-chart-container').style.display = 'block';
+                document.getElementById('users-chart-container').style.display = 'none';
+            } else if (currentView === 'users') {
+                document.getElementById('usage-chart-container').style.display = 'none';
+                document.getElementById('users-chart-container').style.display = 'block';
+            }
+        }
+        
+        // Process data for unique users view
+        function processUniqueUsersData(data) {
+            // Group users by Assistant_ID
+            const assistantGroups = {};
+            
+            data.forEach(item => {
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                const userId = item.data.User_ID || 'Unknown';
+                
+                if (!assistantGroups[assistantId]) {
+                    assistantGroups[assistantId] = {
+                        uniqueUsers: new Set(),
+                        userDetails: {}
+                    };
+                }
+                
+                assistantGroups[assistantId].uniqueUsers.add(userId);
+                
+                if (!assistantGroups[assistantId].userDetails[userId]) {
+                    assistantGroups[assistantId].userDetails[userId] = {
+                        conversationCount: 0,
+                        firstSeen: item.data.StartTime || null,
+                        lastSeen: item.data.StartTime || null
+                    };
+                } else {
+                    // Update last seen if current date is newer
+                    const currentStartTime = new Date(item.data.StartTime || 0);
+                    const lastSeen = new Date(assistantGroups[assistantId].userDetails[userId].lastSeen || 0);
+                    
+                    if (currentStartTime > lastSeen) {
+                        assistantGroups[assistantId].userDetails[userId].lastSeen = item.data.StartTime;
+                    }
+                    
+                    // Update first seen if current date is older
+                    const firstSeen = new Date(assistantGroups[assistantId].userDetails[userId].firstSeen || Infinity);
+                    
+                    if (currentStartTime < firstSeen) {
+                        assistantGroups[assistantId].userDetails[userId].firstSeen = item.data.StartTime;
+                    }
+                }
+                
+                assistantGroups[assistantId].userDetails[userId].conversationCount++;
+            });
+            
+            return assistantGroups;
+        }
+        
+        // Create unique users chart
+        function createUsersChart(data, days) {
+            // Show chart container
+            document.getElementById('users-chart-container').style.display = 'block';
+            
+            // Filter data based on days
+            const filteredData = filterDataByDays(data, days);
+            
+            // Process data for the chart
+            const { labels, datasets } = processUsersDataForChart(filteredData);
+            
+            // Create or update chart
+            if (usersChart) {
+                usersChart.data.labels = labels;
+                usersChart.data.datasets = datasets;
+                usersChart.update();
+            } else {
+                const ctx = document.getElementById('usersChart').getContext('2d');
+                usersChart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: datasets
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            title: {
+                                display: false
+                            },
+                            legend: {
+                                position: 'top',
+                            }
+                        },
+                        scales: {
+                            x: {
+                                grid: {
+                                    display: false
+                                }
+                            },
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    precision: 0,
+                                    stepSize: 1
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+        
+        // Process data for users chart
+        function processUsersDataForChart(data) {
+            // Get date range
+            const groupedByDate = {};
+            const groupedByAssistant = {};
+            const assistantColors = {};
+            const colorPalette = [
+                '#4285F4', '#EA4335', '#FBBC05', '#34A853', 
+                '#673AB7', '#FF9800', '#00BCD4', '#795548',
+                '#9C27B0', '#607D8B', '#3F51B5', '#CDDC39'
+            ];
+            
+            // Track unique users by date and assistant
+            data.forEach(item => {
+                if (!item.data || !item.data.StartTime || !item.data.User_ID) return;
+                
+                const date = new Date(item.data.StartTime);
+                const dateStr = date.toISOString().split('T')[0]; // YYYY-MM-DD
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                const userId = item.data.User_ID;
+                
+                // Initialize for this date
+                if (!groupedByDate[dateStr]) {
+                    groupedByDate[dateStr] = {};
+                }
+                if (!groupedByDate[dateStr][assistantId]) {
+                    groupedByDate[dateStr][assistantId] = new Set();
+                }
+                
+                // Add user to set of unique users for this date and assistant
+                groupedByDate[dateStr][assistantId].add(userId);
+                
+                // Track assistants
+                if (!groupedByAssistant[assistantId]) {
+                    groupedByAssistant[assistantId] = new Set();
+                    // Assign color
+                    const colorIndex = Object.keys(groupedByAssistant).length - 1;
+                    assistantColors[assistantId] = colorPalette[colorIndex % colorPalette.length];
+                }
+                groupedByAssistant[assistantId].add(userId);
+            });
+            
+            // Sort dates
+            const sortedDates = Object.keys(groupedByDate).sort();
+            
+            // Create datasets for each assistant
+            const datasets = [];
+            
+            for (const assistantId in groupedByAssistant) {
+                // Get assistant name for label if available
+                const assistantName = assistantNames[assistantId] || assistantId;
+                
+                const dataset = {
+                    label: assistantName,
+                    data: [],
+                    borderColor: assistantColors[assistantId],
+                    backgroundColor: assistantColors[assistantId] + '20', // Add transparency
+                    tension: 0.3,
+                    fill: true
+                };
+                
+                // Add data for each date - count of unique users
+                for (const date of sortedDates) {
+                    const userCount = groupedByDate[date][assistantId] ? 
+                                      groupedByDate[date][assistantId].size : 0;
+                    dataset.data.push(userCount);
+                }
+                
+                datasets.push(dataset);
+            }
+            
+            return {
+                labels: sortedDates,
+                datasets: datasets
+            };
+        }
+        
+        // Display unique users table
+        function displayUniqueUsersTable(usersData) {
+            const resultsDiv = document.getElementById('results');
+            resultsDiv.innerHTML = ''; // Clear previous results
+            
+            // Create the table
+            const table = document.createElement('table');
+            const thead = document.createElement('thead');
+            const tbody = document.createElement('tbody');
+            
+            // Create header row
+            const headerRow = document.createElement('tr');
+            const headers = ['Assistant', 'Unique Users', 'Most Active User', 'Conversations/User (Avg)'];
+            
+            headers.forEach(headerText => {
+                const header = document.createElement('th');
+                header.textContent = headerText;
+                headerRow.appendChild(header);
+            });
+            
+            thead.appendChild(headerRow);
+            table.appendChild(thead);
+            
+            // Create table body - one row per assistant
+            let totalUniqueUsers = 0;
+            let allUsers = new Set();
+            
+            for (const assistantId in usersData) {
+                const row = document.createElement('tr');
+                const assistantData = usersData[assistantId];
+                const uniqueUserCount = assistantData.uniqueUsers.size;
+                totalUniqueUsers += uniqueUserCount;
+                
+                // Add all users to the global set for deduplication
+                assistantData.uniqueUsers.forEach(userId => allUsers.add(userId));
+                
+                // Assistant name column
+                const assistantCell = document.createElement('td');
+                const assistantName = assistantNames[assistantId] || null;
+                
+                if (assistantName) {
+                    assistantCell.textContent = `${assistantName} (${assistantId})`;
+                    assistantCell.title = assistantId;
+                } else {
+                    assistantCell.textContent = assistantId;
+                }
+                assistantCell.style.fontWeight = 'bold';
+                row.appendChild(assistantCell);
+                
+                // Unique user count column
+                const userCountCell = document.createElement('td');
+                userCountCell.textContent = uniqueUserCount;
+                row.appendChild(userCountCell);
+                
+                // Find most active user
+                let mostActiveUser = { id: null, count: 0 };
+                for (const userId in assistantData.userDetails) {
+                    const userDetails = assistantData.userDetails[userId];
+                    if (userDetails.conversationCount > mostActiveUser.count) {
+                        mostActiveUser = { 
+                            id: userId, 
+                            count: userDetails.conversationCount 
+                        };
+                    }
+                }
+                
+                // Most active user column
+                const mostActiveCell = document.createElement('td');
+                if (mostActiveUser.id) {
+                    mostActiveCell.textContent = `${mostActiveUser.id} (${mostActiveUser.count} conversations)`;
+                } else {
+                    mostActiveCell.textContent = 'N/A';
+                }
+                row.appendChild(mostActiveCell);
+                
+                // Average conversations per user
+                const avgCell = document.createElement('td');
+                let totalConversations = 0;
+                for (const userId in assistantData.userDetails) {
+                    totalConversations += assistantData.userDetails[userId].conversationCount;
+                }
+                const average = uniqueUserCount > 0 ? (totalConversations / uniqueUserCount).toFixed(1) : 0;
+                avgCell.textContent = average;
+                row.appendChild(avgCell);
+                
+                tbody.appendChild(row);
+            }
+            
+            // Add grand total row
+            const grandTotalRow = document.createElement('tr');
+            
+            const grandTotalLabelCell = document.createElement('td');
+            grandTotalLabelCell.textContent = 'GRAND TOTAL';
+            grandTotalLabelCell.style.fontWeight = 'bold';
+            grandTotalLabelCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalLabelCell);
+            
+            const grandTotalUsersCell = document.createElement('td');
+            grandTotalUsersCell.textContent = allUsers.size; // Deduplicated count across all assistants
+            grandTotalUsersCell.style.fontWeight = 'bold';
+            grandTotalUsersCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalUsersCell);
+            
+            // Fill remaining cells for formatting
+            const emptyCell1 = document.createElement('td');
+            grandTotalRow.appendChild(emptyCell1);
+            
+            const emptyCell2 = document.createElement('td');
+            grandTotalRow.appendChild(emptyCell2);
+            
+            tbody.appendChild(grandTotalRow);
+            
+            table.appendChild(tbody);
+            resultsDiv.appendChild(table);
+            
+            // Add user details expansion section
+            const detailsContainer = document.createElement('div');
+            detailsContainer.className = 'user-details-container';
+            detailsContainer.style.marginTop = '30px';
+            
+            const detailsTitle = document.createElement('h3');
+            detailsTitle.textContent = 'Detailed User List';
+            detailsTitle.className = 'panel-title';
+            detailsContainer.appendChild(detailsTitle);
+            
+            // Create detailed users table
+            const detailsTable = document.createElement('table');
+            const detailsThead = document.createElement('thead');
+            const detailsTbody = document.createElement('tbody');
+            
+            // Create header row for details
+            const detailsHeaderRow = document.createElement('tr');
+            const detailsHeaders = ['User ID', 'Assistant Used', 'Conversations', 'First Seen', 'Last Seen'];
+            
+            detailsHeaders.forEach(headerText => {
+                const header = document.createElement('th');
+                header.textContent = headerText;
+                detailsHeaderRow.appendChild(header);
+            });
+            
+            detailsThead.appendChild(detailsHeaderRow);
+            detailsTable.appendChild(detailsThead);
+            
+            // Collect all user details across assistants
+            const allUserDetails = [];
+            for (const assistantId in usersData) {
+                const assistantData = usersData[assistantId];
+                const assistantName = assistantNames[assistantId] || assistantId;
+                
+                for (const userId in assistantData.userDetails) {
+                    const userDetail = assistantData.userDetails[userId];
+                    allUserDetails.push({
+                        userId: userId,
+                        assistantId: assistantId,
+                        assistantName: assistantName,
+                        conversationCount: userDetail.conversationCount,
+                        firstSeen: userDetail.firstSeen,
+                        lastSeen: userDetail.lastSeen
+                    });
+                }
+            }
+            
+            // Sort by conversation count (descending)
+            allUserDetails.sort((a, b) => b.conversationCount - a.conversationCount);
+            
+            // Add rows for each user
+            allUserDetails.forEach(detail => {
+                const row = document.createElement('tr');
+                
+                // User ID
+                const userCell = document.createElement('td');
+                userCell.textContent = detail.userId;
+                userCell.style.fontWeight = 'bold';
+                row.appendChild(userCell);
+                
+                // Assistant Used
+                const assistantCell = document.createElement('td');
+                assistantCell.textContent = detail.assistantName;
+                assistantCell.title = detail.assistantId;
+                row.appendChild(assistantCell);
+                
+                // Conversation Count
+                const countCell = document.createElement('td');
+                countCell.textContent = detail.conversationCount;
+                row.appendChild(countCell);
+                
+                // First Seen
+                const firstSeenCell = document.createElement('td');
+                if (detail.firstSeen) {
+                    const firstDate = new Date(detail.firstSeen);
+                    firstSeenCell.textContent = firstDate.toLocaleDateString();
+                } else {
+                    firstSeenCell.textContent = 'N/A';
+                }
+                row.appendChild(firstSeenCell);
+                
+                // Last Seen
+                const lastSeenCell = document.createElement('td');
+                if (detail.lastSeen) {
+                    const lastDate = new Date(detail.lastSeen);
+                    lastSeenCell.textContent = lastDate.toLocaleDateString();
+                } else {
+                    lastSeenCell.textContent = 'N/A';
+                }
+                row.appendChild(lastSeenCell);
+                
+                detailsTbody.appendChild(row);
+            });
+            
+            detailsTable.appendChild(detailsTbody);
+            detailsContainer.appendChild(detailsTable);
+            resultsDiv.appendChild(detailsContainer);
+        }
+
+        document.getElementById('sendButton').addEventListener('click', async () => {
+            const selectedOption = document.getElementById('optionSelect').value;
+            const loadingDiv = document.getElementById('loading');
+            const errorDiv = document.getElementById('error');
+            const resultsDiv = document.getElementById('results');
+            
+            // Clear previous results
+            errorDiv.textContent = '';
+            resultsDiv.innerHTML = '';
+            loadingDiv.style.display = 'block';
+            
+            try {
+                // First, fetch assistant data in parallel with conversation data
+                // Pass the selected option to get the correct assistant database
+                const assistantDataPromise = fetchAssistantData(selectedOption);
+                
+                // Fetch conversation data
+                const response = await fetch('https://hook.us1.make.celonis.com/6arvs3ebpel494664x7xl4if9az91oh2', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        option: selectedOption,
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                
+                // Wait for assistant data and build mapping
+                assistantData = await assistantDataPromise;
+                assistantNames = buildAssistantMapping(assistantData);
+                
+                // Store the data globally for CSV export
+                currentData = data;
+                
+                // Show export button, time filter, and view toggle
+                document.getElementById('exportContainer').style.display = 'block';
+                document.getElementById('timeFilter').style.display = 'flex';
+                document.getElementById('viewToggle').style.display = 'flex';
+                
+                // Initialize view toggle
+                initializeViewToggle();
+                
+                // Initialize the time filter
+                initializeTimeFilter(data);
+                
+                // Set default view
+                currentView = 'conversations';
+                updateViewDisplay();
+                
+                // Create default charts and tables
+                createUsageChart(data, 1); // Default to showing 1 day (today)
+                const pivotData = processPivotData(data);
+                displayPivotTable(pivotData);
+                
+            } catch (error) {
+                errorDiv.textContent = `Error: ${error.message}`;
+                console.error('Error:', error);
+                document.getElementById('exportContainer').style.display = 'none';
+                document.getElementById('timeFilter').style.display = 'none';
+                document.getElementById('viewToggle').style.display = 'none';
+                document.getElementById('usage-chart-container').style.display = 'none';
+                document.getElementById('users-chart-container').style.display = 'none';
+            } finally {
+                loadingDiv.style.display = 'none';
+            }
+        });
+        
+        function processPivotData(data) {
+            // Group conversations by Assistant_ID
+            const assistantGroups = {};
+            
+            data.forEach(item => {
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                const userId = item.data.User_ID || 'Unknown';
+                
+                if (!assistantGroups[assistantId]) {
+                    assistantGroups[assistantId] = {
+                        users: {},
+                        totalCount: 0
+                    };
+                }
+                
+                if (!assistantGroups[assistantId].users[userId]) {
+                    assistantGroups[assistantId].users[userId] = 0;
+                }
+                
+                assistantGroups[assistantId].users[userId]++;
+                assistantGroups[assistantId].totalCount++;
+            });
+            
+            return assistantGroups;
+        }
+        
+        // Initialize time filter buttons
+        function initializeTimeFilter(data) {
+            const timeFilterButtons = document.querySelectorAll('#timeFilter button');
+            
+            timeFilterButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    // Update active button
+                    timeFilterButtons.forEach(btn => btn.classList.remove('active'));
+                    button.classList.add('active');
+                    
+                    // Get the day filter value
+                    const days = button.getAttribute('data-days');
+                    
+                    // Update charts and tables based on current view
+                    if (currentView === 'conversations') {
+                        createUsageChart(data, days === 'all' ? null : parseInt(days));
+                        const pivotData = processPivotData(data);
+                        displayPivotTable(pivotData);
+                    } else if (currentView === 'users') {
+                        createUsersChart(data, days === 'all' ? null : parseInt(days));
+                        const uniqueUsersData = processUniqueUsersData(data);
+                        displayUniqueUsersTable(uniqueUsersData);
+                    }
+                });
+            });
+        }
+        
+        // Create usage chart
+        function createUsageChart(data, days) {
+            // Show chart container
+            document.getElementById('usage-chart-container').style.display = 'block';
+            
+            // Filter data based on days
+            const filteredData = filterDataByDays(data, days);
+            
+            // Process data for the chart
+            const { labels, datasets } = processDataForChart(filteredData);
+            
+            // Create or update chart
+            if (usageChart) {
+                usageChart.data.labels = labels;
+                usageChart.data.datasets = datasets;
+                usageChart.update();
+            } else {
+                const ctx = document.getElementById('usageChart').getContext('2d');
+                usageChart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: datasets
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            title: {
+                                display: false
+                            },
+                            legend: {
+                                position: 'top',
+                            }
+                        },
+                        scales: {
+                            x: {
+                                grid: {
+                                    display: false
+                                }
+                            },
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    precision: 0,
+                                    stepSize: 1
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+        
+        // Filter data by time range
+        function filterDataByDays(data, days) {
+            if (!days) return data; // Return all data if no day filter
+            
+            const now = new Date();
+            const cutoffDate = new Date(now);
+            cutoffDate.setDate(cutoffDate.getDate() - days);
+            
+            return data.filter(item => {
+                if (!item.data || !item.data.StartTime) return false;
+                const startTime = new Date(item.data.StartTime);
+                return startTime >= cutoffDate;
+            });
+        }
+        
+        // Process data for chart
+        function processDataForChart(data) {
+            // Get date range
+            const groupedByDate = {};
+            const groupedByAssistant = {};
+            const assistantColors = {};
+            const colorPalette = [
+                '#4285F4', '#EA4335', '#FBBC05', '#34A853', 
+                '#673AB7', '#FF9800', '#00BCD4', '#795548',
+                '#9C27B0', '#607D8B', '#3F51B5', '#CDDC39'
+            ];
+            
+            // Group data by date and assistant
+            data.forEach(item => {
+                if (!item.data || !item.data.StartTime) return;
+                
+                const date = new Date(item.data.StartTime);
+                const dateStr = date.toISOString().split('T')[0]; // YYYY-MM-DD
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                
+                // Track for this date
+                if (!groupedByDate[dateStr]) {
+                    groupedByDate[dateStr] = {};
+                }
+                if (!groupedByDate[dateStr][assistantId]) {
+                    groupedByDate[dateStr][assistantId] = 0;
+                }
+                groupedByDate[dateStr][assistantId]++;
+                
+                // Track assistants
+                if (!groupedByAssistant[assistantId]) {
+                    groupedByAssistant[assistantId] = 0;
+                    // Assign color
+                    const colorIndex = Object.keys(groupedByAssistant).length - 1;
+                    assistantColors[assistantId] = colorPalette[colorIndex % colorPalette.length];
+                }
+                groupedByAssistant[assistantId]++;
+            });
+            
+            // Sort dates
+            const sortedDates = Object.keys(groupedByDate).sort();
+            
+            // Create datasets for each assistant
+            const datasets = [];
+            
+            for (const assistantId in groupedByAssistant) {
+                // Get assistant name for label if available
+                const assistantName = assistantNames[assistantId] || assistantId;
+                
+                const dataset = {
+                    label: assistantName,
+                    data: [],
+                    borderColor: assistantColors[assistantId],
+                    backgroundColor: assistantColors[assistantId] + '20', // Add transparency
+                    tension: 0.3,
+                    fill: true
+                };
+                
+                // Add data for each date
+                for (const date of sortedDates) {
+                    dataset.data.push(groupedByDate[date][assistantId] || 0);
+                }
+                
+                datasets.push(dataset);
+            }
+            
+            return {
+                labels: sortedDates,
+                datasets: datasets
+            };
+        }
+        
+        function displayPivotTable(pivotData) {
+            const resultsDiv = document.getElementById('results');
+            
+            // Create the table
+            const table = document.createElement('table');
+            const thead = document.createElement('thead');
+            const tbody = document.createElement('tbody');
+            
+            // Create header row
+            const headerRow = document.createElement('tr');
+            const headers = ['Assistant', 'User ID', 'Conversation Count'];
+            
+            headers.forEach(headerText => {
+                const header = document.createElement('th');
+                header.textContent = headerText;
+                headerRow.appendChild(header);
+            });
+            
+            thead.appendChild(headerRow);
+            table.appendChild(thead);
+            
+            // Create table body
+            for (const assistantId in pivotData) {
+                const assistantData = pivotData[assistantId];
+                let firstRow = true;
+                
+                for (const userId in assistantData.users) {
+                    const row = document.createElement('tr');
+                    
+                    // Assistant column (ID and Name, only show in first row of group)
+                    const assistantCell = document.createElement('td');
+                    
+                    if (firstRow) {
+                        // Get assistant name if available
+                        const assistantName = assistantNames[assistantId] || null;
+                        
+                        if (assistantName) {
+                            // If we have a name, show "Name (ID)"
+                            assistantCell.textContent = `${assistantName} (${assistantId})`;
+                            
+                            // Add title attribute for hover tooltip with full ID
+                            assistantCell.title = assistantId;
+                        } else {
+                            // If no name, just show ID
+                            assistantCell.textContent = assistantId;
+                        }
+                        
+                        assistantCell.style.fontWeight = 'bold';
+                    } else {
+                        assistantCell.textContent = '';
+                    }
+                    
+                    row.appendChild(assistantCell);
+                    
+                    // User ID column
+                    const userCell = document.createElement('td');
+                    userCell.textContent = userId;
+                    row.appendChild(userCell);
+                    
+                    // Count column
+                    const countCell = document.createElement('td');
+                    countCell.textContent = assistantData.users[userId];
+                    row.appendChild(countCell);
+                    
+                    tbody.appendChild(row);
+                    firstRow = false;
+                }
+                
+                // Add a total row for this assistant
+                const totalRow = document.createElement('tr');
+                
+                const totalLabelCell = document.createElement('td');
+                totalLabelCell.textContent = '';
+                totalRow.appendChild(totalLabelCell);
+                
+                const totalUserCell = document.createElement('td');
+                totalUserCell.textContent = 'Total';
+                totalUserCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalUserCell);
+                
+                const totalCountCell = document.createElement('td');
+                totalCountCell.textContent = assistantData.totalCount;
+                totalCountCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalCountCell);
+                
+                tbody.appendChild(totalRow);
+                
+                // Add an empty row as a separator
+                const spacerRow = document.createElement('tr');
+                const spacerCell = document.createElement('td');
+                spacerCell.setAttribute('colspan', '3');
+                spacerCell.style.height = '4px';
+                spacerRow.appendChild(spacerCell);
+                tbody.appendChild(spacerRow);
+            }
+            
+            // Add grand total row
+            const grandTotalRow = document.createElement('tr');
+            
+            // Create grand total cells
+            const grandTotalLabelCell = document.createElement('td');
+            grandTotalLabelCell.textContent = 'GRAND TOTAL';
+            grandTotalLabelCell.style.fontWeight = 'bold';
+            grandTotalLabelCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalLabelCell);
+            
+            const grandTotalBlankCell = document.createElement('td');
+            grandTotalRow.appendChild(grandTotalBlankCell);
+            
+            // Calculate grand total
+            let grandTotal = 0;
+            for (const assistantId in pivotData) {
+                grandTotal += pivotData[assistantId].totalCount;
+            }
+            
+            const grandTotalCountCell = document.createElement('td');
+            grandTotalCountCell.textContent = grandTotal;
+            grandTotalCountCell.style.fontWeight = 'bold';
+            grandTotalCountCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalCountCell);
+            
+            tbody.appendChild(grandTotalRow);
+            
+            table.appendChild(tbody);
+            resultsDiv.appendChild(table);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index-SBII.html b/index-SBII.html
new file mode 100644
index 0000000..3cc7dff
--- /dev/null
+++ b/index-SBII.html
@@ -0,0 +1,1191 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conversation Reporting Tool</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 22px;
+        }
+        .controls {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+            align-items: center;
+            justify-content: center;
+        }
+        select {
+            padding: 10px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #4285f4;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+            font-weight: 500;
+        }
+        button:hover {
+            background-color: #3367d6;
+        }
+        .loading {
+            text-align: center;
+            display: none;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 2s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .results {
+            margin-top: 15px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+        th, td {
+            padding: 6px 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+            line-height: 1.3;
+        }
+        th {
+            background-color: #f8f9fa;
+            font-weight: 600;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .error {
+            color: red;
+            text-align: center;
+            margin-top: 20px;
+            font-weight: 500;
+        }
+        .export-btn {
+            margin-top: 15px;
+            display: flex;
+            justify-content: flex-end;
+        }
+        .export-btn button {
+            padding: 6px 12px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .export-btn button:hover {
+            background-color: #45a049;
+        }
+        .export-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+        .time-filter {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .time-filter button {
+            padding: 6px 12px;
+            background-color: #f0f0f0;
+            color: #333;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            font-weight: 500;
+        }
+        .time-filter button.active {
+            background-color: #4285f4;
+            color: white;
+            border-color: #4285f4;
+        }
+        .time-filter button:hover:not(.active) {
+            background-color: #e0e0e0;
+        }
+        .view-toggle {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .view-toggle button {
+            padding: 6px 12px;
+            background-color: #f0f0f0;
+            color: #333;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            font-weight: 500;
+        }
+        .view-toggle button.active {
+            background-color: #4285f4;
+            color: white;
+            border-color: #4285f4;
+        }
+        .view-toggle button:hover:not(.active) {
+            background-color: #e0e0e0;
+        }
+        .chart-container {
+            margin-top: 30px;
+            margin-bottom: 30px;
+            height: 300px;
+            width: 100%;
+        }
+        .panel {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            padding: 15px;
+            margin-bottom: 15px;
+        }
+        .panel-title {
+            margin-top: 0;
+            margin-bottom: 15px;
+            font-size: 16px;
+            color: #333;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Conversation Reporting Tool</h1>
+        
+        <div class="controls">
+            <select id="optionSelect">
+                <option value="itau2-Conversations">SBII-Conversations</option>
+            </select>
+            <button id="sendButton">Send Request</button>
+            <div id="exportContainer" class="export-btn" style="display: none;">
+                <button id="exportCsvButton">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>
+                    Export CSV
+                </button>
+            </div>
+        </div>
+        
+        <div class="view-toggle" id="viewToggle" style="display: none;">
+            <button data-view="conversations" class="active">Conversations</button>
+            <button data-view="users">Unique Users</button>
+        </div>
+        
+        <div class="time-filter" id="timeFilter" style="display: none;">
+            <button data-days="1" class="active">Today</button>
+            <button data-days="7">Last 7 Days</button>
+            <button data-days="30">Last 30 Days</button>
+            <button data-days="90">Last 3 Months</button>
+            <button data-days="all">All Time</button>
+        </div>
+        
+        <div id="loading" class="loading">
+            <div class="loader"></div>
+            <p>Loading data, please wait...</p>
+        </div>
+        
+        <div id="error" class="error"></div>
+        
+        <div id="usage-chart-container" class="chart-container panel" style="display: none;">
+            <h3 class="panel-title">Conversation Usage Over Time</h3>
+            <canvas id="usageChart"></canvas>
+        </div>
+        
+        <div id="users-chart-container" class="chart-container panel" style="display: none;">
+            <h3 class="panel-title">Unique Users Over Time</h3>
+            <canvas id="usersChart"></canvas>
+        </div>
+        
+        <div id="results" class="results">
+            <!-- Results will be dynamically inserted here -->
+        </div>
+    </div>
+    
+    <script>
+        // Global variables
+        let currentData = [];
+        let assistantData = [];
+        let usageChart = null;
+        let usersChart = null;
+        let currentView = 'conversations'; // Default view
+        
+        // Map to store assistant IDs to names
+        let assistantNames = {};
+        
+        // CSV Export functionality
+        document.getElementById('exportCsvButton').addEventListener('click', () => {
+            exportToCSV(currentData);
+        });
+        
+        function exportToCSV(data) {
+            // Define columns for the CSV
+            const columns = [
+                'User ID', 'Start Time', 'Brand Voice Setting', 'Title', 
+                'End Time', 'Assistant ID', 'Assistant Name', 'Assistant Key', 'Conversation ID',
+                'Vision Images'
+            ];
+            
+            // Create CSV header row
+            let csvContent = columns.join(',') + '\n';
+            
+            // Add data rows
+            data.forEach(item => {
+                if (!item.data || Object.keys(item.data).length === 0) return;
+                
+                const d = item.data;
+                const assistantId = d.Assistant_ID || '';
+                const assistantName = assistantNames[assistantId] || '';
+                
+                const row = [
+                    d.User_ID ? `"${d.User_ID}"` : '',
+                    d.StartTime ? `"${d.StartTime}"` : '',
+                    d['Brand Voice Setting'] ? `"${d['Brand Voice Setting'].replace(/"/g, '""')}"` : '',
+                    d.Title ? `"${d.Title.replace(/"/g, '""')}"` : '',
+                    d.EndTime ? `"${d.EndTime}"` : '',
+                    assistantId ? `"${assistantId}"` : '',
+                    assistantName ? `"${assistantName.replace(/"/g, '""')}"` : '',
+                    d.Assistant_Key ? `"${d.Assistant_Key}"` : '',
+                    d.Conversation_ID ? `"${d.Conversation_ID}"` : '',
+                    d.Vision_Images ? `"${d.Vision_Images}"` : ''
+                ];
+                
+                csvContent += row.join(',') + '\n';
+            });
+            
+            // Create a download link
+            const encodedUri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
+            const link = document.createElement('a');
+            link.setAttribute('href', encodedUri);
+            link.setAttribute('download', `sbii-conversations-${new Date().toISOString().split('T')[0]}.csv`);
+            document.body.appendChild(link);
+            
+            // Trigger download and remove link
+            link.click();
+            document.body.removeChild(link);
+        }
+        
+        // Function to fetch assistant data
+        async function fetchAssistantData() {
+            try {
+                const response = await fetch('https://hook.us1.make.celonis.com/qyrswn18r3rrs8rpvo4n62mny6rorhah', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error fetching assistant data! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data;
+            } catch (error) {
+                console.error('Error fetching assistant data:', error);
+                return [];
+            }
+        }
+        
+        // Build assistant name mapping
+        function buildAssistantMapping(data) {
+            const mapping = {};
+            
+            data.forEach(item => {
+                if (item.data && item.data['Assistant ID'] && item.data['Name']) {
+                    mapping[item.data['Assistant ID']] = item.data['Name'];
+                }
+            });
+            
+            return mapping;
+        }
+
+        // Initialize view toggle buttons
+        function initializeViewToggle() {
+            const viewToggleButtons = document.querySelectorAll('#viewToggle button');
+            
+            viewToggleButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    // Update active button
+                    viewToggleButtons.forEach(btn => btn.classList.remove('active'));
+                    button.classList.add('active');
+                    
+                    // Get the view type
+                    const view = button.getAttribute('data-view');
+                    currentView = view;
+                    
+                    // Toggle chart and result displays based on view
+                    updateViewDisplay();
+                    
+                    // Get the current time filter
+                    const activeTimeFilter = document.querySelector('#timeFilter button.active');
+                    const days = activeTimeFilter ? activeTimeFilter.getAttribute('data-days') : '1';
+                    
+                    // Update display based on selected view
+                    if (view === 'conversations') {
+                        createUsageChart(currentData, days === 'all' ? null : parseInt(days));
+                        const pivotData = processPivotData(currentData);
+                        displayPivotTable(pivotData);
+                    } else if (view === 'users') {
+                        createUsersChart(currentData, days === 'all' ? null : parseInt(days));
+                        const uniqueUsersData = processUniqueUsersData(currentData);
+                        displayUniqueUsersTable(uniqueUsersData);
+                    }
+                });
+            });
+        }
+        
+        // Toggle display based on current view
+        function updateViewDisplay() {
+            if (currentView === 'conversations') {
+                document.getElementById('usage-chart-container').style.display = 'block';
+                document.getElementById('users-chart-container').style.display = 'none';
+            } else if (currentView === 'users') {
+                document.getElementById('usage-chart-container').style.display = 'none';
+                document.getElementById('users-chart-container').style.display = 'block';
+            }
+        }
+        
+        // Process data for unique users view
+        function processUniqueUsersData(data) {
+            // Group users by Assistant_ID
+            const assistantGroups = {};
+            
+            data.forEach(item => {
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                const userId = item.data.User_ID || 'Unknown';
+                
+                if (!assistantGroups[assistantId]) {
+                    assistantGroups[assistantId] = {
+                        uniqueUsers: new Set(),
+                        userDetails: {}
+                    };
+                }
+                
+                assistantGroups[assistantId].uniqueUsers.add(userId);
+                
+                if (!assistantGroups[assistantId].userDetails[userId]) {
+                    assistantGroups[assistantId].userDetails[userId] = {
+                        conversationCount: 0,
+                        firstSeen: item.data.StartTime || null,
+                        lastSeen: item.data.StartTime || null
+                    };
+                } else {
+                    // Update last seen if current date is newer
+                    const currentStartTime = new Date(item.data.StartTime || 0);
+                    const lastSeen = new Date(assistantGroups[assistantId].userDetails[userId].lastSeen || 0);
+                    
+                    if (currentStartTime > lastSeen) {
+                        assistantGroups[assistantId].userDetails[userId].lastSeen = item.data.StartTime;
+                    }
+                    
+                    // Update first seen if current date is older
+                    const firstSeen = new Date(assistantGroups[assistantId].userDetails[userId].firstSeen || Infinity);
+                    
+                    if (currentStartTime < firstSeen) {
+                        assistantGroups[assistantId].userDetails[userId].firstSeen = item.data.StartTime;
+                    }
+                }
+                
+                assistantGroups[assistantId].userDetails[userId].conversationCount++;
+            });
+            
+            return assistantGroups;
+        }
+        
+        // Create unique users chart
+        function createUsersChart(data, days) {
+            // Show chart container
+            document.getElementById('users-chart-container').style.display = 'block';
+            
+            // Filter data based on days
+            const filteredData = filterDataByDays(data, days);
+            
+            // Process data for the chart
+            const { labels, datasets } = processUsersDataForChart(filteredData);
+            
+            // Create or update chart
+            if (usersChart) {
+                usersChart.data.labels = labels;
+                usersChart.data.datasets = datasets;
+                usersChart.update();
+            } else {
+                const ctx = document.getElementById('usersChart').getContext('2d');
+                usersChart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: datasets
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            title: {
+                                display: false
+                            },
+                            legend: {
+                                position: 'top',
+                            }
+                        },
+                        scales: {
+                            x: {
+                                grid: {
+                                    display: false
+                                }
+                            },
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    precision: 0,
+                                    stepSize: 1
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+        
+        // Process data for users chart
+        function processUsersDataForChart(data) {
+            // Get date range
+            const groupedByDate = {};
+            const groupedByAssistant = {};
+            const assistantColors = {};
+            const colorPalette = [
+                '#4285F4', '#EA4335', '#FBBC05', '#34A853', 
+                '#673AB7', '#FF9800', '#00BCD4', '#795548',
+                '#9C27B0', '#607D8B', '#3F51B5', '#CDDC39'
+            ];
+            
+            // Track unique users by date and assistant
+            data.forEach(item => {
+                if (!item.data || !item.data.StartTime || !item.data.User_ID) return;
+                
+                const date = new Date(item.data.StartTime);
+                const dateStr = date.toISOString().split('T')[0]; // YYYY-MM-DD
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                const userId = item.data.User_ID;
+                
+                // Initialize for this date
+                if (!groupedByDate[dateStr]) {
+                    groupedByDate[dateStr] = {};
+                }
+                if (!groupedByDate[dateStr][assistantId]) {
+                    groupedByDate[dateStr][assistantId] = new Set();
+                }
+                
+                // Add user to set of unique users for this date and assistant
+                groupedByDate[dateStr][assistantId].add(userId);
+                
+                // Track assistants
+                if (!groupedByAssistant[assistantId]) {
+                    groupedByAssistant[assistantId] = new Set();
+                    // Assign color
+                    const colorIndex = Object.keys(groupedByAssistant).length - 1;
+                    assistantColors[assistantId] = colorPalette[colorIndex % colorPalette.length];
+                }
+                groupedByAssistant[assistantId].add(userId);
+            });
+            
+            // Sort dates
+            const sortedDates = Object.keys(groupedByDate).sort();
+            
+            // Create datasets for each assistant
+            const datasets = [];
+            
+            for (const assistantId in groupedByAssistant) {
+                // Get assistant name for label if available
+                const assistantName = assistantNames[assistantId] || assistantId;
+                
+                const dataset = {
+                    label: assistantName,
+                    data: [],
+                    borderColor: assistantColors[assistantId],
+                    backgroundColor: assistantColors[assistantId] + '20', // Add transparency
+                    tension: 0.3,
+                    fill: true
+                };
+                
+                // Add data for each date - count of unique users
+                for (const date of sortedDates) {
+                    const userCount = groupedByDate[date][assistantId] ? 
+                                      groupedByDate[date][assistantId].size : 0;
+                    dataset.data.push(userCount);
+                }
+                
+                datasets.push(dataset);
+            }
+            
+            return {
+                labels: sortedDates,
+                datasets: datasets
+            };
+        }
+        
+        // Display unique users table
+        function displayUniqueUsersTable(usersData) {
+            const resultsDiv = document.getElementById('results');
+            resultsDiv.innerHTML = ''; // Clear previous results
+            
+            // Create the table
+            const table = document.createElement('table');
+            const thead = document.createElement('thead');
+            const tbody = document.createElement('tbody');
+            
+            // Create header row
+            const headerRow = document.createElement('tr');
+            const headers = ['Assistant', 'Unique Users', 'Most Active User', 'Conversations/User (Avg)'];
+            
+            headers.forEach(headerText => {
+                const header = document.createElement('th');
+                header.textContent = headerText;
+                headerRow.appendChild(header);
+            });
+            
+            thead.appendChild(headerRow);
+            table.appendChild(thead);
+            
+            // Create table body - one row per assistant
+            let totalUniqueUsers = 0;
+            let allUsers = new Set();
+            
+            for (const assistantId in usersData) {
+                const row = document.createElement('tr');
+                const assistantData = usersData[assistantId];
+                const uniqueUserCount = assistantData.uniqueUsers.size;
+                totalUniqueUsers += uniqueUserCount;
+                
+                // Add all users to the global set for deduplication
+                assistantData.uniqueUsers.forEach(userId => allUsers.add(userId));
+                
+                // Assistant name column
+                const assistantCell = document.createElement('td');
+                const assistantName = assistantNames[assistantId] || null;
+                
+                if (assistantName) {
+                    assistantCell.textContent = `${assistantName} (${assistantId})`;
+                    assistantCell.title = assistantId;
+                } else {
+                    assistantCell.textContent = assistantId;
+                }
+                assistantCell.style.fontWeight = 'bold';
+                row.appendChild(assistantCell);
+                
+                // Unique user count column
+                const userCountCell = document.createElement('td');
+                userCountCell.textContent = uniqueUserCount;
+                row.appendChild(userCountCell);
+                
+                // Find most active user
+                let mostActiveUser = { id: null, count: 0 };
+                for (const userId in assistantData.userDetails) {
+                    const userDetails = assistantData.userDetails[userId];
+                    if (userDetails.conversationCount > mostActiveUser.count) {
+                        mostActiveUser = { 
+                            id: userId, 
+                            count: userDetails.conversationCount 
+                        };
+                    }
+                }
+                
+                // Most active user column
+                const mostActiveCell = document.createElement('td');
+                if (mostActiveUser.id) {
+                    mostActiveCell.textContent = `${mostActiveUser.id} (${mostActiveUser.count} conversations)`;
+                } else {
+                    mostActiveCell.textContent = 'N/A';
+                }
+                row.appendChild(mostActiveCell);
+                
+                // Average conversations per user
+                const avgCell = document.createElement('td');
+                let totalConversations = 0;
+                for (const userId in assistantData.userDetails) {
+                    totalConversations += assistantData.userDetails[userId].conversationCount;
+                }
+                const average = uniqueUserCount > 0 ? (totalConversations / uniqueUserCount).toFixed(1) : 0;
+                avgCell.textContent = average;
+                row.appendChild(avgCell);
+                
+                tbody.appendChild(row);
+            }
+            
+            // Add grand total row
+            const grandTotalRow = document.createElement('tr');
+            
+            const grandTotalLabelCell = document.createElement('td');
+            grandTotalLabelCell.textContent = 'GRAND TOTAL';
+            grandTotalLabelCell.style.fontWeight = 'bold';
+            grandTotalLabelCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalLabelCell);
+            
+            const grandTotalUsersCell = document.createElement('td');
+            grandTotalUsersCell.textContent = allUsers.size; // Deduplicated count across all assistants
+            grandTotalUsersCell.style.fontWeight = 'bold';
+            grandTotalUsersCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalUsersCell);
+            
+            // Fill remaining cells for formatting
+            const emptyCell1 = document.createElement('td');
+            grandTotalRow.appendChild(emptyCell1);
+            
+            const emptyCell2 = document.createElement('td');
+            grandTotalRow.appendChild(emptyCell2);
+            
+            tbody.appendChild(grandTotalRow);
+            
+            table.appendChild(tbody);
+            resultsDiv.appendChild(table);
+            
+            // Add user details expansion section
+            const detailsContainer = document.createElement('div');
+            detailsContainer.className = 'user-details-container';
+            detailsContainer.style.marginTop = '30px';
+            
+            const detailsTitle = document.createElement('h3');
+            detailsTitle.textContent = 'Detailed User List';
+            detailsTitle.className = 'panel-title';
+            detailsContainer.appendChild(detailsTitle);
+            
+            // Create detailed users table
+            const detailsTable = document.createElement('table');
+            const detailsThead = document.createElement('thead');
+            const detailsTbody = document.createElement('tbody');
+            
+            // Create header row for details
+            const detailsHeaderRow = document.createElement('tr');
+            const detailsHeaders = ['User ID', 'Assistant Used', 'Conversations', 'First Seen', 'Last Seen'];
+            
+            detailsHeaders.forEach(headerText => {
+                const header = document.createElement('th');
+                header.textContent = headerText;
+                detailsHeaderRow.appendChild(header);
+            });
+            
+            detailsThead.appendChild(detailsHeaderRow);
+            detailsTable.appendChild(detailsThead);
+            
+            // Collect all user details across assistants
+            const allUserDetails = [];
+            for (const assistantId in usersData) {
+                const assistantData = usersData[assistantId];
+                const assistantName = assistantNames[assistantId] || assistantId;
+                
+                for (const userId in assistantData.userDetails) {
+                    const userDetail = assistantData.userDetails[userId];
+                    allUserDetails.push({
+                        userId: userId,
+                        assistantId: assistantId,
+                        assistantName: assistantName,
+                        conversationCount: userDetail.conversationCount,
+                        firstSeen: userDetail.firstSeen,
+                        lastSeen: userDetail.lastSeen
+                    });
+                }
+            }
+            
+            // Sort by conversation count (descending)
+            allUserDetails.sort((a, b) => b.conversationCount - a.conversationCount);
+            
+            // Add rows for each user
+            allUserDetails.forEach(detail => {
+                const row = document.createElement('tr');
+                
+                // User ID
+                const userCell = document.createElement('td');
+                userCell.textContent = detail.userId;
+                userCell.style.fontWeight = 'bold';
+                row.appendChild(userCell);
+                
+                // Assistant Used
+                const assistantCell = document.createElement('td');
+                assistantCell.textContent = detail.assistantName;
+                assistantCell.title = detail.assistantId;
+                row.appendChild(assistantCell);
+                
+                // Conversation Count
+                const countCell = document.createElement('td');
+                countCell.textContent = detail.conversationCount;
+                row.appendChild(countCell);
+                
+                // First Seen
+                const firstSeenCell = document.createElement('td');
+                if (detail.firstSeen) {
+                    const firstDate = new Date(detail.firstSeen);
+                    firstSeenCell.textContent = firstDate.toLocaleDateString();
+                } else {
+                    firstSeenCell.textContent = 'N/A';
+                }
+                row.appendChild(firstSeenCell);
+                
+                // Last Seen
+                const lastSeenCell = document.createElement('td');
+                if (detail.lastSeen) {
+                    const lastDate = new Date(detail.lastSeen);
+                    lastSeenCell.textContent = lastDate.toLocaleDateString();
+                } else {
+                    lastSeenCell.textContent = 'N/A';
+                }
+                row.appendChild(lastSeenCell);
+                
+                detailsTbody.appendChild(row);
+            });
+            
+            detailsTable.appendChild(detailsTbody);
+            detailsContainer.appendChild(detailsTable);
+            resultsDiv.appendChild(detailsContainer);
+        }
+
+        document.getElementById('sendButton').addEventListener('click', async () => {
+            const selectedOption = document.getElementById('optionSelect').value;
+            const loadingDiv = document.getElementById('loading');
+            const errorDiv = document.getElementById('error');
+            const resultsDiv = document.getElementById('results');
+            
+            // Clear previous results
+            errorDiv.textContent = '';
+            resultsDiv.innerHTML = '';
+            loadingDiv.style.display = 'block';
+            
+            try {
+                // First, fetch assistant data in parallel with conversation data
+                const assistantDataPromise = fetchAssistantData();
+                
+                // Fetch conversation data
+                const response = await fetch('https://hook.us1.make.celonis.com/sqombh44pan463cgfw99f12j9vmugtvg', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        option: selectedOption,
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                
+                // Wait for assistant data and build mapping
+                assistantData = await assistantDataPromise;
+                assistantNames = buildAssistantMapping(assistantData);
+                
+                // Store the data globally for CSV export
+                currentData = data;
+                
+                // Show export button, time filter, and view toggle
+                document.getElementById('exportContainer').style.display = 'block';
+                document.getElementById('timeFilter').style.display = 'flex';
+                document.getElementById('viewToggle').style.display = 'flex';
+                
+                // Initialize view toggle
+                initializeViewToggle();
+                
+                // Initialize the time filter
+                initializeTimeFilter(data);
+                
+                // Set default view
+                currentView = 'conversations';
+                updateViewDisplay();
+                
+                // Create default charts and tables
+                createUsageChart(data, 1); // Default to showing 1 day (today)
+                const pivotData = processPivotData(data);
+                displayPivotTable(pivotData);
+                
+            } catch (error) {
+                errorDiv.textContent = `Error: ${error.message}`;
+                console.error('Error:', error);
+                document.getElementById('exportContainer').style.display = 'none';
+                document.getElementById('timeFilter').style.display = 'none';
+                document.getElementById('viewToggle').style.display = 'none';
+                document.getElementById('usage-chart-container').style.display = 'none';
+                document.getElementById('users-chart-container').style.display = 'none';
+            } finally {
+                loadingDiv.style.display = 'none';
+            }
+        });
+        
+        function processPivotData(data) {
+            // Group conversations by Assistant_ID
+            const assistantGroups = {};
+            
+            data.forEach(item => {
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                const userId = item.data.User_ID || 'Unknown';
+                
+                if (!assistantGroups[assistantId]) {
+                    assistantGroups[assistantId] = {
+                        users: {},
+                        totalCount: 0
+                    };
+                }
+                
+                if (!assistantGroups[assistantId].users[userId]) {
+                    assistantGroups[assistantId].users[userId] = 0;
+                }
+                
+                assistantGroups[assistantId].users[userId]++;
+                assistantGroups[assistantId].totalCount++;
+            });
+            
+            return assistantGroups;
+        }
+        
+        // Initialize time filter buttons
+        function initializeTimeFilter(data) {
+            const timeFilterButtons = document.querySelectorAll('#timeFilter button');
+            
+            timeFilterButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    // Update active button
+                    timeFilterButtons.forEach(btn => btn.classList.remove('active'));
+                    button.classList.add('active');
+                    
+                    // Get the day filter value
+                    const days = button.getAttribute('data-days');
+                    
+                    // Update charts and tables based on current view
+                    if (currentView === 'conversations') {
+                        createUsageChart(data, days === 'all' ? null : parseInt(days));
+                        const pivotData = processPivotData(data);
+                        displayPivotTable(pivotData);
+                    } else if (currentView === 'users') {
+                        createUsersChart(data, days === 'all' ? null : parseInt(days));
+                        const uniqueUsersData = processUniqueUsersData(data);
+                        displayUniqueUsersTable(uniqueUsersData);
+                    }
+                });
+            });
+        }
+        
+        // Create usage chart
+        function createUsageChart(data, days) {
+            // Show chart container
+            document.getElementById('usage-chart-container').style.display = 'block';
+            
+            // Filter data based on days
+            const filteredData = filterDataByDays(data, days);
+            
+            // Process data for the chart
+            const { labels, datasets } = processDataForChart(filteredData);
+            
+            // Create or update chart
+            if (usageChart) {
+                usageChart.data.labels = labels;
+                usageChart.data.datasets = datasets;
+                usageChart.update();
+            } else {
+                const ctx = document.getElementById('usageChart').getContext('2d');
+                usageChart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: datasets
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            title: {
+                                display: false
+                            },
+                            legend: {
+                                position: 'top',
+                            }
+                        },
+                        scales: {
+                            x: {
+                                grid: {
+                                    display: false
+                                }
+                            },
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    precision: 0,
+                                    stepSize: 1
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+        
+        // Filter data by time range
+        function filterDataByDays(data, days) {
+            if (!days) return data; // Return all data if no day filter
+            
+            const now = new Date();
+            const cutoffDate = new Date(now);
+            cutoffDate.setDate(cutoffDate.getDate() - days);
+            
+            return data.filter(item => {
+                if (!item.data || !item.data.StartTime) return false;
+                const startTime = new Date(item.data.StartTime);
+                return startTime >= cutoffDate;
+            });
+        }
+        
+        // Process data for chart
+        function processDataForChart(data) {
+            // Get date range
+            const groupedByDate = {};
+            const groupedByAssistant = {};
+            const assistantColors = {};
+            const colorPalette = [
+                '#4285F4', '#EA4335', '#FBBC05', '#34A853', 
+                '#673AB7', '#FF9800', '#00BCD4', '#795548',
+                '#9C27B0', '#607D8B', '#3F51B5', '#CDDC39'
+            ];
+            
+            // Group data by date and assistant
+            data.forEach(item => {
+                if (!item.data || !item.data.StartTime) return;
+                
+                const date = new Date(item.data.StartTime);
+                const dateStr = date.toISOString().split('T')[0]; // YYYY-MM-DD
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                
+                // Track for this date
+                if (!groupedByDate[dateStr]) {
+                    groupedByDate[dateStr] = {};
+                }
+                if (!groupedByDate[dateStr][assistantId]) {
+                    groupedByDate[dateStr][assistantId] = 0;
+                }
+                groupedByDate[dateStr][assistantId]++;
+                
+                // Track assistants
+                if (!groupedByAssistant[assistantId]) {
+                    groupedByAssistant[assistantId] = 0;
+                    // Assign color
+                    const colorIndex = Object.keys(groupedByAssistant).length - 1;
+                    assistantColors[assistantId] = colorPalette[colorIndex % colorPalette.length];
+                }
+                groupedByAssistant[assistantId]++;
+            });
+            
+            // Sort dates
+            const sortedDates = Object.keys(groupedByDate).sort();
+            
+            // Create datasets for each assistant
+            const datasets = [];
+            
+            for (const assistantId in groupedByAssistant) {
+                // Get assistant name for label if available
+                const assistantName = assistantNames[assistantId] || assistantId;
+                
+                const dataset = {
+                    label: assistantName,
+                    data: [],
+                    borderColor: assistantColors[assistantId],
+                    backgroundColor: assistantColors[assistantId] + '20', // Add transparency
+                    tension: 0.3,
+                    fill: true
+                };
+                
+                // Add data for each date
+                for (const date of sortedDates) {
+                    dataset.data.push(groupedByDate[date][assistantId] || 0);
+                }
+                
+                datasets.push(dataset);
+            }
+            
+            return {
+                labels: sortedDates,
+                datasets: datasets
+            };
+        }
+        
+        function displayPivotTable(pivotData) {
+            const resultsDiv = document.getElementById('results');
+            
+            // Create the table
+            const table = document.createElement('table');
+            const thead = document.createElement('thead');
+            const tbody = document.createElement('tbody');
+            
+            // Create header row
+            const headerRow = document.createElement('tr');
+            const headers = ['Assistant', 'User ID', 'Conversation Count'];
+            
+            headers.forEach(headerText => {
+                const header = document.createElement('th');
+                header.textContent = headerText;
+                headerRow.appendChild(header);
+            });
+            
+            thead.appendChild(headerRow);
+            table.appendChild(thead);
+            
+            // Create table body
+            for (const assistantId in pivotData) {
+                const assistantData = pivotData[assistantId];
+                let firstRow = true;
+                
+                for (const userId in assistantData.users) {
+                    const row = document.createElement('tr');
+                    
+                    // Assistant column (ID and Name, only show in first row of group)
+                    const assistantCell = document.createElement('td');
+                    
+                    if (firstRow) {
+                        // Get assistant name if available
+                        const assistantName = assistantNames[assistantId] || null;
+                        
+                        if (assistantName) {
+                            // If we have a name, show "Name (ID)"
+                            assistantCell.textContent = `${assistantName} (${assistantId})`;
+                            
+                            // Add title attribute for hover tooltip with full ID
+                            assistantCell.title = assistantId;
+                        } else {
+                            // If no name, just show ID
+                            assistantCell.textContent = assistantId;
+                        }
+                        
+                        assistantCell.style.fontWeight = 'bold';
+                    } else {
+                        assistantCell.textContent = '';
+                    }
+                    
+                    row.appendChild(assistantCell);
+                    
+                    // User ID column
+                    const userCell = document.createElement('td');
+                    userCell.textContent = userId;
+                    row.appendChild(userCell);
+                    
+                    // Count column
+                    const countCell = document.createElement('td');
+                    countCell.textContent = assistantData.users[userId];
+                    row.appendChild(countCell);
+                    
+                    tbody.appendChild(row);
+                    firstRow = false;
+                }
+                
+                // Add a total row for this assistant
+                const totalRow = document.createElement('tr');
+                
+                const totalLabelCell = document.createElement('td');
+                totalLabelCell.textContent = '';
+                totalRow.appendChild(totalLabelCell);
+                
+                const totalUserCell = document.createElement('td');
+                totalUserCell.textContent = 'Total';
+                totalUserCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalUserCell);
+                
+                const totalCountCell = document.createElement('td');
+                totalCountCell.textContent = assistantData.totalCount;
+                totalCountCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalCountCell);
+                
+                tbody.appendChild(totalRow);
+                
+                // Add an empty row as a separator
+                const spacerRow = document.createElement('tr');
+                const spacerCell = document.createElement('td');
+                spacerCell.setAttribute('colspan', '3');
+                spacerCell.style.height = '4px';
+                spacerRow.appendChild(spacerCell);
+                tbody.appendChild(spacerRow);
+            }
+            
+            // Add grand total row
+            const grandTotalRow = document.createElement('tr');
+            
+            // Create grand total cells
+            const grandTotalLabelCell = document.createElement('td');
+            grandTotalLabelCell.textContent = 'GRAND TOTAL';
+            grandTotalLabelCell.style.fontWeight = 'bold';
+            grandTotalLabelCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalLabelCell);
+            
+            const grandTotalBlankCell = document.createElement('td');
+            grandTotalRow.appendChild(grandTotalBlankCell);
+            
+            // Calculate grand total
+            let grandTotal = 0;
+            for (const assistantId in pivotData) {
+                grandTotal += pivotData[assistantId].totalCount;
+            }
+            
+            const grandTotalCountCell = document.createElement('td');
+            grandTotalCountCell.textContent = grandTotal;
+            grandTotalCountCell.style.fontWeight = 'bold';
+            grandTotalCountCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalCountCell);
+            
+            tbody.appendChild(grandTotalRow);
+            
+            table.appendChild(tbody);
+            resultsDiv.appendChild(table);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index-convo.html b/index-convo.html
new file mode 100644
index 0000000..0d68558
--- /dev/null
+++ b/index-convo.html
@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conversation Reporting Tool</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: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 22px;
+        }
+        .controls {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+            align-items: center;
+            justify-content: center;
+        }
+        select {
+            padding: 10px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #4285f4;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+            font-weight: 500;
+        }
+        button:hover {
+            background-color: #3367d6;
+        }
+        .loading {
+            text-align: center;
+            display: none;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 2s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .results {
+            margin-top: 15px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+        th, td {
+            padding: 6px 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+            line-height: 1.3;
+        }
+        th {
+            background-color: #f8f9fa;
+            font-weight: 600;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .error {
+            color: red;
+            text-align: center;
+            margin-top: 20px;
+            font-weight: 500;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Conversation Reporting Tool</h1>
+        
+        <div class="controls">
+            <select id="optionSelect">
+                <option value="itau2-Conversations">itau2-Conversations</option>
+                <option value="Oliver Latam-Conversations">Oliver Latam-Conversations</option>
+                <option value="Ancar-Conversations">Ancar-Conversations</option>
+            </select>
+            <button id="sendButton">Send Request</button>
+        </div>
+        
+        <div id="loading" class="loading">
+            <div class="loader"></div>
+            <p>Loading data, please wait...</p>
+        </div>
+        
+        <div id="error" class="error"></div>
+        
+        <div id="results" class="results">
+            <!-- Results will be dynamically inserted here -->
+        </div>
+    </div>
+    
+    <script>
+        document.getElementById('sendButton').addEventListener('click', async () => {
+            const selectedOption = document.getElementById('optionSelect').value;
+            const loadingDiv = document.getElementById('loading');
+            const errorDiv = document.getElementById('error');
+            const resultsDiv = document.getElementById('results');
+            
+            // Clear previous results
+            errorDiv.textContent = '';
+            resultsDiv.innerHTML = '';
+            loadingDiv.style.display = 'block';
+            
+            try {
+                const response = await fetch('https://hook.us1.make.celonis.com/ewnkda13g1b65s1h2on2clo8ql7vdkl0', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        option: selectedOption,
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                
+                // Process the data for pivot table
+                const pivotData = processPivotData(data);
+                
+                // Generate and display the table
+                displayPivotTable(pivotData);
+                
+            } catch (error) {
+                errorDiv.textContent = `Error: ${error.message}`;
+                console.error('Error:', error);
+            } finally {
+                loadingDiv.style.display = 'none';
+            }
+        });
+        
+        function processPivotData(data) {
+            // Group conversations by Assistant_ID
+            const assistantGroups = {};
+            
+            data.forEach(item => {
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                const userId = item.data.User_ID || 'Unknown';
+                
+                if (!assistantGroups[assistantId]) {
+                    assistantGroups[assistantId] = {
+                        users: {},
+                        totalCount: 0
+                    };
+                }
+                
+                if (!assistantGroups[assistantId].users[userId]) {
+                    assistantGroups[assistantId].users[userId] = 0;
+                }
+                
+                assistantGroups[assistantId].users[userId]++;
+                assistantGroups[assistantId].totalCount++;
+            });
+            
+            return assistantGroups;
+        }
+        
+        function displayPivotTable(pivotData) {
+            const resultsDiv = document.getElementById('results');
+            
+            // Create the table
+            const table = document.createElement('table');
+            const thead = document.createElement('thead');
+            const tbody = document.createElement('tbody');
+            
+            // Create header row
+            const headerRow = document.createElement('tr');
+            const headers = ['Assistant ID', 'User ID', 'Conversation Count'];
+            
+            headers.forEach(headerText => {
+                const header = document.createElement('th');
+                header.textContent = headerText;
+                headerRow.appendChild(header);
+            });
+            
+            thead.appendChild(headerRow);
+            table.appendChild(thead);
+            
+            // Create table body
+            for (const assistantId in pivotData) {
+                const assistantData = pivotData[assistantId];
+                let firstRow = true;
+                
+                for (const userId in assistantData.users) {
+                    const row = document.createElement('tr');
+                    
+                    // Assistant ID column (only show in first row of group)
+                    const assistantCell = document.createElement('td');
+                    assistantCell.textContent = firstRow ? assistantId : '';
+                    if (firstRow) {
+                        assistantCell.style.fontWeight = 'bold';
+                    }
+                    row.appendChild(assistantCell);
+                    
+                    // User ID column
+                    const userCell = document.createElement('td');
+                    userCell.textContent = userId;
+                    row.appendChild(userCell);
+                    
+                    // Count column
+                    const countCell = document.createElement('td');
+                    countCell.textContent = assistantData.users[userId];
+                    row.appendChild(countCell);
+                    
+                    tbody.appendChild(row);
+                    firstRow = false;
+                }
+                
+                // Add a total row for this assistant
+                const totalRow = document.createElement('tr');
+                
+                const totalLabelCell = document.createElement('td');
+                totalLabelCell.textContent = '';
+                totalRow.appendChild(totalLabelCell);
+                
+                const totalUserCell = document.createElement('td');
+                totalUserCell.textContent = 'Total';
+                totalUserCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalUserCell);
+                
+                const totalCountCell = document.createElement('td');
+                totalCountCell.textContent = assistantData.totalCount;
+                totalCountCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalCountCell);
+                
+                tbody.appendChild(totalRow);
+                
+                // Add an empty row as a separator
+                const spacerRow = document.createElement('tr');
+                const spacerCell = document.createElement('td');
+                spacerCell.setAttribute('colspan', '3');
+                spacerCell.style.height = '4px';
+                spacerRow.appendChild(spacerCell);
+                tbody.appendChild(spacerRow);
+            }
+            
+            // Add grand total row
+            const grandTotalRow = document.createElement('tr');
+            
+            // Create grand total cells
+            const grandTotalLabelCell = document.createElement('td');
+            grandTotalLabelCell.textContent = 'GRAND TOTAL';
+            grandTotalLabelCell.style.fontWeight = 'bold';
+            grandTotalLabelCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalLabelCell);
+            
+            const grandTotalBlankCell = document.createElement('td');
+            grandTotalRow.appendChild(grandTotalBlankCell);
+            
+            // Calculate grand total
+            let grandTotal = 0;
+            for (const assistantId in pivotData) {
+                grandTotal += pivotData[assistantId].totalCount;
+            }
+            
+            const grandTotalCountCell = document.createElement('td');
+            grandTotalCountCell.textContent = grandTotal;
+            grandTotalCountCell.style.fontWeight = 'bold';
+            grandTotalCountCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalCountCell);
+            
+            tbody.appendChild(grandTotalRow);
+            
+            table.appendChild(tbody);
+            resultsDiv.appendChild(table);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index-sidekick.html b/index-sidekick.html
new file mode 100644
index 0000000..06b2b3f
--- /dev/null
+++ b/index-sidekick.html
@@ -0,0 +1,699 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conversation Reporting Tool</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 22px;
+        }
+        .controls {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+            align-items: center;
+            justify-content: center;
+        }
+        select {
+            padding: 10px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #4285f4;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 16px;
+            font-weight: 500;
+        }
+        button:hover {
+            background-color: #3367d6;
+        }
+        .loading {
+            text-align: center;
+            display: none;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 2s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .results {
+            margin-top: 15px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+        th, td {
+            padding: 6px 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+            line-height: 1.3;
+        }
+        th {
+            background-color: #f8f9fa;
+            font-weight: 600;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .error {
+            color: red;
+            text-align: center;
+            margin-top: 20px;
+            font-weight: 500;
+        }
+        .export-btn {
+            margin-top: 15px;
+            display: flex;
+            justify-content: flex-end;
+        }
+        .export-btn button {
+            padding: 6px 12px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .export-btn button:hover {
+            background-color: #45a049;
+        }
+        .export-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+        .time-filter {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .time-filter button {
+            padding: 6px 12px;
+            background-color: #f0f0f0;
+            color: #333;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 13px;
+            font-weight: 500;
+        }
+        .time-filter button.active {
+            background-color: #4285f4;
+            color: white;
+            border-color: #4285f4;
+        }
+        .time-filter button:hover:not(.active) {
+            background-color: #e0e0e0;
+        }
+        .chart-container {
+            margin-top: 30px;
+            margin-bottom: 30px;
+            height: 300px;
+            width: 100%;
+        }
+        .panel {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            padding: 15px;
+            margin-bottom: 15px;
+        }
+        .panel-title {
+            margin-top: 0;
+            margin-bottom: 15px;
+            font-size: 16px;
+            color: #333;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Conversation Reporting Tool</h1>
+        
+        <div class="controls">
+            <select id="optionSelect">
+                <option value="sidekick_conversations">sidekick_conversations</option>
+            </select>
+            <button id="sendButton">Send Request</button>
+            <div id="exportContainer" class="export-btn" style="display: none;">
+                <button id="exportCsvButton">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>
+                    Export CSV
+                </button>
+            </div>
+        </div>
+        
+        <div class="time-filter" id="timeFilter" style="display: none;">
+            <button data-days="1" class="active">Today</button>
+            <button data-days="7">Last 7 Days</button>
+            <button data-days="30">Last 30 Days</button>
+            <button data-days="90">Last 3 Months</button>
+            <button data-days="all">All Time</button>
+        </div>
+        
+        <div id="loading" class="loading">
+            <div class="loader"></div>
+            <p>Loading data, please wait...</p>
+        </div>
+        
+        <div id="error" class="error"></div>
+        
+        <div id="usage-chart-container" class="chart-container panel" style="display: none;">
+            <h3 class="panel-title">Conversation Usage Over Time</h3>
+            <canvas id="usageChart"></canvas>
+        </div>
+        
+        <div id="results" class="results">
+            <!-- Results will be dynamically inserted here -->
+        </div>
+    </div>
+    
+    <script>
+        // Global variables
+        let currentData = [];
+        let assistantData = [];
+        let usageChart = null;
+        
+        // Map to store assistant IDs to names
+        let assistantNames = {};
+        
+        // CSV Export functionality
+        document.getElementById('exportCsvButton').addEventListener('click', () => {
+            exportToCSV(currentData);
+        });
+        
+        function exportToCSV(data) {
+            // Define columns for the CSV
+            const columns = [
+                'User ID', 'Start Time', 'Brand Voice Setting', 'Title', 
+                'End Time', 'Assistant ID', 'Assistant Name', 'Assistant Key', 'Conversation ID',
+                'Vision Images'
+            ];
+            
+            // Create CSV header row
+            let csvContent = columns.join(',') + '\n';
+            
+            // Add data rows
+            data.forEach(item => {
+                if (!item.data || Object.keys(item.data).length === 0) return;
+                
+                const d = item.data;
+                const assistantId = d.Assistant_ID || '';
+                const assistantName = assistantNames[assistantId] || '';
+                
+                const row = [
+                    d.User_ID ? `"${d.User_ID}"` : '',
+                    d.StartTime ? `"${d.StartTime}"` : '',
+                    d['Brand Voice Setting'] ? `"${d['Brand Voice Setting'].replace(/"/g, '""')}"` : '',
+                    d.Title ? `"${d.Title.replace(/"/g, '""')}"` : '',
+                    d.EndTime ? `"${d.EndTime}"` : '',
+                    assistantId ? `"${assistantId}"` : '',
+                    assistantName ? `"${assistantName.replace(/"/g, '""')}"` : '',
+                    d.Assistant_Key ? `"${d.Assistant_Key}"` : '',
+                    d.Conversation_ID ? `"${d.Conversation_ID}"` : '',
+                    d.Vision_Images ? `"${d.Vision_Images}"` : ''
+                ];
+                
+                csvContent += row.join(',') + '\n';
+            });
+            
+            // Create a download link
+            const encodedUri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
+            const link = document.createElement('a');
+            link.setAttribute('href', encodedUri);
+            link.setAttribute('download', `sidekick-conversations-${new Date().toISOString().split('T')[0]}.csv`);
+            document.body.appendChild(link);
+            
+            // Trigger download and remove link
+            link.click();
+            document.body.removeChild(link);
+        }
+        
+        // Function to fetch assistant data
+        async function fetchAssistantData() {
+            try {
+                const response = await fetch('https://hook.us1.make.celonis.com/y1o8pqxv40a4qhk55rbsdklpyjyt4nvd', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error fetching assistant data! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data;
+            } catch (error) {
+                console.error('Error fetching assistant data:', error);
+                return [];
+            }
+        }
+        
+        // Build assistant name mapping
+        function buildAssistantMapping(data) {
+            const mapping = {};
+            
+            data.forEach(item => {
+                if (item.data && item.data['Assistant ID'] && item.data['Name']) {
+                    mapping[item.data['Assistant ID']] = item.data['Name'];
+                }
+            });
+            
+            return mapping;
+        }
+
+        document.getElementById('sendButton').addEventListener('click', async () => {
+            const selectedOption = document.getElementById('optionSelect').value;
+            const loadingDiv = document.getElementById('loading');
+            const errorDiv = document.getElementById('error');
+            const resultsDiv = document.getElementById('results');
+            
+            // Clear previous results
+            errorDiv.textContent = '';
+            resultsDiv.innerHTML = '';
+            loadingDiv.style.display = 'block';
+            
+            try {
+                // First, fetch assistant data in parallel with conversation data
+                const assistantDataPromise = fetchAssistantData();
+                
+                // Fetch conversation data
+                const response = await fetch('https://hook.us1.make.celonis.com/ewnkda13g1b65s1h2on2clo8ql7vdkl0', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        option: selectedOption,
+                        auth_code: "jh87dkjs9sdj392sw72sj0210h*^&b$#rfg"
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                
+                const data = await response.json();
+                
+                // Wait for assistant data and build mapping
+                assistantData = await assistantDataPromise;
+                assistantNames = buildAssistantMapping(assistantData);
+                
+                // Store the data globally for CSV export
+                currentData = data;
+                
+                // Show export button and time filter
+                document.getElementById('exportContainer').style.display = 'block';
+                document.getElementById('timeFilter').style.display = 'flex';
+                
+                // Process the data for pivot table
+                const pivotData = processPivotData(data);
+                
+                // Initialize the usage chart
+                initializeTimeFilter(data);
+                createUsageChart(data, 1); // Default to showing 1 day (today)
+                
+                // Generate and display the table
+                displayPivotTable(pivotData);
+                
+            } catch (error) {
+                errorDiv.textContent = `Error: ${error.message}`;
+                console.error('Error:', error);
+                document.getElementById('exportContainer').style.display = 'none';
+                document.getElementById('timeFilter').style.display = 'none';
+                document.getElementById('usage-chart-container').style.display = 'none';
+            } finally {
+                loadingDiv.style.display = 'none';
+            }
+        });
+        
+        function processPivotData(data) {
+            // Group conversations by Assistant_ID
+            const assistantGroups = {};
+            
+            data.forEach(item => {
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                const userId = item.data.User_ID || 'Unknown';
+                
+                if (!assistantGroups[assistantId]) {
+                    assistantGroups[assistantId] = {
+                        users: {},
+                        totalCount: 0
+                    };
+                }
+                
+                if (!assistantGroups[assistantId].users[userId]) {
+                    assistantGroups[assistantId].users[userId] = 0;
+                }
+                
+                assistantGroups[assistantId].users[userId]++;
+                assistantGroups[assistantId].totalCount++;
+            });
+            
+            return assistantGroups;
+        }
+        
+        // Initialize time filter buttons
+        function initializeTimeFilter(data) {
+            const timeFilterButtons = document.querySelectorAll('#timeFilter button');
+            
+            timeFilterButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    // Update active button
+                    timeFilterButtons.forEach(btn => btn.classList.remove('active'));
+                    button.classList.add('active');
+                    
+                    // Get the day filter value
+                    const days = button.getAttribute('data-days');
+                    
+                    // Update chart
+                    createUsageChart(data, days === 'all' ? null : parseInt(days));
+                });
+            });
+        }
+        
+        // Create usage chart
+        function createUsageChart(data, days) {
+            // Show chart container
+            document.getElementById('usage-chart-container').style.display = 'block';
+            
+            // Filter data based on days
+            const filteredData = filterDataByDays(data, days);
+            
+            // Process data for the chart
+            const { labels, datasets } = processDataForChart(filteredData);
+            
+            // Create or update chart
+            if (usageChart) {
+                usageChart.data.labels = labels;
+                usageChart.data.datasets = datasets;
+                usageChart.update();
+            } else {
+                const ctx = document.getElementById('usageChart').getContext('2d');
+                usageChart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: datasets
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            title: {
+                                display: false
+                            },
+                            legend: {
+                                position: 'top',
+                            }
+                        },
+                        scales: {
+                            x: {
+                                grid: {
+                                    display: false
+                                }
+                            },
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    precision: 0,
+                                    stepSize: 1
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+        
+        // Filter data by time range
+        function filterDataByDays(data, days) {
+            if (!days) return data; // Return all data if no day filter
+            
+            const now = new Date();
+            const cutoffDate = new Date(now);
+            cutoffDate.setDate(cutoffDate.getDate() - days);
+            
+            return data.filter(item => {
+                if (!item.data || !item.data.StartTime) return false;
+                const startTime = new Date(item.data.StartTime);
+                return startTime >= cutoffDate;
+            });
+        }
+        
+        // Process data for chart
+        function processDataForChart(data) {
+            // Get date range
+            const groupedByDate = {};
+            const groupedByAssistant = {};
+            const assistantColors = {};
+            const colorPalette = [
+                '#4285F4', '#EA4335', '#FBBC05', '#34A853', 
+                '#673AB7', '#FF9800', '#00BCD4', '#795548',
+                '#9C27B0', '#607D8B', '#3F51B5', '#CDDC39'
+            ];
+            
+            // Group data by date and assistant
+            data.forEach(item => {
+                if (!item.data || !item.data.StartTime) return;
+                
+                const date = new Date(item.data.StartTime);
+                const dateStr = date.toISOString().split('T')[0]; // YYYY-MM-DD
+                const assistantId = item.data.Assistant_ID || 'Unknown';
+                
+                // Track for this date
+                if (!groupedByDate[dateStr]) {
+                    groupedByDate[dateStr] = {};
+                }
+                if (!groupedByDate[dateStr][assistantId]) {
+                    groupedByDate[dateStr][assistantId] = 0;
+                }
+                groupedByDate[dateStr][assistantId]++;
+                
+                // Track assistants
+                if (!groupedByAssistant[assistantId]) {
+                    groupedByAssistant[assistantId] = 0;
+                    // Assign color
+                    const colorIndex = Object.keys(groupedByAssistant).length - 1;
+                    assistantColors[assistantId] = colorPalette[colorIndex % colorPalette.length];
+                }
+                groupedByAssistant[assistantId]++;
+            });
+            
+            // Sort dates
+            const sortedDates = Object.keys(groupedByDate).sort();
+            
+            // Create datasets for each assistant
+            const datasets = [];
+            
+            for (const assistantId in groupedByAssistant) {
+                // Get assistant name for label if available
+                const assistantName = assistantNames[assistantId] || assistantId;
+                
+                const dataset = {
+                    label: assistantName,
+                    data: [],
+                    borderColor: assistantColors[assistantId],
+                    backgroundColor: assistantColors[assistantId] + '20', // Add transparency
+                    tension: 0.3,
+                    fill: true
+                };
+                
+                // Add data for each date
+                for (const date of sortedDates) {
+                    dataset.data.push(groupedByDate[date][assistantId] || 0);
+                }
+                
+                datasets.push(dataset);
+            }
+            
+            return {
+                labels: sortedDates,
+                datasets: datasets
+            };
+        }
+        
+        function displayPivotTable(pivotData) {
+            const resultsDiv = document.getElementById('results');
+            
+            // Create the table
+            const table = document.createElement('table');
+            const thead = document.createElement('thead');
+            const tbody = document.createElement('tbody');
+            
+            // Create header row
+            const headerRow = document.createElement('tr');
+            const headers = ['Assistant', 'User ID', 'Conversation Count'];
+            
+            headers.forEach(headerText => {
+                const header = document.createElement('th');
+                header.textContent = headerText;
+                headerRow.appendChild(header);
+            });
+            
+            thead.appendChild(headerRow);
+            table.appendChild(thead);
+            
+            // Create table body
+            for (const assistantId in pivotData) {
+                const assistantData = pivotData[assistantId];
+                let firstRow = true;
+                
+                for (const userId in assistantData.users) {
+                    const row = document.createElement('tr');
+                    
+                    // Assistant column (ID and Name, only show in first row of group)
+                    const assistantCell = document.createElement('td');
+                    
+                    if (firstRow) {
+                        // Get assistant name if available
+                        const assistantName = assistantNames[assistantId] || null;
+                        
+                        if (assistantName) {
+                            // If we have a name, show "Name (ID)"
+                            assistantCell.textContent = `${assistantName} (${assistantId})`;
+                            
+                            // Add title attribute for hover tooltip with full ID
+                            assistantCell.title = assistantId;
+                        } else {
+                            // If no name, just show ID
+                            assistantCell.textContent = assistantId;
+                        }
+                        
+                        assistantCell.style.fontWeight = 'bold';
+                    } else {
+                        assistantCell.textContent = '';
+                    }
+                    
+                    row.appendChild(assistantCell);
+                    
+                    // User ID column
+                    const userCell = document.createElement('td');
+                    userCell.textContent = userId;
+                    row.appendChild(userCell);
+                    
+                    // Count column
+                    const countCell = document.createElement('td');
+                    countCell.textContent = assistantData.users[userId];
+                    row.appendChild(countCell);
+                    
+                    tbody.appendChild(row);
+                    firstRow = false;
+                }
+                
+                // Add a total row for this assistant
+                const totalRow = document.createElement('tr');
+                
+                const totalLabelCell = document.createElement('td');
+                totalLabelCell.textContent = '';
+                totalRow.appendChild(totalLabelCell);
+                
+                const totalUserCell = document.createElement('td');
+                totalUserCell.textContent = 'Total';
+                totalUserCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalUserCell);
+                
+                const totalCountCell = document.createElement('td');
+                totalCountCell.textContent = assistantData.totalCount;
+                totalCountCell.style.fontWeight = 'bold';
+                totalRow.appendChild(totalCountCell);
+                
+                tbody.appendChild(totalRow);
+                
+                // Add an empty row as a separator
+                const spacerRow = document.createElement('tr');
+                const spacerCell = document.createElement('td');
+                spacerCell.setAttribute('colspan', '3');
+                spacerCell.style.height = '4px';
+                spacerRow.appendChild(spacerCell);
+                tbody.appendChild(spacerRow);
+            }
+            
+            // Add grand total row
+            const grandTotalRow = document.createElement('tr');
+            
+            // Create grand total cells
+            const grandTotalLabelCell = document.createElement('td');
+            grandTotalLabelCell.textContent = 'GRAND TOTAL';
+            grandTotalLabelCell.style.fontWeight = 'bold';
+            grandTotalLabelCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalLabelCell);
+            
+            const grandTotalBlankCell = document.createElement('td');
+            grandTotalRow.appendChild(grandTotalBlankCell);
+            
+            // Calculate grand total
+            let grandTotal = 0;
+            for (const assistantId in pivotData) {
+                grandTotal += pivotData[assistantId].totalCount;
+            }
+            
+            const grandTotalCountCell = document.createElement('td');
+            grandTotalCountCell.textContent = grandTotal;
+            grandTotalCountCell.style.fontWeight = 'bold';
+            grandTotalCountCell.style.fontSize = '16px';
+            grandTotalRow.appendChild(grandTotalCountCell);
+            
+            tbody.appendChild(grandTotalRow);
+            
+            table.appendChild(tbody);
+            resultsDiv.appendChild(table);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..68ab0dc
--- /dev/null
+++ b/index.html
@@ -0,0 +1,151 @@
+<!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>
\ No newline at end of file