From 4d0883bef3761027ebcb07f6b7b1351df32d288c Mon Sep 17 00:00:00 2001
From: karthikeyan <karthikeyan@testpress.in>
Date: Mon, 2 Feb 2026 19:19:23 +0530
Subject: [PATCH 1/3] Add revenue and subscription analytics design

---
 src/flimix/analytics/includes/header.html     | 111 ++++++
 .../charts_script.html                        | 319 ++++++++++++++++++
 .../revenue_and_subscription/index.html       |  28 ++
 .../revenue_and_subscription/kpi_cards.html   | 113 +++++++
 .../revenue_by_plan.html                      |  11 +
 .../revenue_trend.html                        |  11 +
 .../subscription_lifecycle.html               | 101 ++++++
 src/flimix/layouts/sidebar_layout.html        |   1 +
 8 files changed, 695 insertions(+)
 create mode 100644 src/flimix/analytics/includes/header.html
 create mode 100644 src/flimix/analytics/revenue_and_subscription/charts_script.html
 create mode 100644 src/flimix/analytics/revenue_and_subscription/index.html
 create mode 100644 src/flimix/analytics/revenue_and_subscription/kpi_cards.html
 create mode 100644 src/flimix/analytics/revenue_and_subscription/revenue_by_plan.html
 create mode 100644 src/flimix/analytics/revenue_and_subscription/revenue_trend.html
 create mode 100644 src/flimix/analytics/revenue_and_subscription/subscription_lifecycle.html

