796 lines
38 KiB
TypeScript
796 lines
38 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Crown, Users, MapPin, Package, TrendingUp, RefreshCw, AlertCircle, CheckCircle, ArrowRight, Star, ExternalLink, Download, CreditCard, X, Activity, Database, Zap, HardDrive, ShoppingCart, ChefHat } from 'lucide-react';
|
|
import { Button, Card, Badge, Modal } from '../../../../components/ui';
|
|
import { PageHeader } from '../../../../components/layout';
|
|
import { useAuthUser } from '../../../../stores/auth.store';
|
|
import { useCurrentTenant } from '../../../../stores';
|
|
import { useToast } from '../../../../hooks/ui/useToast';
|
|
import { subscriptionService, type UsageSummary, type AvailablePlans } from '../../../../api';
|
|
import { SubscriptionPricingCards } from '../../../../components/subscription/SubscriptionPricingCards';
|
|
|
|
const SubscriptionPage: React.FC = () => {
|
|
const user = useAuthUser();
|
|
const currentTenant = useCurrentTenant();
|
|
const { addToast } = useToast();
|
|
|
|
const [usageSummary, setUsageSummary] = useState<UsageSummary | null>(null);
|
|
const [availablePlans, setAvailablePlans] = useState<AvailablePlans | null>(null);
|
|
const [subscriptionLoading, setSubscriptionLoading] = useState(false);
|
|
const [upgradeDialogOpen, setUpgradeDialogOpen] = useState(false);
|
|
const [selectedPlan, setSelectedPlan] = useState<string>('');
|
|
const [upgrading, setUpgrading] = useState(false);
|
|
const [cancellationDialogOpen, setCancellationDialogOpen] = useState(false);
|
|
const [cancelling, setCancelling] = useState(false);
|
|
const [invoices, setInvoices] = useState<any[]>([]);
|
|
const [invoicesLoading, setInvoicesLoading] = useState(false);
|
|
|
|
// Load subscription data on component mount
|
|
React.useEffect(() => {
|
|
loadSubscriptionData();
|
|
}, []);
|
|
|
|
const loadSubscriptionData = async () => {
|
|
const tenantId = currentTenant?.id || user?.tenant_id;
|
|
|
|
if (!tenantId) {
|
|
addToast('No se encontró información del tenant', { type: 'error' });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setSubscriptionLoading(true);
|
|
const [usage, plans] = await Promise.all([
|
|
subscriptionService.getUsageSummary(tenantId),
|
|
subscriptionService.fetchAvailablePlans()
|
|
]);
|
|
|
|
// FIX: Handle demo mode or missing subscription data
|
|
if (!usage || !usage.usage) {
|
|
// If no usage data, likely a demo tenant - create mock data
|
|
const mockUsage: UsageSummary = {
|
|
plan: 'starter',
|
|
status: 'active',
|
|
billing_cycle: 'monthly',
|
|
monthly_price: 0,
|
|
next_billing_date: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
|
|
usage: {
|
|
users: {
|
|
current: 1,
|
|
limit: 5,
|
|
unlimited: false,
|
|
usage_percentage: 20
|
|
},
|
|
locations: {
|
|
current: 1,
|
|
limit: 1,
|
|
unlimited: false,
|
|
usage_percentage: 100
|
|
},
|
|
products: {
|
|
current: 0,
|
|
limit: 50,
|
|
unlimited: false,
|
|
usage_percentage: 0
|
|
},
|
|
recipes: {
|
|
current: 0,
|
|
limit: 50,
|
|
unlimited: false,
|
|
usage_percentage: 0
|
|
},
|
|
suppliers: {
|
|
current: 0,
|
|
limit: 20,
|
|
unlimited: false,
|
|
usage_percentage: 0
|
|
},
|
|
training_jobs_today: {
|
|
current: 0,
|
|
limit: 1,
|
|
unlimited: false,
|
|
usage_percentage: 0
|
|
},
|
|
forecasts_today: {
|
|
current: 0,
|
|
limit: 10,
|
|
unlimited: false,
|
|
usage_percentage: 0
|
|
},
|
|
api_calls_this_hour: {
|
|
current: 0,
|
|
limit: 100,
|
|
unlimited: false,
|
|
usage_percentage: 0
|
|
},
|
|
file_storage_used_gb: {
|
|
current: 0,
|
|
limit: 5,
|
|
unlimited: false,
|
|
usage_percentage: 0
|
|
}
|
|
}
|
|
};
|
|
setUsageSummary(mockUsage);
|
|
} else {
|
|
setUsageSummary(usage);
|
|
}
|
|
setAvailablePlans(plans);
|
|
} catch (error) {
|
|
console.error('Error loading subscription data:', error);
|
|
addToast("No se pudo cargar la información de suscripción", { type: 'error' });
|
|
} finally {
|
|
setSubscriptionLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleUpgradeClick = (planKey: string) => {
|
|
setSelectedPlan(planKey);
|
|
setUpgradeDialogOpen(true);
|
|
};
|
|
|
|
const handleUpgradeConfirm = async () => {
|
|
const tenantId = currentTenant?.id || user?.tenant_id;
|
|
|
|
if (!tenantId || !selectedPlan) {
|
|
addToast('Información de tenant no disponible', { type: 'error' });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setUpgrading(true);
|
|
|
|
const validation = await subscriptionService.validatePlanUpgrade(
|
|
tenantId,
|
|
selectedPlan
|
|
);
|
|
|
|
if (!validation.can_upgrade) {
|
|
addToast(validation.reason || 'No se puede actualizar el plan', { type: 'error' });
|
|
return;
|
|
}
|
|
|
|
const result = await subscriptionService.upgradePlan(tenantId, selectedPlan);
|
|
|
|
if (result.success) {
|
|
addToast(result.message, { type: 'success' });
|
|
|
|
await loadSubscriptionData();
|
|
setUpgradeDialogOpen(false);
|
|
setSelectedPlan('');
|
|
} else {
|
|
addToast('Error al cambiar el plan', { type: 'error' });
|
|
}
|
|
} catch (error) {
|
|
console.error('Error upgrading plan:', error);
|
|
addToast('Error al procesar el cambio de plan', { type: 'error' });
|
|
} finally {
|
|
setUpgrading(false);
|
|
}
|
|
};
|
|
|
|
const handleCancellationClick = () => {
|
|
setCancellationDialogOpen(true);
|
|
};
|
|
|
|
const handleCancelSubscription = async () => {
|
|
const tenantId = currentTenant?.id || user?.tenant_id;
|
|
|
|
if (!tenantId) {
|
|
addToast('Información de tenant no disponible', { type: 'error' });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setCancelling(true);
|
|
|
|
const result = await subscriptionService.cancelSubscription(tenantId, 'User requested cancellation');
|
|
|
|
if (result.success) {
|
|
const daysRemaining = result.days_remaining;
|
|
const effectiveDate = new Date(result.cancellation_effective_date).toLocaleDateString('es-ES', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
|
|
addToast(
|
|
`Suscripción cancelada. Acceso de solo lectura a partir del ${effectiveDate} (${daysRemaining} días restantes)`,
|
|
{ type: 'success' }
|
|
);
|
|
}
|
|
|
|
await loadSubscriptionData();
|
|
setCancellationDialogOpen(false);
|
|
} catch (error) {
|
|
console.error('Error cancelling subscription:', error);
|
|
addToast('Error al cancelar la suscripción', { type: 'error' });
|
|
} finally {
|
|
setCancelling(false);
|
|
}
|
|
};
|
|
|
|
const loadInvoices = async () => {
|
|
const tenantId = currentTenant?.id || user?.tenant_id;
|
|
|
|
if (!tenantId) {
|
|
addToast('No se encontró información del tenant', { type: 'error' });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setInvoicesLoading(true);
|
|
// In a real implementation, this would call an API endpoint to get invoices
|
|
// const invoices = await subscriptionService.getInvoices(tenantId);
|
|
|
|
// For now, we'll simulate some invoices
|
|
setInvoices([
|
|
{ id: 'inv_001', date: '2023-10-01', amount: 49.00, status: 'paid', description: 'Plan Starter Mensual' },
|
|
{ id: 'inv_002', date: '2023-09-01', amount: 49.00, status: 'paid', description: 'Plan Starter Mensual' },
|
|
{ id: 'inv_003', date: '2023-08-01', amount: 49.00, status: 'paid', description: 'Plan Starter Mensual' },
|
|
]);
|
|
} catch (error) {
|
|
console.error('Error loading invoices:', error);
|
|
addToast('Error al cargar las facturas', { type: 'error' });
|
|
} finally {
|
|
setInvoicesLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDownloadInvoice = (invoiceId: string) => {
|
|
// In a real implementation, this would download the actual invoice
|
|
console.log(`Downloading invoice: ${invoiceId}`);
|
|
addToast(`Descargando factura ${invoiceId}`, { type: 'info' });
|
|
};
|
|
|
|
const ProgressBar: React.FC<{ value: number; className?: string }> = ({ value, className = '' }) => {
|
|
const getProgressColor = () => {
|
|
if (value >= 90) return 'bg-red-500';
|
|
if (value >= 80) return 'bg-yellow-500';
|
|
return 'bg-green-500';
|
|
};
|
|
|
|
return (
|
|
<div className={`w-full bg-[var(--bg-tertiary)] border border-[var(--border-secondary)] rounded-full h-3 ${className}`}>
|
|
<div
|
|
className={`${getProgressColor()} h-full rounded-full transition-all duration-500 relative`}
|
|
style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent to-white/20 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
<PageHeader
|
|
title="Suscripción y Facturación"
|
|
description="Gestiona tu suscripción, uso de recursos y facturación"
|
|
/>
|
|
|
|
{subscriptionLoading ? (
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<RefreshCw className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
|
|
<p className="text-[var(--text-secondary)]">Cargando información de suscripción...</p>
|
|
</div>
|
|
</div>
|
|
) : !usageSummary || !availablePlans ? (
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<AlertCircle className="w-12 h-12 text-[var(--text-tertiary)]" />
|
|
<div className="text-center">
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">No se pudo cargar la información</h3>
|
|
<p className="text-[var(--text-secondary)] mb-4">Hubo un problema al cargar los datos de suscripción</p>
|
|
<Button onClick={loadSubscriptionData} variant="primary">
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Reintentar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Current Plan Overview */}
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center">
|
|
<Crown className="w-5 h-5 mr-2 text-yellow-500" />
|
|
Plan Actual: {usageSummary.plan}
|
|
</h3>
|
|
<Badge
|
|
variant={usageSummary.status === 'active' ? 'success' : 'default'}
|
|
className="text-sm font-medium"
|
|
>
|
|
{usageSummary.status === 'active' ? 'Activo' : usageSummary.status}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-[var(--text-secondary)]">Precio Mensual</span>
|
|
<span className="font-semibold text-[var(--text-primary)]">{subscriptionService.formatPrice(usageSummary.monthly_price)}</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-[var(--text-secondary)]">Próxima Facturación</span>
|
|
<span className="font-medium text-[var(--text-primary)]">
|
|
{new Date(usageSummary.next_billing_date).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' })}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-[var(--text-secondary)]">Usuarios</span>
|
|
<span className="font-medium text-[var(--text-primary)]">
|
|
{usageSummary.usage.users.current}/{usageSummary.usage.users.unlimited ? '∞' : usageSummary.usage.users.limit}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-[var(--text-secondary)]">Ubicaciones</span>
|
|
<span className="font-medium text-[var(--text-primary)]">
|
|
{usageSummary.usage.locations.current}/{usageSummary.usage.locations.unlimited ? '∞' : usageSummary.usage.locations.limit}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button variant="outline" onClick={() => window.open('https://billing.bakery.com', '_blank')} className="flex items-center gap-2">
|
|
<ExternalLink className="w-4 h-4" />
|
|
Portal de Facturación
|
|
</Button>
|
|
<Button variant="outline" onClick={() => console.log('Download invoice')} className="flex items-center gap-2">
|
|
<Download className="w-4 h-4" />
|
|
Descargar Facturas
|
|
</Button>
|
|
<Button variant="outline" onClick={loadSubscriptionData} className="flex items-center gap-2">
|
|
<RefreshCw className="w-4 h-4" />
|
|
Actualizar
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Usage Details */}
|
|
<Card className="p-6">
|
|
<h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
|
|
<TrendingUp className="w-5 h-5 mr-2 text-orange-500" />
|
|
Uso de Recursos
|
|
</h3>
|
|
|
|
{/* Team & Organization Metrics */}
|
|
<div className="mb-6">
|
|
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 uppercase tracking-wide">Equipo & Organización</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{/* Users */}
|
|
<div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-blue-500/10 rounded-lg border border-blue-500/20">
|
|
<Users className="w-4 h-4 text-blue-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Usuarios</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.users.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.users.unlimited ? '∞' : usageSummary.usage.users.limit}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.users.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.users.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.users.unlimited ? 'Ilimitado' : `${usageSummary.usage.users.limit - usageSummary.usage.users.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Locations */}
|
|
<div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-green-500/10 rounded-lg border border-green-500/20">
|
|
<MapPin className="w-4 h-4 text-green-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Ubicaciones</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.locations.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.locations.unlimited ? '∞' : usageSummary.usage.locations.limit}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.locations.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.locations.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.locations.unlimited ? 'Ilimitado' : `${usageSummary.usage.locations.limit - usageSummary.usage.locations.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Product & Inventory Metrics */}
|
|
<div className="mb-6">
|
|
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 uppercase tracking-wide">Productos & Inventario</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{/* Products */}
|
|
<div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-purple-500/10 rounded-lg border border-purple-500/20">
|
|
<Package className="w-4 h-4 text-purple-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Productos</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.products.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.products.unlimited ? '∞' : usageSummary.usage.products.limit}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.products.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.products.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.products.unlimited ? 'Ilimitado' : `${usageSummary.usage.products.limit - usageSummary.usage.products.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Recipes */}
|
|
<div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-amber-500/10 rounded-lg border border-amber-500/20">
|
|
<ChefHat className="w-4 h-4 text-amber-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Recetas</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.recipes.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.recipes.unlimited ? '∞' : usageSummary.usage.recipes.limit}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.recipes.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.recipes.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.recipes.unlimited ? 'Ilimitado' : `${usageSummary.usage.recipes.limit - usageSummary.usage.recipes.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Suppliers */}
|
|
<div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-teal-500/10 rounded-lg border border-teal-500/20">
|
|
<ShoppingCart className="w-4 h-4 text-teal-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Proveedores</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.suppliers.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.suppliers.unlimited ? '∞' : usageSummary.usage.suppliers.limit}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.suppliers.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.suppliers.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.suppliers.unlimited ? 'Ilimitado' : `${usageSummary.usage.suppliers.limit - usageSummary.usage.suppliers.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ML & Analytics Metrics (Daily) */}
|
|
<div className="mb-6">
|
|
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 uppercase tracking-wide">IA & Analíticas (Uso Diario)</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* Training Jobs Today */}
|
|
<div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-indigo-500/10 rounded-lg border border-indigo-500/20">
|
|
<Database className="w-4 h-4 text-indigo-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Entrenamientos IA Hoy</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.training_jobs_today.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.training_jobs_today.unlimited ? '∞' : usageSummary.usage.training_jobs_today.limit}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.training_jobs_today.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.training_jobs_today.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.training_jobs_today.unlimited ? 'Ilimitado' : `${usageSummary.usage.training_jobs_today.limit - usageSummary.usage.training_jobs_today.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Forecasts Today */}
|
|
<div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-pink-500/10 rounded-lg border border-pink-500/20">
|
|
<TrendingUp className="w-4 h-4 text-pink-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Pronósticos Hoy</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.forecasts_today.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.forecasts_today.unlimited ? '∞' : usageSummary.usage.forecasts_today.limit}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.forecasts_today.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.forecasts_today.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.forecasts_today.unlimited ? 'Ilimitado' : `${usageSummary.usage.forecasts_today.limit - usageSummary.usage.forecasts_today.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* API & Storage Metrics */}
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 uppercase tracking-wide">API & Almacenamiento</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* API Calls This Hour */}
|
|
<div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-orange-500/10 rounded-lg border border-orange-500/20">
|
|
<Zap className="w-4 h-4 text-orange-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Llamadas API (Esta Hora)</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.api_calls_this_hour.current}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.api_calls_this_hour.unlimited ? '∞' : usageSummary.usage.api_calls_this_hour.limit}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.api_calls_this_hour.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.api_calls_this_hour.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.api_calls_this_hour.unlimited ? 'Ilimitado' : `${usageSummary.usage.api_calls_this_hour.limit - usageSummary.usage.api_calls_this_hour.current} restantes`}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* File Storage */}
|
|
<div className="space-y-3 p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-cyan-500/10 rounded-lg border border-cyan-500/20">
|
|
<HardDrive className="w-4 h-4 text-cyan-500" />
|
|
</div>
|
|
<span className="font-medium text-[var(--text-primary)]">Almacenamiento</span>
|
|
</div>
|
|
<span className="text-sm font-bold text-[var(--text-primary)]">
|
|
{usageSummary.usage.file_storage_used_gb.current.toFixed(2)}<span className="text-[var(--text-tertiary)]">/</span>
|
|
<span className="text-[var(--text-tertiary)]">{usageSummary.usage.file_storage_used_gb.unlimited ? '∞' : `${usageSummary.usage.file_storage_used_gb.limit} GB`}</span>
|
|
</span>
|
|
</div>
|
|
<ProgressBar value={usageSummary.usage.file_storage_used_gb.usage_percentage} />
|
|
<p className="text-xs text-[var(--text-secondary)] flex items-center justify-between">
|
|
<span>{usageSummary.usage.file_storage_used_gb.usage_percentage}% utilizado</span>
|
|
<span className="font-medium">{usageSummary.usage.file_storage_used_gb.unlimited ? 'Ilimitado' : `${(usageSummary.usage.file_storage_used_gb.limit - usageSummary.usage.file_storage_used_gb.current).toFixed(2)} GB restantes`}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Available Plans */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
|
|
<Crown className="w-5 h-5 mr-2 text-yellow-500" />
|
|
Planes Disponibles
|
|
</h3>
|
|
<SubscriptionPricingCards
|
|
mode="selection"
|
|
selectedPlan={usageSummary.plan}
|
|
onPlanSelect={handleUpgradeClick}
|
|
showPilotBanner={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* Invoices Section */}
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center">
|
|
<Download className="w-5 h-5 mr-2 text-blue-500" />
|
|
Historial de Facturas
|
|
</h3>
|
|
<Button
|
|
variant="outline"
|
|
onClick={loadInvoices}
|
|
disabled={invoicesLoading}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 ${invoicesLoading ? 'animate-spin' : ''}`} />
|
|
{invoicesLoading ? 'Cargando...' : 'Actualizar'}
|
|
</Button>
|
|
</div>
|
|
|
|
{invoicesLoading ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<RefreshCw className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
|
|
<p className="text-[var(--text-secondary)]">Cargando facturas...</p>
|
|
</div>
|
|
</div>
|
|
) : invoices.length === 0 ? (
|
|
<div className="text-center py-8">
|
|
<p className="text-[var(--text-secondary)]">No hay facturas disponibles</p>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-[var(--border-color)]">
|
|
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">ID</th>
|
|
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Fecha</th>
|
|
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Descripción</th>
|
|
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Monto</th>
|
|
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Estado</th>
|
|
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{invoices.map((invoice) => (
|
|
<tr key={invoice.id} className="border-b border-[var(--border-color)] hover:bg-[var(--bg-secondary)]">
|
|
<td className="py-3 px-4 text-[var(--text-primary)]">{invoice.id}</td>
|
|
<td className="py-3 px-4 text-[var(--text-primary)]">{invoice.date}</td>
|
|
<td className="py-3 px-4 text-[var(--text-primary)]">{invoice.description}</td>
|
|
<td className="py-3 px-4 text-[var(--text-primary)]">{subscriptionService.formatPrice(invoice.amount)}</td>
|
|
<td className="py-3 px-4">
|
|
<Badge variant={invoice.status === 'paid' ? 'success' : 'default'}>
|
|
{invoice.status === 'paid' ? 'Pagada' : 'Pendiente'}
|
|
</Badge>
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleDownloadInvoice(invoice.id)}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
Descargar
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Subscription Management */}
|
|
<Card className="p-6">
|
|
<h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
|
|
<CreditCard className="w-5 h-5 mr-2 text-red-500" />
|
|
Gestión de Suscripción
|
|
</h3>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<div className="flex-1">
|
|
<h4 className="font-medium text-[var(--text-primary)] mb-2">Cancelar Suscripción</h4>
|
|
<p className="text-sm text-[var(--text-secondary)] mb-4">
|
|
Si cancelas tu suscripción, perderás acceso a las funcionalidades premium al final del período de facturación actual.
|
|
</p>
|
|
<Button
|
|
variant="danger"
|
|
onClick={handleCancellationClick}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
Cancelar Suscripción
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<h4 className="font-medium text-[var(--text-primary)] mb-2">Método de Pago</h4>
|
|
<p className="text-sm text-[var(--text-secondary)] mb-4">
|
|
Actualiza tu información de pago para asegurar la continuidad de tu servicio.
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<CreditCard className="w-4 h-4" />
|
|
Actualizar Método de Pago
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</>
|
|
)}
|
|
|
|
{/* Upgrade Modal */}
|
|
{upgradeDialogOpen && selectedPlan && availablePlans && (
|
|
<Modal
|
|
isOpen={upgradeDialogOpen}
|
|
onClose={() => setUpgradeDialogOpen(false)}
|
|
title="Confirmar Cambio de Plan"
|
|
>
|
|
<div className="space-y-4">
|
|
<p className="text-[var(--text-secondary)]">
|
|
¿Estás seguro de que quieres cambiar tu plan de suscripción?
|
|
</p>
|
|
{availablePlans.plans[selectedPlan] && usageSummary && (
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg space-y-2">
|
|
<div className="flex justify-between">
|
|
<span>Plan actual:</span>
|
|
<span>{usageSummary.plan}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Nuevo plan:</span>
|
|
<span>{availablePlans.plans[selectedPlan].name}</span>
|
|
</div>
|
|
<div className="flex justify-between font-medium">
|
|
<span>Nuevo precio:</span>
|
|
<span>{subscriptionService.formatPrice(availablePlans.plans[selectedPlan].monthly_price)}/mes</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex gap-2 pt-4">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setUpgradeDialogOpen(false)}
|
|
className="flex-1"
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
onClick={handleUpgradeConfirm}
|
|
disabled={upgrading}
|
|
className="flex-1"
|
|
>
|
|
{upgrading ? 'Procesando...' : 'Confirmar Cambio'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)}
|
|
|
|
{/* Cancellation Modal */}
|
|
{cancellationDialogOpen && (
|
|
<Modal
|
|
isOpen={cancellationDialogOpen}
|
|
onClose={() => setCancellationDialogOpen(false)}
|
|
title="Cancelar Suscripción"
|
|
>
|
|
<div className="space-y-4">
|
|
<p className="text-[var(--text-secondary)]">
|
|
¿Estás seguro de que deseas cancelar tu suscripción? Esta acción no se puede deshacer.
|
|
</p>
|
|
<p className="text-[var(--text-secondary)]">
|
|
Perderás acceso a las funcionalidades premium al final del período de facturación actual.
|
|
</p>
|
|
|
|
<div className="flex gap-2 pt-4">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setCancellationDialogOpen(false)}
|
|
className="flex-1"
|
|
>
|
|
Volver
|
|
</Button>
|
|
<Button
|
|
variant="danger"
|
|
onClick={handleCancelSubscription}
|
|
disabled={cancelling}
|
|
className="flex-1"
|
|
>
|
|
{cancelling ? 'Cancelando...' : 'Confirmar Cancelación'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SubscriptionPage;
|