feat: translate memberships page and components to English

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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>