feat: implement rating summary service methods and integrate rating display components into the organization header and pending ratings page

2026-07-22 12:13:50 -03:00
parent 383a5bc6b4
commit da3c3abb52
27 changed files with 1334 additions and 104 deletions
@@ -10,7 +10,8 @@
        overflow: hidden;
    }

-    .organizationHeader div {
+    .organizationHeaderBanner {
+        position: relative;
        border: solid 1px var(--gray-dark);
        border-radius: 0px;
        width: 100%;
@@ -30,6 +31,51 @@
        padding-left: 15px;
        padding-top: 10px;
    }
+
+    .organizationRatingSummary {
+        position: absolute;
+        right: 12px;
+        bottom: 12px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        max-width: calc(100% - 24px);
+        padding: 8px 10px;
+        border: 1px solid rgba(255, 255, 255, 0.42);
+        border-radius: 18px;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.62));
+        box-shadow: 0px 10px 26px rgba(0, 0, 0, 0.22);
+        color: var(--wine-black);
+        white-space: nowrap;
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+    }
+
+    .organizationRatingStars :global(.MuiRating-iconFilled),
+    .organizationRatingStars :global(.MuiRating-iconHover) {
+        color: #f5b83b;
+        filter: drop-shadow(0px 1px 1px rgba(82, 43, 0, 0.3));
+    }
+
+    .organizationRatingText {
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+        line-height: 1;
+    }
+
+    .organizationRatingText strong {
+        font-size: 15px;
+        font-weight: 800;
+        letter-spacing: -0.02em;
+    }
+
+    .organizationRatingText span {
+        color: rgba(35, 26, 31, 0.72);
+        font-size: 11px;
+        font-weight: 700;
+    }
 }

@media (min-width: 801px) {
@@ -44,7 +90,8 @@
        overflow: hidden;
    }

-    .organizationHeader div {
+    .organizationHeaderBanner {
+        position: relative;
        border: solid 1px var(--gray-dark);
        border-radius: 5px;
        width: 100%;
@@ -62,4 +109,48 @@
        padding-left: 20px;
        padding-top: 10px;
    }
+
+    .organizationRatingSummary {
+        position: absolute;
+        right: 24px;
+        bottom: 18px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+        padding: 11px 15px 11px 14px;
+        border: 1px solid rgba(255, 255, 255, 0.42);
+        border-radius: 20px;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.6));
+        box-shadow: 0px 14px 34px rgba(0, 0, 0, 0.22);
+        color: var(--wine-black);
+        white-space: nowrap;
+        backdrop-filter: blur(14px);
+        -webkit-backdrop-filter: blur(14px);
+    }
+
+    .organizationRatingStars :global(.MuiRating-iconFilled),
+    .organizationRatingStars :global(.MuiRating-iconHover) {
+        color: #f5b83b;
+        filter: drop-shadow(0px 1px 1px rgba(82, 43, 0, 0.32));
+    }
+
+    .organizationRatingText {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        line-height: 1;
+    }
+
+    .organizationRatingText strong {
+        font-size: 17px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+    }
+
+    .organizationRatingText span {
+        color: rgba(35, 26, 31, 0.72);
+        font-size: 12px;
+        font-weight: 700;
+    }
 }
@@ -2,6 +2,10 @@
 import { PublicOrganizationView } from "@core/Models/Company.model";
 import style from "./OrganizationHeader.module.css";
 import { useNavigation } from "@core/app/hooks/goto";
