@umituz/web-dashboard 2.1.1 → 2.3.0

package/src/domains/analytics/utils/analytics.ts

@@ -0,0 +1,333 @@
+/**
+ * Analytics Utilities
+ *
+ * Helper functions for analytics operations
+ */
+
+import type { Metric, KPIData, DateRangePreset } from "../types/analytics";
+
+/**
+ * Format number with K/M/B suffixes
+ *
+ * @param num - Number to format
+ * @param decimals - Number of decimal places (default: 1)
+ * @returns Formatted string
+ */
+export function formatNumber(num: number, decimals: number = 1): string {
+  if (num >= 1_000_000_000) {
+    return (num / 1_000_000_000).toFixed(decimals) + "B";
+  }
+  if (num >= 1_000_000) {
+    return (num / 1_000_000).toFixed(decimals) + "M";
+  }
+  if (num >= 1_000) {
+    return (num / 1_000).toFixed(decimals) + "K";
+  }
+  return num.toFixed(decimals);
+}
+
+/**
+ * Format percentage
+ *
+ * @param value - Value to format as percentage
+ * @param decimals - Number of decimal places (default: 1)
+ * @returns Formatted string with % suffix
+ */
+export function formatPercentage(value: number, decimals: number = 1): string {
+  return `${value.toFixed(decimals)}%`;
+}
+
+/**
+ * Format currency
+ *
+ * @param value - Value to format
+ * @param currency - Currency code (default: USD)
+ * @param decimals - Number of decimal places (default: 0)
+ * @returns Formatted currency string
+ */
+export function formatCurrency(
+  value: number,
+  currency: string = "USD",
+  decimals: number = 0
+): string {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(value);
+}
+
+/**
+ * Calculate growth rate
+ *
+ * @param current - Current value
+ * @param previous - Previous value
+ * @returns Growth rate percentage
+ */
+export function calculateGrowth(current: number, previous: number): number {
+  if (previous === 0) return current > 0 ? 100 : 0;
+  return ((current - previous) / previous) * 100;
+}
+
+/**
+ * Get trend direction from growth
+ *
+ * @param growth - Growth rate
+ * @returns Trend direction
+ */
+export function getTrend(growth: number): "up" | "down" | "stable" {
+  if (growth > 0.1) return "up";
+  if (growth < -0.1) return "down";
+  return "stable";
+}
+
+/**
+ * Create KPI data object
+ *
+ * @param current - Current value
+ * @param previous - Previous value
+ * @returns KPI data object
+ */
+export function createKPI(current: number, previous: number): KPIData {
+  const growth = calculateGrowth(current, previous);
+  return {
+    current,
+    previous,
+    growth,
+  };
+}
+
+/**
+ * Create metric object
+ *
+ * @param id - Metric ID
+ * @param name - Metric name
+ * @param value - Current value
+ * @param previousValue - Previous value
+ * @param unit - Optional unit
+ * @returns Metric object
+ */
+export function createMetric(
+  id: string,
+  name: string,
+  value: number,
+  previousValue?: number,
+  unit?: string
+): Metric {
+  const growth = previousValue !== undefined ? calculateGrowth(value, previousValue) : 0;
+  return {
+    id,
+    name,
+    value,
+    previousValue,
+    unit,
+    trend: getTrend(growth),
+  };
+}
+
+/**
+ * Format metric value based on unit
+ *
+ * @param metric - Metric object
+ * @returns Formatted value string
+ */
+export function formatMetricValue(metric: Metric): string {
+  const { value, unit } = metric;
+
+  switch (unit) {
+    case "%":
+      return formatPercentage(value);
+    case "$":
+    case "€":
+    case "£":
+      return formatCurrency(value, unit === "$" ? "USD" : unit === "€" ? "EUR" : "GBP");
+    case "K":
+    case "M":
+    case "B":
+      return formatNumber(value);
+    default:
+      return value.toLocaleString();
+  }
+}
+
+/**
+ * Calculate conversion rate
+ *
+ * @param converted - Number of conversions
+ * @param total - Total number of users
+ * @returns Conversion rate percentage
+ */
+export function calculateConversionRate(converted: number, total: number): number {
+  if (total === 0) return 0;
+  return (converted / total) * 100;
+}
+
+/**
+ * Calculate drop-off rate
+ *
+ * @param current - Current step count
+ * @param previous - Previous step count
+ * @returns Drop-off rate percentage
+ */
+export function calculateDropOffRate(current: number, previous: number): number {
+  if (previous === 0) return 0;
+  return ((previous - current) / previous) * 100;
+}
+
+/**
+ * Generate date range preset
+ *
+ * @param label - Preset label
+ * @param days - Number of days
+ * @returns Date range preset
+ */
+export function createDateRangePreset(label: string, days: number): DateRangePreset {
+  const to = new Date();
+  const from = new Date();
+  from.setDate(from.getDate() - days);
+
+  return {
+    label,
+    value: label.toLowerCase().replace(/\s+/g, "-"),
+    days,
+  };
+}
+
+/**
+ * Get common date range presets
+ *
+ * @returns Array of date range presets
+ */
+export function getDateRangePresets(): DateRangePreset[] {
+  return [
+    createDateRangePreset("Last 7 Days", 7),
+    createDateRangePreset("Last 30 Days", 30),
+    createDateRangePreset("Last 90 Days", 90),
+    createDateRangePreset("This Year", 365),
+    createDateRangePreset("All Time", 365 * 10),
+  ];
+}
+
+/**
+ * Aggregate data by time period
+ *
+ * @param data - Array of data points with date field
+ * @param period - Aggregation period (day, week, month)
+ * @returns Aggregated data
+ */
+export function aggregateByPeriod(
+  data: Array<{ date: string; [key: string]: number | string }>,
+  period: "day" | "week" | "month" = "day"
+): Array<{ date: string; [key: string]: number }> {
+  const grouped = new Map<string, Array<typeof data[0]>>();
+
+  data.forEach((item) => {
+    const date = new Date(item.date);
+    let key: string;
+
+    if (period === "day") {
+      key = date.toISOString().split("T")[0];
+    } else if (period === "week") {
+      const weekStart = new Date(date);
+      weekStart.setDate(date.getDate() - date.getDay());
+      key = weekStart.toISOString().split("T")[0];
+    } else {
+      // month
+      key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
+    }
+
+    if (!grouped.has(key)) {
+      grouped.set(key, []);
+    }
+    grouped.get(key)!.push(item);
+  });
+
+  return Array.from(grouped.entries()).map(([date, items]) => {
+    const aggregated: any = { date };
+
+    // Sum all numeric fields
+    items.forEach((item) => {
+      Object.entries(item).forEach(([key, value]) => {
+        if (key !== "date" && typeof value === "number") {
+          aggregated[key] = (aggregated[key] || 0) + value;
+        }
+      });
+    });
+
+    return aggregated;
+  });
+}
+
+/**
+ * Calculate moving average
+ *
+ * @param data - Array of numbers
+ * @param window - Window size
+ * @returns Array of moving averages
+ */
+export function calculateMovingAverage(data: number[], window: number): number[] {
+  const result: number[] = [];
+
+  for (let i = 0; i < data.length; i++) {
+    const start = Math.max(0, i - window + 1);
+    const subset = data.slice(start, i + 1);
+    const avg = subset.reduce((sum, val) => sum + val, 0) / subset.length;
+    result.push(avg);
+  }
+
+  return result;
+}
+
+/**
+ * Detect outliers in data
+ *
+ * @param data - Array of numbers
+ * @param threshold - Standard deviation threshold (default: 2)
+ * @returns Array of outlier indices
+ */
+export function detectOutliers(data: number[], threshold: number = 2): number[] {
+  const mean = data.reduce((sum, val) => sum + val, 0) / data.length;
+  const variance = data.reduce((sum, val) => sum + Math.pow(val - mean, 2), 0) / data.length;
+  const stdDev = Math.sqrt(variance);
+
+  return data
+    .map((value, index) => ({ value, index }))
+    .filter(({ value }) => Math.abs(value - mean) > threshold * stdDev)
+    .map(({ index }) => index);
+}
+
+/**
+ * Round to decimal places
+ *
+ * @param num - Number to round
+ * @param decimals - Decimal places (default: 2)
+ * @returns Rounded number
+ */
+export function roundTo(num: number, decimals: number = 2): number {
+  const multiplier = Math.pow(10, decimals);
+  return Math.round(num * multiplier) / multiplier;
+}
+
+/**
+ * Generate random color
+ *
+ * @param index - Color index
+ * @param alpha - Alpha value (0-1)
+ * @returns HSL color string
+ */
+export function generateColor(index: number, alpha: number = 1): string {
+  const hue = (index * 137.508) % 360; // Golden angle approximation
+  return `hsla(${hue}, 70%, 50%, ${alpha})`;
+}
+
+/**
+ * Generate chart colors
+ *
+ * @param count - Number of colors
+ * @param alpha - Alpha value (0-1)
+ * @returns Array of color strings
+ */
+export function generateChartColors(count: number, alpha: number = 1): string[] {
+  return Array.from({ length: count }, (_, i) => generateColor(i, alpha));
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Analytics Utilities
+ *
+ * Export all analytics utilities
+ */
+
+export {
+  formatNumber,
+  formatPercentage,
+  formatCurrency,
+  calculateGrowth,
+  getTrend,
+  createKPI,
+  createMetric,
+  formatMetricValue,
+  calculateConversionRate,
+  calculateDropOffRate,
+  createDateRangePreset,
+  getDateRangePresets,
+  aggregateByPeriod,
+  calculateMovingAverage,
+  detectOutliers,
+  roundTo,
+  generateColor,
+  generateChartColors,
+} from "./analytics";

package/src/domains/billing/components/BillingLayout.tsx

@@ -0,0 +1,63 @@
+/**
+ * Billing Layout Component
+ *
+ * Layout wrapper for billing pages
+ */
+
+import { BrandLogo } from "../../layouts/components";
+import type { BillingLayoutProps } from "../types/billing";
+
+export const BillingLayout = ({ config, children }: BillingLayoutProps) => {
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      {/* Header */}
+      <header className="border-b border-border px-6 py-4 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <BrandLogo size={28} />
+          <span className="font-bold text-xl text-foreground">{config.brandName}</span>
+        </div>
+        <a
+          href="/dashboard"
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          Back to Dashboard
+        </a>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-1 container max-w-6xl mx-auto px-4 py-12">
+        {/* Page Title */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-foreground mb-2">
+            Billing & Subscription
+          </h1>
+          <p className="text-muted-foreground">
+            Manage your subscription, payment methods, and invoices
+          </p>
+        </div>
+
+        {/* Children Content */}
+        {children}
+      </main>
+
+      {/* Support Link */}
+      {config.supportEmail && (
+        <footer className="border-t border-border px-6 py-4">
+          <div className="container max-w-6xl mx-auto text-center">
+            <p className="text-sm text-muted-foreground">
+              Need help? Contact{" "}
+              <a
+                href={`mailto:${config.supportEmail}`}
+                className="text-primary hover:underline"
+              >
+                {config.supportEmail}
+              </a>
+            </p>
+          </div>
+        </footer>
+      )}
+    </div>
+  );
+};
+
+export default BillingLayout;

package/src/domains/billing/components/BillingPortal.tsx

@@ -0,0 +1,198 @@
+/**
+ * Billing Portal Component
+ *
+ * Main billing portal with tabs
+ */
+
+import { CreditCard, FileText, BarChart3, Settings, Loader2, AlertCircle } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import { Button } from "@umituz/web-design-system/atoms";
+import type { BillingPortalProps } from "../types/billing";
+import { UsageCard } from "./UsageCard";
+import { PaymentMethodsList } from "./PaymentMethodsList";
+import { InvoiceCard } from "./InvoiceCard";
+import { getDaysRemaining, getStatusColor, getStatusLabel, formatPrice } from "../utils/billing";
+
+export const BillingPortal = ({
+  billing,
+  loading = false,
+  error,
+  showTabs = true,
+  activeTab = "overview",
+  onTabChange,
+}: BillingPortalProps) => {
+  const tabs = [
+    { id: "overview", label: "Overview", icon: BarChart3 },
+    { id: "payment-methods", label: "Payment Methods", icon: CreditCard },
+    { id: "invoices", label: "Invoices", icon: FileText },
+    { id: "plan", label: "Plan", icon: Settings },
+  ];
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-24">
+        <Loader2 className="h-12 w-12 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center py-24 gap-4 text-destructive">
+        <AlertCircle className="h-6 w-6" />
+        <p>{error}</p>
+      </div>
+    );
+  }
+
+  if (!billing) return null;
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case "overview":
+        return (
+          <div className="space-y-6">
+            {/* Current Subscription */}
+            <div className="p-6 rounded-xl border border-border bg-background">
+              <h3 className="text-lg font-semibold text-foreground mb-4">
+                Current Subscription
+              </h3>
+              <div className="flex items-start justify-between">
+                <div>
+                  <p className="text-2xl font-bold text-foreground">
+                    {billing.subscription.plan.name}
+                  </p>
+                  <p className={cn("text-sm font-medium", getStatusColor(billing.subscription.status))}>
+                    {getStatusLabel(billing.subscription.status)}
+                  </p>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    {formatPrice(
+                      getPlanPrice(billing.subscription.plan, billing.subscription.cycle),
+                      billing.subscription.plan.currency
+                    )}
+                    /{billing.subscription.cycle}
+                  </p>
+                </div>
+                <div className="text-right">
+                  {billing.subscription.status === "trialing" && billing.subscription.trialEnd && (
+                    <p className="text-sm text-muted-foreground">
+                      {getDaysRemaining(billing.subscription.trialEnd)} days left in trial
+                    </p>
+                  )}
+                  {billing.upcomingInvoice && (
+                    <p className="text-sm text-muted-foreground">
+                      Next billing:{" "}
+                      {new Date(billing.upcomingInvoice.date).toLocaleDateString()}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Usage Metrics */}
+            {billing.usage.length > 0 && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {billing.usage.map((metric) => (
+                  <UsageCard key={metric.id} metric={metric} />
+                ))}
+              </div>
+            )}
+
+            {/* Upcoming Invoice */}
+            {billing.upcomingInvoice && (
+              <div className="p-6 rounded-xl border border-border bg-background">
+                <h3 className="text-lg font-semibold text-foreground mb-2">
+                  Upcoming Invoice
+                </h3>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-3xl font-bold text-foreground">
+                      {formatPrice(billing.upcomingInvoice.amount, billing.upcomingInvoice.currency)}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      Due {new Date(billing.upcomingInvoice.date).toLocaleDateString()}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        );
+
+      case "payment-methods":
+        return (
+          <PaymentMethodsList
+            paymentMethods={billing.paymentMethods}
+            onAddNew={() => console.log("Add payment method")}
+            onSetDefault={(id) => console.log("Set default:", id)}
+            onRemove={(id) => console.log("Remove:", id)}
+          />
+        );
+
+      case "invoices":
+        return (
+          <div className="space-y-4">
+            {billing.recentInvoices.length > 0 ? (
+              billing.recentInvoices.map((invoice) => (
+                <InvoiceCard
+                  key={invoice.id}
+                  invoice={invoice}
+                  onClick={(inv) => console.log("View invoice:", inv)}
+                />
+              ))
+            ) : (
+              <div className="text-center py-12 text-muted-foreground">
+                <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                <p>No invoices yet</p>
+              </div>
+            )}
+          </div>
+        );
+
+      case "plan":
+        return (
+          <div className="text-center py-12">
+            <p className="text-muted-foreground">Plan management coming soon...</p>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="w-full">
+      {/* Tabs */}
+      {showTabs && (
+        <div className="border-b border-border mb-6">
+          <div className="flex gap-6">
+            {tabs.map((tab) => {
+              const Icon = tab.icon;
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => onTabChange?.(tab.id)}
+                  className={cn(
+                    "flex items-center gap-2 pb-4 border-b-2 transition-colors",
+                    activeTab === tab.id
+                      ? "border-primary text-foreground"
+                      : "border-transparent text-muted-foreground hover:text-foreground"
+                  )}
+                >
+                  <Icon className="h-4 w-4" />
+                  <span className="font-medium">{tab.label}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Content */}
+      {renderContent()}
+    </div>
+  );
+};
+
+export default BillingPortal;