@umituz/web-dashboard 2.2.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "Dashboard Layout System - Customizable, themeable dashboard layouts and settings",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -33,6 +33,11 @@
     "./analytics/hooks": "./src/domains/analytics/hooks/index.ts",
     "./analytics/utils": "./src/domains/analytics/utils/index.ts",
     "./analytics/types": "./src/domains/analytics/types/index.ts",
+    "./billing": "./src/domains/billing/index.ts",
+    "./billing/components": "./src/domains/billing/components/index.ts",
+    "./billing/hooks": "./src/domains/billing/hooks/index.ts",
+    "./billing/utils": "./src/domains/billing/utils/index.ts",
+    "./billing/types": "./src/domains/billing/types/index.ts",
     "./package.json": "./package.json"
   },
   "files": [
@@ -85,6 +90,12 @@
     "kpi",
     "visualization",
     "recharts",
+    "billing",
+    "subscription",
+    "payment",
+    "invoices",
+    "pricing",
+    "plans",
     "react",
     "typescript",
     "components",

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

@@ -4,7 +4,7 @@
  * Configurable analytics page layout with KPIs and charts
  */
 
-import { RefreshCw, Download, Calendar } from "lucide-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";
@@ -13,11 +13,16 @@ import { MetricCard } from "./MetricCard";
 import { getDateRangePresets } from "../utils/analytics";
 
 export const AnalyticsLayout = ({
+  config,
   title,
   description,
+  metrics,
+  loading = false,
+  period,
+  onPeriodChange,
   showDateRange = true,
-  showRefresh = true,
-  showExport = true,
+  showRefresh,
+  showExport,
   kpis,
   charts,
   headerContent,
@@ -35,38 +40,50 @@ export const AnalyticsLayout = ({
     console.log("Refreshing analytics data...");
   };
 
+  // Use config settings if props not provided
+  const _showRefresh = showRefresh ?? config?.showRefresh ?? true;
+  const _showExport = showExport ?? config?.showExport ?? true;
+
   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>}
+          {(title || config?.brandName) && (
+            <h1 className="text-3xl font-bold text-foreground">
+              {title || `${config?.brandName || ''} Analytics`}
+            </h1>
+          )}
           {description && <p className="text-muted-foreground mt-1">{description}</p>}
         </div>
 
         {/* Actions */}
         <div className="flex items-center gap-3">
-          {showDateRange && (
+          {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" />
-              <select className="bg-transparent text-sm text-foreground outline-none">
-                {dateRangePresets.map((preset) => (
-                  <option key={preset.value} value={preset.value}>
-                    {preset.label}
+              <select
+                className="bg-transparent text-sm text-foreground outline-none"
+                value={period}
+                onChange={(e) => onPeriodChange(e.target.value)}
+              >
+                {config?.availablePeriods?.map((p) => (
+                  <option key={p} value={p}>
+                    {p === "7d" ? "7 Days" : p === "30d" ? "30 Days" : p === "90d" ? "90 Days" : p}
                   </option>
                 ))}
               </select>
             </div>
           )}
 
-          {showRefresh && (
-            <Button variant="ghost" size="sm" onClick={handleRefresh}>
-              <RefreshCw className="h-4 w-4" />
+          {_showRefresh && (
+            <Button variant="ghost" size="sm" onClick={handleRefresh} disabled={loading}>
+              <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
             </Button>
           )}
 
-          {showExport && (
-            <Button variant="ghost" size="sm" onClick={handleExport}>
+          {_showExport && (
+            <Button variant="ghost" size="sm" onClick={handleExport} disabled={loading}>
               <Download className="h-4 w-4" />
               Export
             </Button>
@@ -76,59 +93,78 @@ export const AnalyticsLayout = ({
         </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: "%",
-            }}
-          />
+      {/* Loading State */}
+      {loading && (
+        <div className="flex items-center justify-center py-24">
+          <Loader2 className="h-12 w-12 animate-spin text-muted-foreground" />
+        </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) => (
+            <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 */}
-      {charts && charts.length > 0 && (
+      {!loading && charts && charts.length > 0 && (
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {charts.map((chartConfig, index) => (
             <AnalyticsCard
@@ -142,7 +178,7 @@ export const AnalyticsLayout = ({
       )}
 
       {/* Custom Content */}
-      {children}
+      {!loading && children}
     </div>
   );
 };

package/src/domains/analytics/types/analytics.ts

@@ -225,10 +225,20 @@ export interface AnalyticsCardProps {
  * Analytics layout props
  */
 export interface AnalyticsLayoutProps {
+  /** Analytics configuration */
+  config?: AnalyticsConfig;
   /** Page title */
   title?: string;
   /** Page description */
   description?: string;
+  /** Metrics data */
+  metrics?: Metric[];
+  /** Loading state */
+  loading?: boolean;
+  /** Current period */
+  period?: string;
+  /** Period change handler */
+  onPeriodChange?: (period: string) => void;
   /** Date range selector */
   showDateRange?: boolean;
   /** Refresh button */
@@ -289,3 +299,38 @@ export interface AnalyticsExportOptions {
   /** Filename */
   filename?: string;
 }
+
+/**
+ * Analytics configuration
+ */
+export interface AnalyticsConfig {
+  /** Brand/application name */
+  brandName: string;
+  /** Default period selection */
+  defaultPeriod?: string;
+  /** Available period options */
+  availablePeriods?: string[];
+  /** Show export button */
+  showExport?: boolean;
+  /** Show refresh button */
+  showRefresh?: boolean;
+  /** Enable real-time updates */
+  enableRealTime?: boolean;
+  /** Metrics configuration */
+  metrics?: MetricConfig[];
+}
+
+/**
+ * Metric configuration
+ */
+export interface MetricConfig {
+  /** Metric identifier */
+  id: string;
+  /** Metric name */
+  name: string;
+  /** Unit type */
+  unit?: string;
+  /** Icon identifier */
+  icon?: string;
+}
+

package/src/domains/auth/components/AuthLayout.tsx

@@ -5,6 +5,7 @@
  */
 
 import { BrandLogo } from "../../layouts/components";
+import { cn } from "@umituz/web-design-system/utils";
 import type { AuthLayoutProps } from "../types/auth";
 
 export const AuthLayout = ({

package/src/domains/auth/components/LoginForm.tsx

@@ -18,8 +18,11 @@ export const LoginForm = ({
   showRememberMe = true,
   showForgotPassword = true,
   showRegisterLink = true,
+  showSocialLogin,
   onLoginSuccess,
   onLoginError,
+  onGoogleLogin,
+  onAppleLogin,
 }: LoginFormProps) => {
   const navigate = useNavigate();
   const [email, setEmail] = useState(defaultCredentials.email || "");
@@ -221,6 +224,62 @@ export const LoginForm = ({
           </button>
         </p>
       )}
+
+      {/* Social Login */}
+      {showSocialLogin && config.showSocialLogin && config.socialProviders && config.socialProviders.length > 0 && (
+        <>
+          {/* Divider */}
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-border" />
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-2 bg-background text-muted-foreground">
+                Or continue with
+              </span>
+            </div>
+          </div>
+
+          {/* Social Buttons */}
+          <div className="grid grid-cols-2 gap-3">
+            {config.socialProviders.map((provider) => (
+              <button
+                key={provider.id}
+                type="button"
+                className={cn(
+                  "flex items-center justify-center gap-2 px-4 py-3 rounded-lg border",
+                  "bg-background hover:bg-muted transition-colors",
+                  "text-sm font-medium text-foreground",
+                  isLoading && "opacity-50 cursor-not-allowed"
+                )}
+                onClick={async () => {
+                  if (provider.id === "google" && onGoogleLogin) {
+                    await onGoogleLogin();
+                  } else if (provider.id === "apple" && onAppleLogin) {
+                    await onAppleLogin();
+                  }
+                }}
+                disabled={isLoading}
+              >
+                {provider.icon === "google" && (
+                  <svg width="18" height="18" viewBox="0 0 24 24">
+                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/>
+                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+                  </svg>
+                )}
+                {provider.icon === "apple" && (
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="text-foreground">
+                    <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8.3-3.12 1.38-5.98 0-8.1-3.12-1.87-3.12-3.28-8.1.3-8.1.8-1.06 0-2.29.44-3.06.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                  </svg>
+                )}
+                <span>{provider.name}</span>
+              </button>
+            ))}
+          </div>
+        </>
+      )}
     </form>
   );
 };

package/src/domains/auth/components/RegisterForm.tsx

@@ -18,8 +18,11 @@ export const RegisterForm = ({
   showTerms = true,
   showLoginLink = true,
   requirePasswordConfirm = true,
+  showSocialLogin,
   onRegisterSuccess,
   onRegisterError,
+  onGoogleLogin,
+  onAppleLogin,
 }: RegisterFormProps) => {
   const navigate = useNavigate();
   const [name, setName] = useState(defaultData.name || "");
@@ -289,6 +292,62 @@ export const RegisterForm = ({
           </button>
         </p>
       )}
+
+      {/* Social Login */}
+      {showSocialLogin && config.showSocialLogin && config.socialProviders && config.socialProviders.length > 0 && (
+        <>
+          {/* Divider */}
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-border" />
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-2 bg-background text-muted-foreground">
+                Or continue with
+              </span>
+            </div>
+          </div>
+
+          {/* Social Buttons */}
+          <div className="grid grid-cols-2 gap-3">
+            {config.socialProviders.map((provider) => (
+              <button
+                key={provider.id}
+                type="button"
+                className={cn(
+                  "flex items-center justify-center gap-2 px-4 py-3 rounded-lg border",
+                  "bg-background hover:bg-muted transition-colors",
+                  "text-sm font-medium text-foreground",
+                  isLoading && "opacity-50 cursor-not-allowed"
+                )}
+                onClick={async () => {
+                  if (provider.id === "google" && onGoogleLogin) {
+                    await onGoogleLogin();
+                  } else if (provider.id === "apple" && onAppleLogin) {
+                    await onAppleLogin();
+                  }
+                }}
+                disabled={isLoading}
+              >
+                {provider.icon === "google" && (
+                  <svg width="18" height="18" viewBox="0 0 24 24">
+                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/>
+                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+                  </svg>
+                )}
+                {provider.icon === "apple" && (
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="text-foreground">
+                    <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8.3-3.12 1.38-5.98 0-8.1-3.12-1.87-3.12-3.28-8.1.3-8.1.8-1.06 0-2.29.44-3.06.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                  </svg>
+                )}
+                <span>{provider.name}</span>
+              </button>
+            ))}
+          </div>
+        </>
+      )}
     </form>
   );
 };

package/src/domains/auth/types/auth.ts

@@ -210,10 +210,16 @@ export interface LoginFormProps {
   showForgotPassword?: boolean;
   /** Show register link */
   showRegisterLink?: boolean;
+  /** Show social login buttons */
+  showSocialLogin?: boolean;
   /** On successful login */
   onLoginSuccess?: (user: User) => void | Promise<void>;
   /** On login error */
   onLoginError?: (error: string) => void;
+  /** Google login handler */
+  onGoogleLogin?: () => void | Promise<void>;
+  /** Apple login handler */
+  onAppleLogin?: () => void | Promise<void>;
 }
 
 /**
@@ -230,10 +236,16 @@ export interface RegisterFormProps {
   showLoginLink?: boolean;
   /** Require password confirmation */
   requirePasswordConfirm?: boolean;
+  /** Show social login buttons */
+  showSocialLogin?: boolean;
   /** On successful registration */
   onRegisterSuccess?: (user: User) => void | Promise<void>;
   /** On registration error */
   onRegisterError?: (error: string) => void;
+  /** Google login handler */
+  onGoogleLogin?: () => void | Promise<void>;
+  /** Apple login handler */
+  onAppleLogin?: () => void | Promise<void>;
 }
 
 /**

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;