[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68dfff583a348191aef37abbf800c1f2","versionInt","title","Connect66 + Hub Spot Investor Dashboard Mock (interactive)","type","code/react","content","'use client';\n\nimport React, { useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n BarChart,\n Bar,\n XAxis,\n YAxis,\n Tooltip as RTooltip,\n ResponsiveContainer,\n AreaChart,\n Area,\n PieChart,\n Pie,\n Cell,\n LineChart,\n Line,\n CartesianGrid,\n Legend,\n} from \"recharts\";\nimport { Calendar, Layers, Users, Wifi, ArrowRightLeft, Gift, Eye, DollarSign, Fingerprint } from \"lucide-react\";\nimport { motion } from \"framer-motion\";\n\n// -----------------------------\n// Demo data: towers + synthetic time series\n// -----------------------------\nconst towers = [\n { id: \"t1\", name: \"Erick Tower\", city: \"Erick, OK\", lat: 35.2157, lng: -99.8662 },\n { id: \"t2\", name: \"Sayre Tower\", city: \"Sayre, OK\", lat: 35.2912, lng: -99.6404 },\n { id: \"t3\", name: \"Elk City Tower\", city: \"Elk City, OK\", lat: 35.4117, lng: -99.4043 },\n { id: \"t4\", name: \"Clinton Tower\", city: \"Clinton, OK\", lat: 35.5156, lng: -98.9676 },\n { id: \"t5\", name: \"Weatherford Tower\", city: \"Weatherford, OK\", lat: 35.5267, lng: -98.7076 },\n];\n\nfunction makeSeries(mult = 1) {\n const days = Array.from({ length: 30 }, (_, i) => i + 1);\n return days.map((d) => ({\n day: d,\n passersBy: Math.round((2800 + Math.random() * 400) * mult),\n uniqueVisitors: Math.round((450 + Math.random() * 70) * mult),\n totalUsers: Math.round((260 + Math.random() * 50) * mult),\n newVisitors: Math.round((170 + Math.random() * 40) * mult),\n returningVisitors: Math.round((90 + Math.random() * 30) * mult),\n pagePlaceViews: Math.round((140 + Math.random() * 35) * mult),\n redemptions: Math.round((50 + Math.random() * 20) * mult),\n contacts: Math.round((52 + Math.random() * 15) * mult),\n deals: Math.round((7 + Math.random() * 4) * mult),\n }));\n}\n\nconst towerSeries = towers.reduce((acc, t, idx) => {\n acc[t.id] = makeSeries(0.6 + idx * 0.2);\n return acc;\n}, {});\n\n// ---------------------------------------------\n// Shared UI helpers\n// ---------------------------------------------\nconst Tile = ({ title, value, sub, icon }) => (\n \n \n

{icon}

{title}

{value}

\n {sub &&

{sub}

}\n

\n \n \n);\n\n// ---------------------------------------------\n// Dependency-free map: simple SVG bubble map\n// ---------------------------------------------\nfunction SvgBubbleMap({ towers, perTowerTotals, onSelect }) {\n // Compute bounds for a tiny projection\n const lats = towers.map((t) => t.lat);\n const lngs = towers.map((t) => t.lng);\n const minLat = Math.min(...lats),\n maxLat = Math.max(...lats);\n const minLng = Math.min(...lngs),\n maxLng = Math.max(...lngs);\n\n const project = (lat, lng, width, height, padding = 20) => {\n const x = padding + ((lng - minLng) / (maxLng - minLng || 1)) * (width - padding * 2);\n const y = padding + ((maxLat - lat) / (maxLat - minLat || 1)) * (height - padding * 2); // invert Y so north is up\n return { x, y };\n };\n\n const W = 600,\n H = 450;\n\n return (\n

\n \n