+import { Rating } from "@mui/material";
+import { RatingTargetSummaryResult, RatingTargetType } from "@core/Models/Ratings.model";
+import { ratingTargetSummary } from "@services/Ratings.Service";
+import { useEffect, useState } from "react";

 export interface OrganizationHeaderProps {
    organization: PublicOrganizationView;
@@ -10,12 +14,33 @@ export interface OrganizationHeaderProps {
 export default function OrganizationHeader(props: OrganizationHeaderProps) {
    const { organization } = props;
    const { goTo } = useNavigation();
+    const [ratingSummary, setRatingSummary] = useState<RatingTargetSummaryResult>({ averageScore: 0, totalCount: 0 });
+
+    useEffect(() => {
+        if (!organization.id) {
+            setRatingSummary({ averageScore: 0, totalCount: 0 });
+            return;
+        }
+
+        ratingTargetSummary({
+            targetType: RatingTargetType.COMPANY,
+            targetId: organization.id,
+        })
+            .then((response) => {
+                setRatingSummary(response);
+            })
+            .catch(() => {
+                setRatingSummary({ averageScore: 0, totalCount: 0 });
+            });
+    }, [organization.id]);
+
    return (
        <div
            className={style.organizationHeader}
            onClick={() => goTo("/landing/org/" + organization.id)}
        >
            <div
+                className={style.organizationHeaderBanner}
                style={{
                    ...(organization.headerFile ? { backgroundImage: `url(${organization.headerFile})` } : {}),
                    backgroundColor: organization.headerColor || 'transparent',
@@ -42,6 +67,23 @@ export default function OrganizationHeader(props: OrganizationHeaderProps) {
                >
                    {organization.description}
                </p>
+                {ratingSummary.totalCount > 0 && (
+                    <div className={style.organizationRatingSummary}>
+                        <Rating
+                            className={style.organizationRatingStars}
+                            value={ratingSummary.averageScore}
+                            precision={0.1}
+                            readOnly
+                            size="small"
+                        />
+                        <div className={style.organizationRatingText}>
+                            <strong>{ratingSummary.averageScore.toFixed(1)}</strong>
+                            <span>
+                                {ratingSummary.totalCount} {ratingSummary.totalCount === 1 ? "opinión" : "opiniones"}
+                            </span>
+                        </div>
+                    </div>
+                )}
            </div>
        </div>
    );
@@ -5,6 +5,7 @@ import { PublicServiceView } from "@models/Service.model";

 import style from "./style.module.css";
 import { getServiceImage } from "@core/helpers/getServiceImage";
+import ServiceRatingSummary from "@components/ServiceRatingSummary/ServiceRatingSummary";

 export type FindResultsViewMode = "grid" | "card";

@@ -45,25 +46,28 @@ export default function ProductItem(props: ProductItemProps) {
                        goTo(`/landing/service/${product.id}`);
                    }}
                >
-                    <img
-                        src={getServiceImage(product.image)}
-                        alt={product.name}
-                        draggable="false"
-                        style={{
-                            width: "100%",
-                            height: "auto",
-                            borderRadius: "10px",
-                        }}
-                    />
-                    <h3
-                        style={{
-                            fontSize: "1.2rem",
-                            margin: "10px 0",
-                            textTransform: "capitalize",
-                        }}
-                    >
-                        {product.name}
-                    </h3>
+                    <div className={style.cardImageWrap}>
+                        <img
+                            src={getServiceImage(product.image)}
+                            alt={product.name}
+                            draggable="false"
+                            style={{
+                                width: "100%",
+                                height: "auto",
+                                borderRadius: "10px",
+                                display: "block",
+                            }}
+                        />
+                        <ServiceRatingSummary
+                            serviceId={product.id}
+                            variant="card"
+                            displayMode="compact"
+                            showOpinionCount={false}
+                        />
+                    </div>
+                    <div className={style.cardHeader}>
+                        <h3 className={style.cardTitle}>{product.name}</h3>
+                    </div>
                    <p style={{ fontSize: "0.9rem", color: "#555" }}>{product.description}</p>
                    <span
                        style={{
@@ -119,8 +123,11 @@ export default function ProductItem(props: ProductItemProps) {
                            margin: "10px",
                        }}
                    />
-                    <div>
-                        <h3 className={style.itemTitle}>{product.name}</h3>
+                    <div className={style.itemContent}>
+                        <div className={style.itemHeader}>
+                            <h3 className={style.itemTitle}>{product.name}</h3>
+                            <ServiceRatingSummary serviceId={product.id} variant="row" showOpinionCount={false} />
+                        </div>

                        <p
                            className={style.itemDescription}
@@ -1,3 +1,43 @@
+.cardImageWrap {
+    position: relative;
+}
+
+.cardImageWrap > :not(img) {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+}
+
+.cardHeader {
+    margin: 10px 0;
+    text-align: center;
+}
+
+.cardTitle {
+    font-size: 1.2rem;
+    margin: 0;
+    text-transform: capitalize;
+    overflow-wrap: anywhere;
+}
+
+.itemContent {
+    flex: 1;
+    min-width: 0;
+}
+
+.itemHeader {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin: 10px 30px 0 0;
+}
+
+.itemHeader .itemTitle {
+    margin: 0;
+}
+
@media (max-width: 851px) {
    .itemTitle {
        font-size: 1rem;
@@ -5,6 +45,10 @@
        text-transform: capitalize;
    }

+    .itemHeader .itemTitle {
+        margin: 0;
+    }
+
    .itemDescription {
        font-size: 0.9rem;
    }
@@ -21,6 +65,10 @@
        text-transform: capitalize;
    }

+    .itemHeader .itemTitle {
+        margin: 0;
+    }
+
    .itemDescription {
        font-size: 1.1rem;
    }
@@ -0,0 +1,120 @@
+.reviewsCarousel {
+    box-sizing: border-box;
+    width: 100%;
+    margin: 25px 0 22px;
+}
+
+.header {
+    margin: 0 10px 5px;
+}
+
+.header h2 {
+    margin: 0;
+    padding-bottom: 10px;
+    color: #241f1b;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1.25;
+}
+
+.header p {
+    max-width: 620px;
+    margin: 0 0 10px;
+    color: #6d6258;
+    font-size: 0.95rem;
+    line-height: 1.45;
+}
+
+.scroller {
+    display: flex;
+    gap: 20px;
+    width: 100%;
+    padding: 0 10px 12px;
+    overflow-x: auto;
+    cursor: grab;
+    scroll-padding-left: 10px;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: thin;
+    user-select: none;
+}
+
+.dragging {
+    cursor: grabbing;
+}
+
+.reviewCard {
+    display: flex;
+    flex: 0 0 min(360px, calc(100vw - 40px));
+    flex-direction: column;
+    gap: 13px;
+    min-height: 176px;
+    padding: 20px;
+    border: 1px solid rgba(45, 29, 21, 0.1);
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.94);
+    box-shadow: 0 10px 24px rgba(45, 29, 21, 0.06);
+    scroll-snap-align: start;
+}
+
+.rating {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.stars {
+    color: #e8a533;
+    font-size: 1.35rem;
+    letter-spacing: 0.06em;
+    line-height: 1;
+}
+
+.score {
+    color: #342d27;
+    font-size: 0.95rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.comment {
+    flex: 1;
+    margin: 0;
+    color: #2f2924;
+    font-size: 0.98rem;
+    line-height: 1.58;
+}
+
+.footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    color: #8b8178;
+    font-size: 0.86rem;
+}
+
+.authorBlock {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 10px;
+}
+
+.author {
+    overflow: hidden;
+    color: #342d27;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@media (max-width: 700px) {
+    .reviewCard {
+        flex-basis: calc(100vw - 40px);
+    }
+
+    .footer {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+}
@@ -0,0 +1,130 @@
+"use client";
+
+import { useEffect, useRef, useState, type PointerEvent, type ReactElement } from "react";
+import classNames from "classnames";
+import Avatar from "@components/Avatar/Avatar";
+import { RatingTargetReviewItem, RatingTargetType } from "@core/Models/Ratings.model";
+import { ratingTargetReviews } from "@services/Ratings.Service";
+import style from "./ReviewsCarousel.module.css";
+
+interface ReviewsCarouselProps {
+    targetType: RatingTargetType;
+    targetId: string;
+    title?: string;
+    subtitle?: string;
+    className?: string;
+    limit?: number;
+}
+
+const DEFAULT_LIMIT = 20;
+
+const formatReviewDate = (date: string): string => {
+    return new Intl.DateTimeFormat("es-AR", {
+        month: "long",
+        year: "numeric",
+    }).format(new Date(date));
+};
+
+const renderStars = (score: number): string => {
+    const normalizedScore = Math.min(Math.max(Math.round(score), 1), 5);
+    return "★".repeat(normalizedScore) + "☆".repeat(5 - normalizedScore);
+};
+
+const formatScore = (score: number): string => score.toFixed(1);
+
+export default function ReviewsCarousel({
+    targetType,
+    targetId,
+    title = "Lo que dicen quienes ya reservaron",
+    subtitle,
+    className,
+    limit = DEFAULT_LIMIT,
+}: ReviewsCarouselProps): ReactElement | null {
+    const [reviews, setReviews] = useState<RatingTargetReviewItem[]>([]);
+    const [isDragging, setIsDragging] = useState(false);
+    const scrollerRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        let active = true;
+
+        ratingTargetReviews({ targetType, targetId, limit })
+            .then((targetReviews) => {
+                if (active) {
+                    setReviews(targetReviews.filter((review) => review.comment.trim().length > 0));
+                }
+            })
+            .catch(() => {
+                if (active) {
+                    setReviews([]);
+                }
+            });
+
+        return () => {
+            active = false;
+        };
+    }, [targetType, targetId, limit]);
+
+    const handlePointerDown = () => {
+        setIsDragging(true);
+    };
+
+    const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+        const scroller = scrollerRef.current;
+
+        if (!isDragging || !scroller) {
+            return;
+        }
+
+        scroller.scrollLeft -= event.movementX;
+    };
+
+    const stopDragging = () => {
+        setIsDragging(false);
+    };
+
+    if (reviews.length === 0) {
+        return null;
+    }
+
+    return (
+        <section className={classNames(style.reviewsCarousel, className)} aria-label="Opiniones">
+            <div className={style.header}>
+                <h2>{title}</h2>
+                {subtitle && <p>{subtitle}</p>}
+            </div>
+            <div
+                ref={scrollerRef}
+                className={classNames(style.scroller, { [style.dragging]: isDragging })}
+                onPointerDown={handlePointerDown}
+                onPointerMove={handlePointerMove}
+                onPointerUp={stopDragging}
+                onPointerLeave={stopDragging}
+            >
+                {reviews.map((review) => (
+                    <article className={style.reviewCard} key={review.id}>
+                        <div className={style.rating} aria-label={`${formatScore(review.score)} de 5 estrellas`}>
+                            <span className={style.stars} aria-hidden="true">
+                                {renderStars(review.score)}
+                            </span>
+                            <span className={style.score}>{formatScore(review.score)}</span>
+                        </div>
+                        <p className={style.comment}>“{review.comment}”</p>
+                        <div className={style.footer}>
+                            <div className={style.authorBlock}>
+                                <Avatar
+                                    name={`review-author-${review.id}`}
+                                    src={review.author.avatarUrl || review.author.displayName}
+                                    alt={`Avatar de ${review.author.displayName}`}
+                                    size="small"
+                                    border="none"
+                                />
+                                <span className={style.author}>{review.author.displayName}</span>
+                            </div>
+                            <time dateTime={review.createdAt}>{formatReviewDate(review.createdAt)}</time>
+                        </div>
+                    </article>
+                ))}
+            </div>
+        </section>
+    );
+}
@@ -63,6 +63,15 @@
    font-size: 16px;
    font-weight: 700;
    text-align: left;
+    margin: 0;
+}
+
+.serviceHeader {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
 }

 .selectableServiceItem p {
@@ -78,3 +87,11 @@
    font-weight: 700;
    text-align: right;
 }
+
+.selectableServiceItem > div {
+    margin-top: 10px;
+}
+
+.selectableServiceItem > .serviceHeader {
+    margin-top: 0;
+}
@@ -4,6 +4,7 @@ import style from "./SelectableServiceItem.module.css";
 import { formatPrice } from "@helpers/Numbers";
 import { useState } from "react";
 import classNames from "classnames";
+import ServiceRatingSummary from "@components/ServiceRatingSummary/ServiceRatingSummary";

 export interface SelectableServiceItemProps {
    data: CollaboratorServiceItems;
@@ -39,7 +40,10 @@ export default function SelectableServiceItem(
    return (
        <>
            <div className={getClassesNames()} onClick={handleClick}>
-                <h1>{props.data.name}</h1>
+                <div className={style.serviceHeader}>
+                    <h1>{props.data.name}</h1>
+                    <ServiceRatingSummary serviceId={props.data.id} variant="row" showOpinionCount={false} />
+                </div>
                <p>{props.data.description}</p>
                <span>{formatPrice(props.data.price)}</span>
            </div>
@@ -56,6 +56,7 @@
    margin-top: auto;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
+    margin-top: 12px;
 }

 .collaboratorInfo {
@@ -6,6 +6,7 @@ import dayjs from "dayjs";
 import "dayjs/locale/es";
 import { testContrast } from "@core/app/theme/scheduleView";
 import { formatDateLarge, formatTimeInterval } from "@core/helpers/format";
+import ServiceRatingSummary from "@components/ServiceRatingSummary/ServiceRatingSummary";

 dayjs.locale("es");

@@ -36,6 +37,8 @@ export default function ServiceItem(props: ServiceItemProps): React.ReactElement
                <div className={style.serviceDescription}>{props.data.serviceDescription}</div>
            )}

+            <ServiceRatingSummary serviceId={props.data.serviceId} variant="card" />
+
            <div className={style.cardFooter}>
                <div className={style.collaboratorInfo}>
                    <Avatar
@@ -0,0 +1,82 @@
+.serviceRatingSummary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    width: fit-content;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    border-radius: 18px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.68));
+    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
+    color: var(--wine-black);
+    white-space: nowrap;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.card {
+    margin-top: 10px;
+    padding: 5px 9px;
+    box-shadow: none;
+}
+
+.row {
+    padding: 5px 9px;
+    box-shadow: none;
+}
+
+.serviceRatingStars :global(.MuiRating-iconFilled),
+.serviceRatingStars :global(.MuiRating-iconHover) {
+    color: #f5b83b;
+    filter: drop-shadow(0 1px 1px rgba(82, 43, 0, 0.26));
+}
+
+.card .serviceRatingStars :global(.MuiRating-iconFilled),
+.card .serviceRatingStars :global(.MuiRating-iconHover),
+.row .serviceRatingStars :global(.MuiRating-iconFilled),
+.row .serviceRatingStars :global(.MuiRating-iconHover) {
+    filter: none;
+}
+
+.serviceRatingText {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 1px;
+    line-height: 1;
+}
+
+.serviceRatingText strong {
+    font-size: 14px;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+}
+
+.serviceRatingText span {
+    color: rgba(35, 26, 31, 0.72);
+    font-size: 10px;
+    font-weight: 700;
+}
+
+.compact {
+    gap: 4px;
+    margin-top: 0;
+    padding: 3px 7px 3px 6px;
+    border: 1px solid rgba(255, 255, 255, 0.58);
+    background: rgba(255, 255, 255, 0.68);
+    box-shadow: none;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.compact strong {
+    font-size: 13px;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    line-height: 1;
+}
+
+.compactStar {
+    color: #f5b83b;
+    font-size: 20px;
+    line-height: 1;
+}
@@ -0,0 +1,79 @@
+"use client";
+import { Rating } from "@mui/material";
+import { RatingTargetSummaryResult, RatingTargetType } from "@core/Models/Ratings.model";
+import { ratingTargetSummary } from "@services/Ratings.Service";
+import { useEffect, useState } from "react";
+import style from "./ServiceRatingSummary.module.css";
+
+export interface ServiceRatingSummaryProps {
+    serviceId?: string;
+    variant?: "card" | "row";
+    displayMode?: "default" | "compact";
+    showOpinionCount?: boolean;
+}
+
+export default function ServiceRatingSummary(props: ServiceRatingSummaryProps): React.ReactElement | null {
+    const { serviceId, variant = "card", displayMode = "default", showOpinionCount = true } = props;
+    const [ratingSummary, setRatingSummary] = useState<RatingTargetSummaryResult>({ averageScore: 0, totalCount: 0 });
+
+    useEffect(() => {
+        if (!serviceId) {
+            setRatingSummary({ averageScore: 0, totalCount: 0 });
+            return;
+        }
+
+        let isMounted = true;
+
+        ratingTargetSummary({
+            targetType: RatingTargetType.SERVICE,
+            targetId: serviceId,
+        })
+            .then((response) => {
+                if (isMounted) {
+                    setRatingSummary(response);
+                }
+            })
+            .catch(() => {
+                if (isMounted) {
+                    setRatingSummary({ averageScore: 0, totalCount: 0 });
+                }
+            });
+
+        return () => {
+            isMounted = false;
+        };
+    }, [serviceId]);
+
+    if (ratingSummary.totalCount <= 0) {
+        return null;
+    }
+
+    if (displayMode === "compact") {
+        return (
+            <div className={`${style.serviceRatingSummary} ${style[variant]} ${style.compact}`}>
+                <span className={style.compactStar} aria-hidden="true">★</span>
+                <strong>{ratingSummary.averageScore.toFixed(1)}</strong>
+            </div>
+        );
+    }
+
+    return (
+        <div className={`${style.serviceRatingSummary} ${style[variant]}`}>
+            <Rating
+                className={style.serviceRatingStars}
+                value={ratingSummary.averageScore}
+                precision={0.1}
+                readOnly
+                size="small"
+            />
+            <div className={style.serviceRatingText}>
+                <strong>{ratingSummary.averageScore.toFixed(1)}</strong>
+                {showOpinionCount && (
+                    <span>
+                        {ratingSummary.totalCount} {ratingSummary.totalCount === 1 ? "opinión" : "opiniones"}
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+}
@@ -96,6 +96,27 @@
    font-weight: 500;
 }

+.professionalRating {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    margin-top: 8px;
+    color: #f59e0b;
+}
+
+.professionalRating strong {
+    font-size: 15px;
+    letter-spacing: 1px;
+    line-height: 1;
+}
+
+.professionalRating small {
+    color: #4b5563;
+    font-size: 12px;
+    font-weight: 700;
+}
+
 .userMenuOptionsContainer {
    flex-grow: 1;
    overflow-y: auto;
@@ -18,6 +18,8 @@ import dayjs from "dayjs";
 import { loadOrganizationsByUser } from "@core/app/admin/org/Org.Service";
 import { MyOranizationsView } from "@core/Models/Company.model";
 import SelectOrganizationPopup from "./SelectOrganizationPopup";
+import { professionalRatingSummaryByUser } from "@core/Services/Ratings.Service";
+import { RatingTargetSummaryResult } from "@core/Models/Ratings.model";

 export default function UserMenu(): React.ReactElement {
    const router = useRouter();
@@ -33,6 +35,10 @@ export default function UserMenu(): React.ReactElement {
    const [clientSocket, setClientSocket] = useState<Socket | undefined>(undefined);
    const [showOrgPopup, setShowOrgPopup] = useState(false);
    const [userOrgs, setUserOrgs] = useState<MyOranizationsView[]>([]);
+    const [professionalRating, setProfessionalRating] = useState<RatingTargetSummaryResult>({
+        averageScore: 0,
+        totalCount: 0,
+    });
    useEffect(() => {
        try {
            //TODO: Comprobar si se arregla el problema...
@@ -100,6 +106,17 @@ export default function UserMenu(): React.ReactElement {
        };
    }, [clientSocket]);

+    useEffect(() => {
+        if (!SessionInfo.loged || !SessionInfo.userId) {
+            setProfessionalRating({ averageScore: 0, totalCount: 0 });
+            return;
+        }
+
+        professionalRatingSummaryByUser({ sessionUser: SessionInfo.userId })
+            .then(setProfessionalRating)
+            .catch(() => setProfessionalRating({ averageScore: 0, totalCount: 0 }));
+    }, [SessionInfo.loged, SessionInfo.userId]);
+
    const toggleMenu = () => {
        menuState.setVisible(!menuState.visible);
    };
@@ -157,6 +174,11 @@ export default function UserMenu(): React.ReactElement {
        return "/anonimus-avatar.svg";
    };

+    const getRatingStars = (score: number) => {
+        const roundedScore = Math.round(score);
+        return Array.from({ length: 5 }, (_, index) => (index < roundedScore ? "★" : "☆")).join("");
+    };
+
    return (
        <>
            <div className={classBackgroundData} onClick={toggleMenu}></div>
@@ -173,6 +195,14 @@ export default function UserMenu(): React.ReactElement {
                    <div>
                        <h1>{getUserName()}</h1>
                        <span>{getUserEmail()}</span>
+                        {professionalRating.totalCount > 0 && (
+                            <div className={style.professionalRating} aria-label={`Puntaje profesional ${professionalRating.averageScore.toFixed(1)} de 5`}>
+                                <strong>{getRatingStars(professionalRating.averageScore)}</strong>
+                                <small>
+                                    {professionalRating.averageScore.toFixed(1)} ({professionalRating.totalCount})
+                                </small>
+                            </div>
+                        )}
                    </div>
                </div>
                <div className={style.userMenuOptionsContainer}>