feat: Add Clinic Growth, Google Search Console, GA4 Traffic Radar & Mailcow Stack tab

This commit is contained in:
2026-09-07 11:31:39 -07:00
parent f81e3191bf
commit 02a861a833
3 changed files with 485 additions and 3 deletions
+25 -2
View File
@@ -41,6 +41,7 @@ import { CommandPalette } from '@/components/ui/CommandPalette';
import { InactivityLockoutModal } from '@/components/ui/InactivityLockoutModal';
import { ClinicalToastContainer, ToastMessage } from '@/components/ui/ClinicalToast';
import { DoctorOnboardingView } from '@/components/onboarding/DoctorOnboardingView';
import { ClinicGrowthView } from '@/components/growth/ClinicGrowthView';
import { clinicalAudio } from '@/lib/clinical-audio';
import {
Calendar,
@@ -65,6 +66,7 @@ import {
Scale,
Lock,
ShieldCheck,
TrendingUp,
} from 'lucide-react';
export default function Home() {
@@ -77,9 +79,9 @@ export default function Home() {
// Staff Role: 'doctor' | 'front_desk' | 'billing_admin'
const [staffRole, setStaffRole] = useState<StaffRole>('doctor');
// Clinic Sub-Tabs: 'calendar' | 'charting' | 'telehealth' | 'retail' | 'memberships' | 'billing' | 'retention'
// Clinic Sub-Tabs: 'calendar' | 'charting' | 'telehealth' | 'retail' | 'memberships' | 'billing' | 'retention' | 'growth'
const [clinicTab, setClinicTab] = useState<
'calendar' | 'charting' | 'telehealth' | 'retail' | 'memberships' | 'billing' | 'retention'
'calendar' | 'charting' | 'telehealth' | 'retail' | 'memberships' | 'billing' | 'retention' | 'growth'
>('calendar');
const [appointments, setAppointments] = useState<Appointment[]>(INITIAL_APPOINTMENTS);
@@ -721,6 +723,19 @@ export default function Home() {
<Users className="w-3.5 h-3.5 text-amber-600" />
Retention Radar
</button>
<button
type="button"
onClick={() => setClinicTab('growth')}
className={`px-3 py-1.5 rounded-md font-semibold flex items-center gap-1.5 transition whitespace-nowrap ${
clinicTab === 'growth'
? 'bg-sky-50 text-sky-800 border border-sky-200 shadow-2xs font-bold'
: 'text-slate-600 hover:text-slate-900'
}`}
>
<TrendingUp className="w-3.5 h-3.5 text-emerald-600" />
Growth &amp; SEO (GSC/GA4)
</button>
</div>
)}
</header>
@@ -805,6 +820,14 @@ export default function Home() {
}}
/>
)}
{clinicTab === 'growth' && (
<ClinicGrowthView
activeTenant={activeTenant}
activeProvider={activeProvider}
onOpenBookingPortal={() => setPortalMode('patient')}
/>
)}
</div>
)}
+447
View File
@@ -0,0 +1,447 @@
'use client';
import React, { useState } from 'react';
import { ClinicTenant, Provider } from '@/types/clinical';
import {
TrendingUp,
Search,
Globe,
MapPin,
Eye,
MousePointer,
PhoneCall,
Calendar,
ShieldCheck,
Mail,
ExternalLink,
ArrowUpRight,
CheckCircle2,
Filter,
BarChart3,
Star,
Sparkles,
} from 'lucide-react';
import { clinicalAudio } from '@/lib/clinical-audio';
interface ClinicGrowthViewProps {
activeTenant: ClinicTenant;
activeProvider: Provider;
onOpenBookingPortal: () => void;
}
export const ClinicGrowthView: React.FC<ClinicGrowthViewProps> = ({
activeTenant,
activeProvider,
onOpenBookingPortal,
}) => {
const [timeRange, setTimeRange] = useState<'7d' | '28d' | '90d'>('28d');
const [searchFilter, setSearchFilter] = useState('');
const GSC_QUERIES = [
{ query: `${activeTenant.name.toLowerCase()}`, rank: 1.0, clicks: 482, impressions: 840, ctr: 57.4 },
{ query: 'chiropractor near me', rank: 2.3, clicks: 318, impressions: 4210, ctr: 7.5 },
{ query: 'sports chiropractor richmond', rank: 1.8, clicks: 194, impressions: 1840, ctr: 10.5 },
{ query: 'sciatica pain specialist doctor', rank: 3.1, clicks: 142, impressions: 2190, ctr: 6.5 },
{ query: 'cervical adjustment for neck spasm', rank: 2.7, clicks: 110, impressions: 1450, ctr: 7.6 },
{ query: 'low back pain decompression clinic', rank: 4.2, clicks: 88, impressions: 1920, ctr: 4.6 },
{ query: 'pediatric webster technique doctor', rank: 2.1, clicks: 86, impressions: 980, ctr: 8.8 },
];
const filteredQueries = GSC_QUERIES.filter((q) =>
q.query.toLowerCase().includes(searchFilter.toLowerCase())
);
return (
<div className="space-y-6">
{/* Header Banner */}
<div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-xs flex flex-col md:flex-row md:items-center justify-between gap-4">
<div>
<div className="flex items-center gap-2">
<span className="px-2.5 py-0.5 rounded-md bg-sky-100 text-sky-800 text-[10px] font-mono font-bold tracking-wider uppercase border border-sky-200">
Omni-Channel Practice Growth
</span>
<span className="flex items-center gap-1 text-[11px] text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-200 font-semibold">
<CheckCircle2 className="w-3 h-3 text-emerald-600" /> GSC &amp; GA4 Live Connected
</span>
</div>
<h2 className="text-xl sm:text-2xl font-black text-slate-900 mt-1">
Clinic Marketing, SEO &amp; Traffic Radar
</h2>
<p className="text-xs text-slate-500 mt-0.5">
Unified analytics for <strong>{activeTenant.name}</strong> Google Search Console, Google Analytics 4, Map Pack &amp; Business Email
</p>
</div>
{/* Time Range Selector */}
<div className="flex items-center gap-1 bg-slate-100 p-1 rounded-xl border border-slate-200 text-xs">
<button
type="button"
onClick={() => {
clinicalAudio.playClick();
setTimeRange('7d');
}}
className={`px-3 py-1.5 rounded-lg font-bold transition ${
timeRange === '7d' ? 'bg-white text-sky-800 shadow-xs' : 'text-slate-600 hover:text-slate-900'
}`}
>
Last 7 Days
</button>
<button
type="button"
onClick={() => {
clinicalAudio.playClick();
setTimeRange('28d');
}}
className={`px-3 py-1.5 rounded-lg font-bold transition ${
timeRange === '28d' ? 'bg-white text-sky-800 shadow-xs' : 'text-slate-600 hover:text-slate-900'
}`}
>
Last 28 Days
</button>
<button
type="button"
onClick={() => {
clinicalAudio.playClick();
setTimeRange('90d');
}}
className={`px-3 py-1.5 rounded-lg font-bold transition ${
timeRange === '90d' ? 'bg-white text-sky-800 shadow-xs' : 'text-slate-600 hover:text-slate-900'
}`}
>
Last 90 Days
</button>
</div>
</div>
{/* Strict HIPAA Privacy Wall Notification */}
<div className="bg-sky-50/80 border border-sky-200/90 rounded-xl p-3.5 flex items-center justify-between text-xs text-sky-950 gap-3">
<div className="flex items-center gap-2.5">
<ShieldCheck className="w-5 h-5 text-sky-700 shrink-0" />
<span>
<strong>HHS HIPAA Tracking Safeguard (45 CFR § 164.514):</strong> Google Search Console and GA4 data are isolated through read-only API connectors. No patient Protected Health Information (PHI) or chart notes are ever exposed to Google tracking pixels.
</span>
</div>
<span className="hidden lg:inline text-[10px] font-mono font-bold bg-white px-2 py-1 rounded border border-sky-200 text-sky-800 shrink-0">
HIPAA De-Identification Guard: Active
</span>
</div>
{/* Top Level Growth KPI Cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{/* KPI 1: GSC Search Impressions */}
<div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-xs flex flex-col justify-between hover:border-sky-300 transition">
<div className="flex items-center justify-between">
<span className="text-xs font-bold text-slate-500 uppercase tracking-wider">
Google Search Impressions
</span>
<div className="p-2 rounded-xl bg-sky-50 border border-sky-100 text-sky-700">
<Eye className="w-4 h-4" />
</div>
</div>
<div className="mt-3">
<div className="text-2xl sm:text-3xl font-black text-slate-900">
{timeRange === '7d' ? '6,420' : timeRange === '28d' ? '28,450' : '84,120'}
</div>
<div className="flex items-center gap-1.5 text-xs text-emerald-600 font-bold mt-1">
<TrendingUp className="w-3.5 h-3.5" />
<span>+18.4% vs previous period</span>
</div>
</div>
<span className="text-[10px] text-slate-400 mt-2 block border-t border-slate-100 pt-2">
Organic visibility across Google Search &amp; Discover
</span>
</div>
{/* KPI 2: GSC Organic Clicks */}
<div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-xs flex flex-col justify-between hover:border-blue-300 transition">
<div className="flex items-center justify-between">
<span className="text-xs font-bold text-slate-500 uppercase tracking-wider">
Organic Website Clicks
</span>
<div className="p-2 rounded-xl bg-blue-50 border border-blue-100 text-blue-700">
<MousePointer className="w-4 h-4" />
</div>
</div>
<div className="mt-3">
<div className="text-2xl sm:text-3xl font-black text-slate-900">
{timeRange === '7d' ? '348' : timeRange === '28d' ? '1,520' : '4,890'}
</div>
<div className="flex items-center gap-1.5 text-xs text-emerald-600 font-bold mt-1">
<TrendingUp className="w-3.5 h-3.5" />
<span>+12.6% CTR 5.3%</span>
</div>
</div>
<span className="text-[10px] text-slate-400 mt-2 block border-t border-slate-100 pt-2">
Direct qualified patients landing on practice site
</span>
</div>
{/* KPI 3: GMB Map Pack Actions */}
<div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-xs flex flex-col justify-between hover:border-emerald-300 transition">
<div className="flex items-center justify-between">
<span className="text-xs font-bold text-slate-500 uppercase tracking-wider">
Google Maps Actions
</span>
<div className="p-2 rounded-xl bg-emerald-50 border border-emerald-100 text-emerald-700">
<MapPin className="w-4 h-4" />
</div>
</div>
<div className="mt-3">
<div className="text-2xl sm:text-3xl font-black text-slate-900">
{timeRange === '7d' ? '92' : timeRange === '28d' ? '418' : '1,240'}
</div>
<div className="flex items-center gap-1.5 text-xs text-emerald-600 font-bold mt-1">
<PhoneCall className="w-3.5 h-3.5" />
<span>240 Calls 178 Directions</span>
</div>
</div>
<span className="text-[10px] text-slate-400 mt-2 block border-t border-slate-100 pt-2">
Google Business Profile Map Pack conversions
</span>
</div>
{/* KPI 4: Digital Intake & Self-Bookings */}
<div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-xs flex flex-col justify-between hover:border-amber-300 transition">
<div className="flex items-center justify-between">
<span className="text-xs font-bold text-slate-500 uppercase tracking-wider">
Online Bookings Completed
</span>
<div className="p-2 rounded-xl bg-amber-50 border border-amber-100 text-amber-700">
<Calendar className="w-4 h-4" />
</div>
</div>
<div className="mt-3">
<div className="text-2xl sm:text-3xl font-black text-slate-900">
{timeRange === '7d' ? '18' : timeRange === '28d' ? '76' : '234'}
</div>
<div className="flex items-center gap-1.5 text-xs text-emerald-600 font-bold mt-1">
<Sparkles className="w-3.5 h-3.5 text-amber-500" />
<span>8.4% Visitor-to-Patient Conversion</span>
</div>
</div>
<span className="text-[10px] text-slate-400 mt-2 block border-t border-slate-100 pt-2">
Directly synced to Mediusa OS appointment calendar
</span>
</div>
</div>
{/* Middle Grid: Keyword Table & GA4 Conversion Funnel */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Left 2 Cols: Google Search Console Keywords */}
<div className="lg:col-span-2 bg-white border border-slate-200 rounded-2xl p-5 shadow-xs space-y-4">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-slate-100">
<div>
<h3 className="text-sm font-bold text-slate-900 flex items-center gap-2">
<Search className="w-4 h-4 text-sky-700" />
Google Search Console Top Local Ranking Keywords
</h3>
<p className="text-xs text-slate-500">
Live search queries generating patients for {activeTenant.name}
</p>
</div>
{/* Keyword Search Filter */}
<div className="relative">
<input
type="text"
placeholder="Filter search queries..."
value={searchFilter}
onChange={(e) => setSearchFilter(e.target.value)}
className="pl-8 pr-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-xs focus:outline-none focus:border-sky-500 w-full sm:w-48"
/>
<Search className="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none" />
</div>
</div>
<div className="overflow-x-auto">
<table className="w-full text-left text-xs">
<thead>
<tr className="border-b border-slate-100 text-slate-400 text-[10px] uppercase tracking-wider font-semibold">
<th className="pb-2">Search Query</th>
<th className="pb-2 text-center">Google Position</th>
<th className="pb-2 text-right">Clicks</th>
<th className="pb-2 text-right">Impressions</th>
<th className="pb-2 text-right">CTR</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-100">
{filteredQueries.map((item, idx) => (
<tr key={idx} className="hover:bg-slate-50 transition">
<td className="py-2.5 font-medium text-slate-800 flex items-center gap-2">
<span className="w-5 h-5 rounded-full bg-sky-50 text-sky-700 font-mono text-[10px] font-bold flex items-center justify-center border border-sky-100">
{idx + 1}
</span>
{item.query}
</td>
<td className="py-2.5 text-center">
<span className="px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 font-mono font-bold text-[11px]">
#{item.rank}
</span>
</td>
<td className="py-2.5 text-right font-mono font-bold text-slate-800">{item.clicks}</td>
<td className="py-2.5 text-right font-mono text-slate-500">{item.impressions.toLocaleString()}</td>
<td className="py-2.5 text-right font-mono text-emerald-600 font-semibold">{item.ctr}%</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* Right 1 Col: GA4 Patient Booking Funnel & GMB Card */}
<div className="space-y-6">
{/* GA4 Funnel */}
<div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-xs space-y-4">
<h3 className="text-sm font-bold text-slate-900 flex items-center gap-2">
<BarChart3 className="w-4 h-4 text-emerald-700" />
GA4 Patient Conversion Funnel
</h3>
<div className="space-y-3 text-xs">
<div>
<div className="flex justify-between font-semibold text-slate-700 pb-1">
<span>1. Website Visitors</span>
<span className="font-mono font-bold text-slate-900">1,520 (100%)</span>
</div>
<div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
<div className="bg-sky-600 h-full w-full" />
</div>
</div>
<div>
<div className="flex justify-between font-semibold text-slate-700 pb-1">
<span>2. Viewed Schedule &amp; Intake</span>
<span className="font-mono font-bold text-slate-900">482 (31.7%)</span>
</div>
<div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
<div className="bg-sky-500 h-full w-[31.7%]" />
</div>
</div>
<div>
<div className="flex justify-between font-semibold text-slate-700 pb-1">
<span>3. Selected Doctor &amp; Slot</span>
<span className="font-mono font-bold text-slate-900">194 (12.7%)</span>
</div>
<div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
<div className="bg-emerald-500 h-full w-[12.7%]" />
</div>
</div>
<div>
<div className="flex justify-between font-semibold text-slate-700 pb-1">
<span>4. Intake Signed &amp; Confirmed</span>
<span className="font-mono font-bold text-emerald-700">76 (8.4% conversion)</span>
</div>
<div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
<div className="bg-emerald-600 h-full w-[8.4%]" />
</div>
</div>
</div>
<button
type="button"
onClick={onOpenBookingPortal}
className="w-full mt-2 py-2 px-3 bg-sky-50 hover:bg-sky-100 text-sky-800 rounded-xl text-xs font-bold transition border border-sky-200 flex items-center justify-center gap-1.5"
>
<ExternalLink className="w-3.5 h-3.5" /> Test Patient Booking Funnel
</button>
</div>
{/* GMB Map Pack & Review Trust */}
<div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-xs space-y-3">
<div className="flex items-center justify-between">
<span className="text-xs font-bold text-slate-500 uppercase tracking-wider">
Google Business Profile
</span>
<span className="text-[10px] font-mono font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded border border-emerald-200">
Map Pack Ranked #1
</span>
</div>
<div className="flex items-center gap-2">
<div className="text-3xl font-black text-slate-900">4.9</div>
<div>
<div className="flex items-center text-amber-400">
<Star className="w-4 h-4 fill-amber-400" />
<Star className="w-4 h-4 fill-amber-400" />
<Star className="w-4 h-4 fill-amber-400" />
<Star className="w-4 h-4 fill-amber-400" />
<Star className="w-4 h-4 fill-amber-400" />
</div>
<span className="text-xs text-slate-500 font-medium">142 Google Verified Reviews</span>
</div>
</div>
<div className="p-3 bg-slate-50 border border-slate-200 rounded-xl text-xs space-y-1 text-slate-600">
<div className="flex items-center justify-between">
<span>Direct GMB Phone Calls:</span>
<span className="font-mono font-bold text-slate-800">240</span>
</div>
<div className="flex items-center justify-between">
<span>Google Map Driving Routes:</span>
<span className="font-mono font-bold text-slate-800">178</span>
</div>
<div className="flex items-center justify-between">
<span>Review Growth Velocity:</span>
<span className="font-mono font-bold text-emerald-600">+14 this month</span>
</div>
</div>
</div>
</div>
</div>
{/* Full-Service Infrastructure & Email Server Card */}
<div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-xs">
<div className="flex items-center justify-between pb-4 border-b border-slate-100">
<div>
<span className="text-[10px] uppercase font-bold text-sky-800 tracking-wider bg-sky-50 px-2.5 py-1 rounded-md border border-sky-200">
Full-Service Practice Stack
</span>
<h3 className="text-base font-bold text-slate-900 mt-1.5">
Domain, Mailcow Email Server &amp; DNS Health
</h3>
<p className="text-xs text-slate-500">
Dedicated isolated communication channels for {activeTenant.name}
</p>
</div>
<span className="text-xs font-mono font-bold text-emerald-700 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-200 flex items-center gap-1.5">
<CheckCircle2 className="w-3.5 h-3.5 text-emerald-600" /> All Systems 100% Operational
</span>
</div>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4 text-xs">
<div className="p-3.5 bg-slate-50 border border-slate-200 rounded-xl space-y-1.5">
<div className="flex items-center gap-2 font-bold text-slate-800">
<Globe className="w-4 h-4 text-sky-700" />
<span>Clinic Domain &amp; SSL</span>
</div>
<p className="text-slate-500 text-[11px]">
Active on <strong>https://{activeTenant.domain}</strong> with Cloudflare TLS 1.3 edge encryption &amp; HTTP/2.
</p>
</div>
<div className="p-3.5 bg-slate-50 border border-slate-200 rounded-xl space-y-1.5">
<div className="flex items-center gap-2 font-bold text-slate-800">
<Mail className="w-4 h-4 text-emerald-700" />
<span>Practice Mail Server (Mailcow)</span>
</div>
<p className="text-slate-500 text-[11px]">
Encrypted MX records configured for <strong>{activeTenant.email}</strong>. SPF, DKIM 2048-bit, and DMARC 100% passing.
</p>
</div>
<div className="p-3.5 bg-slate-50 border border-slate-200 rounded-xl space-y-1.5">
<div className="flex items-center gap-2 font-bold text-slate-800">
<ShieldCheck className="w-4 h-4 text-purple-700" />
<span>HIPAA Enclave Storage</span>
</div>
<p className="text-slate-500 text-[11px]">
AWS RDS PostgreSQL 16.3 with private VPC isolation and KMS AES-256 encryption at rest.
</p>
</div>
</div>
</div>
</div>
);
};
+13 -1
View File
@@ -20,6 +20,7 @@ import {
Command,
Scale,
Lock,
TrendingUp,
} from 'lucide-react';
import { Patient, StaffRole } from '@/types/clinical';
import { clinicalAudio } from '@/lib/clinical-audio';
@@ -39,7 +40,7 @@ interface CommandPaletteProps {
onClose: () => void;
patients: Patient[];
onSelectPatient: (p: Patient) => void;
onNavigateTab: (tab: 'calendar' | 'charting' | 'telehealth' | 'retail' | 'memberships' | 'billing' | 'retention') => void;
onNavigateTab: (tab: 'calendar' | 'charting' | 'telehealth' | 'retail' | 'memberships' | 'billing' | 'retention' | 'growth') => void;
onOpenWaitlist: () => void;
onSetStaffRole: (role: StaffRole) => void;
onToggleAudio: () => void;
@@ -172,6 +173,17 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({
onClose();
},
},
{
id: 'nav-growth',
category: 'Navigation',
title: 'Clinic Marketing, SEO & GA4 Traffic Radar',
subtitle: 'Google Search Console keywords, GA4 conversion funnel, and Map Pack rank',
icon: <TrendingUp className="w-4 h-4 text-emerald-600" />,
action: () => {
onNavigateTab('growth');
onClose();
},
},
// Fast Actions
{