Edit index.php via Editor

assets/css/custom.css

@@ -0,0 +1,121 @@
+/*
+Palette:
+- Base: #FFFFFF
+- Panels: #F7F3ED
+- Hovers: #E8E1D9
+- Accent: #D4A373
+- Text: #333333
+*/
+
+body {
+    background-color: #f8f9fa;
+    background-image:
+        linear-gradient(45deg, #ccc 25%, transparent 25%),
+        linear-gradient(-45deg, #ccc 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #ccc 75%),
+        linear-gradient(-45deg, transparent 75%, #ccc 75%);
+    background-size: 20px 20px;
+    font-family: 'Inter', sans-serif;
+    color: #333333;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 700;
+}
+
+h1 { font-size: 32px; }
+h2 { font-size: 24px; }
+h3 { font-size: 20px; }
+
+.container {
+    max-width: 1200px;
+}
+
+.card {
+    background-color: rgba(247, 243, 237, 0.8);
+    backdrop-filter: blur(4px);
+    border: 1px solid rgba(0,0,0,0.05);
+    border-radius: 14px;
+    box-shadow: 0 8px 16px rgba(0,0,0,0.04);
+    padding: 1.5rem;
+}
+
+.card-title {
+    margin-bottom: 1.5rem;
+}
+
+.btn {
+    border-radius: 50px;
+    padding: 12px 24px;
+    font-weight: 500;
+    transition: all 0.2s ease-in-out;
+}
+
+.btn-primary {
+    background-color: #D4A373;
+    border-color: #D4A373;
+    color: #fff;
+}
+
+.btn-primary:hover {
+    background-color: #C39263;
+    border-color: #C39263;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.btn-secondary {
+    background-color: #fff;
+    border-color: #E8E1D9;
+    color: #333;
+}
+
+.btn-secondary:hover {
+    background-color: #E8E1D9;
+    border-color: #E8E1D9;
+}
+
+.form-control, .form-select {
+    border-radius: 10px;
+    background-color: #FFFFFF;
+    border: 1px solid #E8E1D9;
+    padding: 12px;
+}
+
+.form-control:focus, .form-select:focus {
+    border-color: #D4A373;
+    box-shadow: 0 0 0 4px rgba(212, 163, 115, 0.15);
+}
+
+.table {
+    border-color: #E8E1D9;
+}
+
+.table th {
+    font-weight: 500;
+    color: #777;
+}
+
+.table-hover tbody tr:hover {
+    background-color: rgba(232, 225, 217, 0.5);
+}
+
+.lead {
+    color: #666;
+    font-size: 1.1rem;
+}
+
+.divider {
+    border-top: 1px solid rgba(0,0,0,0.07);
+    margin: 2rem 0;
+}
+
+/* Chart.js minimal styling */
+.chart-container {
+    position: relative;
+    height: 40vh;
+    width: 100%;
+}

assets/js/main.js

@@ -0,0 +1,203 @@
+// Main javascript file
+
+document.addEventListener('DOMContentLoaded', function () {
+    const filters = document.querySelectorAll('select[id^="filter_"]');
+    filters.forEach(filter => {
+        filter.addEventListener('change', applyFilters);
+    });
+
+    if (document.getElementById('dateRange')) {
+        const dateRangePicker = $('#dateRange').daterangepicker({
+            opens: 'left',
+            autoUpdateInput: false,
+            locale: {
+                cancelLabel: 'Clear'
+            }
+        });
+
+        dateRangePicker.on('apply.daterangepicker', function(ev, picker) {
+            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
+            applyFilters();
+        });
+
+        dateRangePicker.on('cancel.daterangepicker', function(ev, picker) {
+            $(this).val('');
+            applyFilters();
+        });
+    }
+
+    // Keep track of chart instances
+    const charts = {};
+
+    function applyFilters() {
+        const activeFilters = {};
+        filters.forEach(f => {
+            if (f.value) {
+                activeFilters[f.id.replace('filter_', '')] = f.value;
+            }
+        });
+
+        let filteredData = sampleData.filter(row => {
+            for (const col in activeFilters) {
+                if (row[col] != activeFilters[col]) {
+                    return false;
+                }
+            }
+            return true;
+        });
+
+        const dateRange = $('#dateRange').val();
+        if (dateRange && charts.timeChart) {
+            const dates = dateRange.split(' - ');
+            const startDate = moment(dates[0], 'YYYY-MM-DD');
+            const endDate = moment(dates[1], 'YYYY-MM-DD');
+            const timeCol = Object.keys(charts.timeChart.data.datasets[0]._meta)[0];
+
+            filteredData = filteredData.filter(row => {
+                const rowDate = moment(row[timeCol], 'YYYY-MM-DD');
+                return rowDate.isBetween(startDate, endDate, null, '[]');
+            });
+        }
+
+        updateDashboard(filteredData);
+    }
+
+    function updateDashboard(data) {
+        updateKpis(data);
+        updateCharts(data);
+        updateTable(data);
+    }
+
+    function updateKpis(data) {
+        // This is a simplified example. It assumes the first KPI is always the one to be updated.
+        const kpiElements = document.querySelectorAll('.card-text.fs-4');
+        if (kpiElements.length >= 3) {
+            kpiElements[0].textContent = data.length;
+            
+            const kpiCol = document.querySelector('.card-subtitle.mb-2.text-muted').textContent.replace('Avg. ', '').replace('Total ', '');
+            
+            const total = data.reduce((sum, row) => sum + parseFloat(row[kpiCol] || 0), 0);
+            const avg = data.length > 0 ? total / data.length : 0;
+
+            kpiElements[1].textContent = Math.round(avg * 100) / 100;
+            kpiElements[2].textContent = total;
+        }
+    }
+
+    function updateCharts(data) {
+        if (charts.timeChart) {
+            const timeCol = charts.timeChart.data.datasets[0].label.replace(' over Time', '');
+            charts.timeChart.data.labels = data.map(row => row[timeCol]);
+            charts.timeChart.data.datasets[0].data = data.map(row => row[timeCol]);
+            charts.timeChart.update();
+        }
+
+        if (charts.categoryChart) {
+            const catCol = charts.categoryChart.data.datasets[0].label.replace('Top 10 by ', '');
+            const metCol = charts.categoryChart.data.datasets[0].label.replace('Top 10 by ', '');
+
+            const grouped_data = {};
+            data.forEach(row => {
+                const category = row[catCol];
+                if (!grouped_data[category]) {
+                    grouped_data[category] = 0;
+                }
+                grouped_data[category] += parseFloat(row[metCol]);
+            });
+
+            const sorted_data = Object.entries(grouped_data).sort(([,a],[,b]) => b-a).slice(0, 10);
+            
+            charts.categoryChart.data.labels = sorted_data.map(item => item[0]);
+            charts.categoryChart.data.datasets[0].data = sorted_data.map(item => item[1]);
+            charts.categoryChart.update();
+        }
+
+        if (charts.histogramChart) {
+            const metCol = charts.histogramChart.data.datasets[0].label.replace('Histogram of ', '');
+            charts.histogramChart.data.labels = data.map(row => row[metCol]);
+            charts.histogramChart.data.datasets[0].data = data.map(row => row[metCol]);
+            charts.histogramChart.update();
+        }
+    }
+
+    function updateTable(data) {
+        const tableBody = document.querySelector('.table-responsive tbody');
+        tableBody.innerHTML = '';
+        data.forEach(row => {
+            const tr = document.createElement('tr');
+            for (const cell in row) {
+                const td = document.createElement('td');
+                td.textContent = row[cell];
+                tr.appendChild(td);
+            }
+            tableBody.appendChild(tr);
+        });
+    }
+
+    document.getElementById('exportCsv').addEventListener('click', exportToCsv);
+
+    function exportToCsv() {
+        const activeFilters = {};
+        filters.forEach(f => {
+            if (f.value) {
+                activeFilters[f.id.replace('filter_', '')] = f.value;
+            }
+        });
+
+        let filteredData = sampleData.filter(row => {
+            for (const col in activeFilters) {
+                if (row[col] != activeFilters[col]) {
+                    return false;
+                }
+            }
+            return true;
+        });
+
+        const dateRange = $('#dateRange').val();
+        if (dateRange && charts.timeChart) {
+            const dates = dateRange.split(' - ');
+            const startDate = moment(dates[0], 'YYYY-MM-DD');
+            const endDate = moment(dates[1], 'YYYY-MM-DD');
+            const timeCol = Object.keys(charts.timeChart.data.datasets[0]._meta)[0];
+
+            filteredData = filteredData.filter(row => {
+                const rowDate = moment(row[timeCol], 'YYYY-MM-DD');
+                return rowDate.isBetween(startDate, endDate, null, '[]');
+            });
+        }
+
+        if (filteredData.length === 0) {
+            alert("No data to export.");
+            return;
+        }
+
+        const headers = Object.keys(filteredData[0]);
+        const csvContent = [
+            headers.join(','),
+            ...filteredData.map(row => headers.map(header => JSON.stringify(row[header])).join(','))
+        ].join('\n');
+
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        const url = URL.createObjectURL(blob);
+        link.setAttribute('href', url);
+        link.setAttribute('download', 'filtered_data.csv');
+        link.style.visibility = 'hidden';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+
+    document.querySelectorAll('.export-png').forEach(button => {
+        button.addEventListener('click', function() {
+            const chartId = this.dataset.chart;
+            const canvas = document.getElementById(chartId);
+            html2canvas(canvas.parentElement).then(canvas => {
+                const link = document.createElement('a');
+                link.download = chartId + '.png';
+                link.href = canvas.toDataURL();
+                link.click();
+            });
+        });
+    });
+}

dashboard.php

@@ -0,0 +1,225 @@
+<?php
+if (!isset($_SESSION['csv_analysis'])) {
+    echo '<p>No data available to generate a dashboard.</p>';
+    return;
+}
+
+$analysis = $_SESSION['csv_analysis'];
+$schema = $analysis['schema'];
+$suggestions = $analysis['suggestions'];
+$sample = $analysis['sample'];
+
+// Apply user-defined types from preview screen
+if (isset($_POST['column_types'])) {
+    foreach ($_POST['column_types'] as $col => $type) {
+        if (isset($schema[$col])) {
+            $schema[$col]['type'] = $type;
+        }
+    }
+    // Re-run suggestions with updated types
+    // (This requires the suggestion logic to be available here)
+    // For now, we'll just use the updated schema
+}
+
+?>
+
+<div class="row">
+    <!-- Filters -->
+    <div class="col-12 mb-4">
+        <div class="card">
+            <div class="card-body">
+                <h5 class="card-title">Filters</h5>
+                <div class="row">
+                    <?php if (isset($suggestions['time_chart'])): ?>
+                        <div class="col-md-4">
+                            <label for="dateRange" class="form-label">Date Range</label>
+                            <input type="text" class="form-control" id="dateRange" placeholder="Select date range...">
+                        </div>
+                    <?php endif; ?>
+                    <?php foreach ($suggestions['filters'] as $filter_col): ?>
+                        <div class="col-md-4">
+                            <label for="filter_<?php echo htmlspecialchars($filter_col); ?>" class="form-label"><?php echo htmlspecialchars($filter_col); ?></label>
+                            <select class="form-select" id="filter_<?php echo htmlspecialchars($filter_col); ?>">
+                                <option value="">All</option>
+                                <?php 
+                                    $unique_values = array_unique(array_column($sample, $filter_col));
+                                    sort($unique_values);
+                                    foreach ($unique_values as $value): 
+                                ?>
+                                    <option value="<?php echo htmlspecialchars($value); ?>"><?php echo htmlspecialchars($value); ?></option>
+                                <?php endforeach; ?>
+                            </select>
+                        </div>
+                    <?php endforeach; ?>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- KPIs -->
+    <div class="col-12 mb-4">
+        <div class="row row-cols-1 row-cols-md-3 g-4">
+            <?php if (!empty($suggestions['kpis'])): ?>
+                <div class="col">
+                    <div class="card text-center h-100 p-4">
+                        <h6 class="card-subtitle mb-2 text-muted">Total Rows</h6>
+                        <p class="card-text fs-2 fw-bold"><?php echo count($sample); ?></p>
+                    </div>
+                </div>
+                 <div class="col">
+                    <div class="card text-center h-100 p-4">
+                        <h6 class="card-subtitle mb-2 text-muted">Avg. <?php echo htmlspecialchars($suggestions['kpis'][0]); ?></h6>
+                        <p class="card-text fs-2 fw-bold"><?php echo round(array_sum(array_column($sample, $suggestions['kpis'][0])) / count($sample), 2); ?></p>
+                    </div>
+                </div>
+                 <div class="col">
+                    <div class="card text-center h-100 p-4">
+                        <h6 class="card-subtitle mb-2 text-muted">Total <?php echo htmlspecialchars($suggestions['kpis'][0]); ?></h6>
+                        <p class="card-text fs-2 fw-bold"><?php echo array_sum(array_column($sample, $suggestions['kpis'][0])); ?></p>
+                    </div>
+                </div>
+            <?php endif; ?>
+        </div>
+    </div>
+
+    <!-- Charts -->
+    <div class="row mt-5">
+        <div class="col-md-8 mb-4">
+            <?php if (isset($suggestions['time_chart'])): ?>
+                <div class="card p-4 h-100">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <h5 class="mb-0">Time Chart</h5>
+                        <button class="btn btn-sm btn-outline-secondary export-png" data-chart="timeChart">Export to PNG</button>
+                    </div>
+                    <canvas id="timeChart"></canvas>
+                </div>
+            <?php elseif (isset($suggestions['histogram'])): ?>
+                 <div class="card p-4 h-100">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <h5 class="mb-0">Histogram</h5>
+                        <button class="btn btn-sm btn-outline-secondary export-png" data-chart="histogramChart">Export to PNG</button>
+                    </div>
+                    <canvas id="histogramChart"></canvas>
+                </div>
+            <?php endif; ?>
+        </div>
+        <div class="col-md-4 mb-4">
+             <?php if (isset($suggestions['category_chart'])): ?>
+                <div class="card p-4 h-100">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <h5 class="mb-0">Category Chart</h5>
+                        <button class="btn btn-sm btn-outline-secondary export-png" data-chart="categoryChart">Export to PNG</button>
+                    </div>
+                    <canvas id="categoryChart"></canvas>
+                </div>
+            <?php elseif (isset($suggestions['category_table'])): ?>
+                <div class="card p-4 h-100">
+                     <h5>Top Categories</h5>
+                     <table class="table">
+                        <!-- category table rendering -->
+                     </table>
+                </div>
+            <?php endif; ?>
+        </div>
+    </div>
+
+    <!-- Data Table -->
+    <div class="row mt-4">
+        <div class="col-12">
+            <div class="card p-4">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <h5 class="mb-0">Sample Data</h5>
+                    <button class="btn btn-sm btn-outline-secondary" id="exportCsv">Export to CSV</button>
+                </div>
+                <div class="table-responsive">
+                    <table class="table table-sm table-striped">
+                        <thead>
+                            <tr>
+                            <?php foreach ($analysis['header'] as $col): ?>
+                                <th><?php echo htmlspecialchars($col); ?></th>
+                            <?php endforeach; ?>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <?php foreach ($sample as $row): ?>
+                            <tr>
+                                <?php foreach ($row as $value): ?>
+                                <td><?php echo htmlspecialchars($value); ?></td>
+                                <?php endforeach; ?>
+                            </tr>
+                            <?php endforeach; ?>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+var sampleData = <?php echo json_encode($sample); ?>;
+var charts = {};
+document.addEventListener('DOMContentLoaded', function () {
+    <?php if (isset($suggestions['time_chart'])): ?>
+    charts.timeChart = new Chart(document.getElementById('timeChart'), {
+        type: 'line',
+        data: {
+            labels: <?php echo json_encode(array_column($sample, $suggestions['time_chart']['time_col'])); ?>,
+            datasets: [{
+                label: '<?php echo htmlspecialchars($suggestions['time_chart']['metric_col']); ?> over Time',
+                data: <?php echo json_encode(array_column($sample, $suggestions['time_chart']['metric_col'])); ?>,
+                borderColor: '#D4A373',
+                tension: 0.1
+            }]
+        }
+    });
+    <?php endif; ?>
+
+    <?php 
+    if (isset($suggestions['category_chart'])):
+        $cat_col = $suggestions['category_chart']['category_col'];
+        $met_col = $suggestions['category_chart']['metric_col'];
+        $grouped_data = [];
+        foreach ($sample as $row) {
+            $category = $row[$cat_col];
+            if (!isset($grouped_data[$category])) {
+                $grouped_data[$category] = 0;
+            }
+            $grouped_data[$category] += (float)$row[$met_col];
+        }
+        arsort($grouped_data);
+        $top_10 = array_slice($grouped_data, 0, 10);
+        $chart_labels = array_keys($top_10);
+        $chart_data = array_values($top_10);
+    ?>
+    charts.categoryChart = new Chart(document.getElementById('categoryChart'), {
+        type: 'bar',
+        data: {
+            labels: <?php echo json_encode($chart_labels); ?>,
+            datasets: [{
+                label: 'Top 10 by <?php echo htmlspecialchars($met_col); ?>',
+                data: <?php echo json_encode($chart_data); ?>,
+                backgroundColor: '#F7F3ED'
+            }]
+        },
+        options: {
+            indexAxis: 'y',
+        }
+    });
+    <?php endif; ?>
+    
+    <?php if (isset($suggestions['histogram'])): ?>
+    charts.histogramChart = new Chart(document.getElementById('histogramChart'), {
+        type: 'bar',
+        data: {
+            labels: <?php echo json_encode(array_column($sample, $suggestions['histogram']['metric_col'])); ?>,
+            datasets: [{
+                label: 'Histogram of <?php echo htmlspecialchars($suggestions['histogram']['metric_col']); ?>',
+                data: <?php echo json_encode(array_column($sample, $suggestions['histogram']['metric_col'])); ?>,
+                backgroundColor: '#F7F3ED'
+            }]
+        }
+    });
+    <?php endif; ?>
+});
+</script>

index.php

@@ -1,150 +1,150 @@
 <?php 
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+session_start(); 
+
+// Handle clearing the session
+if (isset($_GET['clear'])) {
+    unset($_SESSION['csv_analysis']);
+    unset($_SESSION['show_dashboard']);
+    header('Location: index.php');
+    exit;
+}
+
+// Handle dashboard generation
+if (isset($_POST['generate_dashboard'])) {
+    if (isset($_SESSION['csv_analysis'])) {
+        // Update schema with user corrections
+        if (isset($_POST['column_types'])) {
+            foreach ($_POST['column_types'] as $col => $type) {
+                if (isset($_SESSION['csv_analysis']['schema'][$col])) {
+                    $_SESSION['csv_analysis']['schema'][$col]['type'] = $type;
+                }
+            }
+            // Re-run suggestions if needed (or just use updated schema in dashboard.php)
+        }
+        $_SESSION['show_dashboard'] = true;
+    }
+    header('Location: index.php');
+    exit;
+}
+
+$show_dashboard = isset($_SESSION['show_dashboard']) && $_SESSION['show_dashboard'];
+$csv_analysis = isset($_SESSION['csv_analysis']) ? $_SESSION['csv_analysis'] : null;
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
 ?>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CVS Uploader and Dashboard</title>
+    <meta name="description" content="InstantDashboard: Upload CSVs to view insightful data summaries with automatic column type detection.">
+    <meta name="keywords" content="csv dashboard, data visualization, file upload, data analysis, csv reader, data insights, business intelligence, no-code tools, data reporting, analytics dashboard, tsv support, data summary">
+    <meta property="og:title" content="dashboard-for-philip-v001">
+    <meta property="og:description" content="InstantDashboard: Upload CSVs to view insightful data summaries with automatic column type detection.">
+    <meta property="og:image" content="https://project-screens.s3.amazonaws.com/screenshots/34601/app-hero-20251002-190105.png">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="https://project-screens.s3.amazonaws.com/screenshots/34601/app-hero-20251002-190105.png">
+    
+    <link rel="icon" href="assets/pasted-20251003-114511-3bf2c1aa.png">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Montserrat:wght@700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
 </head>
 <body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
+
+    <div class="container py-5">
+        <header class="text-center mb-5">
+            <img src="assets/pasted-20251003-114511-3bf2c1aa.png" alt="Logo" class="mb-4" style="max-width: 150px;">
+            <h1 class="display-4">Instant CSV Dashboard by Flatlogic. V1</h1>
+            <p class="lead">Upload a CSV or TSV file to automatically generate an interactive dashboard.</p>
+            <hr class="divider my-4">
+        </header>
+
+        <?php if ($show_dashboard && $csv_analysis): ?>
+            <div id="dashboard-container">
+                <?php include 'dashboard.php'; ?>
             </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+             <div class="text-center mt-4">
+                <a href="index.php?clear=1" class="btn btn-info">Start Over with a New File</a>
             </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+
+        <?php elseif ($csv_analysis): ?>
+            <div class="row justify-content-center" id="schema-preview">
+                <div class="col-lg-10">
+                    <div class="card p-4">
+                        <h2 class="text-center mb-4">Schema Preview</h2>
+                        <?php if (isset($csv_analysis['error'])): ?>
+                            <div class="alert alert-danger"><?php echo htmlspecialchars($csv_analysis['error']); ?></div>
+                             <a href="index.php?clear=1" class="btn btn-secondary">Upload New File</a>
+                        <?php else: ?>
+                            <form action="index.php" method="post">
+                                <table class="table table-striped table-hover">
+                                    <thead>
+                                        <tr>
+                                            <th>Column Name</th>
+                                            <th>Guessed Type</th>
+                                            <th>Unique Values</th>
+                                            <th>Blank Values</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <?php foreach ($csv_analysis['schema'] as $col => $info): ?>
+                                        <tr>
+                                            <td><?php echo htmlspecialchars($col); ?></td>
+                                            <td>
+                                                <select class="form-select form-select-sm" name="column_types[<?php echo htmlspecialchars($col); ?>]">
+                                                    <option value="text" <?php if ($info['type'] == 'text') echo 'selected'; ?>>Text</option>
+                                                    <option value="integer" <?php if ($info['type'] == 'integer') echo 'selected'; ?>>Integer</option>
+                                                    <option value="decimal" <?php if ($info['type'] == 'decimal') echo 'selected'; ?>>Decimal</option>
+                                                    <option value="date" <?php if ($info['type'] == 'date') echo 'selected'; ?>>Date</option>
+                                                </select>
+                                            </td>
+                                            <td><?php echo $info['unique_count']; ?></td>
+                                            <td><?php echo $info['blank_count']; ?></td>
+                                        </tr>
+                                        <?php endforeach; ?>
+                                    </tbody>
+                                </table>
+                                <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
+                                    <a href="index.php?clear=1" class="btn btn-secondary">Upload New File</a>
+                                    <button type="submit" name="generate_dashboard" class="btn btn-primary">Generate Dashboard</button>
+                                </div>
+                            </form>
+                        <?php endif; ?>
+                    </div>
+                </div>
+            </div>
+        <?php else: ?>
+            <div class="row justify-content-center">
+                <div class="col-lg-8">
+                    <div class="card p-5">
+                        <div class="card-body">
+                            <h2 class="card-title text-center mb-4">Upload Your Data</h2>
+                            <form action="upload.php" method="post" enctype="multipart/form-data">
+                                <div class="mb-3">
+                                    <input class="form-control form-control-lg" type="file" id="csvFile" name="csvFile" accept=".csv, .tsv" required>
+                                </div>
+                                <div class="d-grid">
+                                    <button type="submit" class="btn btn-primary btn-lg">Upload for Preview</button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        <?php endif; ?>
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="assets/js/main.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>
 </body>
 </html>

upload.php

@@ -0,0 +1,127 @@
+<?php
+session_start();
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['csvFile'])) {
+    $file = $_FILES['csvFile'];
+
+    if ($file['error'] === UPLOAD_ERR_OK) {
+        $filePath = $file['tmp_name'];
+        
+        // Analyze the CSV file
+        $analysis = analyzeCsv($filePath);
+        
+        // Store analysis in session
+        $_SESSION['csv_analysis'] = $analysis;
+        
+        // Redirect back to the main page
+        header('Location: index.php');
+        exit;
+    }
+}
+
+// Simple CSV analysis function
+function analyzeCsv($filePath, $rowsToAnalyze = 500) {
+    $fileHandle = fopen($filePath, 'r');
+    if (!$fileHandle) {
+        return ['error' => 'Could not open file'];
+    }
+
+    // 1. Detect Delimiter
+    $firstLine = fgets($fileHandle);
+    $commaCount = substr_count($firstLine, ',');
+    $tabCount = substr_count($firstLine, "\t");
+    $delimiter = $tabCount > $commaCount ? "\t" : ',';
+    
+    // Reset pointer and read header
+    rewind($fileHandle);
+    $header = fgetcsv($fileHandle, 0, $delimiter);
+    
+    $data = [];
+    $rowCount = 0;
+    while (($row = fgetcsv($fileHandle, 0, $delimiter)) !== false && $rowCount < $rowsToAnalyze) {
+        if (count($row) == count($header)) {
+            $data[] = array_combine($header, $row);
+        }
+        $rowCount++;
+    }
+    fclose($fileHandle);
+
+    if (empty($data)) {
+        return ['error' => 'No data found in file or header mismatch.'];
+    }
+
+    // 2. Guess Column Types and Stats
+    $schema = [];
+    foreach ($header as $col) {
+        $values = array_column($data, $col);
+        $uniqueVals = array_unique($values);
+        $blankCount = count(array_filter($values, fn($v) => $v === '' || $v === null));
+
+        // Type detection
+        $type = 'text';
+        $isNumeric = true;
+        $isInteger = true;
+        $isDate = true;
+        
+        foreach ($values as $val) {
+            if ($val === '' || $val === null) continue;
+
+            if (!is_numeric($val)) $isNumeric = false;
+            if (filter_var($val, FILTER_VALIDATE_INT) === false) $isInteger = false;
+            if (strtotime($val) === false) $isDate = false;
+        }
+
+        if ($isDate) {
+            $type = 'date';
+        } elseif ($isNumeric) {
+            $type = $isInteger ? 'integer' : 'decimal';
+        }
+
+        $schema[$col] = [
+            'type' => $type,
+            'unique_count' => count($uniqueVals),
+            'blank_count' => $blankCount
+        ];
+    }
+
+    // 3. Suggest dashboard items
+    $suggestions = suggestDashboard($schema);
+
+    return [
+        'delimiter' => $delimiter,
+        'header' => $header,
+        'schema' => $schema,
+        'suggestions' => $suggestions,
+        'sample' => array_slice($data, 0, 20)
+    ];
+}
+
+function suggestDashboard($schema) {
+    $suggestions = [];
+    $dateCols = [];
+    $numericCols = [];
+    $categoryCols = [];
+
+    foreach ($schema as $col => $info) {
+        if ($info['type'] === 'date') $dateCols[] = $col;
+        if ($info['type'] === 'integer' || $info['type'] === 'decimal') $numericCols[] = $col;
+        if ($info['type'] === 'text' && $info['unique_count'] < 50) $categoryCols[] = $col;
+    }
+
+    if (!empty($dateCols) && !empty($numericCols)) {
+        $suggestions['time_chart'] = ['time_col' => $dateCols[0], 'metric_col' => $numericCols[0]];
+    } elseif (!empty($numericCols)) {
+        $suggestions['histogram'] = ['metric_col' => $numericCols[0]];
+    }
+
+    if (!empty($categoryCols) && !empty($numericCols)) {
+        $suggestions['category_chart'] = ['category_col' => $categoryCols[0], 'metric_col' => $numericCols[0]];
+    } elseif (empty($numericCols) && !empty($categoryCols)) {
+        $suggestions['category_table'] = ['category_col' => $categoryCols[0]];
+    }
+    
+    $suggestions['kpis'] = !empty($numericCols) ? $numericCols : [];
+    $suggestions['filters'] = array_slice($categoryCols, 0, 2);
+
+    return $suggestions;
+}