@umituz/web-dashboard 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Dashboard Layout System - Customizable, themeable dashboard layouts and settings",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -28,6 +28,11 @@
     "./auth/hooks": "./src/domains/auth/hooks/index.ts",
     "./auth/utils": "./src/domains/auth/utils/index.ts",
     "./auth/types": "./src/domains/auth/types/index.ts",
+    "./analytics": "./src/domains/analytics/index.ts",
+    "./analytics/components": "./src/domains/analytics/components/index.ts",
+    "./analytics/hooks": "./src/domains/analytics/hooks/index.ts",
+    "./analytics/utils": "./src/domains/analytics/utils/index.ts",
+    "./analytics/types": "./src/domains/analytics/types/index.ts",
     "./package.json": "./package.json"
   },
   "files": [
@@ -50,6 +55,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.577.0",
+    "recharts": "^2.15.0",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
@@ -73,6 +79,12 @@
     "authentication",
     "login",
     "register",
+    "analytics",
+    "charts",
+    "metrics",
+    "kpi",
+    "visualization",
+    "recharts",
     "react",
     "typescript",
     "components",

package/src/domains/analytics/components/AnalyticsCard.tsx

@@ -0,0 +1,80 @@
+/**
+ * Analytics Card Component
+ *
+ * Configurable analytics card with chart or metrics
+ */
+
+import { Loader2, AlertCircle } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import type { AnalyticsCardProps } from "../types/analytics";
+import { MetricCard } from "./MetricCard";
+import { AnalyticsChart } from "./AnalyticsChart";
+
+export const AnalyticsCard = ({
+  title,
+  description,
+  chart,
+  metrics,
+  size = "md",
+  loading = false,
+  error,
+  className,
+  children,
+}: AnalyticsCardProps) => {
+  const sizeClasses = {
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+    full: "p-6",
+  };
+
+  if (loading) {
+    return (
+      <div className={cn("bg-background border border-border rounded-xl", sizeClasses[size], className)}>
+        <div className="flex items-center justify-center h-48">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn("bg-background border border-border rounded-xl", sizeClasses[size], className)}>
+        <div className="flex items-center justify-center h-48 gap-3 text-destructive">
+          <AlertCircle className="h-5 w-5" />
+          <p className="text-sm">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("bg-background border border-border rounded-xl", sizeClasses[size], className)}>
+      {/* Header */}
+      {(title || description) && (
+        <div className="mb-6">
+          {title && <h3 className="text-lg font-semibold text-foreground">{title}</h3>}
+          {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
+        </div>
+      )}
+
+      {/* Chart */}
+      {chart && <AnalyticsChart config={chart} />}
+
+      {/* Metrics */}
+      {metrics && metrics.length > 0 && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {metrics.map((metric) => (
+            <MetricCard key={metric.id} metric={metric} size="sm" />
+          ))}
+        </div>
+      )}
+
+      {/* Custom Content */}
+      {children}
+    </div>
+  );
+};
+
+export default AnalyticsCard;

package/src/domains/analytics/components/AnalyticsChart.tsx

