bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Imporve the UI 5

Browse Source
This commit is contained in:
Urtzi Alfaro
2026-01-03 15:55:24 +01:00
parent db12c57b0b
commit 47ccea4900
8 changed files with 65 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/pages/app/settings/profile/ProfilePage.tsx
View File

@@ -29,7 +29,7 @@ interface PasswordData {
const ProfilePage: React.FC = () => {
const user = useAuthUser();
const { t } = useTranslation(['settings', 'auth']);
const { t } = useTranslation(['settings', 'auth', 'subscription']);
const { data: profile, isLoading: profileLoading, error: profileError } = useAuthProfile();
@@ -626,7 +626,7 @@ const ProfilePage: React.FC = () => {
<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: {subscriptionService.getPlanDisplayInfo(usageSummary.plan).name}
Plan Actual: {t(`subscription:plans.${usageSummary.plan}.name`, subscriptionService.getPlanDisplayInfo(usageSummary.plan).name)}
</h3>
<Badge
variant={usageSummary.status === 'active' ? 'success' : 'default'}
@@ -792,7 +792,7 @@ const ProfilePage: React.FC = () => {
)}
<div className="text-center mb-6">
<h4 className="text-xl font-bold text-[var(--text-primary)] mb-2">{plan.name}</h4>
<h4 className="text-xl font-bold text-[var(--text-primary)] mb-2">{t(`subscription:plans.${planKey}.name`, plan.name)}</h4>
<div className="text-3xl font-bold text-[var(--color-primary)] mb-1">
{subscriptionService.formatPrice(plan.monthly_price)}
<span className="text-lg text-[var(--text-secondary)]">/mes</span>
@@ -916,11 +916,11 @@ const ProfilePage: React.FC = () => {
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg space-y-2">
<div className="flex justify-between">
<span>Plan actual:</span>
<span>{subscriptionService.getPlanDisplayInfo(usageSummary.plan).name}</span>
<span>{t(`subscription:plans.${usageSummary.plan}.name`, subscriptionService.getPlanDisplayInfo(usageSummary.plan).name)}</span>
</div>
<div className="flex justify-between">
<span>Nuevo plan:</span>
<span>{availablePlans.plans[selectedPlan].name}</span>
<span>{t(`subscription:plans.${selectedPlan}.name`, availablePlans.plans[selectedPlan].name)}</span>
</div>
<div className="flex justify-between font-medium">
<span>Nuevo precio:</span>

6
frontend/src/pages/app/settings/subscription/SubscriptionPage.tsx
View File

@@ -16,11 +16,13 @@ import {
trackUpgradeCTAClicked,
trackUsageMetricViewed
} from '../../../../utils/subscriptionAnalytics';
import { useTranslation } from 'react-i18next';
const SubscriptionPage: React.FC = () => {
const user = useAuthUser();
const currentTenant = useCurrentTenant();
const { notifySubscriptionChanged } = useSubscriptionEvents();
const { t } = useTranslation('subscription');
const [usageSummary, setUsageSummary] = useState<UsageSummary | null>(null);
const [availablePlans, setAvailablePlans] = useState<AvailablePlans | null>(null);
@@ -942,11 +944,11 @@ const SubscriptionPage: React.FC = () => {
<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>
<span>{t(`plans.${usageSummary.plan}.name`, usageSummary.plan)}</span>
</div>
<div className="flex justify-between">
<span>Nuevo plan:</span>
<span>{availablePlans.plans[selectedPlan as keyof typeof availablePlans.plans].name}</span>
<span>{t(`plans.${selectedPlan}.name`, availablePlans.plans[selectedPlan as keyof typeof availablePlans.plans].name)}</span>
</div>
<div className="flex justify-between font-medium">
<span>Nuevo precio:</span>