\n );\n}\n\n// ---------------------------------------------\n// Main component\n// ---------------------------------------------\nexport default function DashboardMock() {\n // Acquisition source metrics (Social + Analytics)\n const acquisitionSources = useMemo(\n () => [\n { name: \"Instagram\", short: \"IG\", impressions: 185000, clicks: 18400, sessions: 9200, signups: 2300, contacts: 640 },\n { name: \"Facebook\", short: \"FB\", impressions: 210000, clicks: 17600, sessions: 8700, signups: 1900, contacts: 520 },\n { name: \"YouTube\", short: \"YT\", impressions: 132000, clicks: 9900, sessions: 6100, signups: 1200, contacts: 310 },\n { name: \"Hotjar\", short: \"HJ\", impressions: 0, clicks: 0, sessions: 5400, signups: 860, contacts: 240 },\n { name: \"GA4\", short: \"GA4\", impressions: 0, clicks: 0, sessions: 11200, signups: 1750, contacts: 470 },\n { name: \"Avada Forms\", short: \"Avada\", impressions: 0, clicks: 0, sessions: 0, signups: 980, contacts: 980 },\n { name: \"HubSpot\", short: \"HS\", impressions: 0, clicks: 0, sessions: 0, signups: 0, contacts: 1320 },\n ],\n []\n );\n\n const sourceChartData = useMemo(\n () =>\n acquisitionSources.map((s) => ({\n source: s.short,\n Sessions: s.sessions,\n Signups: s.signups,\n Contacts: s.contacts,\n })),\n [acquisitionSources]\n );\n\n const sourceTable = useMemo(\n () =>\n acquisitionSources.map((s) => ({\n name: s.name,\n impressions: s.impressions,\n clicks: s.clicks,\n ctr: s.impressions ? +((s.clicks / s.impressions) * 100).toFixed(2) : 0,\n sessions: s.sessions,\n signups: s.signups,\n contacts: s.contacts,\n })),\n [acquisitionSources]\n );\n\n const [datePreset, setDatePreset] = useState(\"Last 30 Days\");\n const [selectedTower, setSelectedTower] = useState(\"all\");\n const [cityFilter, setCityFilter] = useState(\"all\");\n\n // Merge all towers for \"all\" selection; otherwise use chosen tower\n const series = useMemo(() => {\n if (selectedTower === \"all\") {\n const days = Array.from({ length: 30 }, (_, i) => i + 1);\n return days.map((d) => {\n const point = {\n day: d,\n passersBy: 0,\n uniqueVisitors: 0,\n totalUsers: 0,\n newVisitors: 0,\n returningVisitors: 0,\n pagePlaceViews: 0,\n redemptions: 0,\n contacts: 0,\n deals: 0,\n };\n for (const id of Object.keys(towerSeries)) {\n const row = towerSeries[id][d - 1];\n Object.keys(point).forEach((k) => {\n if (k !== \"day\") point[k] += row[k] || 0;\n });\n }\n return point;\n });\n }\n return towerSeries[selectedTower] ?? makeSeries(1);\n }, [selectedTower]);\n\n // Compute KPI totals scaled by the date preset\n const totals = useMemo(() => {\n const sum = series.reduce(\n (acc, d) => {\n acc.passersBy += d.passersBy;\n acc.uniqueVisitors += d.uniqueVisitors;\n acc.totalUsers += d.totalUsers;\n acc.newVisitors += d.newVisitors;\n acc.returningVisitors += d.returningVisitors;\n acc.pagePlaceViews += d.pagePlaceViews;\n acc.offerRedemptions += d.redemptions;\n acc.contacts += d.contacts;\n acc.deals += d.deals;\n return acc;\n },\n {\n passersBy: 0,\n uniqueVisitors: 0,\n totalUsers: 0,\n newVisitors: 0,\n returningVisitors: 0,\n pagePlaceViews: 0,\n offerRedemptions: 0,\n contacts: 0,\n deals: 0,\n }\n );\n\n const scale = datePreset === \"Today\" ? 1 / 30 : datePreset === \"This Week\" ? 7 / 30 : 1;\n const scaled = Object.fromEntries(\n Object.entries(sum).map(([k, v]) => [k, Math.max(1, Math.round(v * scale))])\n );\n\n return {\n passersBy: scaled.passersBy,\n uniqueVisitors: scaled.uniqueVisitors,\n totalUsers: scaled.totalUsers,\n newVisitors: scaled.newVisitors,\n returningVisitors: scaled.returningVisitors,\n pagePlaceViews: scaled.pagePlaceViews,\n offerRedemptions: scaled.offerRedemptions,\n contactsCreated: scaled.contacts,\n deals: scaled.deals,\n closedWon: Math.max(1, Math.round(scaled.deals * 0.3)),\n pipeline: Math.round(scaled.deals * 2200),\n emailLogins: Math.round(scaled.totalUsers * 0.65),\n socialLogins: Math.round(scaled.totalUsers * 0.35),\n ios: Math.round(scaled.totalUsers * 0.42),\n android: Math.round(scaled.totalUsers * 0.45),\n laptop: Math.round(scaled.totalUsers * 0.13),\n };\n }, [series, datePreset]);\n\n // Pre-compute per-tower totals for bubbles + city cards\n const perTowerTotals = useMemo(() => {\n const result = {};\n for (const t of towers) {\n const s = towerSeries[t.id];\n const sum = s.reduce(\n (acc, d) => {\n acc.passersBy += d.passersBy;\n acc.uniqueVisitors += d.uniqueVisitors;\n acc.totalUsers += d.totalUsers;\n acc.redemptions += d.redemptions;\n acc.contacts += d.contacts;\n acc.deals += d.deals;\n return acc;\n },\n { passersBy: 0, uniqueVisitors: 0, totalUsers: 0, redemptions: 0, contacts: 0, deals: 0 }\n );\n result[t.id] = sum;\n }\n return result;\n }, []);\n\n const loginPie = [\n { name: \"Email\", value: totals.emailLogins },\n { name: \"Social\", value: totals.socialLogins },\n ];\n\n const devicePie = [\n { name: \"iOS\", value: totals.ios },\n { name: \"Android\", value: totals.android },\n { name: \"Laptop\", value: totals.laptop },\n ];\n\n const COLORS = [\"#0ea5e9\", \"#22c55e\", \"#f59e0b\", \"#ef4444\", \"#8b5cf6\"];\n\n // Aggregate by city for scorecards\n const cityMetrics = useMemo(() => {\n const byCity = {};\n for (const t of towers) {\n const sums = perTowerTotals[t.id];\n if (!byCity[t.city])\n byCity[t.city] = {\n city: t.city,\n passersBy: 0,\n uniqueVisitors: 0,\n totalUsers: 0,\n redemptions: 0,\n contacts: 0,\n deals: 0,\n };\n byCity[t.city].passersBy += sums.passersBy;\n byCity[t.city].uniqueVisitors += sums.uniqueVisitors;\n byCity[t.city].totalUsers += sums.totalUsers;\n byCity[t.city].redemptions += sums.redemptions;\n byCity[t.city].contacts += sums.contacts;\n byCity[t.city].deals += sums.deals;\n }\n return Object.values(byCity);\n }, [perTowerTotals]);\n\n const uniqueCities = useMemo(() => Array.from(new Set(towers.map((t) => t.city))), []);\n\n // ---------------------------------------------\n // Developer self-tests (sanity checks)\n // ---------------------------------------------\n const selfTests = useMemo(() => {\n const results = [];\n const num = (n) => typeof n === \"number\" && !Number.isNaN(n) && n >= 0;\n\n results.push({\n name: \"KPI numbers are valid\",\n pass: [\n totals.passersBy,\n totals.uniqueVisitors,\n totals.totalUsers,\n totals.contactsCreated,\n totals.offerRedemptions,\n totals.deals,\n ].every(num),\n });\n\n results.push({ name: \"Series has 30 days\", pass: Array.isArray(series) && series.length === 30 });\n\n const anyTower = Object.values(perTowerTotals)[0] || { passersBy: 0 };\n results.push({\n name: \"Aggregate >= single tower (passersBy)\",\n pass: totals.passersBy >= (anyTower.passersBy || 0),\n });\n\n const sumDay1 = Object.values(towerSeries).reduce(\n (acc, arr) => acc + (arr?.[0]?.passersBy || 0),\n 0\n );\n results.push({\n name: \"Day 1 sum matches when 'all' selected\",\n pass: selectedTower === \"all\" ? series?.[0]?.passersBy === sumDay1 : true,\n });\n\n results.push({ name: \"City dropdown options\", pass: uniqueCities.length === new Set(towers.map((t) => t.city)).size });\n\n // Icon presence (covers the hint's root cause)\n results.push({ name: \"Using lucide Fingerprint (no local FingerprintIcon)\", pass: !!Fingerprint });\n\n return results;\n }, [totals, series, perTowerTotals, selectedTower, uniqueCities]);\n\n // Additional tests for acquisition sources\n const selfTestsSources = useMemo(() => {\n const results = [];\n const names = acquisitionSources.map((s) => s.name);\n const expected = [\"Instagram\", \"Facebook\", \"YouTube\", \"Hotjar\", \"GA4\", \"Avada Forms\", \"HubSpot\"];\n results.push({ name: \"Acquisition sources present\", pass: expected.every((e) => names.includes(e)) });\n // CTR should be finite and not NaN for sources with impressions\n const ctrOk = acquisitionSources\n .filter((s) => s.impressions > 0)\n .every((s) => Number.isFinite((s.clicks / s.impressions) * 100));\n results.push({ name: \"CTR calculations valid\", pass: ctrOk });\n // Contacts should not exceed sessions when sessions exist (basic sanity)\n const contactsOk = acquisitionSources.filter((s) => s.sessions > 0).every((s) => s.contacts <= s.sessions);\n results.push({ name: \"Contacts ≤ Sessions (when sessions exist)\", pass: contactsOk });\n return results;\n }, [acquisitionSources]);\n\n return (\n