@@ -0,0 +1,184 @@
+/**
+ * Analytics Chart Component
+ *
+ * Configurable chart component using Recharts
+ */
+
+import { useMemo } from "react";
+import {
+  LineChart,
+  BarChart,
+  AreaChart,
+  PieChart,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  Line,
+  Bar,
+  Area,
+  Pie,
+  Cell,
+} from "recharts";
+import { cn } from "@umituz/web-design-system/utils";
+import type { ChartConfig } from "../types/analytics";
+import { generateChartColors } from "../utils/analytics";
+
+interface AnalyticsChartProps {
+  /** Chart configuration */
+  config: ChartConfig;
+  /** Custom class name */
+  className?: string;
+  /** Custom height */
+  height?: number | string;
+}
+
+export const AnalyticsChart = ({ config, className, height }: AnalyticsChartProps) => {
+  const colors = useMemo(
+    () => config.colors || generateChartColors(config.yAxisKeys?.length || 5),
+    [config.colors, config.yAxisKeys]
+  );
+
+  const renderChart = () => {
+    const commonProps = {
+      data: config.data,
+      margin: { top: 10, right: 10, left: 10, bottom: 10 },
+    };
+
+    switch (config.type) {
+      case "line":
+        return (
+          <LineChart {...commonProps}>
+            {config.showGrid && <CartesianGrid strokeDasharray="3 3" className="stroke-border/50" />}
+            <XAxis
+              dataKey={config.xAxisKey}
+              className="text-xs text-muted-foreground"
+              axisLine={false}
+              tickLine={false}
+            />
+            <YAxis
+              className="text-xs text-muted-foreground"
+              axisLine={false}
+              tickLine={false}
+            />
+            {config.showTooltip && <Tooltip />}
+            {config.showLegend && <Legend />}
+            {config.yAxisKeys?.map((key, index) => (
+              <Line
+                key={key}
+                type="monotone"
+                dataKey={key}
+                stroke={colors[index]}
+                strokeWidth={2}
+                dot={{ r: 4 }}
+              />
+            ))}
+          </LineChart>
+        );
+
+      case "bar":
+        return (
+          <BarChart {...commonProps}>
+            {config.showGrid && <CartesianGrid strokeDasharray="3 3" className="stroke-border/50" />}
+            <XAxis
+              dataKey={config.xAxisKey}
+              className="text-xs text-muted-foreground"
+              axisLine={false}
+              tickLine={false}
+            />
+            <YAxis
+              className="text-xs text-muted-foreground"
+              axisLine={false}
+              tickLine={false}
+            />
+            {config.showTooltip && <Tooltip />}
+            {config.showLegend && <Legend />}
+            {config.yAxisKeys?.map((key, index) => (
+              <Bar key={key} dataKey={key} fill={colors[index]} radius={[4, 4, 0, 0]} />
+            ))}
+          </BarChart>
+        );
+
+      case "area":
+        return (
+          <AreaChart {...commonProps}>
+            {config.showGrid && <CartesianGrid strokeDasharray="3 3" className="stroke-border/50" />}
+            <XAxis
+              dataKey={config.xAxisKey}
+              className="text-xs text-muted-foreground"
+              axisLine={false}
+              tickLine={false}
+            />
+            <YAxis
+              className="text-xs text-muted-foreground"
+              axisLine={false}
+              tickLine={false}
+            />
+            {config.showTooltip && <Tooltip />}
+            {config.showLegend && <Legend />}
+            {config.yAxisKeys?.map((key, index) => (
+              <Area
+                key={key}
+                type="monotone"
+                dataKey={key}
+                stroke={colors[index]}
+                fill={colors[index]}
+                fillOpacity={0.3}
+              />
+            ))}
+          </AreaChart>
+        );
+
+      case "pie":
+      case "donut":
+        return (
+          <PieChart {...commonProps}>
+            <Pie
+              data={config.data}
+              cx="50%"
+              cy="50%"
+              labelLine={false}
+              label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
+              outerRadius={80}
+              innerRadius={config.type === "donut" ? 40 : 0}
+              dataKey="value"
+            >
+              {config.data.map((entry: any, index: number) => (
+                <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
+              ))}
+            </Pie>
+            {config.showTooltip && <Tooltip />}
+            {config.showLegend && <Legend />}
+          </PieChart>
+        );
+
+      default:
+        return (
+          <div className="flex items-center justify-center h-full text-muted-foreground">
+            Unsupported chart type: {config.type}
+          </div>
+        );
+    }
+  };
+
+  const chartHeight = height || config.height || 300;
+
+  return (
+    <div
+      className={cn(
+        "w-full",
+        config.aspectRatio || "aspect-video",
+        className
+      )}
+      style={{ height: typeof chartHeight === "number" ? `${chartHeight}px` : chartHeight }}
+    >
+      <ResponsiveContainer width="100%" height="100%">
+        {renderChart()}
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default AnalyticsChart;

package/src/domains/analytics/components/AnalyticsLayout.tsx

@@ -0,0 +1,150 @@
+/**
+ * Analytics Layout Component
+ *
+ * Configurable analytics page layout with KPIs and charts
+ */
+
+import { RefreshCw, Download, Calendar } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import { Button } from "@umituz/web-design-system/atoms";
+import type { AnalyticsLayoutProps } from "../types/analytics";
+import { AnalyticsCard } from "./AnalyticsCard";
+import { MetricCard } from "./MetricCard";
+import { getDateRangePresets } from "../utils/analytics";
+
+export const AnalyticsLayout = ({
+  title,
+  description,
+  showDateRange = true,
+  showRefresh = true,
+  showExport = true,
+  kpis,
+  charts,
+  headerContent,
+  children,
+}: AnalyticsLayoutProps) => {
+  const dateRangePresets = getDateRangePresets();
+
+  const handleExport = async () => {
+    // In production, implement export functionality
+    console.log("Exporting analytics data...");
+  };
+
+  const handleRefresh = async () => {
+    // In production, refresh data
+    console.log("Refreshing analytics data...");
+  };
+
+  return (
+    <div className="w-full space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          {title && <h1 className="text-3xl font-bold text-foreground">{title}</h1>}
+          {description && <p className="text-muted-foreground mt-1">{description}</p>}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-3">
+          {showDateRange && (
+            <div className="flex items-center gap-2 bg-background border border-border rounded-lg px-3 py-2">
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+              <select className="bg-transparent text-sm text-foreground outline-none">
+                {dateRangePresets.map((preset) => (
+                  <option key={preset.value} value={preset.value}>
+                    {preset.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {showRefresh && (
+            <Button variant="ghost" size="sm" onClick={handleRefresh}>
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          )}
+
+          {showExport && (
+            <Button variant="ghost" size="sm" onClick={handleExport}>
+              <Download className="h-4 w-4" />
+              Export
+            </Button>
+          )}
+
+          {headerContent}
+        </div>
+      </div>
+
+      {/* KPI Cards */}
+      {kpis && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
+          <MetricCard
+            metric={{
+              id: "downloads",
+              name: "Downloads",
+              value: kpis.downloads.current,
+              previousValue: kpis.downloads.previous,
+              unit: "K",
+            }}
+          />
+          <MetricCard
+            metric={{
+              id: "engagement",
+              name: "Engagement",
+              value: kpis.engagement.current,
+              previousValue: kpis.engagement.previous,
+              unit: "%",
+            }}
+          />
+          <MetricCard
+            metric={{
+              id: "users",
+              name: "Users",
+              value: kpis.users.current,
+              previousValue: kpis.users.previous,
+              unit: "K",
+            }}
+          />
+          <MetricCard
+            metric={{
+              id: "revenue",
+              name: "Revenue",
+              value: kpis.revenue.current,
+              previousValue: kpis.revenue.previous,
+              unit: "$",
+            }}
+          />
+          <MetricCard
+            metric={{
+              id: "retention",
+              name: "Retention",
+              value: kpis.retention.current,
+              previousValue: kpis.retention.previous,
+              unit: "%",
+            }}
+          />
+        </div>
+      )}
+
+      {/* Charts */}
+      {charts && charts.length > 0 && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {charts.map((chartConfig, index) => (
+            <AnalyticsCard
+              key={index}
+              title={chartConfig.title}
+              description={chartConfig.description}
+              chart={chartConfig}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Custom Content */}
+      {children}
+    </div>
+  );
+};
+
+export default AnalyticsLayout;

package/src/domains/analytics/components/MetricCard.tsx

@@ -0,0 +1,108 @@
+/**
+ * Metric Card Component
+ *
+ * Displays a single metric with trend indicator
+ */
+
+import { ArrowUp, ArrowDown, Minus } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import type { MetricCardProps } from "../types/analytics";
+import { formatMetricValue, calculateGrowth } from "../utils/analytics";
+
+export const MetricCard = ({
+  metric,
+  size = "md",
+  showTrend = true,
+  showIcon = true,
+  className,
+  onClick,
+}: MetricCardProps) => {
+  const growth =
+    metric.previousValue !== undefined
+      ? calculateGrowth(metric.value, metric.previousValue)
+      : 0;
+
+  const sizeClasses = {
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+  };
+
+  const titleSizeClasses = {
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+  };
+
+  const valueSizeClasses = {
+    sm: "text-xl",
+    md: "text-3xl",
+    lg: "text-4xl",
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        "bg-background border border-border rounded-xl",
+        sizeClasses[size],
+        onClick && "cursor-pointer hover:border-primary/50 transition-colors",
+        className
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          {/* Title */}
+          <p
+            className={cn(
+              "text-muted-foreground font-medium mb-1",
+              titleSizeClasses[size]
+            )}
+          >
+            {metric.name}
+          </p>
+
+          {/* Value */}
+          <div className={cn("font-bold text-foreground", valueSizeClasses[size])}>
+            {formatMetricValue(metric)}
+          </div>
+
+          {/* Trend */}
+          {showTrend && metric.previousValue !== undefined && (
+            <div className="flex items-center gap-1 mt-2">
+              {growth > 0 ? (
+                <ArrowUp className="h-4 w-4 text-green-600 dark:text-green-500" />
+              ) : growth < 0 ? (
+                <ArrowDown className="h-4 w-4 text-destructive" />
+              ) : (
+                <Minus className="h-4 w-4 text-muted-foreground" />
+              )}
+              <span
+                className={cn(
+                  "text-sm font-medium",
+                  growth > 0 && "text-green-600 dark:text-green-500",
+                  growth < 0 && "text-destructive",
+                  growth === 0 && "text-muted-foreground"
+                )}
+              >
+                {Math.abs(growth).toFixed(1)}%
+              </span>
+              <span className="text-sm text-muted-foreground">
+                vs last period
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Icon */}
+        {showIcon && metric.icon && (
+          <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+            <metric.icon className="h-6 w-6 text-primary" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MetricCard;

package/src/domains/analytics/components/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Analytics Components
+ *
+ * Export all analytics components
+ */
+
+export { MetricCard } from "./MetricCard";
+export { AnalyticsChart } from "./AnalyticsChart";
+export { AnalyticsCard } from "./AnalyticsCard";
+export { AnalyticsLayout } from "./AnalyticsLayout";

package/src/domains/analytics/hooks/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Analytics Hooks
+ *
+ * Export all analytics hooks
+ */
+
+export { useAnalytics } from "./useAnalytics";