diff --git a/src/flimix/analytics/includes/header.html b/src/flimix/analytics/includes/header.html
new file mode 100644
index 00000000000..920fbbf891d
--- /dev/null
+++ b/src/flimix/analytics/includes/header.html
@@ -0,0 +1,111 @@
+{% set _active = analytics_active_tab | default('revenue_and_subscription') %}
+
+<div
+  class="sticky top-16 z-30 -mx-4 -mt-10 border-b border-gray-200 bg-white sm:-mx-6 lg:-mx-8 dark:border-neutral-700 dark:bg-neutral-900">
+  <header class="border-b border-gray-200 px-4 py-4 sm:px-6 lg:px-8 dark:border-neutral-700">
+    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h2 class="text-2xl/7 font-bold text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight dark:text-white">
+          Analytics Dashboard</h2>
+      </div>
+      <div class="flex items-center gap-4">
+        <div class="relative inline-block">
+          <select data-hs-select='{
+            "placeholder": "Date range",
+            "toggleTag": "<button type=\"button\" aria-expanded=\"false\" aria-label=\"Date range\"></button>",
+            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-300 rounded-md text-start text-sm text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-neutral-200 dark:focus:ring-primary-500 dark:focus:border-primary-500",
+            "dropdownClasses": "mt-2 z-50 min-w-[10rem] max-h-72 p-1 space-y-0.5 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden overflow-y-auto dark:bg-neutral-800 dark:border-neutral-700 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500",
+            "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-700 py-2 px-3 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700",
+            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-gray-800 dark:text-neutral-200\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
+          }' id="analytics-date-range" class="hidden">
+            <option value="7">Last 7 Days</option>
+            <option value="30" selected>Last 30 Days</option>
+            <option value="90">Last 3 Months</option>
+            <option value="365">Last Year</option>
+          </select>
+          <div class="pointer-events-none absolute top-1/2 end-2.5 -translate-y-1/2">
+            <svg class="size-4 text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24"
+              height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+          </div>
+        </div>
+        <button type="button"
+          class="inline-flex h-9 items-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:ring-offset-1 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:ring-primary-500 dark:focus:ring-offset-neutral-900"
+          aria-label="Export">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
+            class="shrink-0">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" x2="12" y1="15" y2="3" />
+          </svg>
+          Export
+        </button>
+      </div>
+    </div>
+  </header>
+  <div class="border-b border-gray-200 dark:border-neutral-700">
+    <nav class="-mb-px flex space-x-8 overflow-x-auto px-4 sm:px-6 lg:px-8" aria-label="Analytics tabs" role="tablist">
+      <a href="/flimix/analytics/revenue_and_subscription/"
+        class="group inline-flex shrink-0 items-center border-b-2 px-1 py-4 text-sm font-medium focus:outline-none transition-colors {% if _active == 'revenue_and_subscription' %}border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400{% else %}border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-white/20 dark:hover:text-gray-300{% endif %}"
+        {% if _active=='revenue_and_subscription' %}aria-current="page" {% endif %}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="mr-2 -ml-0.5 size-4" aria-hidden="true">
+          <line x1="12" x2="12" y1="2" y2="22" />
+          <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+        </svg>
+        Revenue &amp; Subscriptions
+      </a>
+      <a href="/flimix/analytics/user_analytics/"
+        class="group inline-flex shrink-0 items-center border-b-2 px-1 py-4 text-sm font-medium focus:outline-none transition-colors {% if _active == 'user_analytics' %}border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400{% else %}border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-white/20 dark:hover:text-gray-300{% endif %}"
+        {% if _active=='user_analytics' %}aria-current="page" {% endif %}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="mr-2 -ml-0.5 size-4" aria-hidden="true">
+          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+        </svg>
+        User Analytics
+      </a>
+      <a href="/flimix/analytics/content_performance/"
+        class="group inline-flex shrink-0 items-center border-b-2 px-1 py-4 text-sm font-medium focus:outline-none transition-colors {% if _active == 'content_performance' %}border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400{% else %}border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-white/20 dark:hover:text-gray-300{% endif %}"
+        {% if _active=='content_performance' %}aria-current="page" {% endif %}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="mr-2 -ml-0.5 size-4" aria-hidden="true">
+          <polygon points="6 3 20 12 6 21 6 3" />
+        </svg>
+        Content Performance
+      </a>
+      <a href="/flimix/analytics/geographic/"
+        class="group inline-flex shrink-0 items-center border-b-2 px-1 py-4 text-sm font-medium focus:outline-none transition-colors {% if _active == 'geographic' %}border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400{% else %}border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-white/20 dark:hover:text-gray-300{% endif %}"
+        {% if _active=='geographic' %}aria-current="page" {% endif %}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="mr-2 -ml-0.5 size-4" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" />
+          <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+          <path d="M2 12h20" />
+        </svg>
+        Geographic
+      </a>
+      <a href="/flimix/analytics/platform_and_devices/"
+        class="group inline-flex shrink-0 items-center border-b-2 px-1 py-4 text-sm font-medium focus:outline-none transition-colors {% if _active == 'platform_and_devices' %}border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400{% else %}border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-white/20 dark:hover:text-gray-300{% endif %}"
+        {% if _active=='platform_and_devices' %}aria-current="page" {% endif %}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="mr-2 -ml-0.5 size-4" aria-hidden="true">
+          <rect width="20" height="14" x="2" y="3" rx="2" />
+          <line x1="8" x2="16" y1="21" y2="21" />
+          <line x1="12" x2="12" y1="17" y2="21" />
+        </svg>
+        Platform &amp; Devices
+      </a>
+    </nav>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/flimix/analytics/revenue_and_subscription/charts_script.html b/src/flimix/analytics/revenue_and_subscription/charts_script.html
new file mode 100644
index 00000000000..67d6d153492
--- /dev/null
+++ b/src/flimix/analytics/revenue_and_subscription/charts_script.html
@@ -0,0 +1,319 @@
+<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+<script>
+  (function () {
+    const dateRangeSelect = document.getElementById('analytics-date-range');
+    let trendChart = null;
+    let planChart = null;
+    let lifecycleChart = null;
+
+    function getTrendData(range) {
+      const rangeKey = range || (dateRangeSelect ? dateRangeSelect.value : '30');
+      if (rangeKey === '7') {
+        return {
+          categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          subscription: [42000, 45000, 41000, 48000, 46000, 44000, 47000],
+          tvod: [12000, 15000, 11000, 16000, 14000, 13000, 15000]
+        };
+      }
+      if (rangeKey === '90') {
+        return {
+          categories: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10', 'W11', 'W12', 'W13'],
+          subscription: [285000, 292000, 278000, 301000, 295000, 288000, 310000, 298000, 305000, 292000, 308000, 302000, 315000],
+          tvod: [82000, 85000, 78000, 90000, 88000, 84000, 92000, 86000, 89000, 85000, 91000, 88000, 93000]
+        };
+      }
+      if (rangeKey === '365') {
+        return {
+          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+          subscription: [980000, 1020000, 995000, 1050000, 1030000, 1080000, 1060000, 1100000, 1085000, 1120000, 1090000, 1150000],
+          tvod: [320000, 340000, 315000, 360000, 350000, 370000, 355000, 380000, 365000, 390000, 375000, 400000]
+        };
+      }
+      return {
+        categories: ['W1', 'W2', 'W3', 'W4'],
+        subscription: [285000, 292000, 278000, 301000],
+        tvod: [82000, 85000, 78000, 90000]
+      };
+    }
+
+    function getPlanData(range) {
+      const rangeKey = range || (dateRangeSelect ? dateRangeSelect.value : '30');
+      if (rangeKey === '7') {
+        return [180000, 220000, 320000, 130000];
+      }
+      if (rangeKey === '90') {
+        return [1850000, 2280000, 3320000, 1350000];
+      }
+      if (rangeKey === '365') {
+        return [7200000, 8900000, 12800000, 5200000];
+      }
+      return [620000, 820000, 1200000, 510000];
+    }
+
+    function getLifecycleData(range) {
+      const rangeKey = range || (dateRangeSelect ? dateRangeSelect.value : '30');
+      if (rangeKey === '7') {
+        return {
+          categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          new: [52, 48, 61, 55, 58, 72, 74],
+          renewal: [320, 310, 335, 340, 318, 290, 285],
+          cancelled: [12, 18, 15, 14, 16, 22, 19],
+          upgrade: [8, 12, 10, 14, 11, 15, 13],
+          downgrade: [5, 7, 6, 8, 6, 9, 7]
+        };
+      }
+      if (rangeKey === '90') {
+        return {
+          categories: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10', 'W11', 'W12', 'W13'],
+          new: [185, 192, 178, 195, 188, 202, 190, 198, 205, 192, 200, 208, 215],
+          renewal: [2100, 2180, 2050, 2220, 2150, 2280, 2200, 2250, 2320, 2180, 2300, 2280, 2350],
+          cancelled: [85, 92, 78, 95, 88, 102, 90, 98, 95, 92, 100, 98, 105],
+          upgrade: [42, 48, 45, 52, 48, 55, 50, 58, 52, 55, 60, 58, 62],
+          downgrade: [28, 32, 30, 35, 32, 38, 35, 40, 38, 35, 42, 40, 45]
+        };
+      }
+      if (rangeKey === '365') {
+        return {
+          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+          new: [620, 580, 720, 650, 680, 710, 690, 730, 700, 750, 720, 780],
+          renewal: [3200, 3180, 3350, 3280, 3320, 3400, 3380, 3450, 3420, 3500, 3480, 3550],
+          cancelled: [280, 265, 310, 290, 305, 320, 315, 330, 325, 340, 335, 350],
+          upgrade: [165, 158, 182, 170, 178, 188, 185, 195, 190, 200, 198, 208],
+          downgrade: [125, 118, 138, 130, 135, 142, 140, 148, 145, 152, 150, 158]
+        };
+      }
+      return {
+        categories: ['W1', 'W2', 'W3', 'W4'],
+        new: [98, 112, 105, 135],
+        renewal: [2080, 2120, 2050, 2100],
+        cancelled: [72, 78, 75, 87],
+        upgrade: [32, 38, 35, 45],
+        downgrade: [22, 26, 24, 30]
+      };
+    }
+
+    function renderTrendChart(range) {
+      const data = getTrendData(range);
+      const options = {
+        chart: {
+          type: 'line',
+          height: 300,
+          toolbar: { show: false },
+          zoom: { enabled: false },
+          fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif'
+        },
+        series: [
+          { name: 'Subscription', data: data.subscription },
+          { name: 'Pay per view', data: data.tvod }
+        ],
+        xaxis: {
+          categories: data.categories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: { style: { colors: '#78716c', fontSize: '12px' } }
+        },
+        yaxis: {
+          labels: {
+            style: { colors: '#78716c', fontSize: '12px' },
+            formatter: function (v) {
+              if (v >= 100000) return '₹' + (v / 100000).toFixed(1) + 'L';
+              if (v >= 1000) return '₹' + (v / 1000).toFixed(0) + 'k';
+              return '₹' + v;
+            }
+          }
+        },
+        legend: {
+          position: 'bottom',
+          horizontalAlign: 'center',
+          fontSize: '13px',
+          fontWeight: 500,
+          labels: { colors: '#44403c' }
+        },
+        grid: {
+          borderColor: '#e7e5e4',
+          strokeDashArray: 2,
+          xaxis: { lines: { show: false } }
+        },
+        colors: ['#10b981', '#2563eb'],
+        stroke: { curve: 'smooth', width: 3 },
+        markers: {
+          size: 5,
+          strokeWidth: 0,
+          strokeColors: '#fff',
+          hover: { size: 7 }
+        },
+        tooltip: {
+          y: {
+            formatter: function (v) {
+              if (v >= 100000) return '₹' + (v / 100000).toFixed(2) + 'L';
+              if (v >= 1000) return '₹' + (v / 1000).toFixed(1) + 'k';
+              return '₹' + v;
+            }
+          }
+        }
+      };
+      const el = document.getElementById('analytics-revenue-trend-chart');
+      if (!el) return;
+      if (trendChart) {
+        trendChart.updateOptions({
+          series: options.series,
+          xaxis: { categories: data.categories }
+        });
+      } else {
+        trendChart = new ApexCharts(el, options);
+        trendChart.render();
+      }
+    }
+
+    function renderPlanChart(range) {
+      const data = getPlanData(range);
+      const options = {
+        chart: {
+          type: 'donut',
+          height: 300,
+          fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif'
+        },
+        series: data,
+        labels: ['Basic', 'Standard', 'Premium', 'Family'],
+        legend: {
+          position: 'bottom',
+          fontSize: '13px',
+          fontWeight: 500,
+          labels: { colors: '#44403c' }
+        },
+        colors: ['#2563eb', '#8b5cf6', '#10b981', '#f59e0b'],
+        plotOptions: {
+          pie: {
+            donut: {
+              size: '65%',
+              labels: {
+                show: true,
+                total: {
+                  show: true,
+                  label: 'Total',
+                  fontSize: '14px',
+                  fontWeight: 600,
+                  color: '#44403c',
+                  formatter: function (w) {
+                    const sum = w.globals.seriesTotals.reduce((a, b) => a + b, 0);
+                    if (sum >= 100000) return '₹' + (sum / 100000).toFixed(1) + 'L';
+                    if (sum >= 1000) return '₹' + (sum / 1000).toFixed(0) + 'k';
+                    return '₹' + sum;
+                  }
+                }
+              }
+            }
+          }
+        },
+        tooltip: {
+          y: {
+            formatter: function (v) {
+              if (v >= 100000) return '₹' + (v / 100000).toFixed(2) + 'L';
+              if (v >= 1000) return '₹' + (v / 1000).toFixed(1) + 'k';
+              return '₹' + v;
+            }
+          }
+        }
+      };
+      const el = document.getElementById('analytics-revenue-by-plan-chart');
+      if (!el) return;
+      if (planChart) {
+        planChart.updateOptions({ series: data });
+      } else {
+        planChart = new ApexCharts(el, options);
+        planChart.render();
+      }
+    }
+
+    function renderLifecycleChart(range) {
+      const data = getLifecycleData(range);
+      const options = {
+        chart: {
+          type: 'bar',
+          height: 300,
+          toolbar: { show: false },
+          fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif'
+        },
+        series: [
+          { name: 'New', data: data.new },
+          { name: 'Renewal', data: data.renewal },
+          { name: 'Cancelled', data: data.cancelled },
+          { name: 'Upgrade', data: data.upgrade },
+          { name: 'Downgrade', data: data.downgrade }
+        ],
+        xaxis: {
+          categories: data.categories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: { style: { colors: '#78716c', fontSize: '12px' } }
+        },
+        yaxis: {
+          labels: {
+            style: { colors: '#78716c', fontSize: '12px' }
+          }
+        },
+        plotOptions: {
+          bar: {
+            horizontal: false,
+            borderRadius: 4,
+            columnWidth: '75%',
+            dataLabels: { position: 'top' }
+          }
+        },
+        colors: ['#10b981', '#2563eb', '#ef4444', '#8b5cf6', '#f59e0b'],
+        grid: {
+          borderColor: '#e7e5e4',
+          strokeDashArray: 2,
+          xaxis: { lines: { show: false } }
+        },
+        legend: {
+          position: 'bottom',
+          horizontalAlign: 'center',
+          fontSize: '13px',
+          fontWeight: 500,
+          labels: { colors: '#44403c' }
+        },
+        dataLabels: {
+          enabled: false
+        }
+      };
+      const el = document.getElementById('analytics-subscription-lifecycle-chart');
+      if (!el) return;
+      if (lifecycleChart) {
+        lifecycleChart.updateOptions({
+          series: [
+            { name: 'New', data: data.new },
+            { name: 'Renewal', data: data.renewal },
+            { name: 'Cancelled', data: data.cancelled },
+            { name: 'Upgrade', data: data.upgrade },
+            { name: 'Downgrade', data: data.downgrade }
+          ],
+          xaxis: { categories: data.categories }
+        });
+      } else {
+        lifecycleChart = new ApexCharts(el, options);
+        lifecycleChart.render();
+      }
+    }
+
+    function updateCharts(range) {
+      renderTrendChart(range);
+      renderPlanChart(range);
+      renderLifecycleChart(range);
+    }
+
+    if (dateRangeSelect) {
+      dateRangeSelect.addEventListener('change', function () {
+        updateCharts(this.value);
+      });
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', function () {
+        setTimeout(function () { updateCharts(); }, 100);
+      });
+    } else {
+      setTimeout(function () { updateCharts(); }, 100);
+    }
+  })();
+</script>
\ No newline at end of file
diff --git a/src/flimix/analytics/revenue_and_subscription/index.html b/src/flimix/analytics/revenue_and_subscription/index.html
new file mode 100644
index 00000000000..5e4dcf75e2b
--- /dev/null
+++ b/src/flimix/analytics/revenue_and_subscription/index.html
@@ -0,0 +1,28 @@
+---
+permalink: flimix/analytics/revenue_and_subscription/
+tags: flimix
+staff_view: "Analytics"
+title: Revenue and Subscription
+---
+
+{% extends "src/flimix/layouts/sidebar_layout.html" %}
+{% block main_class %}bg-stone-50{% endblock %}
+
+{% block main_content %}
+{% include "src/flimix/analytics/includes/header.html" %}
+
+<div class="space-y-5 pt-5">
+  {% include "./kpi_cards.html" %}
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
+    {% include "./revenue_trend.html" %}
+    {% include "./revenue_by_plan.html" %}
+  </div>
+  <div class="w-full">
+    {% include "./subscription_lifecycle.html" %}
+  </div>
+</div>
+
+{% endblock main_content %}
+{% block script %}
+{% include "./charts_script.html" %}
+{% endblock script %}
\ No newline at end of file
diff --git a/src/flimix/analytics/revenue_and_subscription/kpi_cards.html b/src/flimix/analytics/revenue_and_subscription/kpi_cards.html
new file mode 100644
index 00000000000..6b760713a35
--- /dev/null
+++ b/src/flimix/analytics/revenue_and_subscription/kpi_cards.html
@@ -0,0 +1,113 @@
+<div class="grid grid-cols-2 lg:grid-cols-4 gap-2 md:gap-3 lg:gap-5">
+  <div
+    class="p-4 sm:p-5 bg-white border border-gray-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+    <div class="sm:flex sm:gap-x-3">
+      <svg class="sm:order-2 mb-2 sm:mb-0 shrink-0 size-6 text-gray-500 dark:text-neutral-400"
+        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="12" x2="12" y1="2" y2="22" />
+        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+      </svg>
+      <div class="sm:order-1 grow space-y-1">
+        <h2 class="sm:mb-3 text-sm text-gray-500 dark:text-neutral-400">Total Revenue</h2>
+        <p class="text-lg md:text-xl font-semibold text-gray-800 dark:text-neutral-200">₹15,45,000</p>
+      </div>
+    </div>
+    <div class="mt-1 flex items-center gap-x-2">
+      <span class="text-sm leading-5 text-gray-500 dark:text-neutral-400">vs previous period</span>
+      <span class="inline-flex items-center gap-x-1 text-xs font-medium text-green-500 rounded-full">
+        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+          <polyline points="16 7 22 7 22 13" />
+        </svg>
+        +15%
+      </span>
+    </div>
+  </div>
+
+  <div
+    class="p-4 sm:p-5 bg-white border border-gray-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+    <div class="sm:flex sm:gap-x-3">
+      <svg class="sm:order-2 mb-2 sm:mb-0 shrink-0 size-6 text-gray-500 dark:text-neutral-400"
+        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+        <circle cx="9" cy="7" r="4" />
+        <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+      </svg>
+      <div class="sm:order-1 grow space-y-1">
+        <h2 class="sm:mb-3 text-sm text-gray-500 dark:text-neutral-400">Active Subscribers</h2>
+        <p class="text-lg md:text-xl font-semibold text-gray-800 dark:text-neutral-200">12,450</p>
+      </div>
+    </div>
+    <div class="mt-1 flex items-center gap-x-2">
+      <span class="text-sm leading-5 text-gray-500 dark:text-neutral-400">450 new in period</span>
+      <span class="inline-flex items-center gap-x-1 text-xs font-medium text-green-500 rounded-full">
+        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+          <polyline points="16 7 22 7 22 13" />
+        </svg>
+        +3%
+      </span>
+    </div>
+  </div>
+
+  <div
+    class="p-4 sm:p-5 bg-white border border-gray-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+    <div class="sm:flex sm:gap-x-3">
+      <svg class="sm:order-2 mb-2 sm:mb-0 shrink-0 size-6 text-gray-500 dark:text-neutral-400"
+        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+        <polyline points="16 7 22 7 22 13" />
+      </svg>
+      <div class="sm:order-1 grow space-y-1">
+        <h2 class="sm:mb-3 text-sm text-gray-500 dark:text-neutral-400">Net Growth</h2>
+        <p class="text-lg md:text-xl font-semibold text-gray-800 dark:text-neutral-200">+330</p>
+      </div>
+    </div>
+    <div class="mt-1 flex items-center gap-x-2">
+      <span class="text-sm leading-5 text-gray-500 dark:text-neutral-400">New − Cancelled</span>
+      <span class="inline-flex items-center gap-x-1 text-xs font-medium text-green-500 rounded-full">
+        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+          <polyline points="16 7 22 7 22 13" />
+        </svg>
+        +2.7%
+      </span>
+    </div>
+  </div>
+
+  <div
+    class="p-4 sm:p-5 bg-white border border-gray-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+    <div class="sm:flex sm:gap-x-3">
+      <svg class="sm:order-2 mb-2 sm:mb-0 shrink-0 size-6 text-gray-500 dark:text-neutral-400"
+        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+        <line x1="16" x2="16" y1="2" y2="6" />
+        <line x1="8" x2="8" y1="2" y2="6" />
+        <line x1="3" x2="21" y1="10" y2="10" />
+      </svg>
+      <div class="sm:order-1 grow space-y-1">
+        <h2 class="sm:mb-3 text-sm text-gray-500 dark:text-neutral-400">MRR</h2>
+        <p class="text-lg md:text-xl font-semibold text-gray-800 dark:text-neutral-200">₹8,20,000</p>
+      </div>
+    </div>
+    <div class="mt-1 flex items-center gap-x-2">
+      <span class="text-sm leading-5 text-gray-500 dark:text-neutral-400">Monthly recurring</span>
+      <span class="inline-flex items-center gap-x-1 text-xs font-medium text-green-500 rounded-full">
+        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+          <polyline points="16 7 22 7 22 13" />
+        </svg>
+        +8%
+      </span>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/flimix/analytics/revenue_and_subscription/revenue_by_plan.html b/src/flimix/analytics/revenue_and_subscription/revenue_by_plan.html
new file mode 100644
index 00000000000..e40d50b1f55
--- /dev/null
+++ b/src/flimix/analytics/revenue_and_subscription/revenue_by_plan.html
@@ -0,0 +1,11 @@
+<div class="p-5 bg-white border border-stone-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+  <div class="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h2 class="inline-block font-medium text-stone-800 dark:text-neutral-200">Revenue by Plan</h2>
+      <p class="text-sm text-stone-500 dark:text-neutral-400">Distribution of revenue across subscription plans</p>
+    </div>
+    <a class="text-sm text-green-600 decoration-2 hover:underline font-medium focus:outline-hidden focus:underline dark:text-green-400 dark:hover:text-green-500 shrink-0 mt-1 sm:mt-0"
+      href="#">View breakdown</a>
+  </div>
+  <div id="analytics-revenue-by-plan-chart" class="min-h-[260px] md:min-h-[300px] mt-4"></div>
+</div>
\ No newline at end of file
diff --git a/src/flimix/analytics/revenue_and_subscription/revenue_trend.html b/src/flimix/analytics/revenue_and_subscription/revenue_trend.html
new file mode 100644
index 00000000000..276ff405ee3
--- /dev/null
+++ b/src/flimix/analytics/revenue_and_subscription/revenue_trend.html
@@ -0,0 +1,11 @@
+<div class="p-5 bg-white border border-stone-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+  <div class="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h2 class="inline-block font-medium text-stone-800 dark:text-neutral-200">Revenue Trend</h2>
+      <p class="text-sm text-stone-500 dark:text-neutral-400">Subscription vs pay-per-view (TVOD) revenue over time</p>
+    </div>
+    <a class="text-sm text-green-600 decoration-2 hover:underline font-medium focus:outline-hidden focus:underline dark:text-green-400 dark:hover:text-green-500 shrink-0 mt-1 sm:mt-0"
+      href="#">View breakdown</a>
+  </div>
+  <div id="analytics-revenue-trend-chart" class="min-h-[260px] md:min-h-[300px] mt-4"></div>
+</div>
\ No newline at end of file
diff --git a/src/flimix/analytics/revenue_and_subscription/subscription_lifecycle.html b/src/flimix/analytics/revenue_and_subscription/subscription_lifecycle.html
new file mode 100644
index 00000000000..77aafc95734
--- /dev/null
+++ b/src/flimix/analytics/revenue_and_subscription/subscription_lifecycle.html
@@ -0,0 +1,101 @@
+<!-- Card: same layout as Daily Requests by Category (AI usage) -->
+<div
+  class="flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+  <!-- Header -->
+  <div class="border-b border-gray-200 dark:border-neutral-700">
+    <div class="py-3 px-5 flex flex-wrap justify-between items-center gap-y-2 gap-x-5">
+      <div>
+        <h2 class="font-medium text-stone-800 dark:text-neutral-200">Subscription Lifecycle</h2>
+        <p class="text-sm text-stone-500 dark:text-neutral-400 mt-0.5">Churn, cancellations, upgrades and downgrades
+          over the period</p>
+      </div>
+      <a class="inline-flex items-center gap-x-1 text-sm text-green-600 decoration-2 hover:underline focus:outline-hidden focus:underline dark:text-green-400 dark:hover:text-green-500"
+        href="#">View breakdown
+        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m9 18 6-6-6-6"></path>
+        </svg>
+      </a>
+    </div>
+  </div>
+  <!-- End Header -->
+
+  <!-- Body: chart left, breakdown right -->
+  <div class="grid grid-cols-12 gap-3">
+    <div class="col-span-12 xl:col-span-8 2xl:col-span-9">
+      <div class="py-4 px-5">
+        <div id="analytics-subscription-lifecycle-chart" class="min-h-[260px] md:min-h-[300px] -mx-2"></div>
+      </div>
+    </div>
+
+    <div
+      class="col-span-12 xl:col-span-4 2xl:col-span-3 border-t xl:border-t-0 xl:border-s border-gray-200 dark:border-neutral-700">
+      <div class="p-5">
+        <h3 class="mb-3 text-sm font-medium text-stone-800 dark:text-neutral-200">Breakdown</h3>
+
+        <ul>
+          <li
+            class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-gray-200 dark:border-neutral-700">
+            <div class="grow">
+              <div class="flex items-center gap-x-2">
+                <span class="shrink-0 size-2.5 inline-block bg-green-500 rounded-full"></span>
+                <span class="text-sm text-stone-800 dark:text-neutral-200">New</span>
+              </div>
+            </div>
+            <div class="text-end">
+              <span class="text-sm text-stone-600 dark:text-neutral-400">450</span>
+            </div>
+          </li>
+          <li
+            class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-gray-200 dark:border-neutral-700">
+            <div class="grow">
+              <div class="flex items-center gap-x-2">
+                <span class="shrink-0 size-2.5 inline-block bg-blue-600 rounded-full"></span>
+                <span class="text-sm text-stone-800 dark:text-neutral-200">Renewal</span>
+              </div>
+            </div>
+            <div class="text-end">
+              <span class="text-sm text-stone-600 dark:text-neutral-400">2,650</span>
+            </div>
+          </li>
+          <li
+            class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-gray-200 dark:border-neutral-700">
+            <div class="grow">
+              <div class="flex items-center gap-x-2">
+                <span class="shrink-0 size-2.5 inline-block bg-violet-500 rounded-full"></span>
+                <span class="text-sm text-stone-800 dark:text-neutral-200">Upgraded</span>
+              </div>
+            </div>
+            <div class="text-end">
+              <span class="text-sm text-stone-600 dark:text-neutral-400">139</span>
+            </div>
+          </li>
+          <li
+            class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-gray-200 dark:border-neutral-700">
+            <div class="grow">
+              <div class="flex items-center gap-x-2">
+                <span class="shrink-0 size-2.5 inline-block bg-amber-500 rounded-full"></span>
+                <span class="text-sm text-stone-800 dark:text-neutral-200">Downgraded</span>
+              </div>
+            </div>
+            <div class="text-end">
+              <span class="text-sm text-stone-600 dark:text-neutral-400">102</span>
+            </div>
+          </li>
+          <li
+            class="flex justify-between gap-5 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-gray-200 dark:border-neutral-700">
+            <div class="grow">
+              <div class="flex items-center gap-x-2">
+                <span class="shrink-0 size-2.5 inline-block bg-red-500 rounded-full"></span>
+                <span class="text-sm text-stone-800 dark:text-neutral-200">Cancelled</span>
+              </div>
+            </div>
+            <div class="text-end">
+              <span class="text-sm text-stone-600 dark:text-neutral-400">120</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/flimix/layouts/sidebar_layout.html b/src/flimix/layouts/sidebar_layout.html
index 59a7ce4b836..ca015cf6301 100644
--- a/src/flimix/layouts/sidebar_layout.html
+++ b/src/flimix/layouts/sidebar_layout.html
@@ -9,6 +9,7 @@
   {% include "src/flimix/partials/desktop_sidebar.html" %}
   <div class="lg:pl-72">
     {% include "src/flimix/partials/header.html" %}
