@umituz/web-dashboard 2.1.1 → 2.3.0

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;

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

@@ -0,0 +1,199 @@
+/**
+ * Plan Comparison Component
+ *
+ * Configurable plan selection and comparison
+ */
+
+import { Check, Loader2 } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import { Button } from "@umituz/web-design-system/atoms";
+import type { PlanComparisonProps } from "../types/billing";
+import { formatPrice, getPlanPrice, calculateDiscount, isPopularPlan, formatFeature } from "../utils/billing";
+
+export const PlanComparison = ({
+  plans,
+  selectedPlan,
+  cycle = "monthly",
+  showCycleToggle = true,
+  showFeatures = true,
+  onPlanSelect,
+  onCycleChange,
+  loading = false,
+}: PlanComparisonProps) => {
+  const handleCycleChange = (newCycle: "monthly" | "yearly") => {
+    onCycleChange?.(newCycle);
+  };
+
+  const handleSelectPlan = (planId: string) => {
+    if (!loading) {
+      onPlanSelect?.(planId);
+    }
+  };
+
+  return (
+    <div className="w-full space-y-8">
+      {/* Billing Cycle Toggle */}
+      {showCycleToggle && (
+        <div className="flex items-center justify-center">
+          <div className="inline-flex items-center bg-muted rounded-full p-1">
+            <button
+              onClick={() => handleCycleChange("monthly")}
+              className={cn(
+                "px-6 py-2 rounded-full text-sm font-medium transition-all",
+                cycle === "monthly"
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground"
+              )}
+            >
+              Monthly
+            </button>
+            <button
+              onClick={() => handleCycleChange("yearly")}
+              className={cn(
+                "px-6 py-2 rounded-full text-sm font-medium transition-all relative",
+                cycle === "yearly"
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground"
+              )}
+            >
+              Yearly
+              <span className="ml-1 text-xs bg-primary text-primary-foreground px-2 py-0.5 rounded-full">
+                Save 17%
+              </span>
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Plans Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {plans.map((plan) => {
+          const isSelected = selectedPlan === plan.id;
+          const price = getPlanPrice(plan, cycle);
+          const isPopular = isPopularPlan(plan, plans);
+          const discount = calculateDiscount(plan.monthlyPrice, plan.yearlyPrice);
+
+          return (
+            <div
+              key={plan.id}
+              className={cn(
+                "relative bg-background border-2 rounded-2xl p-6 transition-all",
+                isSelected
+                  ? "border-primary shadow-lg shadow-primary/20"
+                  : "border-border hover:border-primary/50",
+                isPopular && "border-primary shadow-lg shadow-primary/20"
+              )}
+            >
+              {/* Popular Badge */}
+              {isPopular && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                  <span className="bg-primary text-primary-foreground text-xs font-bold px-4 py-1 rounded-full">
+                    Most Popular
+                  </span>
+                </div>
+              )}
+
+              {/* Plan Badge */}
+              {plan.badge && (
+                <div className="mb-4">
+                  <span
+                    className={cn(
+                      "text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full",
+                      plan.badgeColor || "bg-primary/10 text-primary"
+                    )}
+                  >
+                    {plan.badge}
+                  </span>
+                </div>
+              )}
+
+              {/* Plan Name */}
+              <h3 className="text-2xl font-bold text-foreground mb-2">
+                {plan.name}
+              </h3>
+
+              {/* Description */}
+              <p className="text-muted-foreground text-sm mb-6">
+                {plan.description}
+              </p>
+
+              {/* Price */}
+              <div className="mb-6">
+                <div className="flex items-baseline gap-1">
+                  <span className="text-4xl font-extrabold text-foreground">
+                    {formatPrice(price, plan.currency)}
+                  </span>
+                  <span className="text-muted-foreground">
+                    /{cycle === "monthly" ? "mo" : "yr"}
+                  </span>
+                </div>
+
+                {cycle === "yearly" && (
+                  <p className="text-sm text-green-600 dark:text-green-500 mt-1">
+                    Save {discount}% with yearly billing
+                  </p>
+                )}
+              </div>
+
+              {/* Features */}
+              {showFeatures && plan.features.length > 0 && (
+                <ul className="space-y-3 mb-6 flex-1">
+                  {plan.features.map((feature, index) => {
+                    const { text, bold, included } = formatFeature(feature);
+
+                    return (
+                      <li
+                        key={index}
+                        className={cn(
+                          "flex items-start gap-3 text-sm",
+                          included === false && "opacity-50 line-through"
+                        )}
+                      >
+                        <Check
+                          className={cn(
+                            "h-5 w-5 shrink-0 mt-0.5",
+                            included === false
+                              ? "text-muted-foreground"
+                              : "text-primary"
+                          )}
+                        />
+                        <span className={cn(bold && "font-semibold", "text-foreground")}>
+                          {text}
+                        </span>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+
+              {/* Select Button */}
+              <Button
+                onClick={() => handleSelectPlan(plan.id)}
+                disabled={loading}
+                className={cn(
+                  "w-full rounded-full py-6",
+                  isSelected || isPopular
+                    ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                    : "bg-muted text-foreground hover:bg-muted/80"
+                )}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Processing...
+                  </>
+                ) : isSelected ? (
+                  "Current Plan"
+                ) : (
+                  "Select Plan"
+                )}
+              </Button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default PlanComparison;

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

@@ -0,0 +1,103 @@
+/**
+ * Usage Card Component
+ *
+ * Display usage metrics with progress bar
+ */
+
+import { AlertTriangle, TrendingUp } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import type { UsageCardProps } from "../types/billing";
+import { calculateUsagePercentage, isNearLimit, formatNumber } from "../utils/billing";
+
+export const UsageCard = ({
+  metric,
+  showProgress = true,
+  showLimit = true,
+}: UsageCardProps) => {
+  const percentage = calculateUsagePercentage(metric);
+  const nearLimit = isNearLimit(metric);
+  const isOverLimit = metric.current > metric.limit;
+
+  return (
+    <div className="p-6 rounded-xl border border-border bg-background">
+      {/* Header */}
+      <div className="flex items-start justify-between mb-4">
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">{metric.name}</p>
+          <p className="text-3xl font-bold text-foreground">
+            {formatNumber(metric.current)}
+            <span className="text-base font-normal text-muted-foreground ml-1">
+              {metric.unit}
+            </span>
+          </p>
+        </div>
+
+        {/* Warning Icon */}
+        {(nearLimit || isOverLimit) && (
+          <div
+            className={cn(
+              "w-10 h-10 rounded-lg flex items-center justify-center",
+              isOverLimit
+                ? "bg-destructive/10 text-destructive"
+                : "bg-orange-500/10 text-orange-600 dark:text-orange-500"
+            )}
+          >
+            {isOverLimit ? (
+              <AlertTriangle className="h-5 w-5" />
+            ) : (
+              <TrendingUp className="h-5 w-5" />
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Progress Bar */}
+      {showProgress && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between text-xs">
+            {showLimit && (
+              <span className="text-muted-foreground">
+                {formatNumber(metric.limit)} {metric.unit} limit
+              </span>
+            )}
+            <span
+              className={cn(
+                "font-medium",
+                isOverLimit
+                  ? "text-destructive"
+                  : nearLimit
+                  ? "text-orange-600 dark:text-orange-500"
+                  : "text-foreground"
+              )}
+            >
+              {percentage.toFixed(0)}%
+            </span>
+          </div>
+
+          <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
+            <div
+              className={cn(
+                "h-full transition-all duration-500",
+                isOverLimit
+                  ? "bg-destructive"
+                  : nearLimit
+                  ? "bg-orange-500"
+                  : "bg-primary"
+              )}
+              style={{ width: `${Math.min(percentage, 100)}%` }}
+            />
+          </div>
+
+          {/* Reset Info */}
+          {metric.resetAt && (
+            <p className="text-xs text-muted-foreground mt-2">
+              Resets {new Date(metric.resetAt).toLocaleDateString()}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UsageCard;

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

@@ -0,0 +1,12 @@
+/**
+ * Billing Components
+ *
+ * Export all billing components
+ */
+
+export { PlanComparison } from "./PlanComparison";
+export { PaymentMethodsList } from "./PaymentMethodsList";
+export { InvoiceCard } from "./InvoiceCard";
+export { UsageCard } from "./UsageCard";
+export { BillingPortal } from "./BillingPortal";
+export { BillingLayout } from "./BillingLayout";

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

@@ -0,0 +1,7 @@
+/**
+ * Billing Hooks
+ *
+ * Export all billing hooks
+ */
+
+export { useBilling } from "./useBilling";