feat(dimentorin): senpai statistics from API (total sessions, mentee impact, avg rating)

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-statistics.tsx

@@ -1,14 +1,23 @@
 import { StarFilled } from "@ant-design/icons";
 import { For } from "@imphnen-frontend-service/utils";
+import { useGetMentorStats } from "@imphnen-frontend-service/service";
 import { FC } from "react";
 
-const SENPAI_STATISTIC = [
-  { name: 'Total Sessions', count: 8 },
-  { name: 'Mentee Impact', count: 1000 },
-  { name: 'Response Time', count: '30 Minute' }
-]
+type Props = {
+  mentorId?: string;
+};
+
+const formatCount = (n: number) => (n >= 1000 ? `${(n / 1000).toFixed(n >= 100000 ? 0 : 1)}k` : `${n}`);
+
+export const StatisticsSection: FC<Props> = ({ mentorId }) => {
+  const { data: stats } = useGetMentorStats(mentorId ?? "")
+
+  const SENPAI_STATISTIC: { name: string; count: string }[] = [
+    { name: 'Total Sessions', count: formatCount(stats?.total_sessions ?? 0) },
+    { name: 'Mentee Impact', count: formatCount(stats?.unique_mentees ?? 0) },
+    { name: 'Avg Rating', count: stats && stats.avg_rating > 0 ? `${stats.avg_rating}/5` : '-' },
+  ]
 
-export const StatisticsSection: FC = () => {
   return (
     <div className="md:mb-10">
       <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Senpai Statistics</h2>

apps/dimentorin/src/app/(public)/mentoring/[id]/page.tsx

@@ -40,7 +40,7 @@ export const Components: FC = () => {
 
             <div className="bg-white px-4 py-5 md:px-8 md:pb-6 md:pt-0 xl:py-7 xl:flex xl:gap-x-10">
               <div className="space-y-10 md:space-y-7 xl:flex-1">
-                <StatisticsSection />
+                <StatisticsSection mentorId={mentor?.id} />
                 <TopicsSection />
 
                 <div className="px-6 py-8 rounded-md shadow-md">