costhawk 1.0.0

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

@@ -0,0 +1,260 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { PlayCircle, Clock, CheckCircle, XCircle, Loader2 } from 'lucide-react';
+
+interface Job {
+  id: string;
+  status: string;
+  duration: string;
+  startedAt: string;
+  completedAt: string;
+  trigger: string;
+  successCount: number;
+  failureCount: number;
+  error?: string;
+}
+
+export default function AdminPage() {
+  const [isTriggering, setIsTriggering] = useState(false);
+  const [jobs, setJobs] = useState<Job[]>([]);
+  const [adminStatus, setAdminStatus] = useState<Record<string, unknown> | null>(null);
+  const [lastResult, setLastResult] = useState<Record<string, unknown> | null>(null);
+
+  const checkAdminStatus = async () => {
+    try {
+      const response = await fetch('/api/admin/trigger-pricing');
+      const data = await response.json();
+      setAdminStatus(data);
+    } catch (error) {
+      console.error('Failed to check admin status:', error);
+    }
+  };
+
+  const triggerPricingDiscovery = async (testMode: boolean = true, provider?: string) => {
+    setIsTriggering(true);
+    setLastResult(null);
+    
+    try {
+      const response = await fetch('/api/admin/trigger-pricing', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ testMode, provider }),
+      });
+      
+      const result = await response.json();
+      setLastResult(result);
+      
+      if (result.success) {
+        // Refresh jobs list
+        await loadJobs();
+      }
+    } catch (error) {
+      console.error('Failed to trigger pricing discovery:', error);
+      setLastResult({ error: 'Failed to trigger pricing discovery' });
+    } finally {
+      setIsTriggering(false);
+    }
+  };
+
+  const loadJobs = async () => {
+    try {
+      const response = await fetch('/api/admin/pricing-jobs');
+      const data = await response.json();
+      setJobs(data.jobs || []);
+    } catch (error) {
+      console.error('Failed to load jobs:', error);
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'COMPLETED': return <CheckCircle className="w-4 h-4 text-green-500" />;
+      case 'FAILED': return <XCircle className="w-4 h-4 text-red-500" />;
+      case 'RUNNING': return <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />;
+      default: return <Clock className="w-4 h-4 text-yellow-500" />;
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'COMPLETED': return 'bg-green-100 text-green-800';
+      case 'FAILED': return 'bg-red-100 text-red-800';
+      case 'RUNNING': return 'bg-blue-100 text-blue-800';
+      default: return 'bg-yellow-100 text-yellow-800';
+    }
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold text-white mb-2">Admin Panel</h1>
+        <p className="text-slate-400">Manage pricing discovery and view admin operations</p>
+      </div>
+
+      {/* Admin Status */}
+      <div className="bg-slate-900 border border-slate-700 rounded-lg p-6">
+        <div className="mb-4">
+          <h2 className="text-xl font-semibold text-white">Admin Status</h2>
+          <p className="text-slate-400">Your current admin permissions and access level</p>
+        </div>
+        <div>
+          <div className="flex gap-4 mb-4">
+            <Button onClick={checkAdminStatus} variant="outline" size="sm">
+              Check Status
+            </Button>
+          </div>
+          
+          {adminStatus && (
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div>
+                <div className="text-sm text-slate-400">Admin Access</div>
+                <Badge variant={(adminStatus.isAdmin as boolean) ? "default" : "destructive"}>
+                  {(adminStatus.isAdmin as boolean) ? "✅ Admin" : "❌ Not Admin"}
+                </Badge>
+              </div>
+              <div>
+                <div className="text-sm text-slate-400">Role</div>
+                <div className="text-white">{(adminStatus.role as string) || 'None'}</div>
+              </div>
+              <div>
+                <div className="text-sm text-slate-400">Can Trigger Pricing</div>
+                <Badge variant={(adminStatus.canTriggerPricing as boolean) ? "default" : "destructive"}>
+                  {(adminStatus.canTriggerPricing as boolean) ? "✅ Yes" : "❌ No"}
+                </Badge>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Trigger Controls */}
+      <div className="bg-slate-900 border border-slate-700 rounded-lg p-6">
+        <div className="mb-4">
+          <h2 className="text-xl font-semibold text-white flex items-center gap-2">
+            <PlayCircle className="w-5 h-5" />
+            Pricing Discovery
+          </h2>
+          <p className="text-slate-400">Manually trigger AI-powered pricing discovery jobs</p>
+        </div>
+        <div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-3">
+              <h3 className="text-lg font-semibold text-white">Test Mode</h3>
+              <p className="text-sm text-slate-400">Uses simulated data for testing</p>
+              <div className="space-y-2">
+                <Button 
+                  onClick={() => triggerPricingDiscovery(true)} 
+                  disabled={isTriggering}
+                  className="w-full"
+                >
+                  {isTriggering ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
+                  Test All Providers
+                </Button>
+                <Button 
+                  onClick={() => triggerPricingDiscovery(true, 'OpenAI')} 
+                  disabled={isTriggering}
+                  variant="outline"
+                  className="w-full"
+                >
+                  Test OpenAI Only
+                </Button>
+              </div>
+            </div>
+            
+            <div className="space-y-3">
+              <h3 className="text-lg font-semibold text-white">Live Mode</h3>
+              <p className="text-sm text-slate-400">Uses real Tavily API to discover pricing</p>
+              <div className="space-y-2">
+                <Button 
+                  onClick={() => triggerPricingDiscovery(false)} 
+                  disabled={isTriggering}
+                  variant="destructive"
+                  className="w-full"
+                >
+                  {isTriggering ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
+                  🔥 Live Discovery (All)
+                </Button>
+                <Button 
+                  onClick={() => triggerPricingDiscovery(false, 'OpenAI')} 
+                  disabled={isTriggering}
+                  variant="outline"
+                  className="w-full"
+                >
+                  Live OpenAI Only
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Last Result */}
+          {lastResult && (
+            <div className="mt-6 p-4 rounded-lg bg-slate-800 border border-slate-600">
+              <h4 className="text-white font-medium mb-2">Last Result</h4>
+              <pre className="text-sm text-slate-300 overflow-auto">
+                {JSON.stringify(lastResult, null, 2)}
+              </pre>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Jobs List */}
+      <div className="bg-slate-900 border border-slate-700 rounded-lg p-6">
+        <div className="mb-4">
+          <h2 className="text-xl font-semibold text-white">Recent Jobs</h2>
+          <p className="text-slate-400">History of pricing discovery operations</p>
+        </div>
+        <div>
+          <div className="flex gap-4 mb-4">
+            <Button onClick={loadJobs} variant="outline" size="sm">
+              Refresh Jobs
+            </Button>
+          </div>
+
+          {jobs.length === 0 ? (
+            <div className="text-center py-8 text-slate-400">
+              No jobs found. Trigger a pricing discovery to see results here.
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {jobs.map((job) => (
+                <div key={job.id} className="flex items-center justify-between p-4 rounded-lg bg-slate-800 border border-slate-600">
+                  <div className="flex items-center gap-3">
+                    {getStatusIcon(job.status)}
+                    <div>
+                      <div className="text-white font-medium">
+                        Job {job.id.slice(-8)}
+                      </div>
+                      <div className="text-sm text-slate-400">
+                        {job.trigger} • {job.duration}
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-center gap-3">
+                    <div className="text-right">
+                      <div className="text-sm text-green-400">
+                        ✅ {job.successCount} success
+                      </div>
+                      <div className="text-sm text-red-400">
+                        ❌ {job.failureCount} failed
+                      </div>
+                    </div>
+                    <Badge className={getStatusColor(job.status)}>
+                      {job.status}
+                    </Badge>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,64 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Bell, AlertTriangle, TrendingUp } from "lucide-react"
+
+export default function AlertsPage() {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-3xl font-bold text-white">Budget Alerts</h1>
+        <p className="mt-2 text-slate-400">
+          Set up alerts to monitor your API spending
+        </p>
+      </div>
+
+      {/* Alert Settings */}
+      <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"
+      >
+        <h2 className="mb-4 text-lg font-medium text-white">Alert Preferences</h2>
+        <div className="space-y-4">
+          <label className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <AlertTriangle className="h-5 w-5 text-yellow-500" />
+              <div>
+                <p className="font-medium text-white">Budget Warning</p>
+                <p className="text-sm text-slate-400">Alert when usage reaches 80% of budget</p>
+              </div>
+            </div>
+            <input type="checkbox" defaultChecked className="h-5 w-5 rounded" />
+          </label>
+          
+          <label className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <TrendingUp className="h-5 w-5 text-orange-500" />
+              <div>
+                <p className="font-medium text-white">Unusual Activity</p>
+                <p className="text-sm text-slate-400">Alert on sudden usage spikes</p>
+              </div>
+            </div>
+            <input type="checkbox" defaultChecked className="h-5 w-5 rounded" />
+          </label>
+        </div>
+      </motion.div>
+
+      {/* Coming Soon */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+        className="rounded-lg border border-dashed border-slate-700 bg-slate-900/30 p-12 text-center"
+      >
+        <Bell className="mx-auto h-12 w-12 text-slate-600" />
+        <h3 className="mt-4 text-lg font-medium text-white">Advanced Alerts Coming Soon</h3>
+        <p className="mt-2 text-slate-400">
+          Custom thresholds, email notifications, Slack integration, and more
+        </p>
+      </motion.div>
+    </div>
+  )
+}

package/costcanary/app/(dashboard)/dashboard/api-keys/page.tsx

@@ -0,0 +1,231 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { motion } from "framer-motion"
+import { Plus, Shield, Trash2, Copy, CheckCircle, AlertCircle, Clock, Key } from "lucide-react"
+import { AddApiKeyModal } from "@/components/dashboard/AddApiKeyModal"
+
+interface ApiKey {
+  id: string
+  provider: string
+  alias: string | null
+  masked: string
+  isActive: boolean
+  lastUsed: string | null
+  createdAt: string
+}
+
+export default function ApiKeysPage() {
+  const [keys, setKeys] = useState<ApiKey[]>([])
+  const [loading, setLoading] = useState(true)
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [copiedUrl, setCopiedUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetchKeys()
+  }, [])
+
+  const fetchKeys = async () => {
+    try {
+      const response = await fetch("/api/keys")
+      const data = await response.json()
+      setKeys(data.keys || [])
+    } catch (error) {
+      console.error("Failed to fetch API keys:", error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDeleteKey = async (keyId: string) => {
+    if (!confirm("Are you sure you want to delete this API key? This action cannot be undone.")) {
+      return
+    }
+
+    try {
+      const response = await fetch(`/api/keys?id=${keyId}`, {
+        method: "DELETE",
+      })
+
+      if (response.ok) {
+        setKeys(keys.filter(key => key.id !== keyId))
+      }
+    } catch (error) {
+      console.error("Failed to delete API key:", error)
+    }
+  }
+
+  const copyProxyUrl = (provider: string) => {
+    const baseUrl = window.location.origin
+    const proxyUrl = `${baseUrl}/api/proxy/${provider.toLowerCase()}/`
+    navigator.clipboard.writeText(proxyUrl)
+    setCopiedUrl(provider)
+    setTimeout(() => setCopiedUrl(null), 2000)
+  }
+
+  const getProviderIcon = (provider: string) => {
+    const icons: Record<string, string> = {
+      OPENAI: "🤖",
+      ANTHROPIC: "🧠",
+      GOOGLE: "🔍",
+      GROK: "🚀",
+    }
+    return icons[provider] || "🔑"
+  }
+
+  const getStatusIcon = (lastUsed: string | null) => {
+    if (!lastUsed) return <Clock className="h-4 w-4 text-slate-500" />
+    
+    const lastUsedDate = new Date(lastUsed)
+    const daysSinceUsed = Math.floor((Date.now() - lastUsedDate.getTime()) / (1000 * 60 * 60 * 24))
+    
+    if (daysSinceUsed < 1) {
+      return <CheckCircle className="h-4 w-4 text-green-500" />
+    } else if (daysSinceUsed < 7) {
+      return <Clock className="h-4 w-4 text-yellow-500" />
+    } else {
+      return <AlertCircle className="h-4 w-4 text-orange-500" />
+    }
+  }
+
+  return (
+    <>
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-white">API Keys</h1>
+            <p className="mt-2 text-slate-400">
+              Manage your API keys securely. All keys are encrypted with AES-256.
+            </p>
+          </div>
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => setShowAddModal(true)}
+            className="flex items-center space-x-2 rounded-lg bg-primary-600 px-4 py-2 text-white transition-colors hover:bg-primary-700"
+          >
+            <Plus className="h-5 w-5" />
+            <span>Add API Key</span>
+          </motion.button>
+        </div>
+
+        {/* API Keys List */}
+        {loading ? (
+          <div className="space-y-4">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="h-24 animate-pulse rounded-lg bg-slate-900" />
+            ))}
+          </div>
+        ) : keys.length === 0 ? (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="rounded-lg border border-slate-800 bg-slate-900/50 p-12 text-center backdrop-blur-sm"
+          >
+            <Key className="mx-auto h-12 w-12 text-slate-600" />
+            <h3 className="mt-4 text-lg font-medium text-white">No API Keys</h3>
+            <p className="mt-2 text-slate-400">
+              Add your first API key to start tracking costs
+            </p>
+            <motion.button
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={() => setShowAddModal(true)}
+              className="mt-6 rounded-lg bg-primary-600 px-4 py-2 text-white transition-colors hover:bg-primary-700"
+            >
+              Add Your First Key
+            </motion.button>
+          </motion.div>
+        ) : (
+          <div className="space-y-4">
+            {keys.map((key, index) => (
+              <motion.div
+                key={key.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.05 }}
+                className="group rounded-lg border border-slate-800 bg-slate-900/50 p-6 backdrop-blur-sm transition-all hover:border-slate-700 hover:bg-slate-900/70"
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex items-start space-x-4">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-slate-800 text-2xl">
+                      {getProviderIcon(key.provider)}
+                    </div>
+                    <div>
+                      <div className="flex items-center space-x-2">
+                        <h3 className="text-lg font-medium text-white">
+                          {key.provider}
+                        </h3>
+                        {key.alias && (
+                          <span className="rounded-full bg-slate-800 px-2 py-1 text-xs text-slate-400">
+                            {key.alias}
+                          </span>
+                        )}
+                        {getStatusIcon(key.lastUsed)}
+                      </div>
+                      <div className="mt-1 flex items-center space-x-2 text-sm text-slate-400">
+                        <Shield className="h-3 w-3" />
+                        <span className="font-mono">{key.masked}</span>
+                      </div>
+                      <div className="mt-2 text-xs text-slate-500">
+                        Added {new Date(key.createdAt).toLocaleDateString()}
+                        {key.lastUsed && (
+                          <> • Last used {new Date(key.lastUsed).toLocaleDateString()}</>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex space-x-2 opacity-0 transition-opacity group-hover:opacity-100">
+                    <motion.button
+                      whileHover={{ scale: 1.1 }}
+                      whileTap={{ scale: 0.9 }}
+                      onClick={() => copyProxyUrl(key.provider)}
+                      className="rounded-lg bg-slate-800 p-2 text-slate-400 transition-colors hover:bg-slate-700 hover:text-white"
+                      title="Copy proxy URL"
+                    >
+                      {copiedUrl === key.provider ? (
+                        <CheckCircle className="h-4 w-4 text-green-500" />
+                      ) : (
+                        <Copy className="h-4 w-4" />
+                      )}
+                    </motion.button>
+                    <motion.button
+                      whileHover={{ scale: 1.1 }}
+                      whileTap={{ scale: 0.9 }}
+                      onClick={() => handleDeleteKey(key.id)}
+                      className="rounded-lg bg-slate-800 p-2 text-slate-400 transition-colors hover:bg-red-900/20 hover:text-red-500"
+                      title="Delete key"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </motion.button>
+                  </div>
+                </div>
+
+                {/* Proxy URL Info */}
+                <div className="mt-4 rounded-lg bg-slate-800/50 p-3">
+                  <p className="text-xs text-slate-500">Proxy URL:</p>
+                  <p className="mt-1 font-mono text-xs text-slate-400">
+                    {window.location.origin}/api/proxy/{key.provider.toLowerCase()}/...
+                  </p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Add API Key Modal */}
+      {showAddModal && (
+        <AddApiKeyModal
+          onClose={() => setShowAddModal(false)}
+          onSuccess={() => {
+            setShowAddModal(false)
+            fetchKeys()
+          }}
+        />
+      )}
+    </>
+  )
+}