fixed the total Students hook

src/app/(app)/course/[courseId]/home/(hooks)/useTotalStudents.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse";
+import { useQuery } from "@tanstack/react-query";
+
+const useTotalStudentsQuery = ({ courseId }: { courseId: number }) => {
+  const studentQuery = useQuery<unknown, unknown, { count: number }>({
+    queryKey: [`courses/${courseId}/students`],
+  });
+
+  return {
+    getTotalStudentsAsync: studentQuery.refetch,
+    ...studentQuery,
+  };
+};
+
+export const useTotalStudents = () => {
+  const { courseId } = useCourse();
+  const { data, isLoading, error, getTotalStudentsAsync } = useTotalStudentsQuery({
+    courseId: Number(courseId),
+  });
+
+  return {
+    totalStudents: data?.count ?? 0,
+    isLoading,
+    error,
+    refetch: getTotalStudentsAsync,
+  };
+};

src/app/(app)/course/[courseId]/home/page.tsx

@@ -1,16 +1,23 @@
 "use client"
 import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
 import PageView from "@/components/views/Page"
+import { useToast } from "@/hooks/use-toast"
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'
 import 'react-circular-progressbar/dist/styles.css'
-import { useStudents } from "../students/(hooks)/useStudents"
 import { CalculateOnboardingCompletion } from "./(hooks)/calculateOnboardingCompletion"
+import { useTotalStudents } from "./(hooks)/useTotalStudents"
 const HomePage = () => {
   const { courseId } = useCourse()
   const { completionPercentage, nextStepTitle } = CalculateOnboardingCompletion()
-  const {totalStudents} = useStudents()
+  const { totalStudents, error } = useTotalStudents();
+  const {toast} = useToast();
 
-  console.log(totalStudents)
+  if (error) {
+    toast({
+      title: "Error fetching students",
+      description: "There was an error fetching the number of student enrolled on your LMS.",
+    })
+  }
 
   const attributes = [
     "Requirement #1",
@@ -81,7 +88,7 @@ const HomePage = () => {
         <h3 className="text-lg font-semibold mb-2">Sign up Stats</h3>
         <div className="border border-gray-300 p-4 rounded-md">
           <ul className="list-disc list-inside space-y-2">
-            <li>Students Enrolled on Your LMS: <b>50</b></li>
+            <li>Students Enrolled on Your LMS: <b>{totalStudents}</b></li>
             <li>Total Team Formation Acceptions: <b>10</b></li>
           </ul>
         </div>

src/app/(app)/course/[courseId]/page.tsx

@@ -1,7 +1,7 @@
 import { redirect } from "next/navigation"
 
 const CourseHomepage = async ({ params }: { params: { courseId: string } }) => {
-  redirect(`/course/${params.courseId}/setup`)
+  redirect(`/course/${params.courseId}/home`)
 }
 
 export default CourseHomepage

src/app/courses/page.tsx

@@ -84,7 +84,7 @@ export default function CoursesPage() {
                   <Card
                     key={membership.id}
                     className="w-full h-full pb-14 cursor-pointer hover:bg-gray-100 transition"
-                    onClick={() => router.push(`/course/${membership.id}/setup`)}
+                    onClick={() => router.push(`/course/${membership.id}/home`)}
                   >
                     <CardHeader>
                       <CardTitle className="font-semibold text-base lg:text-xl">
@@ -110,7 +110,7 @@ export default function CoursesPage() {
                 <Card
                   key={membership.id}
                   className="w-[350px] m-2 pb-14"
-                  onClick={() => router.push(`/course/${membership.id}/setup`)}
+                  onClick={() => router.push(`/course/${membership.id}/home`)}
                 >
                   <CardHeader>
                     <CardTitle className="font-semibold text-lg lg:text-2xl">