+  
     <main class="py-10 {% block main_class %} {% endblock %}">
       <div class="mx-auto px-4 sm:px-6 lg:px-8">
         {% block main_content %}

From 85a76c02f241755c9d5d94d97046e4228881e12a Mon Sep 17 00:00:00 2001
From: karthikeyan <karthikeyan@testpress.in>
Date: Mon, 9 Feb 2026 18:22:39 +0530
Subject: [PATCH 2/3] Add UI for User Analytics

---
 .../user_analytics/active_users_trend.html    |   9 +
 .../user_analytics/charts_script.html         | 457 ++++++++++++++++++
 .../analytics/user_analytics/index.html       |  31 ++
 .../analytics/user_analytics/kpi_cards.html   | 145 ++++++
 .../user_analytics/retention_cohort.html      |  40 ++
 .../user_analytics/watch_time_sessions.html   |   9 +
 6 files changed, 691 insertions(+)
 create mode 100644 src/flimix/analytics/user_analytics/active_users_trend.html
 create mode 100644 src/flimix/analytics/user_analytics/charts_script.html
 create mode 100644 src/flimix/analytics/user_analytics/index.html
 create mode 100644 src/flimix/analytics/user_analytics/kpi_cards.html
 create mode 100644 src/flimix/analytics/user_analytics/retention_cohort.html
 create mode 100644 src/flimix/analytics/user_analytics/watch_time_sessions.html

