From 407744d00f1f4cffddeab66da62b2a5d226dc630 Mon Sep 17 00:00:00 2001
From: Ivan <ivan@horuxfin.com>
Date: Sun, 1 Mar 2026 21:24:48 +0000
Subject: [PATCH] feat: translate memberships page and components to English

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web/app/(admin)/memberships/page.tsx     | 68 +++++++++----------
 apps/web/components/memberships/plan-card.tsx | 22 +++---
 apps/web/components/memberships/plan-form.tsx | 54 +++++++--------
 3 files changed, 72 insertions(+), 72 deletions(-)

diff --git a/apps/web/app/(admin)/memberships/page.tsx b/apps/web/app/(admin)/memberships/page.tsx
index 4702712..4e2c1c9 100644
--- a/apps/web/app/(admin)/memberships/page.tsx
+++ b/apps/web/app/(admin)/memberships/page.tsx
@@ -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}
diff --git a/apps/web/components/memberships/plan-card.tsx b/apps/web/components/memberships/plan-card.tsx
index f2a6fa9..07215e4 100644
--- a/apps/web/components/memberships/plan-card.tsx
+++ b/apps/web/components/memberships/plan-card.tsx
@@ -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>
       )}
diff --git a/apps/web/components/memberships/plan-form.tsx b/apps/web/components/memberships/plan-form.tsx
index 5e2fc0d..fdd84f8 100644
--- a/apps/web/components/memberships/plan-form.tsx
+++ b/apps/web/components/memberships/plan-form.tsx
@@ -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>