\n {/* Header */}\n

Connect66 + HubSpot Investor Dashboard

\n From simple connections to powerful analytics. Filter by date, tower, and city.\n

\n {[\"Today\", \"This Week\", \"Last 30 Days\", \"Custom\"].map((p) => (\n \n ))}\n Demo data\n

\n\n

\n Tower\n \n

\n City\n \n

\n\n {/* KPI tiles */}\n

\n } />\n {/* Use lucide's Fingerprint to avoid 'FingerprintIcon' scope issues */}\n } />\n } />\n }\n />\n } />\n } />\n } />\n } />\n

Plain-English: These tiles are the headline numbers investors care about at a glance.

\n\n {/* Main grid */}\n

\n {/* Acquisition timeline */}\n \n \n Acquisition timeline\n

Plain-English: Shows how many people pass by, visit, and use us each day.

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* Dependency-free coverage map */}\n \n \n Route 66 coverage\n

Plain-English: Each bubble is a tower. Bigger bubbles mean more nearby audience.

\n \n \n setSelectedTower(id)} />\n

\n {towers.map((t) => (\n setSelectedTower(t.id)}\n >\n {t.name}\n \n ))}\n

\n \n \n\n {/* Engagement */}\n \n \n New vs. Returning Visitors\n

Plain-English: New people discovering us vs. people who came back.

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n Login Method\n

