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

txclient/src/app/components/SelectebleServiceItem/SelectableServiceItem.module.css

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

txclient/src/app/components/SelectebleServiceItem/SelectableServiceItem.tsx

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