costhawk 1.0.0

package/costcanary/app/(dashboard)/dashboard/billing/page.tsx

@@ -0,0 +1,349 @@
+'use client';
+
+import { useEffect, useState, Suspense } from 'react';
+import { useAuth } from '@clerk/nextjs';
+// Card components removed - using motion.div for animations
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  CreditCard,
+  TrendingUp,
+  AlertCircle,
+  CheckCircle,
+  Zap,
+  Calendar,
+  BarChart3
+} from 'lucide-react';
+import { PRICING_TIERS } from '@/lib/stripe-client';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { motion } from 'framer-motion';
+
+interface SubscriptionStatus {
+  tier: string;
+  hasSubscription: boolean;
+  subscriptionStatus?: string;
+  subscriptionEndDate?: string;
+}
+
+interface UsageData {
+  current: number;
+  limit: number | null;
+  percentage: number;
+}
+
+function BillingPageContent() {
+  const { userId } = useAuth();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [loading, setLoading] = useState(true);
+  const [subscription, setSubscription] = useState<SubscriptionStatus | null>(null);
+  const [usage, setUsage] = useState<UsageData | null>(null);
+  const [processingPortal, setProcessingPortal] = useState(false);
+
+  const success = searchParams.get('success') === 'true';
+
+  useEffect(() => {
+    if (userId) {
+      fetchSubscriptionStatus();
+      fetchUsageData();
+    }
+  }, [userId]);
+
+  const fetchSubscriptionStatus = async () => {
+    try {
+      const response = await fetch('/api/stripe/checkout');
+      const data = await response.json();
+      setSubscription(data);
+    } catch (error) {
+      console.error('Failed to fetch subscription status:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchUsageData = async () => {
+    try {
+      const response = await fetch('/api/usage/summary');
+      if (response.ok) {
+        const data = await response.json();
+        setUsage(data);
+      }
+    } catch (error) {
+      console.error('Failed to fetch usage data:', error);
+    }
+  };
+
+  const handleManageSubscription = async () => {
+    setProcessingPortal(true);
+    try {
+      const response = await fetch('/api/stripe/checkout', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          tierId: 'portal', // Special flag for portal
+          returnUrl: window.location.href,
+        }),
+      });
+
+      const data = await response.json();
+      
+      if (data.url) {
+        window.location.href = data.url;
+      }
+    } catch (error) {
+      console.error('Failed to open billing portal:', error);
+    } finally {
+      setProcessingPortal(false);
+    }
+  };
+
+  const handleUpgrade = () => {
+    router.push('/pricing');
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500" />
+      </div>
+    );
+  }
+
+  const currentTier = PRICING_TIERS.find(t => t.id === subscription?.tier) || PRICING_TIERS[0];
+  const isFreeTier = currentTier.id === 'free';
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-3xl font-bold text-white">Billing & Subscription</h1>
+        <p className="mt-2 text-slate-400">
+          Manage your subscription, billing, and usage
+        </p>
+      </div>
+
+      {success && (
+        <Alert className="border-green-500 bg-green-500/10">
+          <CheckCircle className="h-4 w-4 text-green-500" />
+          <AlertDescription className="text-green-400">
+            Payment successful! Your subscription is now active.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Current Plan Card */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="rounded-lg border border-slate-800 bg-slate-900/50 p-6 backdrop-blur-sm"
+        >
+          <div className="mb-4 flex items-center justify-between">
+            <h2 className="text-xl font-bold text-white">Current Plan</h2>
+            <Badge 
+              variant={isFreeTier ? 'secondary' : 'default'}
+              className={isFreeTier ? 'bg-slate-700' : 'bg-purple-500'}
+            >
+              {currentTier.name}
+            </Badge>
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <span className="text-2xl font-bold text-white">
+                ${currentTier.price}
+                {currentTier.price > 0 && <span className="text-sm font-normal text-slate-400">/month</span>}
+              </span>
+              {subscription?.subscriptionStatus === 'trialing' && (
+                <Badge variant="outline" className="border-blue-500 text-blue-400">
+                  <Zap className="w-3 h-3 mr-1" />
+                  Trial Active
+                </Badge>
+              )}
+            </div>
+
+            {subscription?.subscriptionEndDate && (
+              <div className="flex items-center gap-2 text-sm text-slate-400">
+                <Calendar className="w-4 h-4" />
+                <span>
+                  {subscription.subscriptionStatus === 'active' 
+                    ? 'Renews' 
+                    : subscription.subscriptionStatus === 'trialing'
+                    ? 'Trial ends'
+                    : 'Expires'} on {new Date(subscription.subscriptionEndDate).toLocaleDateString()}
+                </span>
+              </div>
+            )}
+
+            <div className="space-y-2 border-t border-slate-800 pt-4">
+              {currentTier.features.slice(0, 3).map((feature, i) => (
+                <div key={i} className="flex items-center gap-2 text-sm text-slate-300">
+                  <CheckCircle className="w-4 h-4 text-green-500" />
+                  <span>{feature}</span>
+                </div>
+              ))}
+            </div>
+
+            <div className="flex gap-3 pt-4">
+              {subscription?.hasSubscription ? (
+                <Button 
+                  onClick={handleManageSubscription}
+                  disabled={processingPortal}
+                  variant="outline"
+                  className="flex-1 border-slate-700 hover:bg-slate-800"
+                >
+                  <CreditCard className="w-4 h-4 mr-2" />
+                  {processingPortal ? 'Loading...' : 'Manage Billing'}
+                </Button>
+              ) : (
+                <Button 
+                  onClick={handleUpgrade}
+                  className="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
+                >
+                  <TrendingUp className="w-4 h-4 mr-2" />
+                  Upgrade Plan
+                </Button>
+              )}
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Usage Card */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="rounded-lg border border-slate-800 bg-slate-900/50 p-6 backdrop-blur-sm"
+        >
+          <div className="mb-4 flex items-center justify-between">
+            <h2 className="text-xl font-bold text-white">Monthly Usage</h2>
+            <BarChart3 className="w-5 h-5 text-slate-400" />
+          </div>
+
+          {usage ? (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-slate-400">API Calls</span>
+                  <span className="font-semibold text-white">
+                    {usage.current.toLocaleString()}
+                    {usage.limit && ` / ${usage.limit.toLocaleString()}`}
+                    {!usage.limit && ' (Unlimited)'}
+                  </span>
+                </div>
+                
+                {usage.limit && (
+                  <>
+                    <Progress value={usage.percentage} className="h-2 bg-slate-800" />
+                    
+                    {usage.percentage >= 90 && (
+                      <Alert className="mt-3 border-orange-500 bg-orange-500/10">
+                        <AlertCircle className="h-4 w-4 text-orange-500" />
+                        <AlertDescription className="text-orange-400">
+                          You&apos;ve used {usage.percentage}% of your monthly limit. 
+                          Consider upgrading for unlimited tracking.
+                        </AlertDescription>
+                      </Alert>
+                    )}
+                  </>
+                )}
+              </div>
+
+              <div className="border-t border-slate-800 pt-4">
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <div>
+                    <p className="text-slate-500 mb-1">Resets in</p>
+                    <p className="font-semibold text-white">
+                      {(() => {
+                        const now = new Date();
+                        const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
+                        const days = Math.ceil((nextMonth.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+                        return `${days} days`;
+                      })()}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-slate-500 mb-1">Daily average</p>
+                    <p className="font-semibold text-white">
+                      {Math.round((usage?.current || 0) / new Date().getDate()).toLocaleString()}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="text-center py-8 text-slate-500">
+              <BarChart3 className="w-12 h-12 mx-auto mb-3 opacity-50" />
+              <p>No usage data available yet</p>
+            </div>
+          )}
+        </motion.div>
+
+        {/* Upgrade Card for Free Users */}
+        {isFreeTier && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+            className="md:col-span-2 rounded-lg border border-purple-500/30 bg-gradient-to-br from-purple-900/20 to-pink-900/20 p-6"
+          >
+            <div className="flex items-start justify-between">
+              <div className="flex-1">
+                <h3 className="text-xl font-bold text-white mb-2 flex items-center gap-2">
+                  <Zap className="w-5 h-5 text-purple-400" />
+                  Unlock Pro Features
+                </h3>
+                <p className="text-slate-400 mb-4">
+                  Get unlimited tracking and advanced features
+                </p>
+                <ul className="space-y-2 mb-6">
+                  <li className="flex items-center gap-2 text-sm text-slate-300">
+                    <CheckCircle className="w-4 h-4 text-green-500" />
+                    Unlimited API calls
+                  </li>
+                  <li className="flex items-center gap-2 text-sm text-slate-300">
+                    <CheckCircle className="w-4 h-4 text-green-500" />
+                    90-day history
+                  </li>
+                  <li className="flex items-center gap-2 text-sm text-slate-300">
+                    <CheckCircle className="w-4 h-4 text-green-500" />
+                    Advanced analytics & insights
+                  </li>
+                </ul>
+              </div>
+              <div className="text-right">
+                <div className="text-3xl font-bold text-white mb-1">$9.99</div>
+                <div className="text-sm text-slate-400 mb-4">/month</div>
+                <Button 
+                  onClick={handleUpgrade}
+                  className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
+                >
+                  Upgrade Now
+                </Button>
+                <p className="text-xs text-slate-500 mt-2">
+                  14-day free trial
+                </p>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function BillingPage() {
+  return (
+    <Suspense fallback={
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500" />
+      </div>
+    }>
+      <BillingPageContent />
+    </Suspense>
+  );
+}

package/costcanary/app/(dashboard)/dashboard/layout.tsx

@@ -0,0 +1,188 @@
+"use client"
+
+import { UserButton, SignOutButton } from "@clerk/nextjs"
+import { BarChart3, Home, Settings, CreditCard, Bell, Shield, Beaker, LogOut, Key, ShieldAlert, Activity, Database, Wrench } from "lucide-react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { useState, useEffect } from "react"
+import { Separator } from "@/components/ui/separator"
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+  const [isAdmin, setIsAdmin] = useState(false)
+  const [loading, setLoading] = useState(true)
+
+  // Check admin status on mount
+  useEffect(() => {
+    const checkAdminStatus = async () => {
+      try {
+        const response = await fetch('/api/admin/whoami')
+        if (response.ok) {
+          const data = await response.json()
+          setIsAdmin(data.isAdmin === true)
+        }
+      } catch (error) {
+        console.error('Failed to check admin status:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    checkAdminStatus()
+  }, [])
+  
+  return (
+    <div className="flex h-screen bg-slate-950">
+      <aside className="w-64 border-r border-slate-800 bg-slate-900 relative">
+        <div className="flex h-16 items-center border-b border-slate-800 px-6">
+          <Link href="/dashboard" className="flex items-center space-x-2">
+            <img src="/costhawk-logo.png" alt="CostHawk" className="h-10 w-auto" />
+            <span className="text-xl font-bold text-white">CostHawk</span>
+          </Link>
+        </div>
+
+        <nav className="space-y-1 p-4 pb-20">
+          <NavItem href="/dashboard" icon={<Home />} label="Dashboard" active={pathname === '/dashboard'} />
+          <NavItem href="/dashboard/wrapped-keys" icon={<Key />} label="Wrapped Keys" active={pathname === '/dashboard/wrapped-keys'} highlight />
+          <NavItem href="/dashboard/playground" icon={<Beaker />} label="Playground" active={pathname === '/dashboard/playground'} />
+          <NavItem href="/dashboard/usage" icon={<BarChart3 />} label="Usage" active={pathname === '/dashboard/usage'} />
+          <NavItem href="/dashboard/api-keys" icon={<Shield />} label="API Keys" active={pathname === '/dashboard/api-keys'} />
+          <NavItem href="/dashboard/billing" icon={<CreditCard />} label="Billing" active={pathname === '/dashboard/billing'} />
+          <NavItem href="/dashboard/alerts" icon={<Bell />} label="Alerts" active={pathname === '/dashboard/alerts'} />
+          <NavItem href="/dashboard/settings" icon={<Settings />} label="Settings" active={pathname === '/dashboard/settings'} />
+          
+          {/* Admin Panel Section - Only visible to admins */}
+          {!loading && isAdmin && (
+            <>
+              <div className="pt-4 pb-2">
+                <Separator className="bg-slate-700" />
+              </div>
+              <div className="px-3 py-2">
+                <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Admin Panel</h3>
+              </div>
+              <NavItem 
+                href="/dashboard/admin" 
+                icon={<ShieldAlert />} 
+                label="Admin Overview" 
+                active={pathname === '/dashboard/admin'} 
+              />
+              <NavItem 
+                href="/admin/pricing-status" 
+                icon={<Activity />} 
+                label="Pricing Status" 
+                active={pathname === '/admin/pricing-status'} 
+              />
+              <NavItem 
+                href="/api/admin/trigger-pricing" 
+                icon={<Database />} 
+                label="Trigger Discovery" 
+                active={pathname.includes('/trigger-pricing')}
+                external
+              />
+              <NavItem 
+                href="/api/admin/fix-pricing" 
+                icon={<Wrench />} 
+                label="Fix Pricing Data" 
+                active={pathname.includes('/fix-pricing')}
+                external
+              />
+            </>
+          )}
+        </nav>
+        
+        {/* Sign Out Button at Bottom */}
+        <div className="absolute bottom-4 left-4 right-4">
+          <SignOutButton redirectUrl="/">
+            <Button 
+              variant="ghost" 
+              className="w-full justify-start text-slate-400 hover:bg-red-900/20 hover:text-red-400 transition-colors"
+            >
+              <LogOut className="h-5 w-5 mr-3" />
+              Sign Out
+            </Button>
+          </SignOutButton>
+        </div>
+      </aside>
+
+      <div className="flex flex-1 flex-col">
+        <header className="flex h-16 items-center justify-between border-b border-slate-800 bg-slate-900 px-6">
+          <h1 className="text-xl font-semibold text-white">Dashboard</h1>
+          <div className="flex items-center space-x-4">
+            <span className="text-sm text-slate-400 hidden sm:block">Click avatar to sign out</span>
+            <UserButton 
+              afterSignOutUrl="/"
+              appearance={{
+                elements: {
+                  avatarBox: "w-10 h-10 ring-2 ring-primary-500/50 hover:ring-primary-400 transition-all",
+                  userButtonPopoverCard: "bg-slate-900 border-slate-700",
+                  userButtonPopoverActionButton: "text-slate-300 hover:text-white hover:bg-slate-800",
+                  userButtonPopoverActionButtonText: "text-slate-300",
+                  userButtonPopoverFooter: "hidden"
+                }
+              }}
+            />
+          </div>
+        </header>
+
+        <main className="flex-1 overflow-auto bg-slate-950 p-6">{children}</main>
+      </div>
+    </div>
+  )
+}
+
+function NavItem({
+  href,
+  icon,
+  label,
+  active = false,
+  highlight = false,
+  external = false,
+}: {
+  href: string
+  icon: React.ReactNode
+  label: string
+  active?: boolean
+  highlight?: boolean
+  external?: boolean
+}) {
+  const className = `flex items-center space-x-3 rounded-lg px-3 py-2 transition-colors ${
+    active
+      ? "bg-primary-600/20 text-primary-500"
+      : highlight
+      ? "text-white bg-gradient-to-r from-primary-600/20 to-primary-500/20 border border-primary-500/30 hover:from-primary-600/30 hover:to-primary-500/30"
+      : "text-slate-400 hover:bg-slate-800 hover:text-white"
+  }`
+
+  // For external API links, use regular anchor tag
+  if (external) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={className}
+      >
+        <span className="h-5 w-5">{icon}</span>
+        <span>{label}</span>
+        <svg className="ml-auto h-3 w-3 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+        </svg>
+      </a>
+    )
+  }
+
+  return (
+    <Link
+      href={href}
+      className={className}
+    >
+      <span className="h-5 w-5">{icon}</span>
+      <span>{label}</span>
+      {highlight && (
+        <span className="ml-auto rounded-full bg-primary-500 px-2 py-0.5 text-xs font-medium text-white">
+          NEW
+        </span>
+      )}
+    </Link>
+  )
+}

package/costcanary/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,13 @@
+import { auth } from "@clerk/nextjs/server"
+import { redirect } from "next/navigation"
+import { DashboardContent } from "@/components/dashboard/dashboard-content"
+
+export default async function DashboardPage() {
+  const { userId } = await auth()
+
+  if (!userId) {
+    redirect("/sign-in")
+  }
+
+  return <DashboardContent />
+}