@wakastellar/ui 2.1.0 → 2.1.2

package/src/blocks/dashboard-kpi/index.tsx

@@ -0,0 +1,424 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
+import { Button } from "../../components/button"
+import { Badge } from "../../components/badge"
+import { Progress } from "../../components/progress"
+import { Separator } from "../../components/separator"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  TrendingUp,
+  TrendingDown,
+  Users,
+  DollarSign,
+  ShoppingCart,
+  Activity,
+  ArrowUpRight,
+  ArrowDownRight,
+  MoreHorizontal,
+  RefreshCw,
+  Download,
+  Calendar,
+  Target,
+  Zap,
+  Eye,
+  Clock,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface KPIMetric {
+  id: string
+  label: string
+  value: string | number
+  previousValue?: string | number
+  change?: number
+  changeLabel?: string
+  trend?: "up" | "down" | "neutral"
+  icon?: React.ReactNode
+  color?: "default" | "blue" | "green" | "yellow" | "red" | "purple"
+  sparkline?: number[]
+  target?: number
+  current?: number
+}
+
+export interface KPIChartData {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface DashboardKPIProps {
+  /** Title of the dashboard */
+  title?: string
+  /** Description */
+  description?: string
+  /** Main KPI metrics */
+  metrics: KPIMetric[]
+  /** Period selector options */
+  periods?: { value: string; label: string }[]
+  /** Selected period */
+  selectedPeriod?: string
+  /** Period change handler */
+  onPeriodChange?: (period: string) => void
+  /** Refresh handler */
+  onRefresh?: () => void
+  /** Export handler */
+  onExport?: () => void
+  /** Custom chart component */
+  chart?: React.ReactNode
+  /** Secondary metrics for the bottom section */
+  secondaryMetrics?: KPIMetric[]
+  /** Goals/targets section */
+  goals?: {
+    id: string
+    label: string
+    current: number
+    target: number
+    unit?: string
+  }[]
+  /** Loading state */
+  isLoading?: boolean
+  /** Last updated timestamp */
+  lastUpdated?: string | Date
+  /** Custom className */
+  className?: string
+}
+
+// ============================================
+// SUBCOMPONENTS
+// ============================================
+
+const colorMap = {
+  default: "text-foreground",
+  blue: "text-blue-500",
+  green: "text-green-500",
+  yellow: "text-yellow-500",
+  red: "text-red-500",
+  purple: "text-purple-500",
+}
+
+const bgColorMap = {
+  default: "bg-muted",
+  blue: "bg-blue-500/10",
+  green: "bg-green-500/10",
+  yellow: "bg-yellow-500/10",
+  red: "bg-red-500/10",
+  purple: "bg-purple-500/10",
+}
+
+function MiniSparkline({ data, color = "blue" }: { data: number[]; color?: string }) {
+  const max = Math.max(...data)
+  const min = Math.min(...data)
+  const range = max - min || 1
+
+  const points = data
+    .map((value, index) => {
+      const x = (index / (data.length - 1)) * 100
+      const y = 100 - ((value - min) / range) * 100
+      return `${x},${y}`
+    })
+    .join(" ")
+
+  return (
+    <svg className="w-16 h-8" viewBox="0 0 100 100" preserveAspectRatio="none">
+      <polyline
+        points={points}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="3"
+        className={cn("opacity-60", colorMap[color as keyof typeof colorMap] || colorMap.blue)}
+      />
+    </svg>
+  )
+}
+
+function KPICard({ metric }: { metric: KPIMetric }) {
+  const Icon = metric.icon
+  const trendColor = metric.trend === "up" ? "text-green-500" : metric.trend === "down" ? "text-red-500" : "text-muted-foreground"
+  const TrendIcon = metric.trend === "up" ? TrendingUp : metric.trend === "down" ? TrendingDown : null
+
+  return (
+    <Card className="relative overflow-hidden">
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {metric.label}
+        </CardTitle>
+        {Icon && (
+          <div className={cn("p-2 rounded-lg", bgColorMap[metric.color || "default"])}>
+            <span className={cn("h-4 w-4", colorMap[metric.color || "default"])}>
+              {Icon}
+            </span>
+          </div>
+        )}
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-end justify-between">
+          <div>
+            <div className="text-2xl font-bold">{metric.value}</div>
+            {metric.change !== undefined && (
+              <div className={cn("flex items-center gap-1 text-sm", trendColor)}>
+                {TrendIcon && <TrendIcon className="h-3 w-3" />}
+                <span>{metric.change > 0 ? "+" : ""}{metric.change}%</span>
+                {metric.changeLabel && (
+                  <span className="text-muted-foreground">{metric.changeLabel}</span>
+                )}
+              </div>
+            )}
+          </div>
+          {metric.sparkline && (
+            <MiniSparkline data={metric.sparkline} color={metric.color} />
+          )}
+        </div>
+        {metric.target !== undefined && metric.current !== undefined && (
+          <div className="mt-4">
+            <div className="flex justify-between text-xs text-muted-foreground mb-1">
+              <span>Progress</span>
+              <span>{Math.round((metric.current / metric.target) * 100)}%</span>
+            </div>
+            <Progress value={(metric.current / metric.target) * 100} className="h-1.5" />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function GoalCard({ goal }: { goal: { id: string; label: string; current: number; target: number; unit?: string } }) {
+  const progress = (goal.current / goal.target) * 100
+  const isComplete = progress >= 100
+
+  return (
+    <div className="flex items-center gap-4 p-4 rounded-lg border bg-card">
+      <div className={cn(
+        "h-10 w-10 rounded-full flex items-center justify-center",
+        isComplete ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"
+      )}>
+        <Target className="h-5 w-5" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between mb-1">
+          <span className="font-medium truncate">{goal.label}</span>
+          <span className="text-sm text-muted-foreground">
+            {goal.current}{goal.unit} / {goal.target}{goal.unit}
+          </span>
+        </div>
+        <Progress value={Math.min(progress, 100)} className="h-2" />
+      </div>
+      {isComplete && (
+        <Badge variant="default" className="bg-green-500">Complete</Badge>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function DashboardKPI({
+  title = "Dashboard",
+  description,
+  metrics,
+  periods = [
+    { value: "7d", label: "7 days" },
+    { value: "30d", label: "30 days" },
+    { value: "90d", label: "90 days" },
+    { value: "12m", label: "12 months" },
+  ],
+  selectedPeriod = "30d",
+  onPeriodChange,
+  onRefresh,
+  onExport,
+  chart,
+  secondaryMetrics,
+  goals,
+  isLoading = false,
+  lastUpdated,
+  className,
+}: DashboardKPIProps) {
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+          {description && (
+            <p className="text-muted-foreground">{description}</p>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {periods.length > 0 && (
+            <Select value={selectedPeriod} onValueChange={onPeriodChange}>
+              <SelectTrigger className="w-[140px]">
+                <Calendar className="h-4 w-4 mr-2" />
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {periods.map((period) => (
+                  <SelectItem key={period.value} value={period.value}>
+                    {period.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+          {onRefresh && (
+            <Button variant="outline" size="icon" onClick={onRefresh} disabled={isLoading}>
+              <RefreshCw className={cn("h-4 w-4", isLoading && "animate-spin")} />
+            </Button>
+          )}
+          {onExport && (
+            <Button variant="outline" size="icon" onClick={onExport}>
+              <Download className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Last Updated */}
+      {lastUpdated && (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Clock className="h-4 w-4" />
+          <span>Last updated: {typeof lastUpdated === "string" ? lastUpdated : lastUpdated.toLocaleString()}</span>
+        </div>
+      )}
+
+      {/* Main KPI Grid */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {metrics.slice(0, 4).map((metric) => (
+          <KPICard key={metric.id} metric={metric} />
+        ))}
+      </div>
+
+      {/* Chart Section */}
+      {chart && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Overview</CardTitle>
+            <CardDescription>Performance metrics over time</CardDescription>
+          </CardHeader>
+          <CardContent>{chart}</CardContent>
+        </Card>
+      )}
+
+      {/* Secondary Metrics */}
+      {secondaryMetrics && secondaryMetrics.length > 0 && (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {secondaryMetrics.map((metric) => (
+            <Card key={metric.id}>
+              <CardContent className="pt-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm text-muted-foreground">{metric.label}</p>
+                    <p className="text-xl font-bold">{metric.value}</p>
+                  </div>
+                  {metric.change !== undefined && (
+                    <Badge
+                      variant={metric.trend === "up" ? "default" : metric.trend === "down" ? "destructive" : "secondary"}
+                      className="gap-1"
+                    >
+                      {metric.trend === "up" ? (
+                        <ArrowUpRight className="h-3 w-3" />
+                      ) : metric.trend === "down" ? (
+                        <ArrowDownRight className="h-3 w-3" />
+                      ) : null}
+                      {metric.change > 0 ? "+" : ""}{metric.change}%
+                    </Badge>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* Goals Section */}
+      {goals && goals.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Target className="h-5 w-5" />
+              Goals & Targets
+            </CardTitle>
+            <CardDescription>Track your progress towards key objectives</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {goals.map((goal) => (
+              <GoalCard key={goal.id} goal={goal} />
+            ))}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// PRESET DATA
+// ============================================
+
+export const defaultKPIMetrics: KPIMetric[] = [
+  {
+    id: "revenue",
+    label: "Total Revenue",
+    value: "$45,231.89",
+    change: 20.1,
+    changeLabel: "from last month",
+    trend: "up",
+    icon: <DollarSign className="h-4 w-4" />,
+    color: "green",
+    sparkline: [30, 40, 35, 50, 49, 60, 70, 91, 125],
+  },
+  {
+    id: "subscriptions",
+    label: "Subscriptions",
+    value: "+2,350",
+    change: 180.1,
+    changeLabel: "from last month",
+    trend: "up",
+    icon: <Users className="h-4 w-4" />,
+    color: "blue",
+    sparkline: [10, 20, 30, 40, 50, 60, 70, 80, 90],
+  },
+  {
+    id: "sales",
+    label: "Sales",
+    value: "+12,234",
+    change: 19,
+    changeLabel: "from last month",
+    trend: "up",
+    icon: <ShoppingCart className="h-4 w-4" />,
+    color: "purple",
+    sparkline: [65, 59, 80, 81, 56, 55, 70, 80, 95],
+  },
+  {
+    id: "active",
+    label: "Active Now",
+    value: "+573",
+    change: -2.5,
+    changeLabel: "from last hour",
+    trend: "down",
+    icon: <Activity className="h-4 w-4" />,
+    color: "yellow",
+    sparkline: [100, 90, 85, 88, 70, 65, 60, 58, 55],
+  },
+]
+
+export const defaultGoals = [
+  { id: "revenue-goal", label: "Monthly Revenue Target", current: 45231, target: 50000, unit: "$" },
+  { id: "users-goal", label: "New User Signups", current: 2350, target: 2000, unit: "" },
+  { id: "conversion-goal", label: "Conversion Rate", current: 3.2, target: 5, unit: "%" },
+]
+
+export default DashboardKPI