From 6758e3cdfce2920672b36bb73bd5cfbdb73ed971 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sat, 19 Jul 2025 22:55:58 +1000
Subject: [PATCH 1/4] Improve analytics

---
 apps/web/pages/index.tsx                     |  17 +-
 apps/web/pages/pages/[page_id]/analytics.tsx | 277 ++++++++++++++++---
 2 files changed, 243 insertions(+), 51 deletions(-)
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
index b149bb2..7801551 100644
--- a/apps/web/pages/index.tsx
+++ b/apps/web/pages/index.tsx
@@ -18,11 +18,11 @@ export default function Index({ addons, unit_amount, stars }) {
     <div className="h-full dark:bg-gray-800">
       <Head>
         <title>
-          Changelog SaaS | Product Update Tool for Teams | changes.page
+          Changes.page - Simple Changelog for Product Teams
         </title>
         <meta
           name="description"
-          content="changes.page is the smarter, faster SaaS changelog tool for product teams. Publish release notes, notify users, and track engagement—all in one place. Try free!"
+          content="Create beautiful release notes and notify users about product updates. Track engagement with built-in analytics. Start your free trial today."
         />
         {/* FAQ Schema for SEO */}
         <script
@@ -164,8 +164,7 @@ export default function Index({ addons, unit_amount, stars }) {
                   Sign Up
                 </h3>
                 <p className="mt-2 text-gray-500 dark:text-gray-300 text-base text-center">
-                  Create your account in seconds and your first page is ready
-                  instantly.
+                  Create your account in seconds and get started instantly.
                 </p>
               </div>
               {/* Connector */}
@@ -202,7 +201,7 @@ export default function Index({ addons, unit_amount, stars }) {
                   Customize
                 </h3>
                 <p className="mt-2 text-gray-500 dark:text-gray-300 text-base text-center">
-                  Set up your page, add your branding, and connect integrations.
+                  Add your branding, customize the design, and connect integrations.
                 </p>
               </div>
               {/* Connector */}
@@ -239,7 +238,7 @@ export default function Index({ addons, unit_amount, stars }) {
                   Publish & Notify
                 </h3>
                 <p className="mt-2 text-gray-500 dark:text-gray-300 text-base text-center">
-                  Publish updates, notify users via email or RSS, and track
+                  Share updates, notify users via email or RSS, and track
                   engagement with analytics.
                 </p>
               </div>
@@ -252,7 +251,7 @@ export default function Index({ addons, unit_amount, stars }) {
         <section className="bg-white dark:bg-gray-900 py-20 border-b border-gray-100 dark:border-gray-800">
           <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
             <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-16 text-center">
-              Who is changes.page for?
+              Who uses this tool?
             </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
               {/* Card 1 */}
@@ -292,7 +291,7 @@ export default function Index({ addons, unit_amount, stars }) {
                   Developers
                 </h3>
                 <p className="text-gray-500 dark:text-gray-300 text-base">
-                  Automate changelog publishing and integrate with your CI/CD
+                  Automate release notes and integrate with your CI/CD
                   pipeline.
                 </p>
               </div>
@@ -326,7 +325,7 @@ export default function Index({ addons, unit_amount, stars }) {
                     Zapier
                   </div>
                   <div className="text-gray-500 dark:text-gray-300 text-sm">
-                    Automate your changelog workflow with 5,000+ apps via
+                    Automate your workflow with 5,000+ apps via
                     Zapier.
                   </div>
                 </div>
diff --git a/apps/web/pages/pages/[page_id]/analytics.tsx b/apps/web/pages/pages/[page_id]/analytics.tsx
index 7e5bf07..9f95a87 100644
--- a/apps/web/pages/pages/[page_id]/analytics.tsx
+++ b/apps/web/pages/pages/[page_id]/analytics.tsx
@@ -9,7 +9,108 @@ import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin"
 import { getPageAnalytics } from "../../../utils/useDatabase";
 import { getPage } from "../../../utils/useSSR";
 
+// Helper function to detect device type from user agent
+const getDeviceType = (userAgent: string): string => {
+  if (!userAgent) return 'Unknown';
+  
+  const ua = userAgent.toLowerCase();
+  
+  if (ua.includes('mobile') || ua.includes('android') || ua.includes('iphone') || 
+      ua.includes('ipod') || ua.includes('windows phone') || ua.includes('blackberry')) {
+    return 'Mobile';
+  }
+  
+  if (ua.includes('tablet') || ua.includes('ipad')) {
+    return 'Tablet';
+  }
+  
+  return 'Desktop';
+};
+
+// Get device analytics using existing data
+async function getDeviceAnalytics(page_id: string, range: number) {
+  const date = new Date(Date.now() - range * 24 * 60 * 60 * 1000);
+  
+  const { data } = await supabaseAdmin
+    .from('page_views')
+    .select('user_agent')
+    .eq('page_id', page_id)
+    .gte('created_at', date.toISOString())
+    .not('user_agent', 'is', null);
+  
+  const deviceCounts = {};
+  
+  data?.forEach((row) => {
+    const device = getDeviceType(row.user_agent);
+    deviceCounts[device] = (deviceCounts[device] || 0) + 1;
+  });
+  
+  return Object.entries(deviceCounts)
+    .map(([device, count]) => ({
+      data_name: device,
+      data_count: count as number,
+    }))
+    .sort((a, b) => b.data_count - a.data_count);
+}
+
+// Get peak hours analytics using existing data
+async function getPeakHoursAnalytics(page_id: string, range: number) {
+  const date = new Date(Date.now() - range * 24 * 60 * 60 * 1000);
+  
+  const { data } = await supabaseAdmin
+    .from('page_views')
+    .select('created_at')
+    .eq('page_id', page_id)
+    .gte('created_at', date.toISOString());
+  
+  const hourCounts = {};
+  
+  data?.forEach((row) => {
+    const hour = new Date(row.created_at).getHours();
+    const hourLabel = `${hour.toString().padStart(2, '0')}:00 - ${(hour + 1).toString().padStart(2, '0')}:00`;
+    hourCounts[hourLabel] = (hourCounts[hourLabel] || 0) + 1;
+  });
+  
+  return Object.entries(hourCounts)
+    .map(([hour, count]) => ({
+      data_name: hour,
+      data_count: count as number,
+    }))
+    .sort((a, b) => b.data_count - a.data_count)
+    .slice(0, 5);
+}
+
+// Component to render icons based on type
+const MetricIcon = ({ iconType }: { iconType: string }) => {
+  switch (iconType) {
+    case 'eye':
+      return (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+        </svg>
+      );
+    case 'users':
+      return (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+        </svg>
+      );
+    case 'lightning':
+      return (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+};
+
 const StatsTable = ({ data = [], title, total = 5 }) => {
+  // Calculate total count for percentage calculation
+  const totalCount = data.reduce((sum, item) => sum + item.data_count, 0);
+  
   return (
     <div className="inline-block min-w-full align-middle">
       <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
@@ -28,52 +129,66 @@ const StatsTable = ({ data = [], title, total = 5 }) => {
               >
                 Total
               </th>
+              <th
+                scope="col"
+                className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100"
+              >
+                %
+              </th>
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-200 dark:divide-gray-800 bg-white dark:bg-black">
-            {data.map(({ data_name, data_count }) => (
-              <tr key={data_name} className="relative">
-                <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6 truncate overflow-hidden max-w-[240px]">
-                  <div className="relative">
-                    {data_name.startsWith("https") && (
-                      <Image
-                        className="w-4 h-4 mr-2 rounded-full inline-block"
-                        src={`https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://${
-                          new URL(data_name).hostname
-                        }`}
-                        alt={`${data_name} icon`}
-                        height={16}
-                        width={16}
-                      />
-                    )}
+            {data.map(({ data_name, data_count }) => {
+              const percentage = totalCount > 0 ? ((data_count / totalCount) * 100).toFixed(1) : 0;
+              
+              return (
+                <tr key={data_name} className="relative">
+                  <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6 truncate overflow-hidden max-w-[200px]">
+                    <div className="relative">
+                      {data_name.startsWith("https") && (
+                        <Image
+                          className="w-4 h-4 mr-2 rounded-full inline-block"
+                          src={`https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://${
+                            new URL(data_name).hostname
+                          }`}
+                          alt={`${data_name} icon`}
+                          height={16}
+                          width={16}
+                        />
+                      )}
 
-                    {data_name.startsWith("http")
-                      ? new URL(data_name).hostname
-                      : data_name}
-                    <div
-                      className="block absolute -left-2 -top-2 h-9 bg-gray-200 dark:bg-gray-600 rounded opacity-10 invert transition-all duration-300"
-                      style={{
-                        width: `calc(${Math.round(
-                          (data_count / data[0].data_count) * 100
-                        )}% - 1rem)`,
-                      }}
-                    ></div>
-                  </div>
-                </td>
-                <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 w-32">
-                  {data_count}
-                </td>
-              </tr>
-            ))}
+                      {data_name.startsWith("http")
+                        ? new URL(data_name).hostname
+                        : data_name}
+                      <div
+                        className="block absolute -left-2 -top-2 h-9 bg-indigo-100 dark:bg-indigo-900 rounded opacity-20 transition-all duration-300"
+                        style={{
+                          width: `calc(${percentage}% - 1rem)`,
+                        }}
+                      ></div>
+                    </div>
+                  </td>
+                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 w-20">
+                    {data_count.toLocaleString()}
+                  </td>
+                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 w-16">
+                    {percentage}%
+                  </td>
+                </tr>
+              );
+            })}
 
             {new Array(Math.max(total - data?.length, 0))
               .fill("-")
               .map((_, idx) => (
                 <tr key={idx}>
-                  <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6 truncate overflow-hidden max-w-[240px]">
+                  <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6 truncate overflow-hidden max-w-[200px]">
                     -
                   </td>
-                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 w-32">
+                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 w-20">
+                    -
+                  </td>
+                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 w-16">
                     -
                   </td>
                 </tr>
@@ -91,12 +206,21 @@ export async function getServerSideProps({ req, res, query }) {
   const { supabase } = await getSupabaseServerClient({ req, res });
   const page = await getPage(supabase, page_id);
 
-  // date {range} days ago
+  const rangeNum = Number(range) || 7;
+  
+  // Current period date
   const date = new Date(
-    Date.now() - (Number(range) || 7) * 24 * 60 * 60 * 1000
+    Date.now() - rangeNum * 24 * 60 * 60 * 1000
+  );
+  
+  // Previous period date (for comparison)
+  const prevDate = new Date(
+    Date.now() - (rangeNum * 2) * 24 * 60 * 60 * 1000
   );
+  
   console.log(`Fetching stats for page ${page_id} from ${date.toISOString()}`);
 
+  // Get current period stats
   const {
     // @ts-ignore
     data: { page_views, visitors },
@@ -108,17 +232,58 @@ export async function getServerSideProps({ req, res, query }) {
     .maybeSingle()
     .throwOnError();
 
+  // Get previous period stats for comparison
+  const {
+    // @ts-ignore
+    data: { page_views: prev_page_views, visitors: prev_visitors },
+  } = await supabaseAdmin
+    .rpc("page_view_stats", {
+      pageid: String(page_id),
+      date: prevDate.toISOString(),
+    })
+    .maybeSingle()
+    .throwOnError();
+
+  // Calculate growth rates
+  const pageViewsGrowth = prev_page_views > 0 
+    ? ((page_views - prev_page_views) / prev_page_views * 100).toFixed(1)
+    : page_views > 0 ? 100 : 0;
+  
+  const visitorsGrowth = prev_visitors > 0
+    ? ((visitors - prev_visitors) / prev_visitors * 100).toFixed(1)
+    : visitors > 0 ? 100 : 0;
+
+  // Calculate engagement rate (page views per visitor)
+  const engagementRate = visitors > 0 ? (page_views / visitors).toFixed(1) : 0;
+
   const stats = [
     {
       data_name: "Page Views",
       data_count: Number(page_views).toLocaleString(),
+      growth: pageViewsGrowth,
+      trend: Number(pageViewsGrowth) >= 0 ? 'up' : 'down',
     },
     {
       data_name: "Visitors",
       data_count: Number(visitors).toLocaleString(),
+      growth: visitorsGrowth,
+      trend: Number(visitorsGrowth) >= 0 ? 'up' : 'down',
+    },
+    {
+      data_name: "Engagement Rate",
+      data_count: `${engagementRate}`,
+      suffix: " views/visitor",
+      growth: null,
+      trend: null,
     },
   ];
 
+  // Get device type data by analyzing user agents
+  const deviceData = await getDeviceAnalytics(page_id, rangeNum);
+  
+  // Get peak hours data
+  const peakHoursData = await getPeakHoursAnalytics(page_id, rangeNum);
+
   const metrics = ["browsers", "os", "referrers"];
   const metricsData = await Promise.all(
     metrics.map((metric) => getPageAnalytics(page_id, metric, range))
@@ -131,6 +296,8 @@ export async function getServerSideProps({ req, res, query }) {
       range: String(range ?? 7),
       stats,
       metricsData,
+      deviceData,
+      peakHoursData,
     },
   };
 }
@@ -141,6 +308,8 @@ export default function PageAnalytics({
   range,
   stats,
   metricsData,
+  deviceData,
+  peakHoursData,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   if (!page_id) return null;
 
@@ -172,17 +341,37 @@ export default function PageAnalytics({
 
       <div>
         <dl className="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-3 px-4 md:px-0">
-          {stats.map(({ data_name, data_count }) => (
+          {stats.map(({ data_name, data_count, growth, trend, suffix }) => (
             <div
               key={data_name}
-              className="overflow-hidden rounded-lg bg-white dark:bg-black px-4 py-5 shadow sm:p-6"
+              className="overflow-hidden rounded-lg bg-white dark:bg-black px-6 py-6 shadow sm:p-8"
             >
-              <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
+              <dt className="text-base font-medium text-gray-500 dark:text-gray-400 mb-3">
                 {data_name}
               </dt>
-              <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
+              <dd className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-1">
                 {data_count}
+                {suffix && <span className="text-lg font-normal text-gray-500 dark:text-gray-400 ml-1">{suffix}</span>}
               </dd>
+              {growth !== null && (
+                <div className="flex items-center text-sm">
+                  <span className={`flex items-center font-medium ${
+                    trend === 'up' ? 'text-green-600' : trend === 'down' ? 'text-red-600' : 'text-gray-500'
+                  }`}>
+                    {trend === 'up' && (
+                      <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
+                      </svg>
+                    )}
+                    {trend === 'down' && (
+                      <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                      </svg>
+                    )}
+                    {Math.abs(Number(growth))}% vs previous period
+                  </span>
+                </div>
+              )}
             </div>
           ))}
         </dl>
@@ -190,7 +379,11 @@ export default function PageAnalytics({
         <div className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2">
           <StatsTable title="Browser" data={metricsData[0]} />
           <StatsTable title="OS" data={metricsData[1]} />
-          <StatsTable title="Referrer" data={metricsData[2]} />
+          <StatsTable title="Device Type" data={deviceData} />
+          <StatsTable title="Peak Hours" data={peakHoursData} />
+          <div className="sm:col-span-2">
+            <StatsTable title="Referrer" data={metricsData[2]} />
+          </div>
         </div>
       </div>
     </Page>

From 0d55beac91dceba3d7f9e02643bef87534948fd4 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sat, 19 Jul 2025 23:07:51 +1000
Subject: [PATCH 2/4] Fix border color

---
 apps/web/pages/pages/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/pages/pages/index.tsx b/apps/web/pages/pages/index.tsx
index 129bf76..ba2aba4 100644
--- a/apps/web/pages/pages/index.tsx
+++ b/apps/web/pages/pages/index.tsx
@@ -106,17 +106,17 @@ export default function Pages({
           )}
 
           {pages.length ? (
-            <div className="overflow-hidden shadow rounded-md bg-white dark:bg-gray-900 border dark:border-gray-700">
+            <div className="overflow-hidden shadow rounded-md bg-white dark:bg-gray-900 border dark:border-gray-800">
               <div className="sm:grid sm:grid-cols-2">
                 {pages.map((page, index) => (
                   <div
                     key={page.id}
                     className={`relative group p-6 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors duration-200 ${
-                      index < pages.length - 1 ? 'border-b border-gray-200 dark:border-gray-700' : ''
+                      index < pages.length - 1 ? 'border-b border-gray-200 dark:border-gray-800' : ''
                     } ${
-                      index % 2 === 0 && index < pages.length - 2 ? 'sm:border-r sm:border-gray-200 sm:dark:border-gray-700' : ''
+                      index % 2 === 0 && index < pages.length - 2 ? 'sm:border-r sm:border-gray-200 sm:dark:border-gray-800' : ''
                     } ${
-                      index % 2 === 0 && index === pages.length - 2 && pages.length % 2 === 0 ? 'sm:border-r sm:border-gray-200 sm:dark:border-gray-700' : ''
+                      index % 2 === 0 && index === pages.length - 2 && pages.length % 2 === 0 ? 'sm:border-r sm:border-gray-200 sm:dark:border-gray-800' : ''
                     }`}
                   >
                   <div>

From 7450a1bad5f23941c24356df28e1db2779038087 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 20 Jul 2025 09:07:51 +1000
Subject: [PATCH 3/4] Remove unused icon

---
 apps/web/pages/pages/[page_id]/analytics.tsx | 190 ++++++++++---------
 1 file changed, 99 insertions(+), 91 deletions(-)

diff --git a/apps/web/pages/pages/[page_id]/analytics.tsx b/apps/web/pages/pages/[page_id]/analytics.tsx
index 9f95a87..9d62edd 100644
--- a/apps/web/pages/pages/[page_id]/analytics.tsx
+++ b/apps/web/pages/pages/[page_id]/analytics.tsx
@@ -11,40 +11,46 @@ import { getPage } from "../../../utils/useSSR";
 
 // Helper function to detect device type from user agent
 const getDeviceType = (userAgent: string): string => {
-  if (!userAgent) return 'Unknown';
-  
+  if (!userAgent) return "Unknown";
+
   const ua = userAgent.toLowerCase();
-  
-  if (ua.includes('mobile') || ua.includes('android') || ua.includes('iphone') || 
-      ua.includes('ipod') || ua.includes('windows phone') || ua.includes('blackberry')) {
-    return 'Mobile';
+
+  if (
+    ua.includes("mobile") ||
+    ua.includes("android") ||
+    ua.includes("iphone") ||
+    ua.includes("ipod") ||
+    ua.includes("windows phone") ||
+    ua.includes("blackberry")
+  ) {
+    return "Mobile";
   }
-  
-  if (ua.includes('tablet') || ua.includes('ipad')) {
-    return 'Tablet';
+
+  if (ua.includes("tablet") || ua.includes("ipad")) {
+    return "Tablet";
   }
-  
-  return 'Desktop';
+
+  return "Desktop";
 };
 
 // Get device analytics using existing data
 async function getDeviceAnalytics(page_id: string, range: number) {
   const date = new Date(Date.now() - range * 24 * 60 * 60 * 1000);
-  
+
   const { data } = await supabaseAdmin
-    .from('page_views')
-    .select('user_agent')
-    .eq('page_id', page_id)
-    .gte('created_at', date.toISOString())
-    .not('user_agent', 'is', null);
-  
+    .from("page_views")
+    .select("user_agent")
+    .eq("page_id", page_id)
+    .gte("created_at", date.toISOString())
+    .not("user_agent", "is", null);
+
   const deviceCounts = {};
-  
+
   data?.forEach((row) => {
     const device = getDeviceType(row.user_agent);
     deviceCounts[device] = (deviceCounts[device] || 0) + 1;
   });
-  
+
   return Object.entries(deviceCounts)
     .map(([device, count]) => ({
       data_name: device,
@@ -56,21 +62,23 @@ async function getDeviceAnalytics(page_id: string, range: number) {
 // Get peak hours analytics using existing data
 async function getPeakHoursAnalytics(page_id: string, range: number) {
   const date = new Date(Date.now() - range * 24 * 60 * 60 * 1000);
-  
+
   const { data } = await supabaseAdmin
-    .from('page_views')
-    .select('created_at')
-    .eq('page_id', page_id)
-    .gte('created_at', date.toISOString());
-  
+    .from("page_views")
+    .select("created_at")
+    .eq("page_id", page_id)
+    .gte("created_at", date.toISOString());
+
   const hourCounts = {};
-  
+
   data?.forEach((row) => {
     const hour = new Date(row.created_at).getHours();
-    const hourLabel = `${hour.toString().padStart(2, '0')}:00 - ${(hour + 1).toString().padStart(2, '0')}:00`;
+    const hourLabel = `${hour.toString().padStart(2, "0")}:00 - ${(hour + 1)
+      .toString()
+      .padStart(2, "0")}:00`;
     hourCounts[hourLabel] = (hourCounts[hourLabel] || 0) + 1;
   });
-  
+
   return Object.entries(hourCounts)
     .map(([hour, count]) => ({
       data_name: hour,
@@ -80,37 +88,9 @@ async function getPeakHoursAnalytics(page_id: string, range: number) {
     .slice(0, 5);
 }
 
-// Component to render icons based on type
-const MetricIcon = ({ iconType }: { iconType: string }) => {
-  switch (iconType) {
-    case 'eye':
-      return (
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-        </svg>
-      );
-    case 'users':
-      return (
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-        </svg>
-      );
-    case 'lightning':
-      return (
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-        </svg>
-      );
-    default:
-      return null;
-  }
-};
-
 const StatsTable = ({ data = [], title, total = 5 }) => {
-  // Calculate total count for percentage calculation
   const totalCount = data.reduce((sum, item) => sum + item.data_count, 0);
-  
+
   return (
     <div className="inline-block min-w-full align-middle">
       <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
@@ -139,8 +119,11 @@ const StatsTable = ({ data = [], title, total = 5 }) => {
           </thead>
           <tbody className="divide-y divide-gray-200 dark:divide-gray-800 bg-white dark:bg-black">
             {data.map(({ data_name, data_count }) => {
-              const percentage = totalCount > 0 ? ((data_count / totalCount) * 100).toFixed(1) : 0;
-              
+              const percentage =
+                totalCount > 0
+                  ? ((data_count / totalCount) * 100).toFixed(1)
+                  : 0;
+
               return (
                 <tr key={data_name} className="relative">
                   <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6 truncate overflow-hidden max-w-[200px]">
@@ -207,17 +190,10 @@ export async function getServerSideProps({ req, res, query }) {
   const page = await getPage(supabase, page_id);
 
   const rangeNum = Number(range) || 7;
-  
-  // Current period date
-  const date = new Date(
-    Date.now() - rangeNum * 24 * 60 * 60 * 1000
-  );
-  
-  // Previous period date (for comparison)
-  const prevDate = new Date(
-    Date.now() - (rangeNum * 2) * 24 * 60 * 60 * 1000
-  );
-  
+
+  const date = new Date(Date.now() - rangeNum * 24 * 60 * 60 * 1000);
+  const prevDate = new Date(Date.now() - rangeNum * 2 * 24 * 60 * 60 * 1000);
+
   console.log(`Fetching stats for page ${page_id} from ${date.toISOString()}`);
 
   // Get current period stats
@@ -245,13 +221,19 @@ export async function getServerSideProps({ req, res, query }) {
     .throwOnError();
 
   // Calculate growth rates
-  const pageViewsGrowth = prev_page_views > 0 
-    ? ((page_views - prev_page_views) / prev_page_views * 100).toFixed(1)
-    : page_views > 0 ? 100 : 0;
-  
-  const visitorsGrowth = prev_visitors > 0
-    ? ((visitors - prev_visitors) / prev_visitors * 100).toFixed(1)
-    : visitors > 0 ? 100 : 0;
+  const pageViewsGrowth =
+    prev_page_views > 0
+      ? (((page_views - prev_page_views) / prev_page_views) * 100).toFixed(1)
+      : page_views > 0
+      ? 100
+      : 0;
+
+  const visitorsGrowth =
+    prev_visitors > 0
+      ? (((visitors - prev_visitors) / prev_visitors) * 100).toFixed(1)
+      : visitors > 0
+      ? 100
+      : 0;
 
   // Calculate engagement rate (page views per visitor)
   const engagementRate = visitors > 0 ? (page_views / visitors).toFixed(1) : 0;
@@ -261,13 +243,13 @@ export async function getServerSideProps({ req, res, query }) {
       data_name: "Page Views",
       data_count: Number(page_views).toLocaleString(),
       growth: pageViewsGrowth,
-      trend: Number(pageViewsGrowth) >= 0 ? 'up' : 'down',
+      trend: Number(pageViewsGrowth) >= 0 ? "up" : "down",
     },
     {
       data_name: "Visitors",
       data_count: Number(visitors).toLocaleString(),
       growth: visitorsGrowth,
-      trend: Number(visitorsGrowth) >= 0 ? 'up' : 'down',
+      trend: Number(visitorsGrowth) >= 0 ? "up" : "down",
     },
     {
       data_name: "Engagement Rate",
@@ -280,7 +262,7 @@ export async function getServerSideProps({ req, res, query }) {
 
   // Get device type data by analyzing user agents
   const deviceData = await getDeviceAnalytics(page_id, rangeNum);
-  
+
   // Get peak hours data
   const peakHoursData = await getPeakHoursAnalytics(page_id, rangeNum);
 
@@ -351,21 +333,47 @@ export default function PageAnalytics({
               </dt>
               <dd className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-1">
                 {data_count}
-                {suffix && <span className="text-lg font-normal text-gray-500 dark:text-gray-400 ml-1">{suffix}</span>}
+                {suffix && (
+                  <span className="text-lg font-normal text-gray-500 dark:text-gray-400 ml-1">
+                    {suffix}
+                  </span>
+                )}
               </dd>
               {growth !== null && (
                 <div className="flex items-center text-sm">
-                  <span className={`flex items-center font-medium ${
-                    trend === 'up' ? 'text-green-600' : trend === 'down' ? 'text-red-600' : 'text-gray-500'
-                  }`}>
-                    {trend === 'up' && (
-                      <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                        <path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
+                  <span
+                    className={`flex items-center font-medium ${
+                      trend === "up"
+                        ? "text-green-600"
+                        : trend === "down"
+                        ? "text-red-600"
+                        : "text-gray-500"
+                    }`}
+                  >
+                    {trend === "up" && (
+                      <svg
+                        className="w-4 h-4 mr-1"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"
+                          clipRule="evenodd"
+                        />
                       </svg>
                     )}
-                    {trend === 'down' && (
-                      <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                        <path fillRule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    {trend === "down" && (
+                      <svg
+                        className="w-4 h-4 mr-1"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z"
+                          clipRule="evenodd"
+                        />
                       </svg>
                     )}
                     {Math.abs(Number(growth))}% vs previous period

From a047f0fae91a4e34061242e34377c0d5c136a7d1 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Sun, 20 Jul 2025 09:18:19 +1000
Subject: [PATCH 4/4] Fix rpc calls

---
 apps/web/.gitignore                          |  4 +-
 apps/web/pages/pages/[page_id]/analytics.tsx | 41 +++++++++-----------
 2 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/apps/web/.gitignore b/apps/web/.gitignore
index 7351fb4..1035fdd 100644
--- a/apps/web/.gitignore
+++ b/apps/web/.gitignore
@@ -43,4 +43,6 @@ yarn-error.log*
 .vscode
 
 # Sentry Auth Token
-.sentryclirc
\ No newline at end of file
+.sentryclirc
+
+tsconfig.tsbuildinfo
\ No newline at end of file
diff --git a/apps/web/pages/pages/[page_id]/analytics.tsx b/apps/web/pages/pages/[page_id]/analytics.tsx
index 9d62edd..a3d40ff 100644
--- a/apps/web/pages/pages/[page_id]/analytics.tsx
+++ b/apps/web/pages/pages/[page_id]/analytics.tsx
@@ -196,29 +196,24 @@ export async function getServerSideProps({ req, res, query }) {
 
   console.log(`Fetching stats for page ${page_id} from ${date.toISOString()}`);
 
-  // Get current period stats
-  const {
-    // @ts-ignore
-    data: { page_views, visitors },
-  } = await supabaseAdmin
-    .rpc("page_view_stats", {
-      pageid: String(page_id),
-      date: date.toISOString(),
-    })
-    .maybeSingle()
-    .throwOnError();
-
-  // Get previous period stats for comparison
-  const {
-    // @ts-ignore
-    data: { page_views: prev_page_views, visitors: prev_visitors },
-  } = await supabaseAdmin
-    .rpc("page_view_stats", {
-      pageid: String(page_id),
-      date: prevDate.toISOString(),
-    })
-    .maybeSingle()
-    .throwOnError();
+  const { data: allPageViews } = await supabaseAdmin
+    .from("page_views")
+    .select("created_at, visitor_id")
+    .eq("page_id", page_id)
+    .gte("created_at", prevDate.toISOString());
+
+  const currentPeriodViews = allPageViews?.filter(
+    (view) => new Date(view.created_at) >= date
+  ) || [];
+  
+  const previousPeriodViews = allPageViews?.filter(
+    (view) => new Date(view.created_at) >= prevDate && new Date(view.created_at) < date
+  ) || [];
+
+  const page_views = currentPeriodViews.length;
+  const visitors = new Set(currentPeriodViews.map(v => v.visitor_id)).size;
+  const prev_page_views = previousPeriodViews.length;
+  const prev_visitors = new Set(previousPeriodViews.map(v => v.visitor_id)).size;
 
   // Calculate growth rates
   const pageViewsGrowth =
