consultoria-as/app-padel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: translate memberships page and components to English

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ivan
2026-03-01 21:24:48 +00:00
parent 13bd84a0b5
commit 407744d00f
3 changed files with 72 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
apps/web/app/(admin)/memberships/page.tsx
View File

@@ -68,10 +68,10 @@ interface MembershipsResponse {
}
const statusFilters = [
{ value: "", label: "Todos" },
{ value: "ACTIVE", label: "Activas" },
{ value: "EXPIRED", label: "Expiradas" },
{ value: "CANCELLED", label: "Canceladas" },
{ value: "", label: "All" },
{ value: "ACTIVE", label: "Active" },
{ value: "EXPIRED", label: "Expired" },
{ value: "CANCELLED", label: "Cancelled" },
];
export default function MembershipsPage() {
@@ -104,12 +104,12 @@ export default function MembershipsPage() {
setLoadingPlans(true);
try {
const response = await fetch("/api/membership-plans?includeInactive=true");
if (!response.ok) throw new Error("Error al cargar planes");
if (!response.ok) throw new Error("Error loading plans");
const data = await response.json();
setPlans(data);
} catch (err) {
console.error("Error fetching plans:", err);
setError(err instanceof Error ? err.message : "Error desconocido");
setError(err instanceof Error ? err.message : "Unknown error");
} finally {
setLoadingPlans(false);
}
@@ -125,7 +125,7 @@ export default function MembershipsPage() {
if (searchQuery) params.append("search", searchQuery);
const response = await fetch(`/api/memberships?${params.toString()}`);
if (!response.ok) throw new Error("Error al cargar membresias");
if (!response.ok) throw new Error("Error loading memberships");
const data: MembershipsResponse = await response.json();
setMemberships(data.data);
@@ -138,7 +138,7 @@ export default function MembershipsPage() {
});
} catch (err) {
console.error("Error fetching memberships:", err);
setError(err instanceof Error ? err.message : "Error desconocido");
setError(err instanceof Error ? err.message : "Unknown error");
} finally {
setLoadingMemberships(false);
}
@@ -209,7 +209,7 @@ export default function MembershipsPage() {
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || "Error al guardar plan");
throw new Error(errorData.error || "Error saving plan");
}
setShowPlanForm(false);
@@ -224,7 +224,7 @@ export default function MembershipsPage() {
// Handle plan deletion
const handleDeletePlan = async (plan: MembershipPlan) => {
if (!confirm(`¿Estas seguro de eliminar el plan "${plan.name}"? Esta accion lo desactivara.`)) {
if (!confirm(`Are you sure you want to delete the plan "${plan.name}"? This action will deactivate it.`)) {
return;
}
@@ -235,13 +235,13 @@ export default function MembershipsPage() {
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || "Error al eliminar plan");
throw new Error(errorData.error || "Error deleting plan");
}
await fetchPlans();
} catch (err) {
console.error("Error deleting plan:", err);
setError(err instanceof Error ? err.message : "Error desconocido");
setError(err instanceof Error ? err.message : "Unknown error");
}
};
@@ -262,7 +262,7 @@ export default function MembershipsPage() {
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || "Error al asignar membresia");
throw new Error(errorData.error || "Error assigning membership");
}
setShowAssignDialog(false);
@@ -295,19 +295,19 @@ export default function MembershipsPage() {
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || "Error al renovar membresia");
throw new Error(errorData.error || "Error renewing membership");
}
await Promise.all([fetchMemberships(), fetchPlans()]);
} catch (err) {
console.error("Error renewing membership:", err);
setError(err instanceof Error ? err.message : "Error desconocido");
setError(err instanceof Error ? err.message : "Unknown error");
}
};
// Handle membership cancellation
const handleCancelMembership = async (membership: Membership) => {
if (!confirm(`¿Estas seguro de cancelar la membresia de ${membership.client.firstName} ${membership.client.lastName}?`)) {
if (!confirm(`Are you sure you want to cancel the membership for ${membership.client.firstName} ${membership.client.lastName}?`)) {
return;
}
@@ -318,13 +318,13 @@ export default function MembershipsPage() {
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || "Error al cancelar membresia");
throw new Error(errorData.error || "Error cancelling membership");
}
await Promise.all([fetchMemberships(), fetchPlans()]);
} catch (err) {
console.error("Error cancelling membership:", err);
setError(err instanceof Error ? err.message : "Error desconocido");
setError(err instanceof Error ? err.message : "Unknown error");
}
};
@@ -336,9 +336,9 @@ export default function MembershipsPage() {
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-primary-800">Membresias</h1>
<h1 className="text-2xl font-bold text-primary-800">Memberships</h1>
<p className="mt-1 text-primary-600">
Gestiona planes y membresias de tus clientes
Manage plans and memberships for your players
</p>
</div>
</div>
@@ -374,7 +374,7 @@ export default function MembershipsPage() {
</svg>
</div>
<div>
<p className="text-sm text-primary-500">Membresias Activas</p>
<p className="text-sm text-primary-500">Active Memberships</p>
<p className="text-2xl font-bold text-primary-800">{stats.totalActive}</p>
</div>
</div>
@@ -396,7 +396,7 @@ export default function MembershipsPage() {
</svg>
</div>
<div>
<p className="text-sm text-primary-500">Por Expirar</p>
<p className="text-sm text-primary-500">Expiring Soon</p>
<p className="text-2xl font-bold text-primary-800">{stats.expiringSoon}</p>
</div>
</div>
@@ -412,7 +412,7 @@ export default function MembershipsPage() {
</svg>
</div>
<div>
<p className="text-sm text-primary-500">Planes Activos</p>
<p className="text-sm text-primary-500">Active Plans</p>
<p className="text-2xl font-bold text-primary-800">{activePlans.length}</p>
</div>
</div>
@@ -428,7 +428,7 @@ export default function MembershipsPage() {
</svg>
</div>
<div>
<p className="text-sm text-primary-500">Total Suscriptores</p>
<p className="text-sm text-primary-500">Total Subscribers</p>
<p className="text-2xl font-bold text-primary-800">
{plans.reduce((sum, p) => sum + p.subscriberCount, 0)}
</p>
@@ -441,12 +441,12 @@ export default function MembershipsPage() {
{/* Plans Section */}
<section>
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold text-primary-800">Planes de Membresia</h2>
<h2 className="text-xl font-semibold text-primary-800">Membership Plans</h2>
<Button onClick={() => setShowPlanForm(true)}>
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
Nuevo Plan
New Plan
</Button>
</div>
@@ -454,7 +454,7 @@ export default function MembershipsPage() {
<div className="flex items-center justify-center py-12">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-2"></div>
<p className="text-primary-500">Cargando planes...</p>
<p className="text-primary-500">Loading plans...</p>
</div>
</div>
) : plans.length === 0 ? (
@@ -468,10 +468,10 @@ export default function MembershipsPage() {
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
<p className="font-medium text-primary-600">No hay planes</p>
<p className="text-sm text-primary-500 mt-1">Crea tu primer plan de membresia</p>
<p className="font-medium text-primary-600">No plans</p>
<p className="text-sm text-primary-500 mt-1">Create your first membership plan</p>
<Button className="mt-4" onClick={() => setShowPlanForm(true)}>
Crear Plan
Create Plan
</Button>
</CardContent>
</Card>
@@ -496,12 +496,12 @@ export default function MembershipsPage() {
{/* Memberships Section */}
<section>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
<h2 className="text-xl font-semibold text-primary-800">Membresias</h2>
<h2 className="text-xl font-semibold text-primary-800">Memberships</h2>
<Button variant="accent" onClick={() => setShowAssignDialog(true)}>
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
</svg>
Asignar Membresia
Assign Membership
</Button>
</div>
@@ -513,7 +513,7 @@ export default function MembershipsPage() {
<div className="flex-1">
<Input
type="text"
placeholder="Buscar por nombre de cliente..."
placeholder="Search by player name..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full"
@@ -527,7 +527,7 @@ export default function MembershipsPage() {
onChange={(e) => setPlanFilter(e.target.value)}
className="flex h-10 w-full rounded-md border border-primary-200 bg-white px-3 py-2 text-sm ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
>
<option value="">Todos los planes</option>
<option value="">All plans</option>
{activePlans.map((plan) => (
<option key={plan.id} value={plan.id}>
{plan.name}

22
apps/web/components/memberships/plan-card.tsx
View File

@@ -57,7 +57,7 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
? "bg-accent-100 text-accent-700"
: "bg-primary-100 text-primary-600"
)}>
{plan.subscriberCount} {plan.subscriberCount === 1 ? "suscriptor" : "suscriptores"}
{plan.subscriberCount} {plan.subscriberCount === 1 ? "subscriber" : "subscribers"}
</span>
</div>
{plan.description && (
@@ -72,7 +72,7 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
{formatCurrency(price)}
</div>
<div className="text-sm text-primary-500">
/{plan.durationMonths} {plan.durationMonths === 1 ? "mes" : "meses"}
/{plan.durationMonths} {plan.durationMonths === 1 ? "month" : "months"}
</div>
</div>
@@ -87,8 +87,8 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
</svg>
</div>
<div>
<p className="font-medium text-primary-800">{freeHours} horas gratis</p>
<p className="text-xs text-primary-500">de cancha al mes</p>
<p className="font-medium text-primary-800">{freeHours} free hours</p>
<p className="text-xs text-primary-500">of court time per month</p>
</div>
</div>
)}
@@ -102,8 +102,8 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
</svg>
</div>
<div>
<p className="font-medium text-primary-800">{discountPercent}% descuento</p>
<p className="text-xs text-primary-500">en reservas adicionales</p>
<p className="font-medium text-primary-800">{discountPercent}% discount</p>
<p className="text-xs text-primary-500">on additional bookings</p>
</div>
</div>
)}
@@ -117,8 +117,8 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
</svg>
</div>
<div>
<p className="font-medium text-primary-800">{storeDiscount}% descuento</p>
<p className="text-xs text-primary-500">en tienda</p>
<p className="font-medium text-primary-800">{storeDiscount}% discount</p>
<p className="text-xs text-primary-500">in store</p>
</div>
</div>
)}
@@ -126,7 +126,7 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
{/* Other Benefits */}
{otherBenefits.length > 0 && (
<div className="pt-2 border-t border-primary-100">
<p className="text-xs font-medium text-primary-600 mb-2">Beneficios adicionales:</p>
<p className="text-xs font-medium text-primary-600 mb-2">Additional benefits:</p>
<ul className="space-y-1">
{otherBenefits.map((benefit, index) => (
<li key={index} className="flex items-start gap-2 text-sm text-primary-700">
@@ -153,7 +153,7 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
Editar
Edit
</Button>
<Button
variant="outline"
@@ -164,7 +164,7 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
Eliminar
Delete
</Button>
</CardFooter>
)}

54
apps/web/components/memberships/plan-form.tsx
View File

@@ -41,10 +41,10 @@ interface PlanFormProps {
}
const durationOptions = [
{ value: 1, label: "1 mes" },
{ value: 3, label: "3 meses" },
{ value: 6, label: "6 meses" },
{ value: 12, label: "12 meses" },
{ value: 1, label: "1 month" },
{ value: 3, label: "3 months" },
{ value: 6, label: "6 months" },
{ value: 12, label: "12 months" },
];
export function PlanForm({
@@ -107,19 +107,19 @@ export function PlanForm({
const newErrors: Record<string, string> = {};
if (!formData.name.trim()) {
newErrors.name = "El nombre es requerido";
newErrors.name = "Name is required";
}
if (formData.price <= 0) {
newErrors.price = "El precio debe ser mayor a 0";
newErrors.price = "Price must be greater than 0";
}
if (formData.bookingDiscount < 0 || formData.bookingDiscount > 100) {
newErrors.bookingDiscount = "El descuento debe estar entre 0 y 100";
newErrors.bookingDiscount = "Discount must be between 0 and 100";
}
if (formData.storeDiscount < 0 || formData.storeDiscount > 100) {
newErrors.storeDiscount = "El descuento debe estar entre 0 y 100";
newErrors.storeDiscount = "Discount must be between 0 and 100";
}
if (formData.freeHours < 0) {
newErrors.freeHours = "Las horas gratis no pueden ser negativas";
newErrors.freeHours = "Free hours cannot be negative";
}
setErrors(newErrors);
@@ -137,20 +137,20 @@ export function PlanForm({
<form onSubmit={handleSubmit}>
<CardHeader>
<CardTitle>
{mode === "create" ? "Nuevo Plan de Membresia" : "Editar Plan"}
{mode === "create" ? "New Membership Plan" : "Edit Plan"}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* Name */}
<div>
<label className="block text-sm font-medium text-primary-700 mb-1">
Nombre del Plan *
Plan Name *
</label>
<Input
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Ej: Plan Premium"
placeholder="E.g.: Premium Plan"
className={errors.name ? "border-red-500" : ""}
/>
{errors.name && (
@@ -161,13 +161,13 @@ export function PlanForm({
{/* Description */}
<div>
<label className="block text-sm font-medium text-primary-700 mb-1">
Descripcion
Description
</label>
<textarea
name="description"
value={formData.description}
onChange={handleChange}
placeholder="Descripcion del plan..."
placeholder="Plan description..."
rows={2}
className="flex w-full rounded-md border border-primary-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-primary-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
/>
@@ -177,7 +177,7 @@ export function PlanForm({
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-primary-700 mb-1">
Precio *
Price *
</label>
<Input
type="number"
@@ -194,7 +194,7 @@ export function PlanForm({
</div>
<div>
<label className="block text-sm font-medium text-primary-700 mb-1">
Duracion
Duration
</label>
<select
name="durationMonths"
@@ -213,12 +213,12 @@ export function PlanForm({
{/* Benefits Section */}
<div className="border-t border-primary-200 pt-4 mt-4">
<h4 className="text-sm font-semibold text-primary-800 mb-3">Beneficios</h4>
<h4 className="text-sm font-semibold text-primary-800 mb-3">Benefits</h4>
{/* Free Hours */}
<div className="mb-4">
<label className="block text-sm font-medium text-primary-700 mb-1">
Horas Gratis de Cancha (por mes)
Free Court Hours (per month)
</label>
<Input
type="number"
@@ -238,7 +238,7 @@ export function PlanForm({
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label className="block text-sm font-medium text-primary-700 mb-1">
Descuento en Reservas (%)
Booking Discount (%)
</label>
<Input
type="number"
@@ -255,7 +255,7 @@ export function PlanForm({
</div>
<div>
<label className="block text-sm font-medium text-primary-700 mb-1">
Descuento en Tienda (%)
Store Discount (%)
</label>
<Input
type="number"
@@ -275,36 +275,36 @@ export function PlanForm({
{/* Extra Benefits */}
<div>
<label className="block text-sm font-medium text-primary-700 mb-1">
Beneficios Adicionales
Additional Benefits
</label>
<textarea
name="extraBenefits"
value={formData.extraBenefits}
onChange={handleChange}
placeholder="Un beneficio por linea&#10;Ej: Acceso a vestidores VIP&#10;Invitacion a eventos exclusivos"
placeholder="One benefit per line&#10;E.g.: Access to VIP locker rooms&#10;Invitation to exclusive events"
rows={4}
className="flex w-full rounded-md border border-primary-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-primary-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
/>
<p className="text-xs text-primary-500 mt-1">
Escribe un beneficio por linea
Write one benefit per line
</p>
</div>
</div>
</CardContent>
<CardFooter className="flex justify-end gap-3 border-t border-primary-200 bg-primary-50 pt-4">
<Button type="button" variant="outline" onClick={onCancel}>
Cancelar
Cancel
</Button>
<Button type="submit" disabled={isLoading}>
{isLoading ? (
<span className="flex items-center gap-2">
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
Guardando...
Saving...
</span>
) : mode === "create" ? (
"Crear Plan"
"Create Plan"
) : (
"Guardar Cambios"
"Save Changes"
)}
</Button>
</CardFooter>