feat: introduce trail api and depreciate old api

front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { EyeOpenIcon, Pencil2Icon } from "@radix-ui/react-icons";
-import { closeActivity, createActivity } from "@services/courses/activity";
+import {  removeCourse, startCourse } from "@services/courses/activity";
 import Link from "next/link";
 import React from "react";
 import styled from "styled-components";
@@ -13,21 +13,19 @@ const CourseIdPage = (params: any) => {
   const orgslug = params.params.orgslug;
   const { data: course, error: error } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`, swrFetcher);
 
-  async function startActivity() {
+  async function startCourseUI() {
     // Create activity
-    await createActivity("course_" + courseid);
+    await startCourse("course_" + courseid,  orgslug);
 
     // Mutate course
     mutate(`${getAPIUrl()}courses/meta/course_${courseid}`);
   }
 
-  async function quitActivity() {
-    // Get activity id and org id
-    let activity_id = course.activity.activity_id;
-    let org_id = course.activity.org_id;
+  async function quitCourse() {
+
 
     // Close activity
-    let activity = await closeActivity(activity_id, org_id);
+    let activity = await removeCourse("course_" + courseid,  orgslug);
     console.log(activity);
 
     // Mutate course
@@ -111,12 +109,12 @@ const CourseIdPage = (params: any) => {
               </BoxWrapper>
             </CourseMetaLeft>
             <CourseMetaRight>
-              {course.activity.status == "ongoing" ? (
-                <button style={{ backgroundColor: "red" }} onClick={quitActivity}>
-                  Quit Activity
+              {course.trail.status == "ongoing" ? (
+                <button style={{ backgroundColor: "red" }} onClick={quitCourse}>
+                  Quit Course
                 </button>
               ) : (
-                <button onClick={startActivity}>Start Activity</button>
+                <button onClick={startCourseUI}>Start Course</button>
               )}
             </CourseMetaRight>
           </CourseMetaWrapper>

front/app/_orgs/[orgslug]/(withmenu)/layout.tsx

@@ -7,7 +7,7 @@ export default function RootLayout({ children, params }: { children: React.React
   return (
     <>
       <AuthProvider>
-        <Menu></Menu>
+        <Menu orgslug={params.orgslug}></Menu>
         {children}
       </AuthProvider>
     </>

front/app/_orgs/[orgslug]/(withmenu)/trail/page.tsx

@@ -5,42 +5,43 @@ import React from "react";
 import { styled } from "styled-components";
 import useSWR from "swr";
 
-function Activity(params: any) {
+function Trail(params: any) {
   let orgslug = params.params.orgslug;
-  const { data: activities, error: error } = useSWR(`${getAPIUrl()}activity/org_slug/${orgslug}/activities`, swrFetcher);
-
+  const { data: trail, error: error } = useSWR(`${getAPIUrl()}trail/org_slug/${orgslug}/trail`, swrFetcher);
+  
+  
   return (
-    <ActivityLayout>
-      <h1>Activity</h1>
+    <TrailLayout>
+      <h1>Trail</h1>
       <br />
       {error && <p>Failed to load</p>}
-      {!activities ? (
+      {!trail ? (
         <div>Loading...</div>
       ) : (
         <div>
-          {activities.map((activity: any) => (
-            <ActivityBox key={activity.activity_id}>
-              <ActivityMetadata>
-                <ActivityThumbnail>
-                  <img src={`${getBackendUrl()}content/uploads/img/${activity.course.thumbnail}`}></img>
-                </ActivityThumbnail>
-                <ActivityInfo>
+          {trail.courses.map((course: any) => (
+            <TrailBox key={trail.trail_id}>
+              <TrailMetadata>
+                <TrailThumbnail>
+                  <img src={`${getBackendUrl()}content/uploads/img/${course.course_object.thumbnail}`}></img>
+                </TrailThumbnail>
+                <TrailInfo>
                   <h2>Course</h2>
-                  <h3>{activity.course.name}</h3>
-                </ActivityInfo>
-              </ActivityMetadata>
-              <ActivityProgress progress={activity.progression} />
-            </ActivityBox>
+                  <h3>{course.course_object.name}</h3>
+                </TrailInfo>
+              </TrailMetadata>
+              <TrailProgress progress={course.progress} />
+            </TrailBox>
           ))}
         </div>
       )}
-    </ActivityLayout>
+    </TrailLayout>
   );
 }
 
-export default Activity;
+export default Trail;
 
-const ActivityLayout = styled.div`
+const TrailLayout = styled.div`
   display: flex;
   margin: 0 auto;
   width: 1300px;
@@ -48,13 +49,13 @@ const ActivityLayout = styled.div`
   flex-direction: column;
 `;
 
-const ActivityMetadata = styled.div`
+const TrailMetadata = styled.div`
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 100%;
 `;
-const ActivityBox = styled.div`
+const TrailBox = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -67,7 +68,7 @@ const ActivityBox = styled.div`
   background: #ffffff;
 `;
 
-const ActivityThumbnail = styled.div`
+const TrailThumbnail = styled.div`
   padding-right: 30px;
   height: 100%;
   border-radius: 7px 0px 0px 7px;
@@ -78,7 +79,7 @@ const ActivityThumbnail = styled.div`
   }
 `;
 
-const ActivityInfo = styled.div`
+const TrailInfo = styled.div`
   width: 100%;
   height: 100%;
   background: #ffffff;
@@ -99,7 +100,7 @@ const ActivityInfo = styled.div`
   }
 `;
 
-const ActivityProgress = styled.div`
+const TrailProgress = styled.div`
   margin-top: 10px;
   border-radius: 20px;
   height: 10px;