@agent-relay/dashboard 2.0.81 → 2.0.82

package/src/components/layout/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Dashboard V2 Layout Components
+ * Components use Tailwind CSS for styling.
+ */
+
+export { Sidebar, type SidebarProps } from './Sidebar';
+export { Header, type HeaderProps } from './Header';

package/src/components/settings/BillingSettingsPanel.tsx

@@ -0,0 +1,564 @@
+/**
+ * Billing Settings Panel
+ *
+ * Manage subscription, view plans, and access billing portal.
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { cloudApi } from '../../lib/cloudApi';
+
+export interface BillingSettingsPanelProps {
+  onUpgrade?: () => void;
+}
+
+interface Plan {
+  tier: string;
+  name: string;
+  description: string;
+  price: { monthly: number; yearly: number };
+  features: string[];
+  limits: Record<string, number>;
+  recommended?: boolean;
+}
+
+interface Subscription {
+  id: string;
+  tier: string;
+  status: string;
+  currentPeriodStart: string;
+  currentPeriodEnd: string;
+  cancelAtPeriodEnd: boolean;
+  interval: 'month' | 'year';
+}
+
+interface Invoice {
+  id: string;
+  number: string;
+  amount: number;
+  status: string;
+  date: string;
+  pdfUrl?: string;
+}
+
+const TIER_COLORS: Record<string, string> = {
+  free: 'bg-bg-tertiary border-border-subtle text-text-muted',
+  pro: 'bg-accent-cyan/10 border-accent-cyan/30 text-accent-cyan',
+  team: 'bg-blue-900/30 border-blue-500/40 text-blue-400',
+  enterprise: 'bg-amber-400/10 border-amber-400/30 text-amber-400',
+};
+
+const TIER_DESCRIPTIONS: Record<string, string> = {
+  free: 'Free tier - upgrade to unlock more features',
+  pro: 'Professional plan with enhanced features',
+  team: 'Team plan with collaboration features',
+  enterprise: 'Enterprise plan with dedicated support',
+};
+
+// Tier ranking for comparison (higher = better plan)
+const TIER_RANK: Record<string, number> = {
+  free: 0,
+  pro: 1,
+  team: 2,
+  enterprise: 3,
+};
+
+export function BillingSettingsPanel({ onUpgrade }: BillingSettingsPanelProps) {
+  const [plans, setPlans] = useState<Plan[]>([]);
+  const [currentTier, setCurrentTier] = useState<string>('free');
+  const [subscription, setSubscription] = useState<Subscription | null>(null);
+  const [invoices, setInvoices] = useState<Invoice[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  // Billing interval toggle
+  const [billingInterval, setBillingInterval] = useState<'month' | 'year'>('month');
+
+  // Action loading states
+  const [checkoutLoading, setCheckoutLoading] = useState<string | null>(null);
+  const [portalLoading, setPortalLoading] = useState(false);
+  const [cancelLoading, setCancelLoading] = useState(false);
+  const [resumeLoading, setResumeLoading] = useState(false);
+
+  // Load billing data
+  useEffect(() => {
+    async function loadBillingData() {
+      setIsLoading(true);
+      setError(null);
+
+      const [plansResult, subscriptionResult, invoicesResult] = await Promise.all([
+        cloudApi.getBillingPlans(),
+        cloudApi.getSubscription(),
+        cloudApi.getInvoices(),
+      ]);
+
+      if (plansResult.success) {
+        setPlans(plansResult.data.plans);
+      }
+
+      if (subscriptionResult.success) {
+        setCurrentTier(subscriptionResult.data.tier);
+        setSubscription(subscriptionResult.data.subscription);
+        if (subscriptionResult.data.subscription?.interval) {
+          setBillingInterval(subscriptionResult.data.subscription.interval);
+        }
+      }
+
+      if (invoicesResult.success) {
+        setInvoices(invoicesResult.data.invoices);
+      }
+
+      if (!plansResult.success) {
+        setError(plansResult.error);
+      }
+
+      setIsLoading(false);
+    }
+
+    loadBillingData();
+  }, []);
+
+  // Start checkout for plan upgrade
+  const handleCheckout = useCallback(async (tier: string) => {
+    setCheckoutLoading(tier);
+
+    const result = await cloudApi.createCheckoutSession(tier, billingInterval);
+
+    if (result.success && result.data.checkoutUrl) {
+      // Redirect to Stripe checkout
+      window.location.href = result.data.checkoutUrl;
+    } else if (!result.success) {
+      setError(result.error);
+      setCheckoutLoading(null);
+    }
+  }, [billingInterval]);
+
+  // Open billing portal
+  const handleOpenPortal = useCallback(async () => {
+    setPortalLoading(true);
+
+    const result = await cloudApi.createBillingPortal();
+
+    if (result.success && result.data.portalUrl) {
+      window.location.href = result.data.portalUrl;
+    } else if (!result.success) {
+      setError(result.error);
+    }
+
+    setPortalLoading(false);
+  }, []);
+
+  // Cancel subscription
+  const handleCancel = useCallback(async () => {
+    const confirmed = window.confirm(
+      'Are you sure you want to cancel your subscription? You will retain access until the end of your billing period.'
+    );
+    if (!confirmed) return;
+
+    setCancelLoading(true);
+
+    const result = await cloudApi.cancelSubscription();
+
+    if (result.success) {
+      setSubscription((prev) =>
+        prev ? { ...prev, cancelAtPeriodEnd: true } : null
+      );
+      setSuccessMessage(result.data.message);
+      setTimeout(() => setSuccessMessage(null), 5000);
+    } else {
+      setError(result.error);
+    }
+
+    setCancelLoading(false);
+  }, []);
+
+  // Resume subscription
+  const handleResume = useCallback(async () => {
+    setResumeLoading(true);
+
+    const result = await cloudApi.resumeSubscription();
+
+    if (result.success) {
+      setSubscription((prev) =>
+        prev ? { ...prev, cancelAtPeriodEnd: false } : null
+      );
+      setSuccessMessage(result.data.message);
+      setTimeout(() => setSuccessMessage(null), 3000);
+    } else {
+      setError(result.error);
+    }
+
+    setResumeLoading(false);
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <LoadingSpinner />
+        <span className="ml-3 text-text-muted">Loading billing information...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Messages */}
+      {error && (
+        <div className="p-3 bg-error/10 border border-error/30 rounded-lg text-error text-sm">
+          {error}
+          <button
+            onClick={() => setError(null)}
+            className="ml-2 text-error/70 hover:text-error"
+          >
+            &times;
+          </button>
+        </div>
+      )}
+
+      {successMessage && (
+        <div className="p-3 bg-success/10 border border-success/30 rounded-lg text-success text-sm">
+          {successMessage}
+        </div>
+      )}
+
+      {/* Current Plan */}
+      <div>
+        <h3 className="text-sm font-semibold text-text-muted uppercase tracking-wide mb-4">
+          Current Plan
+        </h3>
+        <div className={`p-4 md:p-6 rounded-lg border-2 ${TIER_COLORS[currentTier]}`}>
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div>
+              <h4 className="text-lg md:text-xl font-bold text-text-primary capitalize">
+                {currentTier} Plan
+              </h4>
+              {subscription ? (
+                <p className="text-xs md:text-sm text-text-secondary mt-1">
+                  {subscription.cancelAtPeriodEnd ? (
+                    <span className="text-amber-400">
+                      Cancels on {new Date(subscription.currentPeriodEnd).toLocaleDateString()}
+                    </span>
+                  ) : (
+                    <>
+                      Renews on {new Date(subscription.currentPeriodEnd).toLocaleDateString()}
+                      <span className="text-text-muted ml-2">
+                        ({subscription.interval === 'year' ? 'Yearly' : 'Monthly'})
+                      </span>
+                    </>
+                  )}
+                </p>
+              ) : (
+                <p className="text-xs md:text-sm text-text-muted mt-1">
+                  {TIER_DESCRIPTIONS[currentTier] || TIER_DESCRIPTIONS.free}
+                </p>
+              )}
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              {subscription && !subscription.cancelAtPeriodEnd && (
+                <button
+                  onClick={handleCancel}
+                  disabled={cancelLoading}
+                  className="px-3 md:px-4 py-2 bg-bg-hover text-text-secondary rounded-lg text-xs md:text-sm font-medium hover:text-text-primary disabled:opacity-50 transition-colors"
+                >
+                  {cancelLoading ? 'Canceling...' : 'Cancel Plan'}
+                </button>
+              )}
+              {subscription?.cancelAtPeriodEnd && (
+                <button
+                  onClick={handleResume}
+                  disabled={resumeLoading}
+                  className="px-3 md:px-4 py-2 bg-success/20 text-success rounded-lg text-xs md:text-sm font-medium hover:bg-success/30 disabled:opacity-50 transition-colors"
+                >
+                  {resumeLoading ? 'Resuming...' : 'Resume Plan'}
+                </button>
+              )}
+              {subscription && (
+                <button
+                  onClick={handleOpenPortal}
+                  disabled={portalLoading}
+                  className="px-3 md:px-4 py-2 bg-accent-cyan text-bg-deep rounded-lg text-xs md:text-sm font-medium hover:bg-accent-cyan/90 disabled:opacity-50 transition-colors"
+                >
+                  {portalLoading ? 'Opening...' : 'Manage Billing'}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Billing Interval Toggle */}
+      <div className="flex items-center justify-center gap-4">
+        <span
+          className={`text-sm font-medium ${
+            billingInterval === 'month' ? 'text-text-primary' : 'text-text-muted'
+          }`}
+        >
+          Monthly
+        </span>
+        <button
+          onClick={() => setBillingInterval((prev) => (prev === 'month' ? 'year' : 'month'))}
+          className="relative w-14 h-7 bg-bg-tertiary rounded-full transition-colors"
+        >
+          <span
+            className={`absolute top-1 w-5 h-5 bg-accent-cyan rounded-full transition-transform ${
+              billingInterval === 'year' ? 'translate-x-8' : 'translate-x-1'
+            }`}
+          />
+        </button>
+        <span
+          className={`text-sm font-medium ${
+            billingInterval === 'year' ? 'text-text-primary' : 'text-text-muted'
+          }`}
+        >
+          Yearly
+          <span className="ml-1 text-xs text-success">(Save 20%)</span>
+        </span>
+      </div>
+
+      {/* Available Plans */}
+      <div>
+        <h3 className="text-sm font-semibold text-text-muted uppercase tracking-wide mb-4">
+          Available Plans
+        </h3>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {plans
+            .filter((p) => p.tier !== 'free')
+            .map((plan) => {
+              // Only show recommended styling for upgrades, not downgrades
+              const isUpgrade = (TIER_RANK[plan.tier] || 0) > (TIER_RANK[currentTier] || 0);
+              const showRecommended = plan.recommended && isUpgrade;
+              const isDowngrade = (TIER_RANK[plan.tier] || 0) < (TIER_RANK[currentTier] || 0);
+
+              return (
+                <div
+                  key={plan.tier}
+                  className={`relative p-6 rounded-lg border ${
+                    showRecommended
+                      ? 'border-accent-cyan shadow-glow-cyan'
+                      : 'border-border-subtle'
+                  } bg-bg-tertiary`}
+                >
+                  {showRecommended && (
+                    <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-accent-cyan text-bg-deep text-xs font-bold rounded-full">
+                      Most Popular
+                    </div>
+                  )}
+
+                  <h4 className="text-lg font-bold text-text-primary">{plan.name}</h4>
+                  <p className="text-xs text-text-muted mt-1 mb-4">{plan.description}</p>
+
+                  <div className="mb-4">
+                    <span className="text-3xl font-bold text-text-primary">
+                      ${billingInterval === 'year' ? plan.price.yearly : plan.price.monthly}
+                    </span>
+                    <span className="text-text-muted">
+                      /{billingInterval === 'year' ? 'year' : 'month'}
+                    </span>
+                  </div>
+
+                  <ul className="space-y-2 mb-6">
+                    {plan.features.slice(0, 5).map((feature, i) => (
+                      <li key={i} className="flex items-start gap-2 text-sm text-text-secondary">
+                        <CheckIcon className="text-success shrink-0 mt-0.5" />
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+
+                  {currentTier === plan.tier ? (
+                    <button
+                      disabled
+                      className="w-full py-2.5 bg-bg-hover text-text-muted rounded-lg text-sm font-medium cursor-default"
+                    >
+                      Current Plan
+                    </button>
+                  ) : (
+                    <button
+                      onClick={() => handleCheckout(plan.tier)}
+                      disabled={checkoutLoading !== null}
+                      className={`w-full py-2.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 ${
+                        showRecommended
+                          ? 'bg-accent-cyan text-bg-deep hover:bg-accent-cyan/90'
+                          : 'bg-bg-hover text-text-primary hover:bg-bg-active'
+                      }`}
+                    >
+                      {checkoutLoading === plan.tier
+                        ? 'Loading...'
+                        : isDowngrade
+                        ? 'Downgrade'
+                        : 'Upgrade'}
+                    </button>
+                  )}
+                </div>
+              );
+            })}
+        </div>
+      </div>
+
+      {/* Enterprise CTA */}
+      <div className="p-4 md:p-6 bg-gradient-to-r from-amber-400/10 to-accent-purple/10 border border-amber-400/20 rounded-lg">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <h4 className="text-base md:text-lg font-bold text-text-primary">Enterprise</h4>
+            <p className="text-xs md:text-sm text-text-secondary mt-1">
+              Custom solutions for large teams with dedicated support, SLA, and custom integrations.
+            </p>
+          </div>
+          <a
+            href="mailto:enterprise@agent-relay.com"
+            className="px-4 md:px-6 py-2 md:py-2.5 bg-amber-400 text-bg-deep rounded-lg text-xs md:text-sm font-bold hover:bg-amber-300 transition-colors text-center shrink-0"
+          >
+            Contact Sales
+          </a>
+        </div>
+      </div>
+
+      {/* Invoices */}
+      {invoices.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-text-muted uppercase tracking-wide mb-4">
+            Billing History
+          </h3>
+
+          {/* Desktop Table */}
+          <div className="hidden md:block bg-bg-tertiary rounded-lg overflow-hidden">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-border-subtle">
+                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-muted uppercase">
+                    Invoice
+                  </th>
+                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-muted uppercase">
+                    Date
+                  </th>
+                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-muted uppercase">
+                    Amount
+                  </th>
+                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-muted uppercase">
+                    Status
+                  </th>
+                  <th className="text-right px-4 py-3 text-xs font-semibold text-text-muted uppercase">
+
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {invoices.map((invoice) => (
+                  <tr key={invoice.id} className="border-b border-border-subtle last:border-0">
+                    <td className="px-4 py-3 text-sm text-text-primary font-medium">
+                      {invoice.number}
+                    </td>
+                    <td className="px-4 py-3 text-sm text-text-secondary">
+                      {new Date(invoice.date).toLocaleDateString()}
+                    </td>
+                    <td className="px-4 py-3 text-sm text-text-primary">
+                      ${(invoice.amount / 100).toFixed(2)}
+                    </td>
+                    <td className="px-4 py-3">
+                      <span
+                        className={`text-xs px-2 py-1 rounded-full ${
+                          invoice.status === 'paid'
+                            ? 'bg-success/20 text-success'
+                            : invoice.status === 'open'
+                            ? 'bg-amber-400/20 text-amber-400'
+                            : 'bg-error/20 text-error'
+                        }`}
+                      >
+                        {invoice.status}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      {invoice.pdfUrl && (
+                        <a
+                          href={invoice.pdfUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-xs text-accent-cyan hover:underline"
+                        >
+                          Download
+                        </a>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Mobile Card Layout */}
+          <div className="md:hidden space-y-3">
+            {invoices.map((invoice) => (
+              <div key={invoice.id} className="bg-bg-tertiary rounded-lg p-4">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm font-medium text-text-primary">{invoice.number}</span>
+                  <span
+                    className={`text-xs px-2 py-1 rounded-full ${
+                      invoice.status === 'paid'
+                        ? 'bg-success/20 text-success'
+                        : invoice.status === 'open'
+                        ? 'bg-amber-400/20 text-amber-400'
+                        : 'bg-error/20 text-error'
+                    }`}
+                  >
+                    {invoice.status}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between text-xs">
+                  <span className="text-text-muted">{new Date(invoice.date).toLocaleDateString()}</span>
+                  <span className="text-text-primary font-medium">${(invoice.amount / 100).toFixed(2)}</span>
+                </div>
+                {invoice.pdfUrl && (
+                  <a
+                    href={invoice.pdfUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="mt-3 block text-center text-xs text-accent-cyan py-2 border border-accent-cyan/30 rounded-lg hover:bg-accent-cyan/10 transition-colors"
+                  >
+                    Download PDF
+                  </a>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Icons
+function LoadingSpinner() {
+  return (
+    <svg className="animate-spin h-5 w-5 text-accent-cyan" viewBox="0 0 24 24">
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="2"
+        fill="none"
+        strokeDasharray="32"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function CheckIcon({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}