@umituz/web-dashboard 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "2.2.0",
+  "version": "2.3.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/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;

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

@@ -0,0 +1,143 @@
+/**
+ * Invoice Card Component
+ *
+ * Display invoice information
+ */
+
+import { FileText, Download, ExternalLink } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import { Button } from "@umituz/web-design-system/atoms";
+import type { InvoiceCardProps } from "../types/billing";
+import { formatPrice, getInvoiceStatusColor, getInvoiceStatusLabel } from "../utils/billing";
+
+export const InvoiceCard = ({
+  invoice,
+  compact = false,
+  onClick,
+}: InvoiceCardProps) => {
+  const handleClick = () => {
+    onClick?.(invoice);
+  };
+
+  if (compact) {
+    return (
+      <div
+        onClick={handleClick}
+        className="flex items-center justify-between p-4 rounded-lg border border-border hover:border-primary/50 bg-background cursor-pointer transition-colors"
+      >
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center">
+            <FileText className="h-5 w-5 text-muted-foreground" />
+          </div>
+          <div>
+            <p className="font-medium text-foreground text-sm">
+              {invoice.number}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {new Date(invoice.date).toLocaleDateString()}
+            </p>
+          </div>
+        </div>
+
+        <div className="text-right">
+          <p className="font-bold text-foreground">
+            {formatPrice(invoice.amount, invoice.currency)}
+          </p>
+          <p className={cn("text-xs font-medium", getInvoiceStatusColor(invoice.status))}>
+            {getInvoiceStatusLabel(invoice.status)}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      onClick={handleClick}
+      className="p-6 rounded-xl border border-border hover:border-primary/50 bg-background cursor-pointer transition-colors"
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-12 rounded-lg bg-muted flex items-center justify-center">
+            <FileText className="h-6 w-6 text-muted-foreground" />
+          </div>
+          <div>
+            <p className="font-bold text-foreground">{invoice.number}</p>
+            <p className="text-sm text-muted-foreground">
+              {new Date(invoice.date).toLocaleDateString(undefined, {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })}
+            </p>
+          </div>
+        </div>
+
+        <div className="text-right">
+          <p className="text-2xl font-bold text-foreground">
+            {formatPrice(invoice.amount, invoice.currency)}
+          </p>
+          <p className={cn("text-sm font-medium", getInvoiceStatusColor(invoice.status))}>
+            {getInvoiceStatusLabel(invoice.status)}
+          </p>
+        </div>
+      </div>
+
+      {/* Items Preview */}
+      {invoice.items && invoice.items.length > 0 && (
+        <div className="space-y-2 mb-4">
+          {invoice.items.slice(0, 2).map((item, index) => (
+            <div key={index} className="flex justify-between text-sm">
+              <span className="text-muted-foreground">{item.description}</span>
+              <span className="text-foreground">
+                {formatPrice(item.amount, invoice.currency)}
+              </span>
+            </div>
+          ))}
+          {invoice.items.length > 2 && (
+            <p className="text-xs text-muted-foreground">
+              +{invoice.items.length - 2} more items
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex items-center justify-between pt-4 border-t border-border">
+        <p className="text-xs text-muted-foreground">
+          Due {new Date(invoice.dueDate).toLocaleDateString()}
+        </p>
+
+        <div className="flex items-center gap-2">
+          {invoice.invoiceUrl && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                window.open(invoice.invoiceUrl, "_blank");
+              }}
+            >
+              <ExternalLink className="h-4 w-4" />
+            </Button>
+          )}
+          {invoice.pdfUrl && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                window.open(invoice.pdfUrl, "_blank");
+              }}
+            >
+              <Download className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InvoiceCard;

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

@@ -0,0 +1,116 @@
+/**
+ * Payment Methods List Component
+ *
+ * Display and manage payment methods
+ */
+
+import { CreditCard, Trash2, Check, Plus, Loader2 } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import { Button } from "@umituz/web-design-system/atoms";
+import type { PaymentMethodsListProps } from "../types/billing";
+import { formatCardNumber, formatExpiry } from "../utils/billing";
+
+export const PaymentMethodsList = ({
+  paymentMethods,
+  loading = false,
+  onSetDefault,
+  onRemove,
+  onAddNew,
+}: PaymentMethodsListProps) => {
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (paymentMethods.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <CreditCard className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+        <p className="text-muted-foreground mb-6">No payment methods yet</p>
+        <Button onClick={onAddNew} variant="outline">
+          <Plus className="h-4 w-4 mr-2" />
+          Add Payment Method
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {paymentMethods.map((method) => (
+        <div
+          key={method.id}
+          className={cn(
+            "flex items-center justify-between p-4 rounded-xl border",
+            method.isDefault
+              ? "border-primary bg-primary/5"
+              : "border-border bg-background"
+          )}
+        >
+          <div className="flex items-center gap-4">
+            {/* Card Icon */}
+            <div className="w-12 h-8 rounded bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center">
+              {method.card && (
+                <CreditCard className="h-5 w-5 text-white" />
+              )}
+            </div>
+
+            {/* Card Details */}
+            <div>
+              <p className="font-medium text-foreground">
+                {method.card && formatCardNumber(method.card.last4, method.card.brand)}
+              </p>
+              <p className="text-sm text-muted-foreground">
+                Expires {method.card && formatExpiry(method.card.expiryMonth, method.card.expiryYear)}
+              </p>
+            </div>
+
+            {/* Default Badge */}
+            {method.isDefault && (
+              <span className="text-xs bg-primary text-primary-foreground px-2 py-1 rounded-full font-medium">
+                Default
+              </span>
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center gap-2">
+            {!method.isDefault && onSetDefault && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onSetDefault(method.id)}
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <Check className="h-4 w-4" />
+              </Button>
+            )}
+            {onRemove && paymentMethods.length > 1 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onRemove(method.id)}
+                className="text-muted-foreground hover:text-destructive"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
+        </div>
+      ))}
+
+      {/* Add New Button */}
+      {onAddNew && (
+        <Button onClick={onAddNew} variant="outline" className="w-full">
+          <Plus className="h-4 w-4 mr-2" />
+          Add Payment Method
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default PaymentMethodsList;