@wakastellar/ui 1.0.12 → 2.1.0

package/src/blocks/dashboard/index.tsx

@@ -0,0 +1,522 @@
+"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 { WakaStat, WakaStatGroup } from "../../components/waka-stat"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu"
+import {
+  TrendingUp,
+  TrendingDown,
+  Users,
+  DollarSign,
+  ShoppingCart,
+  Activity,
+  MoreHorizontal,
+  ArrowUpRight,
+  Calendar,
+  RefreshCw,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface DashboardStatConfig {
+  id: string
+  label: string
+  value: string | number
+  trend?: "up" | "down" | "neutral"
+  trendValue?: string
+  trendText?: string
+  icon?: React.ReactNode
+  color?: "default" | "primary" | "success" | "warning" | "destructive" | "blue" | "purple"
+}
+
+export interface DashboardChartConfig {
+  id: string
+  title: string
+  description?: string
+  /** Composant graphique (WakaBarChart, WakaLineChart, etc.) */
+  chart: React.ReactNode
+  /** Actions du menu */
+  actions?: {
+    label: string
+    onClick?: () => void
+  }[]
+}
+
+export interface DashboardTableConfig {
+  id: string
+  title: string
+  description?: string
+  /** Composant DataTable ou Table */
+  table: React.ReactNode
+  /** Actions */
+  actions?: {
+    label: string
+    onClick?: () => void
+    href?: string
+  }[]
+}
+
+export interface DashboardActivityItem {
+  id: string
+  title: string
+  description?: string
+  timestamp: string | Date
+  icon?: React.ReactNode
+  type?: "info" | "success" | "warning" | "error"
+}
+
+export interface DashboardQuickAction {
+  id: string
+  label: string
+  icon?: React.ReactNode
+  onClick?: () => void
+  href?: string
+  variant?: "default" | "outline" | "secondary"
+}
+
+export interface WakaDashboardProps {
+  /** Titre du dashboard */
+  title?: string
+  /** Description */
+  description?: string
+  /** Statistiques en haut */
+  stats?: DashboardStatConfig[]
+  /** Graphiques */
+  charts?: DashboardChartConfig[]
+  /** Tableaux */
+  tables?: DashboardTableConfig[]
+  /** Activité récente */
+  activities?: DashboardActivityItem[]
+  /** Actions rapides */
+  quickActions?: DashboardQuickAction[]
+  /** Afficher le header */
+  showHeader?: boolean
+  /** Callback de rafraîchissement */
+  onRefresh?: () => void
+  /** En cours de chargement */
+  loading?: boolean
+  /** Période sélectionnée */
+  period?: string
+  /** Callback changement de période */
+  onPeriodChange?: (period: string) => void
+  /** Périodes disponibles */
+  periods?: { value: string; label: string }[]
+  /** Layout des stats */
+  statsLayout?: "row" | "grid"
+  /** Nombre de colonnes pour les stats (grid) */
+  statsColumns?: 2 | 3 | 4
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// SUB-COMPONENTS
+// ============================================
+
+interface DashboardHeaderProps {
+  title?: string
+  description?: string
+  period?: string
+  onPeriodChange?: (period: string) => void
+  periods?: { value: string; label: string }[]
+  onRefresh?: () => void
+  loading?: boolean
+  quickActions?: DashboardQuickAction[]
+}
+
+function DashboardHeader({
+  title = "Tableau de bord",
+  description,
+  period,
+  onPeriodChange,
+  periods = [
+    { value: "today", label: "Aujourd'hui" },
+    { value: "week", label: "Cette semaine" },
+    { value: "month", label: "Ce mois" },
+    { value: "year", label: "Cette année" },
+  ],
+  onRefresh,
+  loading,
+  quickActions,
+}: DashboardHeaderProps) {
+  return (
+    <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+        {description && (
+          <p className="text-muted-foreground mt-1">{description}</p>
+        )}
+      </div>
+      <div className="flex items-center gap-2 flex-wrap">
+        {/* Période */}
+        {onPeriodChange && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm">
+                <Calendar className="mr-2 h-4 w-4" />
+                {periods.find((p) => p.value === period)?.label || "Période"}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {periods.map((p) => (
+                <DropdownMenuItem
+                  key={p.value}
+                  onClick={() => onPeriodChange(p.value)}
+                  className={cn(period === p.value && "bg-muted")}
+                >
+                  {p.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        {/* Rafraîchir */}
+        {onRefresh && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onRefresh}
+            disabled={loading}
+          >
+            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+          </Button>
+        )}
+
+        {/* Actions rapides */}
+        {quickActions?.map((action) => (
+          <Button
+            key={action.id}
+            variant={action.variant || "default"}
+            size="sm"
+            onClick={action.onClick}
+            asChild={!!action.href}
+          >
+            {action.href ? (
+              <a href={action.href}>
+                {action.icon && <span className="mr-2">{action.icon}</span>}
+                {action.label}
+              </a>
+            ) : (
+              <>
+                {action.icon && <span className="mr-2">{action.icon}</span>}
+                {action.label}
+              </>
+            )}
+          </Button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface DashboardStatsProps {
+  stats: DashboardStatConfig[]
+  layout?: "row" | "grid"
+  columns?: 2 | 3 | 4
+  loading?: boolean
+}
+
+function DashboardStats({
+  stats,
+  layout = "grid",
+  columns = 4,
+  loading,
+}: DashboardStatsProps) {
+  return (
+    <WakaStatGroup layout={layout} columns={columns} gap="md">
+      {stats.map((stat) => (
+        <WakaStat
+          key={stat.id}
+          label={stat.label}
+          value={stat.value}
+          trend={stat.trend}
+          trendValue={stat.trendValue}
+          trendText={stat.trendText}
+          icon={stat.icon}
+          color={stat.color}
+          variant="card"
+          loading={loading}
+        />
+      ))}
+    </WakaStatGroup>
+  )
+}
+
+interface DashboardChartCardProps {
+  config: DashboardChartConfig
+}
+
+function DashboardChartCard({ config }: DashboardChartCardProps) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <div>
+          <CardTitle className="text-base">{config.title}</CardTitle>
+          {config.description && (
+            <CardDescription>{config.description}</CardDescription>
+          )}
+        </div>
+        {config.actions && config.actions.length > 0 && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {config.actions.map((action, index) => (
+                <DropdownMenuItem key={index} onClick={action.onClick}>
+                  {action.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </CardHeader>
+      <CardContent>{config.chart}</CardContent>
+    </Card>
+  )
+}
+
+interface DashboardTableCardProps {
+  config: DashboardTableConfig
+}
+
+function DashboardTableCard({ config }: DashboardTableCardProps) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <div>
+          <CardTitle className="text-base">{config.title}</CardTitle>
+          {config.description && (
+            <CardDescription>{config.description}</CardDescription>
+          )}
+        </div>
+        {config.actions && config.actions.length > 0 && (
+          <div className="flex gap-2">
+            {config.actions.map((action, index) => (
+              <Button
+                key={index}
+                variant="outline"
+                size="sm"
+                onClick={action.onClick}
+                asChild={!!action.href}
+              >
+                {action.href ? (
+                  <a href={action.href}>
+                    {action.label}
+                    <ArrowUpRight className="ml-1 h-3 w-3" />
+                  </a>
+                ) : (
+                  action.label
+                )}
+              </Button>
+            ))}
+          </div>
+        )}
+      </CardHeader>
+      <CardContent>{config.table}</CardContent>
+    </Card>
+  )
+}
+
+interface DashboardActivityProps {
+  activities: DashboardActivityItem[]
+}
+
+function DashboardActivity({ activities }: DashboardActivityProps) {
+  const formatTime = (timestamp: string | Date): string => {
+    const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp
+    const now = new Date()
+    const diff = now.getTime() - date.getTime()
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(minutes / 60)
+    const days = Math.floor(hours / 24)
+
+    if (minutes < 1) return "À l'instant"
+    if (minutes < 60) return `Il y a ${minutes} min`
+    if (hours < 24) return `Il y a ${hours}h`
+    if (days < 7) return `Il y a ${days}j`
+    return date.toLocaleDateString("fr-FR")
+  }
+
+  const typeColors = {
+    info: "bg-blue-500",
+    success: "bg-green-500",
+    warning: "bg-yellow-500",
+    error: "bg-red-500",
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">Activité récente</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {activities.map((activity) => (
+            <div key={activity.id} className="flex items-start gap-3">
+              <div
+                className={cn(
+                  "h-2 w-2 rounded-full mt-2 flex-shrink-0",
+                  typeColors[activity.type || "info"]
+                )}
+              />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium">{activity.title}</p>
+                {activity.description && (
+                  <p className="text-xs text-muted-foreground truncate">
+                    {activity.description}
+                  </p>
+                )}
+              </div>
+              <span className="text-xs text-muted-foreground flex-shrink-0">
+                {formatTime(activity.timestamp)}
+              </span>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaDashboard({
+  title = "Tableau de bord",
+  description,
+  stats,
+  charts,
+  tables,
+  activities,
+  quickActions,
+  showHeader = true,
+  onRefresh,
+  loading = false,
+  period = "month",
+  onPeriodChange,
+  periods,
+  statsLayout = "grid",
+  statsColumns = 4,
+  className,
+}: WakaDashboardProps) {
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      {showHeader && (
+        <DashboardHeader
+          title={title}
+          description={description}
+          period={period}
+          onPeriodChange={onPeriodChange}
+          periods={periods}
+          onRefresh={onRefresh}
+          loading={loading}
+          quickActions={quickActions}
+        />
+      )}
+
+      {/* Stats */}
+      {stats && stats.length > 0 && (
+        <DashboardStats
+          stats={stats}
+          layout={statsLayout}
+          columns={statsColumns}
+          loading={loading}
+        />
+      )}
+
+      {/* Charts */}
+      {charts && charts.length > 0 && (
+        <div className="grid gap-6 md:grid-cols-2">
+          {charts.map((chart) => (
+            <DashboardChartCard key={chart.id} config={chart} />
+          ))}
+        </div>
+      )}
+
+      {/* Tables and Activity */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Tables */}
+        {tables && tables.length > 0 && (
+          <div className={cn("space-y-6", activities ? "lg:col-span-2" : "lg:col-span-3")}>
+            {tables.map((table) => (
+              <DashboardTableCard key={table.id} config={table} />
+            ))}
+          </div>
+        )}
+
+        {/* Activity */}
+        {activities && activities.length > 0 && (
+          <div className={cn(!tables || tables.length === 0 ? "lg:col-span-3" : "")}>
+            <DashboardActivity activities={activities} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ============================================
+// PRESET STATS
+// ============================================
+
+export const defaultDashboardStats: DashboardStatConfig[] = [
+  {
+    id: "revenue",
+    label: "Revenus",
+    value: "€45,231.89",
+    trend: "up",
+    trendValue: "+20.1%",
+    trendText: "vs mois dernier",
+    icon: <DollarSign className="h-5 w-5" />,
+    color: "success",
+  },
+  {
+    id: "users",
+    label: "Utilisateurs",
+    value: "2,350",
+    trend: "up",
+    trendValue: "+180",
+    trendText: "cette semaine",
+    icon: <Users className="h-5 w-5" />,
+    color: "blue",
+  },
+  {
+    id: "orders",
+    label: "Commandes",
+    value: "12,234",
+    trend: "down",
+    trendValue: "-4.3%",
+    trendText: "vs mois dernier",
+    icon: <ShoppingCart className="h-5 w-5" />,
+    color: "purple",
+  },
+  {
+    id: "performance",
+    label: "Performance",
+    value: "94.2%",
+    trend: "up",
+    trendValue: "+2.4%",
+    icon: <Activity className="h-5 w-5" />,
+    color: "primary",
+  },
+]
+
+export default WakaDashboard