@wakastellar/ui 2.1.2 → 2.3.2

package/src/blocks/cloud-cost-dashboard/index.tsx

@@ -0,0 +1,597 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/card"
+import { Progress } from "../../components/progress"
+import { ScrollArea } from "../../components/scroll-area"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  DollarSign,
+  TrendingUp,
+  TrendingDown,
+  Cloud,
+  Server,
+  Database,
+  HardDrive,
+  Network,
+  Cpu,
+  AlertTriangle,
+  ArrowUpRight,
+  ArrowDownRight,
+  BarChart3,
+  PieChart,
+  Calendar,
+  Download,
+  Filter,
+  RefreshCw,
+  Zap,
+  Globe,
+  Container,
+  Shield,
+} from "lucide-react"
+
+export type CloudProvider = "aws" | "gcp" | "azure" | "all"
+export type CostCategory = "compute" | "storage" | "database" | "network" | "security" | "other"
+export type TimeRange = "day" | "week" | "month" | "quarter" | "year"
+
+export interface CostItem {
+  id: string
+  name: string
+  category: CostCategory
+  provider: CloudProvider
+  cost: number
+  previousCost?: number
+  budget?: number
+  usage?: number
+  unit?: string
+  trend?: number
+  tags?: string[]
+}
+
+export interface CostSummary {
+  totalCost: number
+  previousTotalCost?: number
+  budget?: number
+  forecast?: number
+  byProvider: Record<CloudProvider, number>
+  byCategory: Record<CostCategory, number>
+  topServices: CostItem[]
+}
+
+export interface CostAnomaly {
+  id: string
+  service: string
+  expectedCost: number
+  actualCost: number
+  deviation: number
+  timestamp: Date
+  status: "new" | "acknowledged" | "resolved"
+}
+
+export interface CloudCostDashboardProps {
+  summary: CostSummary
+  items: CostItem[]
+  anomalies?: CostAnomaly[]
+  timeRange?: TimeRange
+  onTimeRangeChange?: (range: TimeRange) => void
+  onProviderFilter?: (provider: CloudProvider) => void
+  onExport?: () => void
+  onRefresh?: () => void
+  className?: string
+}
+
+const categoryConfig: Record<CostCategory, { icon: React.ElementType; color: string; label: string }> = {
+  compute: { icon: Cpu, color: "text-blue-500", label: "Compute" },
+  storage: { icon: HardDrive, color: "text-green-500", label: "Storage" },
+  database: { icon: Database, color: "text-purple-500", label: "Database" },
+  network: { icon: Network, color: "text-cyan-500", label: "Network" },
+  security: { icon: Shield, color: "text-red-500", label: "Security" },
+  other: { icon: Cloud, color: "text-gray-500", label: "Other" },
+}
+
+const providerConfig: Record<CloudProvider, { label: string; color: string }> = {
+  aws: { label: "AWS", color: "text-orange-500" },
+  gcp: { label: "GCP", color: "text-blue-500" },
+  azure: { label: "Azure", color: "text-cyan-500" },
+  all: { label: "All Providers", color: "text-gray-500" },
+}
+
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(amount)
+}
+
+function formatPercentage(value: number): string {
+  return `${value >= 0 ? "+" : ""}${value.toFixed(1)}%`
+}
+
+function CostMetricCard({
+  title,
+  value,
+  previousValue,
+  icon: Icon,
+  trend,
+  budget,
+  forecast,
+}: {
+  title: string
+  value: number
+  previousValue?: number
+  icon: React.ElementType
+  trend?: number
+  budget?: number
+  forecast?: number
+}) {
+  const trendValue = previousValue !== undefined
+    ? ((value - previousValue) / previousValue) * 100
+    : trend
+
+  const isOverBudget = budget !== undefined && value > budget
+  const budgetPercentage = budget !== undefined ? (value / budget) * 100 : undefined
+
+  return (
+    <Card className={cn(isOverBudget && "border-red-500/50")}>
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between">
+          <div className="p-2 rounded-lg bg-muted">
+            <Icon className="h-5 w-5 text-muted-foreground" />
+          </div>
+          {trendValue !== undefined && (
+            <Badge
+              variant="outline"
+              className={cn(
+                trendValue > 0 ? "text-red-500" : "text-green-500"
+              )}
+            >
+              {trendValue > 0 ? (
+                <ArrowUpRight className="h-3 w-3 mr-1" />
+              ) : (
+                <ArrowDownRight className="h-3 w-3 mr-1" />
+              )}
+              {formatPercentage(Math.abs(trendValue))}
+            </Badge>
+          )}
+        </div>
+
+        <div className="mt-3">
+          <div className="text-2xl font-bold">{formatCurrency(value)}</div>
+          <div className="text-sm text-muted-foreground">{title}</div>
+        </div>
+
+        {budgetPercentage !== undefined && (
+          <div className="mt-3">
+            <div className="flex items-center justify-between text-xs mb-1">
+              <span className="text-muted-foreground">Budget</span>
+              <span className={cn(isOverBudget && "text-red-500")}>
+                {formatCurrency(value)} / {formatCurrency(budget!)}
+              </span>
+            </div>
+            <Progress
+              value={Math.min(budgetPercentage, 100)}
+              className={cn(
+                "h-2",
+                budgetPercentage > 100 && "[&>div]:bg-red-500",
+                budgetPercentage > 80 && budgetPercentage <= 100 && "[&>div]:bg-yellow-500"
+              )}
+            />
+          </div>
+        )}
+
+        {forecast !== undefined && (
+          <div className="mt-2 text-xs text-muted-foreground">
+            Forecast: {formatCurrency(forecast)}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function CategoryBreakdown({ data }: { data: Record<CostCategory, number> }) {
+  const total = Object.values(data).reduce((a, b) => a + b, 0)
+  const sorted = Object.entries(data)
+    .sort(([, a], [, b]) => b - a)
+    .filter(([, value]) => value > 0) as [CostCategory, number][]
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base flex items-center gap-2">
+          <PieChart className="h-4 w-4" />
+          Cost by Category
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {sorted.map(([category, value]) => {
+          const config = categoryConfig[category]
+          const Icon = config.icon
+          const percentage = (value / total) * 100
+
+          return (
+            <div key={category}>
+              <div className="flex items-center justify-between mb-1">
+                <div className="flex items-center gap-2">
+                  <Icon className={cn("h-4 w-4", config.color)} />
+                  <span className="text-sm">{config.label}</span>
+                </div>
+                <div className="text-sm font-medium">
+                  {formatCurrency(value)}
+                  <span className="text-muted-foreground ml-1">
+                    ({percentage.toFixed(0)}%)
+                  </span>
+                </div>
+              </div>
+              <Progress value={percentage} className="h-2" />
+            </div>
+          )
+        })}
+      </CardContent>
+    </Card>
+  )
+}
+
+function ProviderBreakdown({ data }: { data: Record<CloudProvider, number> }) {
+  const total = Object.values(data).reduce((a, b) => a + b, 0)
+  const sorted = Object.entries(data)
+    .filter(([key]) => key !== "all")
+    .sort(([, a], [, b]) => b - a)
+    .filter(([, value]) => value > 0) as [CloudProvider, number][]
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base flex items-center gap-2">
+          <Cloud className="h-4 w-4" />
+          Cost by Provider
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {sorted.map(([provider, value]) => {
+          const config = providerConfig[provider]
+          const percentage = (value / total) * 100
+
+          return (
+            <div key={provider}>
+              <div className="flex items-center justify-between mb-1">
+                <span className={cn("text-sm font-medium", config.color)}>
+                  {config.label}
+                </span>
+                <div className="text-sm font-medium">
+                  {formatCurrency(value)}
+                  <span className="text-muted-foreground ml-1">
+                    ({percentage.toFixed(0)}%)
+                  </span>
+                </div>
+              </div>
+              <Progress value={percentage} className="h-2" />
+            </div>
+          )
+        })}
+      </CardContent>
+    </Card>
+  )
+}
+
+function TopServicesTable({ items }: { items: CostItem[] }) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base flex items-center gap-2">
+          <BarChart3 className="h-4 w-4" />
+          Top Services by Cost
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-[300px]">
+          <div className="space-y-2">
+            {items.map((item, index) => {
+              const categoryConf = categoryConfig[item.category]
+              const CategoryIcon = categoryConf.icon
+              const providerConf = providerConfig[item.provider]
+              const trendValue = item.previousCost !== undefined
+                ? ((item.cost - item.previousCost) / item.previousCost) * 100
+                : item.trend
+
+              return (
+                <div
+                  key={item.id}
+                  className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 transition-colors"
+                >
+                  <div className="text-lg font-bold text-muted-foreground w-6 text-center">
+                    {index + 1}
+                  </div>
+
+                  <div className={cn("p-1.5 rounded", `${categoryConf.color.replace("text-", "bg-")}/10`)}>
+                    <CategoryIcon className={cn("h-4 w-4", categoryConf.color)} />
+                  </div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium truncate">{item.name}</div>
+                    <div className="text-xs text-muted-foreground flex items-center gap-2">
+                      <span className={providerConf.color}>{providerConf.label}</span>
+                      <span>•</span>
+                      <span>{categoryConf.label}</span>
+                      {item.usage !== undefined && item.unit && (
+                        <>
+                          <span>•</span>
+                          <span>{item.usage} {item.unit}</span>
+                        </>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="text-right shrink-0">
+                    <div className="font-semibold">{formatCurrency(item.cost)}</div>
+                    {trendValue !== undefined && (
+                      <div className={cn(
+                        "text-xs flex items-center justify-end gap-0.5",
+                        trendValue > 0 ? "text-red-500" : "text-green-500"
+                      )}>
+                        {trendValue > 0 ? (
+                          <TrendingUp className="h-3 w-3" />
+                        ) : (
+                          <TrendingDown className="h-3 w-3" />
+                        )}
+                        {formatPercentage(Math.abs(trendValue))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  )
+}
+
+function AnomaliesCard({
+  anomalies,
+  onAcknowledge,
+}: {
+  anomalies: CostAnomaly[]
+  onAcknowledge?: (id: string) => void
+}) {
+  const newAnomalies = anomalies.filter((a) => a.status === "new")
+
+  return (
+    <Card className={cn(newAnomalies.length > 0 && "border-yellow-500/50")}>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base flex items-center gap-2">
+            <AlertTriangle className="h-4 w-4 text-yellow-500" />
+            Cost Anomalies
+          </CardTitle>
+          {newAnomalies.length > 0 && (
+            <Badge className="bg-yellow-500">{newAnomalies.length} new</Badge>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {anomalies.length === 0 ? (
+          <div className="text-center text-muted-foreground py-4">
+            <Zap className="h-8 w-8 mx-auto mb-2 text-green-500" />
+            <p>No anomalies detected</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {anomalies.slice(0, 5).map((anomaly) => (
+              <div
+                key={anomaly.id}
+                className={cn(
+                  "flex items-center gap-3 p-2 rounded-lg",
+                  anomaly.status === "new" && "bg-yellow-500/10"
+                )}
+              >
+                <AlertTriangle className={cn(
+                  "h-4 w-4 shrink-0",
+                  anomaly.deviation > 100 ? "text-red-500" : "text-yellow-500"
+                )} />
+
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium truncate">{anomaly.service}</div>
+                  <div className="text-xs text-muted-foreground">
+                    Expected {formatCurrency(anomaly.expectedCost)} • Actual {formatCurrency(anomaly.actualCost)}
+                  </div>
+                </div>
+
+                <Badge variant="outline" className="text-red-500 shrink-0">
+                  +{anomaly.deviation.toFixed(0)}%
+                </Badge>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export function CloudCostDashboard({
+  summary,
+  items,
+  anomalies = [],
+  timeRange = "month",
+  onTimeRangeChange,
+  onProviderFilter,
+  onExport,
+  onRefresh,
+  className,
+}: CloudCostDashboardProps) {
+  const [selectedProvider, setSelectedProvider] = React.useState<CloudProvider>("all")
+
+  const handleProviderChange = (provider: CloudProvider) => {
+    setSelectedProvider(provider)
+    onProviderFilter?.(provider)
+  }
+
+  const filteredItems = React.useMemo(() => {
+    if (selectedProvider === "all") return items
+    return items.filter((item) => item.provider === selectedProvider)
+  }, [items, selectedProvider])
+
+  const trendValue = summary.previousTotalCost !== undefined
+    ? ((summary.totalCost - summary.previousTotalCost) / summary.previousTotalCost) * 100
+    : undefined
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <DollarSign className="h-6 w-6" />
+              <div>
+                <CardTitle>Cloud Cost Dashboard</CardTitle>
+                <p className="text-sm text-muted-foreground">
+                  Monitor and optimize your cloud spending
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Select value={timeRange} onValueChange={(v) => onTimeRangeChange?.(v as TimeRange)}>
+                <SelectTrigger className="w-32">
+                  <Calendar className="h-4 w-4 mr-2" />
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="day">Today</SelectItem>
+                  <SelectItem value="week">This Week</SelectItem>
+                  <SelectItem value="month">This Month</SelectItem>
+                  <SelectItem value="quarter">This Quarter</SelectItem>
+                  <SelectItem value="year">This Year</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Select value={selectedProvider} onValueChange={(v) => handleProviderChange(v as CloudProvider)}>
+                <SelectTrigger className="w-32">
+                  <Cloud className="h-4 w-4 mr-2" />
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Providers</SelectItem>
+                  <SelectItem value="aws">AWS</SelectItem>
+                  <SelectItem value="gcp">GCP</SelectItem>
+                  <SelectItem value="azure">Azure</SelectItem>
+                </SelectContent>
+              </Select>
+
+              {onRefresh && (
+                <Button variant="outline" size="icon" onClick={onRefresh}>
+                  <RefreshCw className="h-4 w-4" />
+                </Button>
+              )}
+
+              {onExport && (
+                <Button variant="outline" onClick={onExport}>
+                  <Download className="h-4 w-4 mr-1" />
+                  Export
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Key metrics */}
+      <div className="grid grid-cols-4 gap-4">
+        <CostMetricCard
+          title="Total Cost"
+          value={summary.totalCost}
+          previousValue={summary.previousTotalCost}
+          icon={DollarSign}
+          budget={summary.budget}
+        />
+        <CostMetricCard
+          title="Compute"
+          value={summary.byCategory.compute}
+          icon={Cpu}
+          trend={-5.2}
+        />
+        <CostMetricCard
+          title="Storage"
+          value={summary.byCategory.storage}
+          icon={HardDrive}
+          trend={12.3}
+        />
+        <CostMetricCard
+          title="Forecast (EOM)"
+          value={summary.forecast || summary.totalCost * 1.1}
+          icon={TrendingUp}
+          budget={summary.budget}
+        />
+      </div>
+
+      {/* Main content */}
+      <div className="grid grid-cols-3 gap-6">
+        <div className="col-span-2 space-y-6">
+          <TopServicesTable items={filteredItems.slice(0, 10)} />
+        </div>
+
+        <div className="space-y-6">
+          <CategoryBreakdown data={summary.byCategory} />
+          <ProviderBreakdown data={summary.byProvider} />
+          <AnomaliesCard anomalies={anomalies} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Default sample data
+export const defaultCloudCostSummary: CostSummary = {
+  totalCost: 45230,
+  previousTotalCost: 42100,
+  budget: 50000,
+  forecast: 48500,
+  byProvider: {
+    aws: 28500,
+    gcp: 12300,
+    azure: 4430,
+    all: 45230,
+  },
+  byCategory: {
+    compute: 22000,
+    storage: 8500,
+    database: 7200,
+    network: 4100,
+    security: 1800,
+    other: 1630,
+  },
+  topServices: [],
+}
+
+export const defaultCloudCostItems: CostItem[] = [
+  { id: "1", name: "EC2 Instances", category: "compute", provider: "aws", cost: 12500, previousCost: 11800, usage: 450, unit: "hours" },
+  { id: "2", name: "RDS PostgreSQL", category: "database", provider: "aws", cost: 4200, previousCost: 4000 },
+  { id: "3", name: "S3 Storage", category: "storage", provider: "aws", cost: 3800, previousCost: 3200, usage: 12, unit: "TB" },
+  { id: "4", name: "GKE Clusters", category: "compute", provider: "gcp", cost: 6500, previousCost: 6800 },
+  { id: "5", name: "Cloud SQL", category: "database", provider: "gcp", cost: 2800, previousCost: 2600 },
+  { id: "6", name: "BigQuery", category: "database", provider: "gcp", cost: 1800, previousCost: 1500, usage: 45, unit: "TB scanned" },
+  { id: "7", name: "Azure VMs", category: "compute", provider: "azure", cost: 2400, previousCost: 2200 },
+  { id: "8", name: "Blob Storage", category: "storage", provider: "azure", cost: 1200, previousCost: 1100 },
+  { id: "9", name: "CloudFront CDN", category: "network", provider: "aws", cost: 2100, previousCost: 1900, usage: 85, unit: "TB" },
+  { id: "10", name: "Lambda Functions", category: "compute", provider: "aws", cost: 850, previousCost: 720, usage: 12000000, unit: "invocations" },
+]
+
+export const defaultCostAnomalies: CostAnomaly[] = [
+  { id: "1", service: "EC2 Spot Instances", expectedCost: 500, actualCost: 1250, deviation: 150, timestamp: new Date(), status: "new" },
+  { id: "2", service: "Data Transfer", expectedCost: 800, actualCost: 1400, deviation: 75, timestamp: new Date(Date.now() - 3600000), status: "new" },
+  { id: "3", service: "Lambda", expectedCost: 200, actualCost: 320, deviation: 60, timestamp: new Date(Date.now() - 7200000), status: "acknowledged" },
+]