Plain-English: How people logged in—email or social.

\n \n \n \n \n \n {loginPie.map((entry, index) => (\n \n ))}\n \n \n \n \n \n \n \n\n \n \n Device Information\n

Plain-English: What devices people used—iPhone, Android, or laptop.

\n \n \n \n \n \n {devicePie.map((entry, index) => (\n \n ))}\n \n \n \n \n \n \n \n\n {/* Monetization */}\n \n \n Offers and Monetization\n

Plain-English: Engagement actions that can lead to revenue—views, redemptions, and contacts.

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n Funnel snapshot\n

Plain-English: A quick ladder from potential audience to revenue outcomes.

\n \n \n

\n {[\n { label: \"Total Passers By\", value: totals.passersBy },\n { label: \"Unique Visitors\", value: totals.uniqueVisitors },\n { label: \"Total Users\", value: totals.totalUsers },\n { label: \"Contacts Created (HubSpot)\", value: totals.contactsCreated },\n { label: \"Offer / Prize Redemptions\", value: totals.offerRedemptions },\n { label: \"Deals\", value: totals.deals },\n { label: \"Closed Won\", value: totals.closedWon },\n ].map((r, i) => (\n

{r.label}

\n \n

{r.value.toLocaleString()}

\n ))}\n

\n \n \n

\n\n {/* Social + Analytics acquisition section */}\n \n \n Acquisition sources (Social + Analytics)\n

Plain-English: Where our visitors came from (Instagram, Facebook, YouTube, and tools like Hotjar/GA4/Avada/HubSpot).

\n \n \n

\n {/* Stacked bars for Sessions/Signups/Contacts by source */}\n

\n \n \n \n \n \n \n \n \n \n \n \n \n

\n\n {/* Simple KPI table with CTR */}\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {sourceTable.map((row) => (\n \n \n \n \n \n \n \n \n \n ))}\n \n

Source	Impr.	Clicks	CTR	Sessions	Signups	Contacts
{row.name}	{row.impressions?.toLocaleString?.() ?? 0}	{row.clicks?.toLocaleString?.() ?? 0}	{row.ctr.toFixed ? `${row.ctr.toFixed(2)}%` : `${row.ctr}%`}	{row.sessions?.toLocaleString?.() ?? 0}	{row.signups?.toLocaleString?.() ?? 0}	{row.contacts?.toLocaleString?.() ?? 0}

\n \n \n\n {/* City scorecards */}\n \n \n City scorecards\n

Plain-English: A quick breakdown by key cities near our towers.

\n \n \n

\n {cityMetrics\n .filter((c) => cityFilter === \"all\" || c.city === cityFilter)\n .map((c) => (\n

{c.city}

\n Total Passers By\n

{c.passersBy.toLocaleString()}

\n Unique Visitors\n

{c.uniqueVisitors.toLocaleString()}

\n Total Users\n

{c.totalUsers.toLocaleString()}

\n Redemptions\n

{c.redemptions.toLocaleString()}

\n Contacts\n

{c.contacts.toLocaleString()}

\n Deals\n

{c.deals.toLocaleString()}

\n ))}\n

\n \n \n\n {/* Self checks */}\n \n \n Developer self-checks\n

Plain-English: Quick automated sanity checks so we don’t demo broken numbers.

\n \n \n

\n {t.pass ? \"PASS\" : \"FAIL\"}\n {t.name}\n

\n \n \n\n {/* Self checks — sources */}\n \n \n Developer self-checks — sources\n

Plain-English: Validates the Social/Analytics table math (CTR and basic relationships).

\n \n \n

\n {t.pass ? \"PASS\" : \"FAIL\"}\n {t.name}\n

\n \n \n\n {/* Footnote */}\n

\n Analytics can be viewed by: Today, This Week, Last 30 Days, or Custom Date Range. Metric names mirror your\n Connect66 analytics graphic.\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","16185346584449886396","traceTime",1777523260392]