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

txclient/src/app/components/ProductItem/ProductItem.tsx

@@ -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}

txclient/src/app/components/ProductItem/style.module.css

@@ -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;
     }