@umituz/web-dashboard 3.2.2 → 4.0.0

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

@@ -1,16 +1,33 @@
 /**
- * Analytics Layout Component
+ * AnalyticsLayout
  *
- * Configurable analytics page layout with KPIs and charts
+ * Top-level analytics page shell. All actions delegate to the
+ * consumer via callbacks — no console.log, no no-op handlers.
+ * The legacy "kpis" prop has been removed in favor of the typed
+ * `metrics` array (breaking change called out in changelog).
  */
 
+import { useMemo } from "react";
 import { RefreshCw, Download, Calendar, Loader2 } 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 { useT } from "../../../i18n";
+import { cn } from "../../../primitives";
+import { Button } from "../../../primitives";
+import type { AnalyticsLayoutProps, AnalyticsPeriod } from "../types/analytics";
 import { AnalyticsCard } from "./AnalyticsCard";
 import { MetricCard } from "./MetricCard";
-import { getDateRangePresets } from "../utils/analytics";
+import { ANALYTICS_KEYS } from "../utils/i18nKeys";
+
+/**
+ * Map analytics period tokens to localized display labels.
+ * Periods not in this map fall back to the raw token — better
+ * to show the key than an empty select option.
+ */
+const PERIOD_LABEL: Record<AnalyticsPeriod, string> = {
+  '7d': ANALYTICS_KEYS.common.last7Days,
+  '30d': ANALYTICS_KEYS.common.last30Days,
+  '90d': ANALYTICS_KEYS.common.last90Days,
+  '1y': ANALYTICS_KEYS.common.lastYear,
+};
 
 export const AnalyticsLayout = ({
   config,
@@ -21,71 +38,83 @@ export const AnalyticsLayout = ({
   period,
   onPeriodChange,
   showDateRange = true,
-  showRefresh,
-  showExport,
-  kpis,
+  showRefresh = true,
+  showExport = true,
   charts,
   headerContent,
+  onRefresh,
+  onExport,
   children,
 }: AnalyticsLayoutProps) => {
-  const dateRangePresets = getDateRangePresets();
+  const t = useT();
 
-  const handleExport = async () => {
-    // In production, implement export functionality
-    console.log("Exporting analytics data...");
-  };
+  const visibleMetrics = useMemo(() => metrics ?? [], [metrics]);
 
-  const handleRefresh = async () => {
-    // In production, refresh data
-    console.log("Refreshing analytics data...");
-  };
-
-  // Use config settings if props not provided
-  const _showRefresh = showRefresh ?? config?.showRefresh ?? true;
-  const _showExport = showExport ?? config?.showExport ?? true;
+  const showRefreshAction = showRefresh && Boolean(onRefresh);
+  const showExportAction = showExport && Boolean(onExport);
 
   return (
-    <div className="w-full space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
+    <div className="udb-analytics">
+      <div className="udb-analytics__header">
+        <div className="udb-analytics__heading">
           {(title || config?.brandName) && (
-            <h1 className="text-3xl font-bold text-foreground">
-              {title || `${config?.brandName || ''} Analytics`}
+            <h1 className="udb-analytics__title">
+              {title ??
+                (config?.brandName
+                  ? `${config.brandName} ${t(ANALYTICS_KEYS.layout.title)}`
+                  : t(ANALYTICS_KEYS.layout.title))}
             </h1>
           )}
-          {description && <p className="text-muted-foreground mt-1">{description}</p>}
+          {description && (
+            <p className="udb-analytics__description">{description}</p>
+          )}
         </div>
 
-        {/* Actions */}
-        <div className="flex items-center gap-3">
-          {showDateRange && onPeriodChange && (
-            <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" />
+        <div className="udb-analytics__actions">
+          {showDateRange && onPeriodChange && period && (
+            <label className="udb-period-select">
+              <Calendar className="udb-period-select__icon" aria-hidden="true" />
+              <span className="udb-sr-only">{t(ANALYTICS_KEYS.common.periodSelector)}</span>
               <select
-                className="bg-transparent text-sm text-foreground outline-none"
+                className="udb-period-select__select"
                 value={period}
-                onChange={(e) => onPeriodChange(e.target.value)}
+                onChange={(e) => onPeriodChange(e.target.value as AnalyticsPeriod)}
+                aria-label={t(ANALYTICS_KEYS.common.periodSelector)}
               >
-                {config?.availablePeriods?.map((p) => (
+                {(config?.availablePeriods ?? Object.keys(PERIOD_LABEL) as AnalyticsPeriod[]).map((p) => (
                   <option key={p} value={p}>
-                    {p === "7d" ? "7 Days" : p === "30d" ? "30 Days" : p === "90d" ? "90 Days" : p}
+                    {t(PERIOD_LABEL[p] ?? p)}
                   </option>
                 ))}
               </select>
-            </div>
+            </label>
           )}
 
-          {_showRefresh && (
-            <Button variant="ghost" size="sm" onClick={handleRefresh} disabled={loading}>
-              <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+          {showRefreshAction && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onRefresh}
+              disabled={loading}
+              aria-label={t(ANALYTICS_KEYS.common.refresh)}
+            >
+              <RefreshCw
+                className={cn("udb-analytics__action-icon", loading && "udb-spin")}
+                aria-hidden="true"
+              />
             </Button>
           )}
 
-          {_showExport && (
-            <Button variant="ghost" size="sm" onClick={handleExport} disabled={loading}>
-              <Download className="h-4 w-4" />
-              Export
+          {showExportAction && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onExport}
+              disabled={loading}
+              aria-label={t(ANALYTICS_KEYS.common.export)}
+            >
+              <Download className="udb-analytics__action-icon" aria-hidden="true" />
+              <span>{t(ANALYTICS_KEYS.common.export)}</span>
             </Button>
           )}
 
@@ -93,82 +122,35 @@ export const AnalyticsLayout = ({
         </div>
       </div>
 
-      {/* Loading State */}
       {loading && (
-        <div className="flex items-center justify-center py-24">
-          <Loader2 className="h-12 w-12 animate-spin text-muted-foreground" />
+        <div
+          className="udb-analytics__loading"
+          role="status"
+          aria-live="polite"
+        >
+          <Loader2 className="udb-spin udb-analytics__loading-spinner" aria-hidden="true" />
+          <span className="udb-sr-only">{t(ANALYTICS_KEYS.common.loading)}</span>
         </div>
       )}
 
-      {/* Metrics / KPI Cards */}
-      {!loading && (metrics || kpis) && (
-        <div className={cn(
-          "grid gap-4",
-          (metrics || kpis) && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-5"
-        )}>
-          {metrics?.map((metric) => (
+      {!loading && visibleMetrics.length > 0 && (
+        <div
+          className={cn(
+            "udb-analytics__metrics",
+            visibleMetrics.length >= 4 && "udb-analytics__metrics--wide",
+          )}
+        >
+          {visibleMetrics.map((metric) => (
             <MetricCard key={metric.id} metric={metric} />
           ))}
-
-          {/* Legacy kpis support */}
-          {kpis && !metrics && (
-            <>
-              <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 */}
       {!loading && charts && charts.length > 0 && (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {charts.map((chartConfig, index) => (
+        <div className="udb-analytics__charts">
+          {charts.map((chartConfig) => (
             <AnalyticsCard
-              key={index}
+              key={chartConfig.id}
               title={chartConfig.title}
               description={chartConfig.description}
               chart={chartConfig}
@@ -177,7 +159,6 @@ export const AnalyticsLayout = ({
         </div>
       )}
 
-      {/* Custom Content */}
       {!loading && children}
     </div>
   );

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

@@ -1,13 +1,17 @@
 /**
- * Metric Card Component
+ * MetricCard
  *
- * Displays a single metric with trend indicator
+ * Single KPI tile with a trend indicator. Colors and sizes come
+ * from `--u-*` tokens via the `udb-metric-*` classes (no hardcoded
+ * green/orange) and a11y role=button when interactive.
  */
 
 import { ArrowUp, ArrowDown, Minus } from "lucide-react";
-import { cn } from "@umituz/web-design-system/utils";
+import { useT } from "../../../i18n";
+import { cn } from "../../../primitives";
 import type { MetricCardProps } from "../types/analytics";
-import { formatMetricValue, calculateGrowth } from "../utils/analytics";
+import { formatMetricValue, calculateGrowth, getTrend } from "../utils/analytics";
+import { ANALYTICS_KEYS } from "../utils/i18nKeys";
 
 export const MetricCard = ({
   metric,
@@ -17,87 +21,61 @@ export const MetricCard = ({
   className,
   onClick,
 }: MetricCardProps) => {
-  const growth =
-    metric.previousValue !== undefined
-      ? calculateGrowth(metric.value, metric.previousValue)
-      : 0;
+  const t = useT();
 
-  const sizeClasses = {
-    sm: "p-4",
-    md: "p-6",
-    lg: "p-8",
-  };
+  const hasPrevious = metric.previousValue !== undefined;
+  const growth = hasPrevious ? calculateGrowth(metric.value, metric.previousValue as number) : null;
+  const trend = growth !== null ? getTrend(growth) : 'stable';
 
-  const titleSizeClasses = {
-    sm: "text-sm",
-    md: "text-base",
-    lg: "text-lg",
-  };
+  const TrendIcon = trend === 'up' ? ArrowUp : trend === 'down' ? ArrowDown : Minus;
 
-  const valueSizeClasses = {
-    sm: "text-xl",
-    md: "text-3xl",
-    lg: "text-4xl",
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!onClick) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClick();
+    }
   };
 
   return (
     <div
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      aria-label={onClick ? `${metric.name} — ${formatMetricValue(metric)}` : undefined}
       onClick={onClick}
+      onKeyDown={onClick ? handleKeyDown : undefined}
       className={cn(
-        "bg-background border border-border rounded-xl",
-        sizeClasses[size],
-        onClick && "cursor-pointer hover:border-primary/50 transition-colors",
-        className
+        'udb-metric',
+        `udb-metric--${size}`,
+        onClick && 'udb-metric--interactive',
+        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>
+      <div className="udb-metric__head">
+        <div className="udb-metric__body">
+          <p className="udb-metric__name">{metric.name}</p>
 
-          {/* Value */}
-          <div className={cn("font-bold text-foreground", valueSizeClasses[size])}>
-            {formatMetricValue(metric)}
-          </div>
+          <div className="udb-metric__value">{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"
-                )}
-              >
+          {showTrend && hasPrevious && growth !== null && (
+            <div
+              className={cn('udb-metric__trend', `udb-metric__trend--${trend}`)}
+              aria-label={t(ANALYTICS_KEYS.metric.change)}
+            >
+              <TrendIcon className="udb-metric__trend-icon" aria-hidden="true" />
+              <span className="udb-metric__trend-value">
                 {Math.abs(growth).toFixed(1)}%
               </span>
-              <span className="text-sm text-muted-foreground">
-                vs last period
+              <span className="udb-metric__trend-period">
+                {t(ANALYTICS_KEYS.common.lastPeriod)}
               </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 className="udb-metric__icon-box">
+            <metric.icon className="udb-metric__icon" aria-hidden="true" />
           </div>
         )}
       </div>

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

@@ -4,4 +4,10 @@
  * Export all analytics hooks
  */
 
-export { useAnalytics } from "./useAnalytics";
+export { useAnalytics, createStubAnalyticsApiClient } from "./useAnalytics";
+export type {
+  AnalyticsApiClient,
+  AnalyticsDataPayload,
+  UseAnalyticsOptions,
+  UseAnalyticsReturn,
+} from "./useAnalytics";