fix: update reservoir names to a friendlier format (e.g. 'Viñuela, La' to 'La Viñuela')

Author: josemi1189

front/src/pods/embalse-cuenca/embalse-cuenca.component.tsx

@@ -1,8 +1,8 @@
-"use client";
 import { Card } from "@/common/components/card.component";
 import { Lookup } from "@/common/models";
 import { generateSlug } from "db-model";
 import Link from "next/link";
+import { formatEmbalseDisplayName } from "@/pods/embalse/embalse-name.helper";
 
 export interface Props {
   nombreCuenca: string;
@@ -26,7 +26,7 @@ export const EmbalseCuencaComponent: React.FC<Props> = (props) => {
               href={`/embalse/${generateSlug(name)}`}
               className="link-accessible"
             >
-              {name}
+              {formatEmbalseDisplayName(name)}
             </Link>
           ))}
         </div>

front/src/pods/embalse-provincia/embalse-provincia.component.tsx

@@ -2,6 +2,7 @@ import { Card } from "@/common/components/card.component";
 import { Lookup } from "@/common/models";
 import Link from "next/link";
 import React from "react";
+import { formatEmbalseDisplayName } from "@/pods/embalse/embalse-name.helper";
 
 interface Props {
   nombreProvincia: string;
@@ -21,7 +22,7 @@ export const EmbalseProvincia: React.FC<Props> = (props) => {
         <div className="grid grid-cols-1 gap-4 p-6 sm:grid-cols-2 md:grid-cols-3">
           {embalses.map(({ id, name }) => (
             <Link key={id} href={`/embalse/${id}`} className="link-accessible">
-              {name}
+              {formatEmbalseDisplayName(name)}
             </Link>
           ))}
         </div>

front/src/pods/embalse/components/reservoir-card-info.component.tsx

@@ -1,6 +1,6 @@
 import { ReservoirInfo } from "../embalse.vm";
 import React from "react";
-import Image from "next/image";
+import { formatEmbalseDisplayName } from "@/pods/embalse/embalse-name.helper";
 
 interface Props {
   reservoirInfo: ReservoirInfo;
@@ -14,7 +14,9 @@ export const ReservoirCardInfo: React.FC<Props> = (props) => {
       className="flex w-full flex-col items-start gap-4"
       aria-labelledby="discover-title"
     >
-      <h2 id="discover-title">Descubre el embalse {reservoirInfo?.name}</h2>
+      <h2 id="discover-title">
+        Descubre el embalse {formatEmbalseDisplayName(reservoirInfo?.name)}
+      </h2>
       <p>{reservoirInfo?.description}</p>
       {reservoirInfo?.mainPicture?.url && (
         <>