diff --git a/src/flimix/analytics/user_analytics/active_users_trend.html b/src/flimix/analytics/user_analytics/active_users_trend.html
new file mode 100644
index 00000000000..bfce4509838
--- /dev/null
+++ b/src/flimix/analytics/user_analytics/active_users_trend.html
@@ -0,0 +1,9 @@
+<div class="p-5 bg-white border border-stone-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+  <div class="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h2 class="inline-block font-medium text-stone-800 dark:text-neutral-200">Active Users over time</h2>
+    </div>
+  </div>
+  <div id="analytics-active-users-chart" class="min-h-[260px] md:min-h-[300px] mt-4"></div>
+</div>
+
diff --git a/src/flimix/analytics/user_analytics/charts_script.html b/src/flimix/analytics/user_analytics/charts_script.html
new file mode 100644
index 00000000000..45388292ff9
--- /dev/null
+++ b/src/flimix/analytics/user_analytics/charts_script.html
@@ -0,0 +1,457 @@
+<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+<script>
+  (function () {
+    const dateRangeSelect = document.getElementById('analytics-date-range');
+    let activeUsersChart = null;
+    let watchTimeChart = null;
+    let retentionChart = null;
+
+    function getActiveUsersData(range) {
+      const rangeKey = range || (dateRangeSelect ? dateRangeSelect.value : '30');
+
+      if (rangeKey === '7') {
+        // Last 7 days → daily active users
+        return {
+          categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          activeUsers: [8200, 8450, 8100, 8600, 8800, 9050, 8900],
+          granularityLabel: 'Daily active users (DAU)'
+        };
+      }
+
+      if (rangeKey === '90') {
+        // Last 3 months → weekly active users
+        return {
+          categories: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10', 'W11', 'W12', 'W13'],
+          activeUsers: [28500, 29200, 27800, 30100, 29500, 28800, 31000, 29800, 30500, 29200, 30800, 30200, 31500],
+          granularityLabel: 'Weekly active users (WAU)'
+        };
+      }
+
+      if (rangeKey === '365') {
+        // Last year → monthly active users
+        return {
+          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+          activeUsers: [68000, 70200, 69500, 72000, 73500, 74800, 76200, 78000, 77200, 79000, 80500, 82000],
+          granularityLabel: 'Monthly active users (MAU)'
+        };
+      }
+
+      // Default: last 30 days → show as weekly buckets W1–W4
+      return {
+        categories: ['W1', 'W2', 'W3', 'W4'],
+        activeUsers: [26000, 27400, 26800, 28100],
+        granularityLabel: 'Weekly active users (WAU)'
+      };
+    }
+
+    function getWatchTimeData(range) {
+      const rangeKey = range || (dateRangeSelect ? dateRangeSelect.value : '30');
+
+      if (rangeKey === '7') {
+        // Last 7 days → daily watch time & sessions
+        return {
+          categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          watchTime: [4200, 4600, 4350, 4800, 5100, 5450, 5300], // in hours
+          sessions: [12000, 12800, 11800, 13200, 14000, 14800, 14500]
+        };
+      }
+
+      if (rangeKey === '90') {
+        // Last 3 months → weekly buckets
+        return {
+          categories: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10', 'W11', 'W12', 'W13'],
+          watchTime: [29500, 30200, 28900, 31500, 30800, 30000, 32200, 31800, 32500, 31900, 33200, 32800, 34000],
+          sessions: [78000, 80200, 76500, 82000, 83500, 82800, 85200, 84500, 86000, 85200, 87500, 86800, 89000]
+        };
+      }
+
+      if (rangeKey === '365') {
+        // Last year → monthly buckets
+        return {
+          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+          watchTime: [112000, 118000, 121000, 126000, 130000, 133000, 137000, 140000, 138000, 142000, 145000, 150000],
+          sessions: [320000, 330000, 340000, 352000, 360000, 368000, 378000, 385000, 380000, 392000, 400000, 410000]
+        };
+      }
+
+      // Default: last 30 days → weekly buckets W1–W4
+      return {
+        categories: ['W1', 'W2', 'W3', 'W4'],
+        watchTime: [28000, 29200, 28800, 30000],
+        sessions: [84000, 86200, 85500, 88000]
+      };
+    }
+
+    function getRetentionData() {
+      // Only support "Last 7 days" view for now.
+      // X-axis: Day 0–Day 6 (days after signup, cumulative).
+      // Y-axis: daily signup cohorts (newest on top).
+      // Color: retention % (y), Cell text & tooltip: active user count (active).
+
+      const xCategories = ['Day 0', 'Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'];
+
+      // Mock data shaped so that newer cohorts have fewer observed days.
+      const cohorts = [
+        {
+          // Newest signup cohort – only Day 0 data is known.
+          label: 'Feb 9',
+          size: 220,
+          percents: [100, null, null, null, null, null, null],
+          actives:  [220, null, null, null, null, null, null]
+        },
+        {
+          label: 'Feb 8',
+          size: 240,
+          percents: [100, 68, null, null, null, null, null],
+          actives:  [240, 163, null, null, null, null, null]
+        },
+        {
+          label: 'Feb 7',
+          size: 260,
+          percents: [100, 66, 58, null, null, null, null],
+          actives:  [260, 172, 151, null, null, null, null]
+        },
+        {
+          label: 'Feb 6',
+          size: 280,
+          percents: [100, 64, 56, 50, null, null, null],
+          actives:  [280, 179, 157, 140, null, null, null]
+        },
+        {
+          label: 'Feb 5',
+          size: 300,
+          percents: [100, 62, 54, 48, 43, null, null],
+          actives:  [300, 186, 162, 144, 129, null, null]
+        },
+        {
+          label: 'Feb 4',
+          size: 320,
+          percents: [100, 60, 52, 46, 41, 37, null],
+          actives:  [320, 192, 166, 147, 131, 118, null]
+        },
+        {
+          // Oldest cohort – has full 7-day observation window.
+          label: 'Feb 3',
+          size: 340,
+          percents: [100, 58, 50, 44, 40, 36, 32],
+          actives:  [340, 197, 170, 150, 136, 122, 109]
+        }
+      ];
+
+      // Newest cohort first so it appears at the top of the heatmap.
+      const series = cohorts.map(cohort => ({
+        name: cohort.label,
+        data: xCategories.map((xLabel, idx) => ({
+          x: xLabel,
+          y: cohort.percents[idx] ?? null,
+          active: cohort.actives[idx] ?? null
+        }))
+      }));
+
+      return {
+        rangeKey: '7',
+        valueType: 'percent',
+        chartHeight: 350,
+        xCategories,
+        series
+      };
+    }
+
+    function renderRetentionChart(range) {
+      const data = getRetentionData(range);
+      const el = document.getElementById('analytics-retention-cohort-chart');
+      if (!el) return;
+
+      const isPercent = data.valueType === 'percent';
+      const isCumulativeRetention = data.rangeKey === '30' || data.rangeKey === '90';
+      const colorScaleRanges = isPercent
+        ? [
+            // Empty / future cells
+            { from: -0.01, to: 0, color: '#E5E7EB', name: 'Empty', foreColor: '#4B5563' },
+            // Very low: 0–9% (blue-50/100)
+            { from: 0.01, to: 9, color: '#EFF6FF', name: '0–9%', foreColor: '#111827' },
+            // Low: 10–24% (blue-100/200)
+            { from: 10, to: 24, color: '#DBEAFE', name: '10–24%', foreColor: '#111827' },
+            // Medium: 25–49% (blue-200/300)
+            { from: 25, to: 49, color: '#BFDBFE', name: '25–49%', foreColor: '#111827' },
+            // Medium‑high: 50–79% (blue-400)
+            { from: 50, to: 79, color: '#60A5FA', name: '50–79%', foreColor: '#F9FAFB' },
+            // High: 80–100% (blue-600, same family as #2563eb)
+            { from: 80, to: 100, color: '#2563EB', name: '80–100%', foreColor: '#F9FAFB' }
+          ]
+        : [
+            // Fallback for count-based mock data
+            { from: 0, to: 0, color: '#E5E7EB', name: 'No usage', foreColor: '#4B5563' },
+            { from: 1, to: 100, color: '#EFF6FF', name: 'Low', foreColor: '#111827' },
+            { from: 101, to: 500, color: '#DBEAFE', name: 'Medium', foreColor: '#111827' },
+            { from: 501, to: 2000, color: '#60A5FA', name: 'High', foreColor: '#F9FAFB' },
+            { from: 2001, to: 10000, color: '#2563EB', name: 'Very high', foreColor: '#F9FAFB' }
+          ];
+
+      const chartHeight = data.chartHeight || 350;
+      const options = {
+        chart: {
+          type: 'heatmap',
+          height: chartHeight,
+          toolbar: { show: false },
+          fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif'
+        },
+        dataLabels: {
+          enabled: true,
+          formatter: function (val, opts) {
+            if (val === null || typeof val === 'undefined') return '';
+            // Always show ACTIVE USER COUNT in the cell
+            const sIdx = opts.seriesIndex;
+            const dIdx = opts.dataPointIndex;
+            const point = opts.w.config.series[sIdx].data[dIdx];
+            if (!point || typeof point !== 'object' || point.active == null) {
+              // Fallback to raw value if no count meta is provided
+              return String(val);
+            }
+            return String(point.active);
+          },
+          style: {
+            fontSize: '11px',
+            colors: ['#111827']
+          }
+        },
+        plotOptions: {
+          heatmap: {
+            shadeIntensity: 0.5,
+            radius: 4,
+            useFillColorAsStroke: false,
+            colorScale: {
+              ranges: colorScaleRanges
+            }
+          }
+        },
+        series: data.series,
+        xaxis: {
+          categories: data.xCategories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: { style: { colors: '#78716c', fontSize: '12px' } }
+        },
+        yaxis: {
+          labels: {
+            style: { colors: '#78716c', fontSize: '12px' }
+          }
+        },
+        legend: { show: false },
+        grid: {
+          borderColor: '#e7e5e4',
+          strokeDashArray: 0,
+          xaxis: { lines: { show: true } },
+          yaxis: { lines: { show: true } }
+        },
+        tooltip: {
+          custom: function (opts) {
+            const { seriesIndex, dataPointIndex, w } = opts;
+            const cohort = w.globals.seriesNames[seriesIndex];
+            const checkpoint = w.globals.labels[dataPointIndex];
+            const point = w.config.series[seriesIndex].data[dataPointIndex];
+
+            if (!point || point.y === null || typeof point.y === 'undefined') {
+              return '<div class="p-2 text-xs font-medium text-stone-800 dark:text-neutral-200">' +
+                cohort + ' → ' + checkpoint + ': <strong>No data yet</strong></div>';
+            }
+
+            const active = point.active != null ? point.active : point.y;
+
+            return '<div class="p-2 text-xs font-medium text-stone-800 dark:text-neutral-200">' +
+              cohort + ' → ' + checkpoint + ': <strong>Active users: ' + active + '</strong></div>';
+          }
+        }
+      };
+
+      if (retentionChart) {
+        retentionChart.updateOptions(options);
+      } else {
+        retentionChart = new ApexCharts(el, options);
+        retentionChart.render();
+      }
+    }
+
+    function renderActiveUsersChart(range) {
+      const data = getActiveUsersData(range);
+      const el = document.getElementById('analytics-active-users-chart');
+      if (!el) return;
+
+      const values = data.activeUsers;
+      const minVal = Math.min.apply(null, values);
+      const maxVal = Math.max.apply(null, values);
+      const yMin = Math.floor(minVal / 1000) * 1000;
+      const yMax = Math.ceil(maxVal / 1000) * 1000;
+
+      const options = {
+        chart: {
+          type: 'line',
+          height: 300,
+          toolbar: { show: false },
+          zoom: { enabled: false },
+          fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif'
+        },
+        series: [
+          { name: 'Active users', data: data.activeUsers }
+        ],
+        xaxis: {
+          categories: data.categories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: { style: { colors: '#78716c', fontSize: '12px' } }
+        },
+        yaxis: {
+          min: yMin,
+          max: yMax,
+          tickAmount: 2,
+          labels: {
+            style: { colors: '#78716c', fontSize: '12px' },
+            formatter: function (v) {
+              if (v >= 1000000) return (v / 1000000).toFixed(1) + 'M';
+              if (v >= 1000) return (v / 1000).toFixed(0) + 'k';
+              return v.toFixed(0);
+            }
+          }
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          borderColor: '#e7e5e4',
+          strokeDashArray: 2,
+          xaxis: { lines: { show: false } }
+        },
+        colors: ['#2563eb'],
+        stroke: { curve: 'smooth', width: 3 },
+        markers: {
+          size: 4,
+          strokeWidth: 0,
+          strokeColors: '#fff',
+          hover: { size: 6 }
+        },
+        tooltip: {
+          shared: true,
+          intersect: false,
+          y: {
+            formatter: function (v) {
+              if (v >= 1000000) return (v / 1000000).toFixed(2) + 'M users';
+              if (v >= 1000) return (v / 1000).toFixed(1) + 'k users';
+              return v.toFixed(0) + ' users';
+            }
+          }
+        }
+      };
+
+      if (activeUsersChart) {
+        // When date range changes, we need to update series, axes,
+        // and y-axis bounds together so the chart rescales correctly.
+        activeUsersChart.updateOptions(options);
+      } else {
+        activeUsersChart = new ApexCharts(el, options);
+        activeUsersChart.render();
+      }
+    }
+
+    function renderWatchTimeChart(range) {
+      const data = getWatchTimeData(range);
+      const el = document.getElementById('analytics-watch-time-sessions-chart');
+      if (!el) return;
+
+      const options = {
+        chart: {
+          type: 'line',
+          height: 300,
+          toolbar: { show: false },
+          zoom: { enabled: false },
+          fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif'
+        },
+        series: [
+          { name: 'Total watch time (hours)', data: data.watchTime },
+          { name: 'Sessions', data: data.sessions }
+        ],
+        xaxis: {
+          categories: data.categories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: { style: { colors: '#78716c', fontSize: '12px' } }
+        },
+        yaxis: {
+          labels: {
+            style: { colors: '#78716c', fontSize: '12px' },
+            formatter: function (v) {
+              if (v >= 1000000) return (v / 1000000).toFixed(1) + 'M';
+              if (v >= 1000) return (v / 1000).toFixed(0) + 'k';
+              return v.toFixed(0);
+            }
+          }
+        },
+        legend: {
+          position: 'bottom',
+          horizontalAlign: 'center',
+          fontSize: '13px',
+          fontWeight: 500,
+          labels: { colors: '#44403c' }
+        },
+        grid: {
+          borderColor: '#e7e5e4',
+          strokeDashArray: 2,
+          xaxis: { lines: { show: false } }
+        },
+        colors: ['#10b981', '#2563eb'],
+        stroke: { curve: 'smooth', width: 3 },
+        markers: {
+          size: 4,
+          strokeWidth: 0,
+          strokeColors: '#fff',
+          hover: { size: 6 }
+        },
+        tooltip: {
+          shared: true,
+          intersect: false,
+          y: {
+            formatter: function (v, opts) {
+              const seriesIndex = opts.seriesIndex;
+              if (seriesIndex === 0) {
+                // watch time
+                if (v >= 1000) return (v / 1000).toFixed(1) + 'k hours';
+                return v.toFixed(0) + ' hours';
+              }
+              // sessions
+              if (v >= 1000000) return (v / 1000000).toFixed(2) + 'M sessions';
+              if (v >= 1000) return (v / 1000).toFixed(1) + 'k sessions';
+              return v.toFixed(0) + ' sessions';
+            }
+          }
+        }
+      };
+
+      if (watchTimeChart) {
+        watchTimeChart.updateOptions(options);
+      } else {
+        watchTimeChart = new ApexCharts(el, options);
+        watchTimeChart.render();
+      }
+    }
+
+    function updateUserAnalyticsCharts(range) {
+      renderActiveUsersChart(range);
+      renderWatchTimeChart(range);
+      renderRetentionChart(range);
+    }
+
+    if (dateRangeSelect) {
+      dateRangeSelect.addEventListener('change', function () {
+        updateUserAnalyticsCharts(this.value);
+      });
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', function () {
+        setTimeout(function () { updateUserAnalyticsCharts(); }, 100);
+      });
+    } else {
+      setTimeout(function () { updateUserAnalyticsCharts(); }, 100);
+    }
+  })();
+</script>
+
diff --git a/src/flimix/analytics/user_analytics/index.html b/src/flimix/analytics/user_analytics/index.html
new file mode 100644
index 00000000000..24b17e615b8
--- /dev/null
+++ b/src/flimix/analytics/user_analytics/index.html
@@ -0,0 +1,31 @@
+---
+permalink: flimix/analytics/user_analytics/
+tags: flimix
+staff_view: "Analytics"
+title: User Analytics
+---
+
+{% extends "src/flimix/layouts/sidebar_layout.html" %}
+{% block main_class %}bg-stone-50{% endblock %}
+
+{% block main_content %}
+{% set analytics_active_tab = 'user_analytics' %}
+{% include "src/flimix/analytics/includes/header.html" %}
+
+<div class="space-y-5 pt-5">
+  {% include "./kpi_cards.html" %}
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
+    {% include "./active_users_trend.html" %}
+    {% include "./watch_time_sessions.html" %}
+  </div>
+  <div class="w-full">
+    {% include "./retention_cohort.html" %}
+  </div>
+</div>
+
+{% endblock main_content %}
+
+{% block script %}
+{% include "./charts_script.html" %}
+{% endblock script %}
+
diff --git a/src/flimix/analytics/user_analytics/kpi_cards.html b/src/flimix/analytics/user_analytics/kpi_cards.html
new file mode 100644
index 00000000000..7dc7c1fbff9
--- /dev/null
+++ b/src/flimix/analytics/user_analytics/kpi_cards.html
@@ -0,0 +1,145 @@
+<div class="grid grid-cols-2 lg:grid-cols-4 gap-2 md:gap-3 lg:gap-5">
+  <!-- Total Users -->
+  <div
+    class="p-4 sm:p-5 bg-white border border-gray-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+    <div class="sm:flex sm:gap-x-3">
+      <svg xmlns="http://www.w3.org/2000/svg"
+        class="sm:order-2 mb-2 sm:mb-0 shrink-0 size-6 text-gray-500 dark:text-neutral-400 lucide lucide-info-icon lucide-info"
+        width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+        stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 16v-4" />
+        <path d="M12 8h.01" />
+      </svg>
+      <div class="sm:order-1 grow space-y-1">
+        <h2 class="sm:mb-3 text-sm text-gray-500 dark:text-neutral-400">Total Users</h2>
+        <p class="text-lg md:text-xl font-semibold text-gray-800 dark:text-neutral-200">1,52,340</p>
+      </div>
+    </div>
+    <div class="mt-1 flex items-center gap-x-2">
+      <span class="text-sm leading-5 text-gray-500 dark:text-neutral-400">vs previous period</span>
+      <span class="inline-flex items-center gap-x-1 text-xs font-medium text-green-500 rounded-full">
+        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+          <polyline points="16 7 22 7 22 13" />
+        </svg>
+        +4.2%
+      </span>
+    </div>
+  </div>
+
+  <!-- New Users -->
+  <div
+    class="p-4 sm:p-5 bg-white border border-gray-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+    <div class="sm:flex sm:gap-x-3">
+      <svg xmlns="http://www.w3.org/2000/svg"
+        class="sm:order-2 mb-2 sm:mb-0 shrink-0 size-6 text-gray-500 dark:text-neutral-400 lucide lucide-user-plus-icon lucide-user-plus"
+        width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+        stroke-linecap="round" stroke-linejoin="round">
+        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+        <circle cx="9" cy="7" r="4" />
+        <line x1="19" x2="19" y1="8" y2="14" />
+        <line x1="22" x2="16" y1="11" y2="11" />
+      </svg>
+      <div class="sm:order-1 grow space-y-1">
+        <h2 class="sm:mb-3 text-sm text-gray-500 dark:text-neutral-400">New Users</h2>
+        <p class="text-lg md:text-xl font-semibold text-gray-800 dark:text-neutral-200">8,420</p>
+      </div>
+    </div>
+    <div class="mt-1 flex items-center gap-x-2">
+      <span class="text-sm leading-5 text-gray-500 dark:text-neutral-400">in this period</span>
+      <span class="inline-flex items-center gap-x-1 text-xs font-medium text-green-500 rounded-full">
+        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+          <polyline points="16 7 22 7 22 13" />
+        </svg>
+        +8.1%
+      </span>
+    </div>
+  </div>
+
+  <!-- Active Users -->
+  <div
+    class="p-4 sm:p-5 bg-white border border-gray-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+    <div class="sm:flex sm:gap-x-3">
+      <svg xmlns="http://www.w3.org/2000/svg"
+        class="sm:order-2 mb-2 sm:mb-0 shrink-0 size-6 text-gray-500 dark:text-neutral-400 lucide lucide-user-check-icon lucide-user-check"
+        width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+        stroke-linecap="round" stroke-linejoin="round">
+        <path d="m16 11 2 2 4-4" />
+        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+        <circle cx="9" cy="7" r="4" />
+      </svg>
+      <div class="sm:order-1 grow space-y-1">
+        <div class="sm:mb-2 inline-flex items-center gap-1.5">
+          <h2 class="text-sm text-gray-500 dark:text-neutral-400">
+            Active Users
+          </h2>
+          <div class="hs-tooltip [--placement:bottom] inline-flex items-center">
+            <button
+              type="button"
+              class="hs-tooltip-toggle inline-flex items-center justify-center text-gray-400 hover:text-gray-600 dark:text-neutral-500 dark:hover:text-neutral-300 focus:outline-hidden"
+              aria-label="What is an active user?">
+              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10" />
+                <path d="M12 16v-4" />
+                <path d="M12 8h.01" />
+              </svg>
+              <span
+                class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-[10] py-1.5 px-2.5 bg-white border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs max-w-xs text-left"
+                role="tooltip">
+                Users who had at least one viewing session of 15 minutes or more is considered as active user.
+              </span>
+            </button>
+          </div>
+        </div>
+        <p class="text-lg md:text-xl font-semibold text-gray-800 dark:text-neutral-200">1,02,300</p>
+      </div>
+    </div>
+    <div class="mt-1 flex items-center gap-x-2">
+      <span class="text-sm leading-5 text-gray-500 dark:text-neutral-400">67% of total users</span>
+      <span class="inline-flex items-center gap-x-1 text-xs font-medium text-green-500 rounded-full">
+        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+          <polyline points="16 7 22 7 22 13" />
+        </svg>
+        +3.5%
+      </span>
+    </div>
+  </div>
+
+  <!-- Avg Watch Time / Active User -->
+  <div
+    class="p-4 sm:p-5 bg-white border border-gray-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+    <div class="sm:flex sm:gap-x-3">
+      <svg xmlns="http://www.w3.org/2000/svg"
+        class="sm:order-2 mb-2 sm:mb-0 shrink-0 size-6 text-gray-500 dark:text-neutral-400 lucide lucide-clock8-icon lucide-clock-8"
+        width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+        stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 6v6l-4 2" />
+        <circle cx="12" cy="12" r="10" />
+      </svg>
+      <div class="sm:order-1 grow space-y-1">
+        <h2 class="sm:mb-3 text-sm text-gray-500 dark:text-neutral-400">Avg watch time / active user</h2>
+        <p class="text-lg md:text-xl font-semibold text-gray-800 dark:text-neutral-200">42 min</p>
+      </div>
+    </div>
+    <div class="mt-1 flex items-center gap-x-2">
+      <span class="text-sm leading-5 text-gray-500 dark:text-neutral-400">vs previous period</span>
+      <span class="inline-flex items-center gap-x-1 text-xs font-medium text-green-500 rounded-full">
+        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+          <polyline points="16 7 22 7 22 13" />
+        </svg>
+        +6.8%
+      </span>
+    </div>
+  </div>
+</div>
+
diff --git a/src/flimix/analytics/user_analytics/retention_cohort.html b/src/flimix/analytics/user_analytics/retention_cohort.html
new file mode 100644
index 00000000000..5cee8b93055
--- /dev/null
+++ b/src/flimix/analytics/user_analytics/retention_cohort.html
@@ -0,0 +1,40 @@
+<div class="p-5 bg-white border border-stone-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h2 class="inline-block font-medium text-stone-800 dark:text-neutral-200">Retention &amp; cohort</h2>
+      <p class="text-sm text-stone-500 dark:text-neutral-400 mt-1">
+        Track how consistently users return after signup.
+      </p>
+    </div>
+
+    <!-- Legend + view selector -->
+    <div class="flex flex-wrap items-center gap-y-2 gap-x-4">
+      <!-- Future: view selector (Last 7 / 30 / 90 / 12M) -->
+      <!--
+      <div class="relative inline-block">
+        <button type="button" class="relative -ms-2.5 py-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-xs text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus">
+          <span class="truncate">Last 7 days</span>
+        </button>
+      </div>
+      -->
+
+      <!-- Heatmap legend -->
+      <div class="flex items-center gap-x-2 whitespace-nowrap">
+        <span class="text-[11px] text-stone-500 dark:text-neutral-400">
+          Very low
+        </span>
+        <div class="inline-flex items-center gap-x-1">
+          <span class="shrink-0 size-2.5 inline-block rounded-xs bg-sky-50"></span>
+          <span class="shrink-0 size-2.5 inline-block rounded-xs bg-sky-100"></span>
+          <span class="shrink-0 size-2.5 inline-block rounded-xs bg-sky-200"></span>
+          <span class="shrink-0 size-2.5 inline-block rounded-xs bg-sky-400"></span>
+          <span class="shrink-0 size-2.5 inline-block rounded-xs bg-sky-600"></span>
+        </div>
+        <span class="text-[11px] text-stone-500 dark:text-neutral-400">
+          High retention
+        </span>
+      </div>
+    </div>
+  </div>
+  <div id="analytics-retention-cohort-chart" class="min-h-[280px] md:min-h-[350px] mt-4"></div>
+</div>
diff --git a/src/flimix/analytics/user_analytics/watch_time_sessions.html b/src/flimix/analytics/user_analytics/watch_time_sessions.html
new file mode 100644
index 00000000000..725a5e7aaa4
--- /dev/null
+++ b/src/flimix/analytics/user_analytics/watch_time_sessions.html
@@ -0,0 +1,9 @@
+<div class="p-5 bg-white border border-stone-200 rounded-xl shadow-2xs dark:bg-neutral-800 dark:border-neutral-700">
+  <div class="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h2 class="inline-block font-medium text-stone-800 dark:text-neutral-200">Watch time &amp; sessions over time</h2>
+    </div>
+  </div>
+  <div id="analytics-watch-time-sessions-chart" class="min-h-[260px] md:min-h-[300px] mt-4"></div>
+</div>
+

