@umituz/web-dashboard 3.2.4 → 4.0.0

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

@@ -1,116 +0,0 @@
-/**
- * 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

@@ -1,199 +0,0 @@
-/**
- * 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

@@ -1,103 +0,0 @@
-/**
- * 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

@@ -1,13 +0,0 @@
-/**
- * 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";
-export { BillingPage } from "./BillingPage";

package/src/domains/billing/constants/billing.ts

@@ -1,69 +0,0 @@
-/**
- * Billing Constants
- *
- * Centralized constants for billing domain to avoid hardcoded strings
- */
-
-/**
- * Subscription status constants
- */
-export const SUBSCRIPTION_STATUS = {
-  ACTIVE: "active",
-  TRIALING: "trialing",
-  PAST_DUE: "past_due",
-  CANCELED: "canceled",
-  UNPAID: "unpaid",
-  INCOMPLETE: "incomplete",
-  REVOKED: "revoked",
-} as const;
-
-export type SubscriptionStatus = typeof SUBSCRIPTION_STATUS[keyof typeof SUBSCRIPTION_STATUS];
-
-/**
- * Invoice status constants
- */
-export const INVOICE_STATUS = {
-  DRAFT: "draft",
-  OPEN: "open",
-  PAID: "paid",
-  VOID: "void",
-  UNCOLLECTIBLE: "uncollectible",
-  REFUNDED: "refunded",
-} as const;
-
-export type InvoiceStatus = typeof INVOICE_STATUS[keyof typeof INVOICE_STATUS];
-
-/**
- * Billing cycle constants
- */
-export const BILLING_CYCLE = {
-  MONTHLY: "monthly",
-  YEARLY: "yearly",
-} as const;
-
-export type BillingCycle = typeof BILLING_CYCLE[keyof typeof BILLING_CYCLE];
-
-/**
- * Currency constants
- */
-export const CURRENCY = {
-  USD: "USD",
-  EUR: "EUR",
-  GBP: "GBP",
-  TRY: "TRY",
-  JPY: "JPY",
-} as const;
-
-export type Currency = typeof CURRENCY[keyof typeof CURRENCY];
-
-/**
- * Plan type constants
- */
-export const PLAN_TYPE = {
-  STANDARD: "standard",
-  PRO: "pro",
-  BUSINESS: "business",
-  ENTERPRISE: "enterprise",
-} as const;
-
-export type PlanType = typeof PLAN_TYPE[keyof typeof PLAN_TYPE];

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

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