diff --git a/api.php b/api.php
new file mode 100644
index 0000000..43cc3ae
--- /dev/null
+++ b/api.php
@@ -0,0 +1,454 @@
+<?php
+require_once __DIR__ . '/db/config.php';
+
+function get_unique_members($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT COUNT(DISTINCT m.id) AS unique_members
+        FROM members m
+        JOIN attendance a ON m.id = a.member_id
+        WHERE m.community_id = ?
+        AND a.attendance_date BETWEEN ? AND ?
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date]);
+    return $stmt->fetch();
+}
+
+function get_unique_members_drilldown($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT m.name, m.email, m.join_date, MAX(a.attendance_date) as last_visit
+        FROM members m
+        JOIN attendance a ON m.id = a.member_id
+        WHERE m.community_id = ?
+        AND a.attendance_date BETWEEN ? AND ?
+        GROUP BY m.id, m.name, m.email, m.join_date
+        ORDER BY m.name
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date]);
+    return $stmt->fetchAll();
+}
+
+if (isset($_GET['kpi'])) {
+    header('Content-Type: application/json');
+    $community_id = $_GET['community_id'] ?? 1;
+    $start_date = $_GET['start_date'] ?? date('Y-m-01');
+    $end_date = $_GET['end_date'] ?? date('Y-m-t');
+
+    switch ($_GET['kpi']) {
+        case 'unique_members':
+            echo json_encode(get_unique_members($community_id, $start_date, $end_date));
+            break;
+        case 'unique_members_drilldown':
+            echo json_encode(get_unique_members_drilldown($community_id, $start_date, $end_date));
+            break;
+        case 'avg_class_attendance':
+            echo json_encode(get_avg_class_attendance($community_id, $start_date, $end_date));
+            break;
+        case 'avg_class_attendance_drilldown':
+            echo json_encode(get_avg_class_attendance_drilldown($community_id, $start_date, $end_date));
+            break;
+        case 'classes_lightly_attended':
+            echo json_encode(get_classes_lightly_attended($community_id, $start_date, $end_date));
+            break;
+        case 'classes_lightly_attended_drilldown':
+            echo json_encode(get_classes_lightly_attended_drilldown($community_id, $start_date, $end_date));
+            break;
+        case 'attendance_trend':
+            echo json_encode(get_attendance_trend($community_id, $start_date, $end_date));
+            break;
+        case 'avg_visits_per_member':
+            echo json_encode(get_avg_visits_per_member($community_id, $start_date, $end_date));
+            break;
+        case 'avg_visits_per_member_drilldown':
+            echo json_encode(get_avg_visits_per_member_drilldown($community_id, $start_date, $end_date));
+            break;
+        case 'high_frequency_members':
+            echo json_encode(get_high_frequency_members($community_id, $start_date, $end_date));
+            break;
+        case 'high_frequency_members_drilldown':
+            echo json_encode(get_high_frequency_members_drilldown($community_id, $start_date, $end_date));
+            break;
+        case 'total_revenue':
+            echo json_encode(get_total_revenue($community_id, $start_date, $end_date));
+            break;
+        case 'total_revenue_drilldown':
+            echo json_encode(get_total_revenue_drilldown($community_id, $start_date, $end_date));
+            break;
+        case 'revenue_per_active_member':
+            echo json_encode(get_revenue_per_active_member($community_id, $start_date, $end_date));
+            break;
+        case 'revenue_per_active_member_drilldown':
+            echo json_encode(get_revenue_per_active_member_drilldown($community_id, $start_date, $end_date));
+            break;
+        case 'inactive_members':
+            echo json_encode(get_inactive_members($community_id, $start_date, $end_date));
+            break;
+        case 'inactive_members_drilldown':
+            echo json_encode(get_inactive_members_drilldown($community_id, $start_date, $end_date));
+            break;
+        case 'visits_dropped':
+            echo json_encode(get_visits_dropped($community_id, $start_date, $end_date));
+            break;
+        case 'attendance_trend_drilldown':
+            echo json_encode(get_attendance_trend_drilldown($community_id, $start_date, $end_date));
+            break;
+        case 'attendance_over_time':
+            echo json_encode(get_attendance_over_time($community_id, $start_date, $end_date));
+            break;
+        case 'visit_frequency_distribution':
+            echo json_encode(get_visit_frequency_distribution($community_id, $start_date, $end_date));
+            break;
+    }
+    exit;
+}
+
+function get_avg_class_attendance($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT AVG(daily_attendance) as avg_attendance
+        FROM (
+            SELECT COUNT(member_id) as daily_attendance
+            FROM attendance a
+            JOIN members m ON a.member_id = m.id
+            WHERE m.community_id = ?
+            AND a.attendance_date BETWEEN ? AND ?
+            GROUP BY a.class_id, a.attendance_date
+        ) as daily_counts
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date]);
+    $result = $stmt->fetch();
+    return ['avg_class_attendance' => round($result['avg_attendance'], 2)];
+}
+
+function get_avg_class_attendance_drilldown($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT c.name as class_name, DATE(a.attendance_date) as date, COUNT(a.member_id) as attendance_count
+        FROM attendance a
+        JOIN classes c ON a.class_id = c.id
+        JOIN members m ON a.member_id = m.id
+        WHERE m.community_id = ?
+        AND a.attendance_date BETWEEN ? AND ?
+        GROUP BY c.name, DATE(a.attendance_date)
+        ORDER BY date, class_name
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date]);
+    return $stmt->fetchAll();
+}
+
+function get_classes_lightly_attended($community_id, $start_date, $end_date, $threshold = 5) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT (CAST(SUM(CASE WHEN attendance_count < ? THEN 1 ELSE 0 END) AS DECIMAL(10,2)) / COUNT(*)) * 100 as percentage
+        FROM (
+            SELECT COUNT(a.member_id) as attendance_count
+            FROM attendance a
+            JOIN members m ON a.member_id = m.id
+            WHERE m.community_id = ?
+            AND a.attendance_date BETWEEN ? AND ?
+            GROUP BY a.class_id, a.attendance_date
+        ) as class_counts
+    """);
+    $stmt->execute([$threshold, $community_id, $start_date, $end_date]);
+    $result = $stmt->fetch();
+    return ['classes_lightly_attended' => round($result['percentage'], 2)];
+}
+
+function get_classes_lightly_attended_drilldown($community_id, $start_date, $end_date, $threshold = 5) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT c.name as class_name, DATE(a.attendance_date) as date, COUNT(a.member_id) as attendance_count
+        FROM attendance a
+        JOIN classes c ON a.class_id = c.id
+        JOIN members m ON a.member_id = m.id
+        WHERE m.community_id = ?
+        AND a.attendance_date BETWEEN ? AND ?
+        GROUP BY c.name, DATE(a.attendance_date)
+        HAVING COUNT(a.member_id) < ?
+        ORDER BY date, class_name
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date, $threshold]);
+    return $stmt->fetchAll();
+}
+
+function get_attendance_trend($community_id, $start_date, $end_date) {
+    $pdo = db();
+
+    $current_period_stmt = $pdo->prepare("SELECT COUNT(*) as count FROM attendance a JOIN members m ON m.id = a.member_id WHERE m.community_id = ? AND a.attendance_date BETWEEN ? AND ?");
+    $current_period_stmt->execute([$community_id, $start_date, $end_date]);
+    $current_period_count = $current_period_stmt->fetchColumn();
+
+    $period_days = (new DateTime($end_date))->diff(new DateTime($start_date))->days;
+    $previous_start_date = (new DateTime($start_date))->modify("-" . ($period_days + 1) . " days")->format('Y-m-d');
+    $previous_end_date = (new DateTime($end_date))->modify("-" . ($period_days + 1) . " days")->format('Y-m-d');
+
+    $previous_period_stmt = $pdo->prepare("SELECT COUNT(*) as count FROM attendance a JOIN members m ON m.id = a.member_id WHERE m.community_id = ? AND a.attendance_date BETWEEN ? AND ?");
+    $previous_period_stmt->execute([$community_id, $previous_start_date, $previous_end_date]);
+    $previous_period_count = $previous_period_stmt->fetchColumn();
+
+    if ($previous_period_count == 0) {
+        $trend = $current_period_count > 0 ? 100 : 0;
+    } else {
+        $trend = (($current_period_count - $previous_period_count) / $previous_period_count) * 100;
+    }
+
+    return ['attendance_trend' => round($trend, 2)];
+}
+
+function get_avg_visits_per_member($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT AVG(visit_count) as avg_visits
+        FROM (
+            SELECT COUNT(a.id) as visit_count
+            FROM members m
+            JOIN attendance a ON m.id = a.member_id
+            WHERE m.community_id = ?
+            AND a.attendance_date BETWEEN ? AND ?
+            GROUP BY m.id
+        ) as member_visits
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date]);
+    $result = $stmt->fetch();
+    return ['avg_visits_per_member' => round($result['avg_visits'], 2)];
+}
+
+function get_avg_visits_per_member_drilldown($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT m.name, m.email, COUNT(a.id) as visit_count
+        FROM members m
+        JOIN attendance a ON m.id = a.member_id
+        WHERE m.community_id = ?
+        AND a.attendance_date BETWEEN ? AND ?
+        GROUP BY m.id, m.name, m.email
+        ORDER BY visit_count DESC
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date]);
+    return $stmt->fetchAll();
+}
+
+function get_high_frequency_members($community_id, $start_date, $end_date, $frequency_threshold = 5) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT (CAST(SUM(CASE WHEN visit_count >= ? THEN 1 ELSE 0 END) AS DECIMAL(10,2)) / COUNT(*)) * 100 as percentage
+        FROM (
+            SELECT COUNT(a.id) as visit_count
+            FROM members m
+            JOIN attendance a ON m.id = a.member_id
+            WHERE m.community_id = ?
+            AND a.attendance_date BETWEEN ? AND ?
+            GROUP BY m.id
+        ) as member_visits
+    """);
+    $stmt->execute([$frequency_threshold, $community_id, $start_date, $end_date]);
+    $result = $stmt->fetch();
+    return ['high_frequency_members' => round($result['percentage'], 2)];
+}
+
+function get_high_frequency_members_drilldown($community_id, $start_date, $end_date, $frequency_threshold = 5) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT m.name, m.email, COUNT(a.id) as visit_count
+        FROM members m
+        JOIN attendance a ON m.id = a.member_id
+        WHERE m.community_id = ?
+        AND a.attendance_date BETWEEN ? AND ?
+        GROUP BY m.id, m.name, m.email
+        HAVING visit_count >= ?
+        ORDER BY visit_count DESC
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date, $frequency_threshold]);
+    return $stmt->fetchAll();
+}
+
+function get_total_revenue($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT SUM(r.amount) as total_revenue
+        FROM revenue r
+        JOIN members m ON r.member_id = m.id
+        WHERE m.community_id = ?
+        AND r.transaction_date BETWEEN ? AND ?
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date]);
+    $result = $stmt->fetch();
+    return ['total_revenue' => round($result['total_revenue'], 2)];
+}
+
+function get_total_revenue_drilldown($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT m.name, m.email, r.amount, r.service_category, r.transaction_date
+        FROM revenue r
+        JOIN members m ON r.member_id = m.id
+        WHERE m.community_id = ?
+        AND r.transaction_date BETWEEN ? AND ?
+        ORDER BY r.transaction_date DESC
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date]);
+    return $stmt->fetchAll();
+}
+
+function get_revenue_per_active_member($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT SUM(r.amount) / COUNT(DISTINCT r.member_id) as revenue_per_active_member
+        FROM revenue r
+        JOIN members m ON r.member_id = m.id
+        WHERE m.community_id = ?
+        AND r.transaction_date BETWEEN ? AND ?
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date]);
+    $result = $stmt->fetch();
+    return ['revenue_per_active_member' => round($result['revenue_per_active_member'], 2)];
+}
+
+function get_revenue_per_active_member_drilldown($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT m.name, m.email, SUM(r.amount) as total_revenue, COUNT(r.id) as transaction_count
+        FROM revenue r
+        JOIN members m ON r.member_id = m.id
+        WHERE m.community_id = ?
+        AND r.transaction_date BETWEEN ? AND ?
+        GROUP BY m.id, m.name, m.email
+        ORDER BY total_revenue DESC
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date]);
+    return $stmt->fetchAll();
+}
+
+function get_inactive_members($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT 
+            (1 - (COUNT(DISTINCT a.member_id) / COUNT(DISTINCT m.id))) * 100 as inactive_percentage
+        FROM members m
+        LEFT JOIN attendance a ON m.id = a.member_id AND a.attendance_date BETWEEN ? AND ?
+        WHERE m.community_id = ?
+    """);
+    $stmt->execute([$start_date, $end_date, $community_id]);
+    $result = $stmt->fetch();
+    return ['inactive_members' => round($result['inactive_percentage'], 2)];
+}
+
+function get_inactive_members_drilldown($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT m.name, m.email, m.join_date
+        FROM members m
+        LEFT JOIN attendance a ON m.id = a.member_id AND a.attendance_date BETWEEN ? AND ?
+        WHERE m.community_id = ?
+        GROUP BY m.id
+        HAVING COUNT(a.id) = 0
+    """);
+    $stmt->execute([$start_date, $end_date, $community_id]);
+    return $stmt->fetchAll();
+}
+
+function get_visits_dropped($community_id, $start_date, $end_date) {
+    $pdo = db();
+
+    $current_period_stmt = $pdo->prepare("SELECT COUNT(*) as count FROM attendance a JOIN members m ON m.id = a.member_id WHERE m.community_id = ? AND a.attendance_date BETWEEN ? AND ?");
+    $current_period_stmt->execute([$community_id, $start_date, $end_date]);
+    $current_period_count = $current_period_stmt->fetchColumn();
+
+    $period_days = (new DateTime($end_date))->diff(new DateTime($start_date))->days;
+    $previous_start_date = (new DateTime($start_date))->modify("-" . ($period_days + 1) . " days")->format('Y-m-d');
+    $previous_end_date = (new DateTime($end_date))->modify("-" . ($period_days + 1) . " days")->format('Y-m-d');
+
+    $previous_period_stmt = $pdo->prepare("SELECT COUNT(*) as count FROM attendance a JOIN members m ON m.id = a.member_id WHERE m.community_id = ? AND a.attendance_date BETWEEN ? AND ?");
+    $previous_period_stmt->execute([$community_id, $previous_start_date, $previous_end_date]);
+    $previous_period_count = $previous_period_stmt->fetchColumn();
+
+    if ($previous_period_count == 0) {
+        $trend = $current_period_count > 0 ? 100 : 0;
+    } else {
+        $trend = (($current_period_count - $previous_period_count) / $previous_period_count) * 100;
+    }
+
+    return ['visits_dropped' => round($trend, 2)];
+}
+
+function get_attendance_trend_drilldown($community_id, $start_date, $end_date) {
+    $pdo = db();
+
+    $current_period_stmt = $pdo->prepare("SELECT COUNT(*) as count FROM attendance a JOIN members m ON m.id = a.member_id WHERE m.community_id = ? AND a.attendance_date BETWEEN ? AND ?");
+    $current_period_stmt->execute([$community_id, $start_date, $end_date]);
+    $current_period_count = $current_period_stmt->fetchColumn();
+
+    $period_days = (new DateTime($end_date))->diff(new DateTime($start_date))->days;
+    $previous_start_date = (new DateTime($start_date))->modify("-" . ($period_days + 1) . " days")->format('Y-m-d');
+    $previous_end_date = (new DateTime($end_date))->modify("-" . ($period_days + 1) . " days")->format('Y-m-d');
+
+    $previous_period_stmt = $pdo->prepare("SELECT COUNT(*) as count FROM attendance a JOIN members m ON m.id = a.member_id WHERE m.community_id = ? AND a.attendance_date BETWEEN ? AND ?");
+    $previous_period_stmt->execute([$community_id, $previous_start_date, $previous_end_date]);
+    $previous_period_count = $previous_period_stmt->fetchColumn();
+
+    return [
+        ['period' => 'Current Period', 'visits' => $current_period_count],
+        ['period' => 'Previous Period', 'visits' => $previous_period_count]
+    ];
+}
+
+function get_attendance_over_time($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT DATE(a.attendance_date) as date, COUNT(a.id) as attendance_count
+        FROM attendance a
+        JOIN members m ON a.member_id = m.id
+        WHERE m.community_id = ?
+        AND a.attendance_date BETWEEN ? AND ?
+        GROUP BY DATE(a.attendance_date)
+        ORDER BY date
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date]);
+    $data = $stmt->fetchAll();
+
+    $labels = [];
+    $values = [];
+    foreach ($data as $row) {
+        $labels[] = $row['date'];
+        $values[] = $row['attendance_count'];
+    }
+
+    return ['labels' => $labels, 'data' => $values];
+}
+
+function get_visit_frequency_distribution($community_id, $start_date, $end_date) {
+    $pdo = db();
+    $stmt = $pdo->prepare("""
+        SELECT 
+            CASE
+                WHEN visit_count = 1 THEN '1 visit'
+                WHEN visit_count BETWEEN 2 AND 4 THEN '2-4 visits'
+                WHEN visit_count BETWEEN 5 AND 9 THEN '5-9 visits'
+                ELSE '10+ visits'
+            END as frequency_bucket,
+            COUNT(*) as member_count
+        FROM (
+            SELECT COUNT(a.id) as visit_count
+            FROM members m
+            JOIN attendance a ON m.id = a.member_id
+            WHERE m.community_id = ?
+            AND a.attendance_date BETWEEN ? AND ?
+            GROUP BY m.id
+        ) as member_visits
+        GROUP BY frequency_bucket
+    """);
+    $stmt->execute([$community_id, $start_date, $end_date]);
+    $data = $stmt->fetchAll();
+
+    $labels = ['1 visit', '2-4 visits', '5-9 visits', '10+ visits'];
+    $values = [0, 0, 0, 0];
+    foreach ($data as $row) {
+        $index = array_search($row['frequency_bucket'], $labels);
+        if ($index !== false) {
+            $values[$index] = $row['member_count'];
+        }
+    }
+
+    return ['labels' => $labels, 'data' => $values];
+}
diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..5a7a479
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,33 @@
+body {
+    background-color: #f8f9fa;
+}
+
+.kpi-card {
+    border-left-width: 5px;
+}
+
+.border-left-primary {
+    border-left-color: #007bff;
+}
+
+.border-left-success {
+    border-left-color: #28a745;
+}
+
+.border-left-danger {
+    border-left-color: #dc3545;
+}
+
+.border-left-info {
+    border-left-color: #17a2b8;
+}
+
+.kpi-value {
+    font-size: 2.5rem;
+    font-weight: bold;
+}
+
+.kpi-label {
+    font-weight: 500;
+    color: #6c757d;
+}
diff --git a/assets/pasted-20251230-211133-cc45faf9.png b/assets/pasted-20251230-211133-cc45faf9.png
new file mode 100644
index 0000000..af012e5
Binary files /dev/null and b/assets/pasted-20251230-211133-cc45faf9.png differ
diff --git a/db/setup.php b/db/setup.php
new file mode 100644
index 0000000..e7847f8
--- /dev/null
+++ b/db/setup.php
@@ -0,0 +1,112 @@
+<?php
+require_once __DIR__ . '/config.php';
+
+function setup_database() {
+    $pdo = db();
+
+    // Create communities table
+    $pdo->exec("""
+    CREATE TABLE IF NOT EXISTS communities (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        name VARCHAR(255) NOT NULL
+    )
+    """);
+
+    // Create members table
+    $pdo->exec("""
+    CREATE TABLE IF NOT EXISTS members (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        community_id INT NOT NULL,
+        name VARCHAR(255) NOT NULL,
+        email VARCHAR(255) NOT NULL,
+        join_date DATE NOT NULL,
+        FOREIGN KEY (community_id) REFERENCES communities(id)
+    )
+    """);
+
+    // Create classes table
+    $pdo->exec("""
+    CREATE TABLE IF NOT EXISTS classes (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        name VARCHAR(255) NOT NULL,
+        instructor VARCHAR(255) NOT NULL
+    )
+    """);
+
+    // Create attendance table
+    $pdo->exec("""
+    CREATE TABLE IF NOT EXISTS attendance (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        member_id INT NOT NULL,
+        class_id INT NOT NULL,
+        attendance_date DATE NOT NULL,
+        FOREIGN KEY (member_id) REFERENCES members(id),
+        FOREIGN KEY (class_id) REFERENCES classes(id)
+    )
+    """);
+
+    // Create revenue table
+    $pdo->exec("""
+    CREATE TABLE IF NOT EXISTS revenue (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        member_id INT NOT NULL,
+        amount DECIMAL(10, 2) NOT NULL,
+        service_category VARCHAR(255) NOT NULL,
+        transaction_date DATE NOT NULL,
+        FOREIGN KEY (member_id) REFERENCES members(id)
+    )
+    """);
+
+    // Seed data
+    $stmt = $pdo->query("SELECT COUNT(*) FROM communities");
+    if ($stmt->fetchColumn() == 0) {
+        // Seed communities
+        $communities = ['Valencia Sound', 'Valencia Reserve', 'Valencia Cove'];
+        $stmt = $pdo->prepare("INSERT INTO communities (name) VALUES (?)");
+        foreach ($communities as $community) {
+            $stmt->execute([$community]);
+        }
+
+        // Seed members
+        $members = [
+            [1, 'John Doe', 'john.doe@email.com', '2025-01-15'],
+            [1, 'Jane Smith', 'jane.smith@email.com', '2025-02-20'],
+            [2, 'Peter Jones', 'peter.jones@email.com', '2025-03-10'],
+            [2, 'Mary Johnson', 'mary.johnson@email.com', '2025-04-05'],
+            [3, 'David Williams', 'david.williams@email.com', '2025-05-12'],
+            [3, 'Susan Brown', 'susan.brown@email.com', '2025-06-18'],
+        ];
+        $stmt = $pdo->prepare("INSERT INTO members (community_id, name, email, join_date) VALUES (?, ?, ?, ?)");
+        foreach ($members as $member) {
+            $stmt->execute($member);
+        }
+
+        // Seed classes
+        $classes = ['Yoga', 'Pilates', 'Zumba', 'Spin'];
+        $stmt = $pdo->prepare("INSERT INTO classes (name, instructor) VALUES (?, ?)");
+        foreach ($classes as $class) {
+            $stmt->execute([$class, 'Instructor ' . rand(1, 3)]);
+        }
+
+        // Seed attendance
+        for ($i = 1; $i <= 500; $i++) {
+            $member_id = rand(1, 6);
+            $class_id = rand(1, 4);
+            $date = date('Y-m-d', strtotime('-' . rand(0, 180) . ' days'));
+            $pdo->prepare("INSERT INTO attendance (member_id, class_id, attendance_date) VALUES (?, ?, ?)")->execute([$member_id, $class_id, $date]);
+        }
+
+        // Seed revenue
+        $service_categories = ['Group', 'PT', 'Massage', 'Events'];
+        for ($i = 1; $i <= 200; $i++) {
+            $member_id = rand(1, 6);
+            $amount = rand(20, 200);
+            $service_category = $service_categories[rand(0, 3)];
+            $date = date('Y-m-d', strtotime('-' . rand(0, 180) . ' days'));
+            $pdo->prepare("INSERT INTO revenue (member_id, amount, service_category, transaction_date) VALUES (?, ?, ?, ?)")->execute([$member_id, $amount, $service_category, $date]);
+        }
+    }
+}
+
+setup_database();
+echo "Database setup complete.";
diff --git a/index.php b/index.php
index 7205f3d..4a3ee21 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,367 @@
-<?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
-
-$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; ?>
-  <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>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Community Command Center</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
+    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </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>
-      <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>
+
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">
+                <img src="assets/pasted-20251230-211133-cc45faf9.png" alt="Company Logo" style="height: 40px;">
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
+                    </li>
+                </ul>
+                <span class="navbar-text me-3">
+                    <i class="bi bi-geo-alt-fill"></i> Valencia Sound
+                </span>
+                <span class="navbar-text">
+                    <i class="bi bi-calendar-fill"></i> December 2025
+                </span>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container-fluid p-4">
+        <div class="row g-4">
+            <!-- Participation & Usage -->
+            <div class="col-12">
+                <div class="card shadow-sm">
+                    <div class="card-header bg-primary text-white">
+                        <h5 class="mb-0">1. Participation & Usage</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="row text-center">
+                            <div class="col-md-3 col-6 kpi-container" data-kpi="unique_members" data-title="Unique Members">
+                                <div id="unique_members_kpi" class="kpi-value text-primary">342</div>
+                                <div class="kpi-label">Unique Members</div>
+                            </div>
+                            <div class="col-md-3 col-6 kpi-container" data-kpi="avg_class_attendance" data-title="Avg Class Attendance">
+                                <div id="avg_class_attendance_kpi" class="kpi-value text-primary">12</div>
+                                <div class="kpi-label">Avg Class Attendance</div>
+                            </div>
+                            <div class="col-md-3 col-6 mt-3 mt-md-0 kpi-container" data-kpi="classes_lightly_attended" data-title="Classes Lightly Attended">
+                                <div id="classes_lightly_attended_kpi" class="kpi-value text-primary">15%</div>
+                                <div class="kpi-label">Classes Lightly Attended</div>
+                            </div>
+                            <div class="col-md-3 col-6 mt-3 mt-md-0 kpi-container" data-kpi="attendance_trend" data-title="Attendance Trend">
+                                <div id="attendance_trend_kpi" class="kpi-value text-success">+5% <i class="bi bi-arrow-up-right"></i></div>
+                                <div class="kpi-label">Attendance Trend</div>
+                            </div>
+                        </div>
+                        <div class="mt-4">
+                            <canvas id="attendance_chart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Member Engagement Depth -->
+            <div class="col-12">
+                <div class="card shadow-sm">
+                    <div class="card-header bg-primary text-white">
+                        <h5 class="mb-0">2. Member Engagement Depth</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="row text-center">
+                            <div class="col-md-6 col-6 kpi-container" data-kpi="avg_visits_per_member" data-title="Avg Visits per Member">
+                                <div id="avg_visits_per_member_kpi" class="kpi-value text-primary">4.2</div>
+                                <div class="kpi-label">Avg Visits per Member</div>
+                            </div>
+                            <div class="col-md-6 col-6 kpi-container" data-kpi="high_frequency_members" data-title="High Frequency Members">
+                                <div id="high_frequency_members_kpi" class="kpi-value text-primary">45%</div>
+                                <div class="kpi-label">High Frequency Members</div>
+                            </div>
+                        </div>
+                        <div class="mt-4">
+                            <canvas id="visit_frequency_chart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Revenue Performance -->
+            <div class="col-12">
+                <div class="card shadow-sm">
+                    <div class="card-header bg-success text-white">
+                        <h5 class="mb-0">3. Revenue Performance</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="row text-center">
+                            <div class="col-md-6 col-6 kpi-container" data-kpi="total_revenue" data-title="Total Revenue">
+                                <div id="total_revenue_kpi" class="kpi-value text-success">$22,450</div>
+                                <div class="kpi-label">Total Revenue</div>
+                            </div>
+                            <div class="col-md-6 col-6 kpi-container" data-kpi="revenue_per_active_member" data-title="Revenue per Active Member">
+                                <div id="revenue_per_active_member_kpi" class="kpi-value text-success">$65.64</div>
+                                <div class="kpi-label">Revenue per Active Member</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Engagement Risk -->
+            <div class="col-12">
+                <div class="card shadow-sm">
+                    <div class="card-header bg-danger text-white">
+                        <h5 class="mb-0">4. Engagement Risk</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="row text-center">
+                            <div class="col-md-6 col-6 kpi-container" data-kpi="inactive_members" data-title="Inactive Members">
+                                <div id="inactive_members_kpi" class="kpi-value text-danger">0%</div>
+                                <div class="kpi-label">Inactive Members</div>
+                            </div>
+                            <div class="col-md-6 col-6 kpi-container" data-kpi="visits_dropped" data-title="Visits Dropped">
+                                <div id="visits_dropped_kpi" class="kpi-value text-danger">0% <i class="bi bi-arrow-down-right"></i></div>
+                                <div class="kpi-label">Visits Dropped</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Member Feedback -->
+            <div class="col-12">
+                <div class="card shadow-sm">
+                    <div class="card-header bg-info text-white">
+                        <h5 class="mb-0">5. Member Feedback</h5>
+                    </div>
+                    <div class="card-body">
+                         <div class="row">
+                            <div class="col-md-4">
+                                <h6><i class="bi bi-hand-thumbs-up-fill text-success"></i> Top Praises</h6>
+                                <ul class="list-unstyled">
+                                    <li>"Love the new yoga class!"</li>
+                                    <li>"Instructor was fantastic."</li>
+                                </ul>
+                            </div>
+                            <div class="col-md-4">
+                                <h6><i class="bi bi-lightbulb-fill text-warning"></i> Top Requests</h6>
+                                 <ul class="list-unstyled">
+                                    <li>"More evening classes."</li>
+                                    <li>"Wish there was a smoothie bar."</li>
+                                </ul>
+                            </div>
+                            <div class="col-md-4">
+                                <h6><i class="bi bi-exclamation-triangle-fill text-danger"></i> Top Frictions</h6>
+                                 <ul class="list-unstyled">
+                                    <li>"Locker room needs attention."</li>
+                                    <li>"Difficulty booking online."</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Alignment Insight -->
+            <div class="col-12">
+                <div class="card shadow-sm">
+                    <div class="card-header" style="background-color: #ffc107; color: #fff;">
+                        <h5 class="mb-0">6. Alignment Insight</h5>
+                    </div>
+                    <div class="card-body">
+                        <h4><span class="badge bg-warning">Noticeable Shift</span></h4>
+                        <p class="lead"><strong>Risk:</strong> While revenue is up, the drop in visit frequency and recent negative feedback on facilities could impact retention next period.</p>
+                        <p class="lead"><strong>Opportunity:</strong> High praise for specific instructors suggests promoting them more could boost attendance.</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+        <!-- Overall Status Banner -->
+        <div class="alert alert-warning mt-4 text-center" role="alert">
+          <strong>CAUTION:</strong> Visits Dropped 10%
+        </div>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
-</body>
-</html>
+
+    <!-- Drill-down Modal -->
+    <div class="modal fade" id="drilldownModal" tabindex="-1" aria-labelledby="drilldownModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-xl">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="drilldownModalLabel">Drill-down</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <table id="drilldownTable" class="table table-striped table-bordered">
+                        <thead>
+                        </thead>
+                        <tbody>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
+    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
+    <script>
+        $(document).ready(function() {
+            let community_id = 1; // Default community
+            let start_date = '2025-12-01'; // Default start date
+            let end_date = '2025-12-31'; // Default end date
+
+            function updateKPIs() {
+                $.getJSON(`api.php?kpi=unique_members&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    $('#unique_members_kpi').text(data.unique_members);
+                });
+                $.getJSON(`api.php?kpi=avg_class_attendance&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    $('#avg_class_attendance_kpi').text(data.avg_class_attendance);
+                });
+                $.getJSON(`api.php?kpi=classes_lightly_attended&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    $('#classes_lightly_attended_kpi').text(data.classes_lightly_attended + '%');
+                });
+                $.getJSON(`api.php?kpi=attendance_trend&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    let trend_html = '';
+                    if (data.attendance_trend > 0) {
+                        trend_html = `<span class="text-success">+${data.attendance_trend}% <i class="bi bi-arrow-up-right"></i></span>`;
+                    } else if (data.attendance_trend < 0) {
+                        trend_html = `<span class="text-danger">${data.attendance_trend}% <i class="bi bi-arrow-down-right"></i></span>`;
+                    } else {
+                        trend_html = `<span>${data.attendance_trend}%</span>`;
+                    }
+                    $('#attendance_trend_kpi').html(trend_html);
+                });
+                $.getJSON(`api.php?kpi=avg_visits_per_member&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    $('#avg_visits_per_member_kpi').text(data.avg_visits_per_member);
+                });
+                $.getJSON(`api.php?kpi=high_frequency_members&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    $('#high_frequency_members_kpi').text(data.high_frequency_members + '%');
+                });
+                $.getJSON(`api.php?kpi=total_revenue&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    $('#total_revenue_kpi').text('$' + data.total_revenue);
+                });
+                $.getJSON(`api.php?kpi=revenue_per_active_member&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    $('#revenue_per_active_member_kpi').text('$' + data.revenue_per_active_member);
+                });
+                $.getJSON(`api.php?kpi=inactive_members&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    $('#inactive_members_kpi').text(data.inactive_members + '%');
+                });
+                $.getJSON(`api.php?kpi=visits_dropped&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    let trend_html = '';
+                    if (data.visits_dropped > 0) {
+                        trend_html = `<span class="text-success">+${data.visits_dropped}% <i class="bi bi-arrow-up-right"></i></span>`;
+                    } else if (data.visits_dropped < 0) {
+                        trend_html = `<span class="text-danger">${data.visits_dropped}% <i class="bi bi-arrow-down-right"></i></span>`;
+                    } else {
+                        trend_html = `<span>${data.visits_dropped}%</span>`;
+                    }
+                    $('#visits_dropped_kpi').html(trend_html);
+                });
+
+            let table;
+
+            function openDrilldown(kpi, title) {
+                $('#drilldownModalLabel').text(title);
+                if (table) {
+                    table.destroy();
+                }
+
+                $.getJSON(`api.php?kpi=${kpi}_drilldown&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    let columns = [];
+                    if (data.length > 0) {
+                        columns = Object.keys(data[0]).map(function(key) {
+                            return { title: key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()), data: key };
+                        });
+                    }
+
+                    table = $('#drilldownTable').DataTable({
+                        data: data,
+                        columns: columns,
+                        dom: 'Bfrtip',
+                        buttons: [
+                            'csv'
+                        ]
+                    });
+
+                    $('#drilldownModal').modal('show');
+                });
+            }
+
+            $('.kpi-container').on('click', function() {
+                const kpi = $(this).data('kpi');
+                const title = $(this).data('title');
+                openDrilldown(kpi, title);
+            });
+
+
+            updateKPIs();
+            updateCharts();
+
+            let attendanceChart;
+            let visitFrequencyChart;
+
+            function updateCharts() {
+                $.getJSON(`api.php?kpi=attendance_over_time&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    const ctx = document.getElementById('attendance_chart').getContext('2d');
+                    if(attendanceChart) {
+                        attendanceChart.destroy();
+                    }
+                    attendanceChart = new Chart(ctx, {
+                        type: 'line',
+                        data: {
+                            labels: data.labels,
+                            datasets: [{
+                                label: 'Attendance Over Time',
+                                data: data.data,
+                                borderColor: '#0d6efd',
+                                tension: 0.1
+                            }]
+                        }
+                    });
+                });
+
+                $.getJSON(`api.php?kpi=visit_frequency_distribution&community_id=${community_id}&start_date=${start_date}&end_date=${end_date}`, function(data) {
+                    const ctx = document.getElementById('visit_frequency_chart').getContext('2d');
+                    if(visitFrequencyChart) {
+                        visitFrequencyChart.destroy();
+                    }
+                    visitFrequencyChart = new Chart(ctx, {
+                        type: 'pie',
+                        data: {
+                            labels: data.labels,
+                            datasets: [{
+                                label: 'Visit Frequency Distribution',
+                                data: data.data,
+                                backgroundColor: [
+                                    '#0d6efd',
+                                    '#198754',
+                                    '#ffc107',
+                                    '#dc3545'
+                                ]
+                            }]
+                        }
+                    });
+                });
+            }
+        });
+    </script>
+</body>
\ No newline at end of file