From adeb4f4e1822c1f0b596b25d7d1b46c3c3276459 Mon Sep 17 00:00:00 2001
From: karthikeyan <karthikeyan@testpress.in>
Date: Mon, 9 Feb 2026 18:31:23 +0530
Subject: [PATCH 3/3] progress

---
 .../user_analytics/charts_script.html         | 332 ++++++++++++++----
 1 file changed, 260 insertions(+), 72 deletions(-)

diff --git a/src/flimix/analytics/user_analytics/charts_script.html b/src/flimix/analytics/user_analytics/charts_script.html
index 45388292ff9..8f71efb542d 100644
--- a/src/flimix/analytics/user_analytics/charts_script.html
+++ b/src/flimix/analytics/user_analytics/charts_script.html
@@ -82,79 +82,267 @@
       };
     }
 
-    function getRetentionData() {
-      // Only support "Last 7 days" view for now.
-      // X-axis: Day 0–Day 6 (days after signup, cumulative).
-      // Y-axis: daily signup cohorts (newest on top).
-      // Color: retention % (y), Cell text & tooltip: active user count (active).
-
-      const xCategories = ['Day 0', 'Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'];
-
-      // Mock data shaped so that newer cohorts have fewer observed days.
-      const cohorts = [
-        {
-          // Newest signup cohort – only Day 0 data is known.
-          label: 'Feb 9',
-          size: 220,
-          percents: [100, null, null, null, null, null, null],
-          actives:  [220, null, null, null, null, null, null]
-        },
-        {
-          label: 'Feb 8',
-          size: 240,
-          percents: [100, 68, null, null, null, null, null],
-          actives:  [240, 163, null, null, null, null, null]
-        },
-        {
-          label: 'Feb 7',
-          size: 260,
-          percents: [100, 66, 58, null, null, null, null],
-          actives:  [260, 172, 151, null, null, null, null]
-        },
-        {
-          label: 'Feb 6',
-          size: 280,
-          percents: [100, 64, 56, 50, null, null, null],
-          actives:  [280, 179, 157, 140, null, null, null]
-        },
-        {
-          label: 'Feb 5',
-          size: 300,
-          percents: [100, 62, 54, 48, 43, null, null],
-          actives:  [300, 186, 162, 144, 129, null, null]
-        },
-        {
-          label: 'Feb 4',
-          size: 320,
-          percents: [100, 60, 52, 46, 41, 37, null],
-          actives:  [320, 192, 166, 147, 131, 118, null]
-        },
-        {
-          // Oldest cohort – has full 7-day observation window.
-          label: 'Feb 3',
-          size: 340,
-          percents: [100, 58, 50, 44, 40, 36, 32],
-          actives:  [340, 197, 170, 150, 136, 122, 109]
-        }
-      ];
-
-      // Newest cohort first so it appears at the top of the heatmap.
-      const series = cohorts.map(cohort => ({
-        name: cohort.label,
-        data: xCategories.map((xLabel, idx) => ({
-          x: xLabel,
-          y: cohort.percents[idx] ?? null,
-          active: cohort.actives[idx] ?? null
-        }))
-      }));
+    function getRetentionData(range) {
+      const rangeKey = range || (dateRangeSelect ? dateRangeSelect.value : '30');
 
-      return {
-        rangeKey: '7',
-        valueType: 'percent',
-        chartHeight: 350,
-        xCategories,
-        series
-      };
+      // Last 7 days – daily signup cohorts
+      if (rangeKey === '7') {
+        const xCategories = ['Day 0', 'Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'];
+
+        const cohorts7 = [
+          {
+            // Newest signup cohort – only Day 0 data is known.
+            label: 'Feb 9',
+            size: 220,
+            percents: [100, null, null, null, null, null, null],
+            actives:  [220, null, null, null, null, null, null]
+          },
+          {
+            label: 'Feb 8',
+            size: 240,
+            percents: [100, 68, null, null, null, null, null],
+            actives:  [240, 163, null, null, null, null, null]
+          },
+          {
+            label: 'Feb 7',
+            size: 260,
+            percents: [100, 66, 58, null, null, null, null],
+            actives:  [260, 172, 151, null, null, null, null]
+          },
+          {
+            label: 'Feb 6',
+            size: 280,
+            percents: [100, 64, 56, 50, null, null, null],
+            actives:  [280, 179, 157, 140, null, null, null]
+          },
+          {
+            label: 'Feb 5',
+            size: 300,
+            percents: [100, 62, 54, 48, 43, null, null],
+            actives:  [300, 186, 162, 144, 129, null, null]
+          },
+          {
+            label: 'Feb 4',
+            size: 320,
+            percents: [100, 60, 52, 46, 41, 37, null],
+            actives:  [320, 192, 166, 147, 131, 118, null]
+          },
+          {
+            // Oldest cohort – has full 7-day observation window.
+            label: 'Feb 3',
+            size: 340,
+            percents: [100, 58, 50, 44, 40, 36, 32],
+            actives:  [340, 197, 170, 150, 136, 122, 109]
+          }
+        ];
+
+        const series7 = cohorts7.map(cohort => ({
+          name: cohort.label,
+          data: xCategories.map((xLabel, idx) => ({
+            x: xLabel,
+            y: cohort.percents[idx] ?? null,
+            active: cohort.actives[idx] ?? null
+          }))
+        }));
+
+        return {
+          rangeKey: '7',
+          valueType: 'percent',
+          chartHeight: 350,
+          xCategories,
+          series: series7
+        };
+      }
+
+      // Last 30 days – weekly signup cohorts, cumulative retention
+      if (rangeKey === '30') {
+        const xCategories = ['Day 0', 'Day 1', 'Day 7', 'Day 14', 'Day 30'];
+
+        const cohorts30 = [
+          {
+            // Latest week – only Day 0 & Day 1 known so far
+            label: 'Feb 3–9',
+            size: 420,
+            percents: [100, 62, null, null, null],
+            actives:  [420, 260, null, null, null]
+          },
+          {
+            label: 'Jan 27–Feb 2',
+            size: 440,
+            percents: [100, 60, 74, null, null],
+            actives:  [440, 264, 326, null, null]
+          },
+          {
+            label: 'Jan 20–26',
+            size: 460,
+            percents: [100, 58, 72, 80, null],
+            actives:  [460, 267, 331, 368, null]
+          },
+          {
+            // Oldest visible cohort – full 30‑day window
+            label: 'Jan 13–19',
+            size: 480,
+            percents: [100, 55, 70, 78, 86],
+            actives:  [480, 264, 336, 374, 413]
+          }
+        ];
+
+        const series30 = cohorts30.map(cohort => ({
+          name: cohort.label,
+          data: xCategories.map((xLabel, idx) => ({
+            x: xLabel,
+            y: cohort.percents[idx] ?? null,
+            active: cohort.actives[idx] ?? null
+          }))
+        }));
+
+        return {
+          rangeKey: '30',
+          valueType: 'percent',
+          chartHeight: 350,
+          xCategories,
+          series: series30
+        };
+      }
+
+      // Last 90 days – weekly signup cohorts, cumulative retention by week
+      if (rangeKey === '90') {
+        const xCategories = ['Week 0', 'Week 1', 'Week 2', 'Week 4', 'Week 8', 'Week 12'];
+
+        const cohorts90 = [
+          { label: 'Feb 3–9',   size: 380, percents: [100, null, null, null, null, null], actives: [380, null, null, null, null, null] },
+          { label: 'Jan 27–Feb 2', size: 400, percents: [100, 68, null, null, null, null], actives: [400, 272, null, null, null, null] },
+          { label: 'Jan 20–26', size: 410, percents: [100, 66, 72, null, null, null], actives: [410, 271, 295, null, null, null] },
+          { label: 'Jan 13–19', size: 420, percents: [100, 65, 70, 76, null, null], actives: [420, 273, 294, 319, null, null] },
+          { label: 'Jan 6–12',  size: 430, percents: [100, 64, 69, 74, 68, null], actives: [430, 275, 297, 318, 292, null] },
+          { label: 'Dec 30–Jan 5', size: 440, percents: [100, 63, 68, 73, 67, 62], actives: [440, 277, 299, 321, 295, 273] },
+          { label: 'Dec 23–29', size: 450, percents: [100, 62, 67, 72, 66, 61], actives: [450, 279, 302, 324, 297, 274] },
+          { label: 'Dec 16–22', size: 460, percents: [100, 61, 66, 71, 65, 60], actives: [460, 281, 304, 327, 299, 276] },
+          { label: 'Dec 9–15',  size: 470, percents: [100, 60, 65, 70, 64, 59], actives: [470, 282, 306, 329, 301, 277] },
+          { label: 'Dec 2–8',   size: 480, percents: [100, 59, 64, 69, 63, 58], actives: [480, 283, 307, 331, 302, 278] },
+          { label: 'Nov 25–Dec 1', size: 490, percents: [100, 58, 63, 68, 62, 57], actives: [490, 284, 309, 333, 304, 279] },
+          { label: 'Nov 18–24', size: 500, percents: [100, 57, 62, 67, 61, 56], actives: [500, 285, 310, 335, 305, 280] },
+          { label: 'Nov 11–17', size: 510, percents: [100, 56, 61, 66, 60, 55], actives: [510, 286, 311, 337, 306, 281] }
+        ];
+
+        const series90 = cohorts90.map(cohort => ({
+          name: cohort.label,
+          data: xCategories.map((xLabel, idx) => ({
+            x: xLabel,
+            y: cohort.percents[idx] ?? null,
+            active: cohort.actives[idx] ?? null
+          }))
+        }));
+
+        return {
+          rangeKey: '90',
+          valueType: 'percent',
+          chartHeight: 420,
+          xCategories,
+          series: series90
+        };
+      }
+
+      // Last 12 months – monthly signup cohorts, cumulative retention by month
+      if (rangeKey === '365') {
+        const xCategories = ['Month 0', 'Month 1', 'Month 3', 'Month 6', 'Month 12'];
+
+        const cohorts365 = [
+          {
+            // Latest month – only Month 0 known so far
+            label: 'Feb 2026',
+            size: 5200,
+            percents: [100, null, null, null, null],
+            actives:  [5200, null, null, null, null]
+          },
+          {
+            label: 'Jan 2026',
+            size: 5100,
+            percents: [100, 68, null, null, null],
+            actives:  [5100, 3468, null, null, null]
+          },
+          {
+            label: 'Dec 2025',
+            size: 5000,
+            percents: [100, 66, 74, null, null],
+            actives:  [5000, 3300, 3700, null, null]
+          },
+          {
+            label: 'Nov 2025',
+            size: 4900,
+            percents: [100, 64, 72, 80, null],
+            actives:  [4900, 3136, 3528, 3920, null]
+          },
+          {
+            label: 'Oct 2025',
+            size: 4800,
+            percents: [100, 62, 70, 78, 86],
+            actives:  [4800, 2976, 3360, 3744, 4128]
+          },
+          {
+            label: 'Sep 2025',
+            size: 4700,
+            percents: [100, 60, 68, 76, 84],
+            actives:  [4700, 2820, 3196, 3572, 3948]
+          },
+          {
+            label: 'Aug 2025',
+            size: 4600,
+            percents: [100, 59, 66, 74, 82],
+            actives:  [4600, 2714, 3036, 3404, 3772]
+          },
+          {
+            label: 'Jul 2025',
+            size: 4500,
+            percents: [100, 58, 65, 72, 80],
+            actives:  [4500, 2610, 2925, 3240, 3600]
+          },
+          {
+            label: 'Jun 2025',
+            size: 4400,
+            percents: [100, 57, 64, 71, 79],
+            actives:  [4400, 2508, 2816, 3124, 3476]
+          },
+          {
+            label: 'May 2025',
+            size: 4300,
+            percents: [100, 56, 63, 70, 78],
+            actives:  [4300, 2408, 2709, 3010, 3354]
+          },
+          {
+            label: 'Apr 2025',
+            size: 4200,
+            percents: [100, 55, 62, 69, 77],
+            actives:  [4200, 2310, 2604, 2898, 3234]
+          },
+          {
+            label: 'Mar 2025',
+            size: 4100,
+            percents: [100, 54, 61, 68, 76],
+            actives:  [4100, 2214, 2501, 2788, 3116]
+          }
+        ];
+
+        const series365 = cohorts365.map(cohort => ({
+          name: cohort.label,
+          data: xCategories.map((xLabel, idx) => ({
+            x: xLabel,
+            y: cohort.percents[idx] ?? null,
+            active: cohort.actives[idx] ?? null
+          }))
+        }));
+
+        return {
+          rangeKey: '365',
+          valueType: 'percent',
+          chartHeight: 440,
+          xCategories,
+          series: series365
+        };
+      }
+
+      // Fallback: use 30‑day config
+      return getRetentionData('30');
     }
 
     function renderRetentionChart(range) {