fix(MVP-4): Latests fixes and others

src/app/(application)/(generator)/meal-prep-filters/page.tsx

@@ -203,7 +203,7 @@ export default function MealPrepFilters() {
       ingredients: ingredients.map((ingredient) => ({
         name: ingredient.name,
         quantity: ingredient.quantity,
-        unit_id: Number(ingredient.unit),
+        unit_id: Number(ingredient.unit.id),
       })),
       filters: filtersToSend,
       configuration: {

src/app/(application)/(generator)/meal-prep/[id]/page.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import apiClient from "@/lib/axios.config";
 import ChefLoader from "@/components/shared/loaders/ChefLoader";
+import { MealPrepDetailSkeleton } from "@/components/shared/skeleton/MealPrepDetailSkeleton";
 import BackgroundLayers from "@/components/shared/BackgroundLayers";
 import ContainerShadow from "@/components/shared/containers/ContainerShadow";
 import RecipeTags from "@/components/meal-prep/RecipeTags";
@@ -32,6 +33,7 @@ export default function MealPrepPage({
 
   const { isFavoriteMealPrep, addFavoriteMealPrep, removeFavoriteMealPrep } =
     useFavoritesStore();
+
   const {
     show,
     message,
@@ -48,6 +50,8 @@ export default function MealPrepPage({
   const [showUnfavoriteModal, setShowUnfavoriteModal] = useState(false);
   const [showSubscriptionModal, setShowSubscriptionModal] = useState(false);
 
+  // Mix estado del servidor con estado local
+  const currentIsFavorite = mealPrep ? isFavoriteMealPrep(mealPrep.id, mealPrep.isFavorite) : false;
   useEffect(() => {
     const fetchMealPrep = async () => {
       try {
@@ -65,6 +69,7 @@ export default function MealPrepPage({
           recipes: data.recipes,
           ingredients: data.ingredients,
           observation: data.observation || undefined,
+          isFavorite: data.favorite || false,
         };
 
         setMealPrep(mapped);
@@ -77,13 +82,11 @@ export default function MealPrepPage({
 
     fetchMealPrep();
   }, [mealPrepId]);
-
-
+
 
   const handleFavMealPrep = () => {
     if (!mealPrep) return;
-    const isCurrentlyFavorite = isFavoriteMealPrep(mealPrep.id);
-    if (isCurrentlyFavorite) {
+    if (currentIsFavorite) {
       setShowUnfavoriteModal(true);
     } else {
       setShowFavoriteModal(true);
@@ -107,7 +110,7 @@ export default function MealPrepPage({
   };
 
   if (loading) {
-    return <ChefLoader text="Cargando meal prep..." />;
+    return <MealPrepDetailSkeleton />;
   }
   if (!mealPrep) {
     return (
@@ -116,8 +119,6 @@ export default function MealPrepPage({
       </div>
     );
   }
-  const isCurrentlyFavorite = isFavoriteMealPrep(mealPrep.id);
-
   return (
     <>
       <BackgroundLayers />
@@ -130,17 +131,16 @@ export default function MealPrepPage({
           <div className="flex flex-col lg:flex-row gap-8">
             <section className="w-full lg:w-3/4">
               <div className="flex justify-between items-center mb-6"> 
-                <h2 className="text-2xl font-bold text-[#333]">{mealPrep.title}</h2>
-
+                <h2 className="text-2xl font-bold text-gray-700">{mealPrep.title}</h2>
 
                 <TimeAndFavorite
                   minutes={mealPrep.estimatedCookingTime}
                   onToggleFavorite={handleFavMealPrep}
-                  isFavorite={isCurrentlyFavorite}
+                  isFavorite={currentIsFavorite}
                 />
               </div>
                 <div className="border-t-2 text-color-primary mb-10"></div>
-              <h3 className="mx-4 mb-2 text-xl font-bold text-[#333]">Paso a paso</h3>
+              <h3 className="mx-4 mb-2 text-xl text-center font-bold text-gray-700">Paso a paso</h3>
 
               <MealPrepSteps steps={mealPrep.steps} />
             </section>
@@ -151,7 +151,7 @@ export default function MealPrepPage({
               {/* <PortionSummary recipes={mealPrep.recipes} /> */}
 
               <IngredientsList ingredients={mealPrep.ingredients} />
- 
+
               {mealPrep.observation && (
                 <ObservationInfo observation={mealPrep.observation} />
               )}

src/app/(application)/(generator)/recipe/[id]/page.tsx

@@ -13,6 +13,7 @@ import RecipeSidebar from "@/components/recipe/Sidebar";
 import { useRecipeGeneratorSession } from "@/hooks/useRecipeGeneratorSession";
 import { useNotification } from "@/hooks/useNotification";
 import { useRecipeDetail } from "@/hooks/useRecipeDetail";
+import { useFavoritesStore } from "@/store/useFavoritesStore";
 import NotificationModal from "@/components/shared/modal/NotificationModal";
 import RecipePDFDownload from "@/components/recipe/RecipePDFDownload";
 import { useAuthStore } from "@/store/useAuthStore";
@@ -24,10 +25,14 @@ export default function RecipeDetailPage({ params }: PageProps) {
   const router = useRouter();
   const { id: recipeId } = React.use(params);
   const { recipe, loading } = useRecipeDetail(recipeId);
+  const { isFavorite: isLocalFavorite } = useFavoritesStore();
   const isPremium = useAuthStore((state) => state.user?.premium);
   const { message, additionalMessage, type, show, clearNotification } =
     useNotification();
 
+  // Mix estado del servidor con estado local para el sidebar
+  const currentIsFavorite = recipe ? isLocalFavorite(recipe.id, recipe.isFavorite) : false;
+
   if (loading) {
     return <RecipeDetailSkeleton />;
   }
@@ -76,7 +81,7 @@ export default function RecipeDetailPage({ params }: PageProps) {
               missingIngredients={recipe.missingIngredients}
               recipeId={recipe.id}
               recipeTitle={recipe.name}
-              isFavorite={recipe.isFavorite}
+              isFavorite={currentIsFavorite}
               mealTypes={recipe.mealTypes}
             />
           </div>

src/app/(application)/(generator)/results-meal/page.tsx

@@ -13,7 +13,7 @@ import { faClock, faHeart } from "@fortawesome/free-regular-svg-icons";
 import { faHeart as faHeartSolid } from "@fortawesome/free-solid-svg-icons";
 import Container from "@/components/shared/containers/Container";
 import BackgroundLayers from "@/components/shared/BackgroundLayers";
-import { RecipeCardSkeleton } from "@/components/shared/skeleton/RecipeCardSkeleton";
+import { MealPrepCardSkeleton } from "@/components/shared/skeleton/MealPrepCardSkeleton";
 import { FavoriteModal } from "@/components/shared/modal/FavoriteModal";
 import SubscriptionModal from "@/components/shared/modal/SubscriptionModal";
 import NotificationModal from "@/components/shared/modal/NotificationModal";
@@ -89,9 +89,9 @@ export default function MealPrepResultsPage() {
           </p>
           <Container>
             {isLoading ? (
-              <div className="flex gap-4 justify-center px-4 pb-12 flex-wrap">
-                {[1, 2, 3, 4].map((index) => (
-                  <RecipeCardSkeleton key={index} />
+              <div className="space-y-4 px-4 pb-12">
+                {[1].map((index) => (
+                  <MealPrepCardSkeleton key={index} />
                 ))}
               </div>
             ) : mealPreps.length === 0 ? (

src/app/(application)/(generator)/review/page.tsx

@@ -12,6 +12,7 @@ import RecipeIngredientInput from "@/components/recipe-generator/IngredientInput
 import BackgroundLayers from "@/components/shared/BackgroundLayers";
 import ContainerShadow from "@/components/shared/containers/ContainerShadow";
 import ChefLoader from "@/components/shared/loaders/ChefLoader";
+import Input from "@/components/shared/form/Input";
 
 export default function ReviewPage() {
   useRecipeGeneratorSession();
@@ -225,46 +226,59 @@ export default function ReviewPage() {
 
       {isEditModalOpen && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-white p-6 rounded-lg shadow-md w-full max-w-md">
-            <h2 className="text-lg font-bold mb-4">Editar ingrediente</h2>
-            <input
-              type="text"
-              value={newName}
-              onChange={(e) => setNewName(e.target.value)}
-              className="w-full px-4 py-2 border text-color-primary rounded mb-4"
-              placeholder="Nombre"
-              autoFocus
-            />
-            <input
-              type="text"
-              value={newQuantity}
-              onChange={(e) => setNewQuantity(e.target.value)}
-              className="w-full px-4 py-2 border text-color-primary rounded mb-4"
-              placeholder="Cantidad"
-            />
-            <input
-              type="text"
-              value={newUnit?.description || ""}
-              onChange={(e) =>
-                setNewUnit((prev) => ({
-                  id: prev?.id ?? 0,
-                  symbol: prev?.symbol,
-                  description: e.target.value,
-                }))
-              }
-              placeholder="Unidad"
-            />
+          <div className="bg-white p-6 rounded-xl shadow-xl w-full max-w-md mx-4">
+            <h2 className="text-lg font-bold mb-6 text-gray-800">Editar ingrediente</h2>
+
+            <div className="space-y-4">
+              <Input
+                type="text"
+                name="ingredientName"
+                label="Nombre del ingrediente"
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                placeholder="Ej: Carne picada"
+                className="w-full"
+              />
 
-            <div className="flex justify-end gap-3">
+              <Input
+                type="number"
+                name="quantity"
+                label="Cantidad"
+                value={newQuantity}
+                onChange={(e) => setNewQuantity(e.target.value)}
+                placeholder="2"
+                min="0"
+                step="0.1"
+                className="w-full"
+              />
+
+              <Input
+                type="text"
+                name="unit"
+                label="Unidad"
+                value={newUnit?.description || ""}
+                onChange={(e) =>
+                  setNewUnit((prev) => ({
+                    id: prev?.id ?? 0,
+                    symbol: prev?.symbol,
+                    description: e.target.value,
+                  }))
+                }
+                placeholder="Kg"
+                className="w-full"
+              />
+            </div>
+
+            <div className="flex justify-end gap-3 mt-6">
               <button
                 onClick={() => setIsEditModalOpen(false)}
-                className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300 transition"
+                className="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition font-medium"
               >
                 Cancelar
               </button>
               <button
                 onClick={handleConfirmEdit}
-                className="px-4 py-2 bg-[#f37b6a] text-white rounded hover:bg-[#e36455] transition"
+                className="px-6 py-2 bg-[#f37b6a] text-white rounded-lg hover:bg-[#e36455] transition font-medium"
               >
                 Guardar
               </button>

src/app/(application)/calendar/page.tsx

@@ -238,7 +238,7 @@ export default function CalendarPage() {
   if (isLoading) {
     return (
       <Container customClass="mt-30 mb-8">
-        <h1 className="text-3xl font-bold text-gray-800 mb-8">
+        <h1 className="text-3xl font-bold text-gray-700 mb-8">
           Planificación Semanal
         </h1>
         <CalendarSkeleton />
@@ -252,7 +252,7 @@ export default function CalendarPage() {
       <Container customClass="mt-14 mb-8">
         <div className="flex justify-between items-center mb-8">
           <div className="w-full flex justify-center mb-8">
-            <h1 className="text-3xl font-bold text-gray-800 text-center">
+            <h1 className="text-3xl font-bold text-gray-700 text-center">
               Planificación Semanal
             </h1>
           </div>

src/app/(application)/favs/page.tsx

@@ -164,7 +164,7 @@ export default function Favs() {
                             onClick={() =>
                               handleRemove(recipe.id, recipe.name, "recipe")
                             }
-                            className="absolute bottom-3 right-3 w-10 h-10 flex items-center justify-center text-white background-color-primary hover:bg-red-800 rounded-full shadow-md transition"
+                            className="absolute bottom-3 right-0 w-10 h-10 flex items-center justify-center text-white background-color-primary hover:bg-red-800 rounded-full shadow-md transition"
                             title="Eliminar de favoritos"
                           >
                             <FontAwesomeIcon
@@ -227,7 +227,7 @@ export default function Favs() {
                             onClick={() =>
                               handleRemove(mp.id, mp.title, "meal-prep")
                             }
-                            className="absolute bottom-3 right-3 w-10 h-10 flex items-center justify-center text-white background-color-primary hover:bg-red-800 rounded-full shadow-md transition"
+                            className="absolute bottom-3 right-0 w-10 h-10 flex items-center justify-center text-white background-color-primary hover:bg-red-800 rounded-full shadow-md transition"
                             title="Eliminar de favoritos"
                           >
                             <FontAwesomeIcon

src/app/(auth)/password/change/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import "./change-password.css";
 import Modal from '@/components/shared/modal/Modal'
@@ -9,11 +9,11 @@ import { useNotification } from "@/hooks/useNotification";
 import PasswordBox from "@/components/shared/password/PasswordBox";
 import { changePassword } from "@/services/auth.service";
 
-export default function ChangePassword() {
+function ChangePasswordContent() {
   const searchParams = useSearchParams();
   const router = useRouter();
 
-  const token = searchParams.get('token')
+  const token = searchParams?.get('token')
 
   const { 
     message, 
@@ -94,3 +94,15 @@ export default function ChangePassword() {
     </div>
   );
 }
+
+export default function ChangePassword() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen bg-[url('/auth/signup.png')] bg-cover bg-no-repeat bg-center flex items-center justify-center px-4 md:px-16">
+        <ChefLoader text="" />
+      </div>
+    }>
+      <ChangePasswordContent />
+    </Suspense>
+  );
+}

src/components/calendar/RecipeCard.tsx

@@ -21,7 +21,7 @@ export default function RecipeCard({ recipe, onDelete, onAdd, isEmpty = false }:
         return (
             <div
                 onClick={onAdd}
-                className="h-full min-h-[100px] md:min-h-[120px] border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center cursor-pointer hover:border-color-primary-medium hover:bg-gray-50 transition-colors"
+                className="h-full min-h-[110px] md:min-h-[130px] border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center cursor-pointer hover:border-color-primary-medium hover:bg-gray-50 transition-colors"
             >
                 <FontAwesomeIcon
                     icon={faPlus}
@@ -44,9 +44,9 @@ export default function RecipeCard({ recipe, onDelete, onAdd, isEmpty = false }:
                     <FontAwesomeIcon icon={faXmark} className="text-xs md:text-sm" />
                 </button>
             )}
-            <div className="h-full p-2 md:p-3 border border-gray-200 rounded-lg hover:shadow-md transition-shadow bg-white">
+            <div className="h-full min-h-[110px] md:min-h-[130px] p-3 md:p-2 border border-gray-200 rounded-lg hover:shadow-md transition-shadow bg-white overflow-hidden">
                 <div className="flex flex-col h-full">
-                    <div className="relative w-full aspect-[4/3] mb-2">
+                    <div className="relative w-full aspect-[4/3] mb-2 flex-shrink-0">
                         <Image
                             src={!imageError ? imageSrc : '/others/default-recipe.png'}
                             alt={recipe.title || 'Receta sin título'}
@@ -60,9 +60,11 @@ export default function RecipeCard({ recipe, onDelete, onAdd, isEmpty = false }:
                             }}
                         />
                     </div>
-                    <h3 className="text-xs md:text-sm font-medium text-gray-800 line-clamp-2 min-h-[2.5em]">
-                        {recipe.title || 'Sin título'}
-                    </h3>
+                    <div className="flex-1 overflow-hidden">
+                        <h3 className="text-[10px] md:text-xs font-medium text-gray-800 leading-tight break-words line-clamp-2">
+                            {recipe.title || 'Sin título'}
+                        </h3>
+                    </div>
                 </div>
             </div>
         </div>

src/components/home/HeroHome.tsx

@@ -52,7 +52,7 @@ export default function HeroHome() {
       {/* Contenido centrado */}
       <div className="relative z-10 flex items-center justify-center h-full text-center px-4">
         <div className="bg-white bg-opacity-70 rounded-xl shadow-lg px-6 py-8 w-full max-w-3xl min-h-[200px] flex flex-col items-center justify-center">
-          <h1 className="text-black text-3xl md:text-5xl font-bold mb-6">
+          <h1 className="text-gray-700 text-3xl md:text-5xl font-bold mb-6">
             {saludo}
           </h1>
 

src/components/meal-prep/IngredientList.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { IngredientsListProps } from "@/types";
 
 const IngredientsList: React.FC<IngredientsListProps> = ({ ingredients }) => (
-  <ContainerCardDetail title="Ingredientes necesarios">
+  <ContainerCardDetail title="Ingredientes">
     <div className="flex flex-col items-center space-y-3 mt-4">
       {ingredients.map((ingredient, i) => (
         <div key={i} className="flex items-center justify-center min-w-[200px]">