feat: redesign trail + add quit course button

front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx

@@ -56,7 +56,7 @@ function ActivityClient(props: ActivityClientProps) {
               <h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{course.course.name}</h1>
             </div>
           </div>
-          <ActivityIndicators current_activity={activityid} orgslug={orgslug} course={course} />
+          <ActivityIndicators course_id={courseid} current_activity={activityid} orgslug={orgslug} course={course} />
 
           <div className="flex justify-between items-center">
             <div className="flex flex-col -space-y-1">

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

@@ -34,7 +34,6 @@ const CourseClient = (props: any) => {
     router.refresh();
   }
 
-  console.log(course);
 
   return (
     <>
@@ -54,7 +53,7 @@ const CourseClient = (props: any) => {
 
           </div>
 
-          <ActivityIndicators orgslug={orgslug} course={course} />
+          <ActivityIndicators course_id={props.course.course.course_id} orgslug={orgslug} course={course} />
 
           <div className="flex flex-row pt-10 flex-wrap">
             <div className="course_metadata_left grow space-y-2">

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

@@ -1,104 +1,33 @@
-"use client";
-import PageLoading from "@components/Objects/Loaders/PageLoading";
-import TypeOfContentTitle from "@components/StyledElements/Titles/TypeOfContentTitle";
-import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
-import { getAPIUrl, getBackendUrl } from "@services/config/config";
-import { swrFetcher } from "@services/utils/ts/requests";
 import React from "react";
-import { styled } from "styled-components";
+import { Metadata } from "next";
-import useSWR from "swr";
+import { getOrganizationContextInfo } from "@services/organizations/orgs";
+import Trail from "./trail";
 
-function Trail(params: any) {
+type MetadataProps = {
-  let orgslug = params.params.orgslug;
+    params: { orgslug: string };
-  const { data: trail, error: error } = useSWR(`${getAPIUrl()}trail/org_slug/${orgslug}/trail`, swrFetcher);
+    searchParams: { [key: string]: string | string[] | undefined };
-  
+};
-  
+
-  return (
+export async function generateMetadata(
-    <GeneralWrapperStyled>
+    { params }: MetadataProps,
-      <TypeOfContentTitle title="Trail" type="tra" />
+): Promise<Metadata> {
-      {!trail ? (
+
-        <PageLoading></PageLoading>
+    // Get Org context information 
-      ) : (
+    const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800, tags: ['organizations'] });
-        <div>
+    return {
-          {trail.courses.map((course: any) => (
+        title: "Trail — " + org.name,
-            <TrailBox key={trail.trail_id}>
+        description: 'Check your progress using trail and easily navigate through your courses.',
-              <TrailMetadata>
+    };
-                <TrailThumbnail>
-                  <img src={`${getBackendUrl()}content/uploads/img/${course.course_object.thumbnail}`}></img>
-                </TrailThumbnail>
-                <TrailInfo>
-                  <h2>Course</h2>
-                  <h3>{course.course_object.name}</h3>
-                </TrailInfo>
-              </TrailMetadata>
-              <TrailProgress progress={course.progress} />
-            </TrailBox>
-          ))}
-        </div>
-      )}
-    </GeneralWrapperStyled>
-  );
 }
 
-export default Trail;
+const TrailPage = async (params: any) => {
+    let orgslug = params.params.orgslug;
 
+    return (
+        <div>
+            <Trail orgslug={orgslug} />
+        </div>
+    );
+};
 
-
+export default TrailPage;
-const TrailMetadata = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100%;
-`;
-const TrailBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  padding: 15px;
-  border-radius: 7px;
-  box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.206);
-  background: #ffffff;
-`;
-
-const TrailThumbnail = styled.div`
-  padding-right: 30px;
-  height: 100%;
-  border-radius: 7px 0px 0px 7px;
-
-  img {
-    width: 60px;
-    border-radius: 7px;
-  }
-`;
-
-const TrailInfo = styled.div`
-  width: 100%;
-  height: 100%;
-  background: #ffffff;
-  border-radius: 0px 7px 7px 0px;
-
-  h2 {
-    font-size: 12px;
-    color: #2b2b2b;
-    padding: 0;
-    margin: 0;
-  }
-
-  h3 {
-    font-size: 23px;
-    color: #2b2b2b;
-    padding: 0;
-    margin: 0;
-  }
-`;
-
-const TrailProgress = styled.div`
-  margin-top: 10px;
-  border-radius: 20px;
-  height: 10px;
-  width: ${(props: any) => props.progress + "%"};
-  background: #06a487;
-`;

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

@@ -0,0 +1,38 @@
+"use client";
+import PageLoading from "@components/Objects/Loaders/PageLoading";
+import TrailCourseElement from "@components/Pages/Trail/TrailCourseElement";
+import TypeOfContentTitle from "@components/StyledElements/Titles/TypeOfContentTitle";
+import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
+import { getAPIUrl } from "@services/config/config";
+import { removeCourse } from "@services/courses/activity";
+import { revalidateTags, swrFetcher } from "@services/utils/ts/requests";
+import React from "react";
+import useSWR, { mutate } from "swr";
+
+function Trail(params: any) {
+  let orgslug = params.orgslug;
+  const { data: trail, error: error } = useSWR(`${getAPIUrl()}trail/org_slug/${orgslug}/trail`, swrFetcher);
+
+
+  return (
+    <GeneralWrapperStyled>
+      <TypeOfContentTitle title="Trail" type="tra" />
+      {!trail ? (
+        <PageLoading></PageLoading>
+      ) : (
+        <div className="space-y-6">
+          {trail.courses.map((course: any) => (
+            <TrailCourseElement key={trail.trail_id} orgslug={orgslug} course={course} />
+          ))}
+
+        </div>
+      )}
+    </GeneralWrapperStyled>
+  );
+}
+
+export default Trail;
+
+
+
+

front/components/Objects/Loaders/PageLoading.tsx

@@ -5,8 +5,8 @@ function PageLoading() {
         <div className="max-w-7xl mx-auto px-4 py-20">
             <div className="animate-pulse mx-auto flex space-x-4">
                 <svg className="mx-auto" width="295" height="295" viewBox="0 0 295 295" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <rect opacity="0.51" x="6.5" y="6.5" width="282" height="282" rx="78.5" stroke="#454545" stroke-opacity="0.46" stroke-width="13" stroke-dasharray="11 11" />
+                    <rect opacity="0.51" x="6.5" y="6.5" width="282" height="282" rx="78.5" stroke="#454545" strokeOpacity="0.46" stroke-width="13" stroke-dasharray="11 11" />
-                    <path d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z" fill="#454545" fill-opacity="0.13" />
+                    <path d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z" fill="#454545" fillOpacity="0.13" />
                 </svg>
             </div>
         </div>

front/components/Objects/Menu/Menu.tsx

@@ -9,7 +9,7 @@ import { HeaderProfileBox } from "@components/Security/HeaderProfileBox";
 export const Menu = async (props: any) => {
     const orgslug = props.orgslug;
     const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
-  
+
 
     return (
         <>
@@ -88,7 +88,7 @@ const LearnHouseLogo = () => {
         <svg width="133" height="80" viewBox="0 0 433 80" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect width="80" height="80" rx="24" fill="black" />
             <rect width="80" height="80" rx="24" fill="url(#paint0_angular_1555_220)" />
-            <rect x="0.5" y="0.5" width="79" height="79" rx="23.5" stroke="white" stroke-opacity="0.12" />
+            <rect x="0.5" y="0.5" width="79" height="79" rx="23.5" stroke="white" strokeOpacity="0.12" />
             <path d="M37.546 55.926V35.04L33.534 30.497L37.546 29.258V27.016L33.534 22.473L44.626 19.11V55.926L48.992 61H33.18L37.546 55.926Z" fill="white" />
             <path d="M113.98 54.98V30.2L109.22 24.81L113.98 23.34V20.68L109.22 15.29L122.38 11.3V54.98L127.56 61H108.8L113.98 54.98ZM157.704 41.19V41.26H135.234C136.004 50.29 140.834 54.07 146.294 54.07C151.054 54.07 155.254 51.69 156.304 48.75L157.354 49.17C154.834 55.54 149.864 61.98 141.534 61.98C132.364 61.98 127.184 53.79 127.184 45.39C127.184 36.36 132.784 26 144.194 26C152.524 26 157.634 31.6 157.704 41.05L157.774 41.19H157.704ZM148.674 39.16V38.53C148.674 31.04 145.664 28.1 142.584 28.1C137.264 28.1 135.094 34.47 135.094 38.67V39.16H148.674ZM178.717 61V55.12C176.057 57.71 171.157 61.7 166.537 61.7C161.707 61.7 158.137 59.32 158.137 53.65C158.137 46.51 166.607 42.87 178.717 38.6C178.717 33 178.577 28.66 172.837 28.66C167.237 28.66 163.877 32.58 160.307 37.9H159.817V26.7H188.657L187.117 32.72V56.45H187.187L192.367 61H178.717ZM178.717 53.23V40.56C167.727 44.97 167.377 47.98 167.377 51.34C167.377 54.7 169.687 56.17 172.627 56.17C174.797 56.17 176.967 55.05 178.717 53.23ZM221.429 39.09H220.869C217.789 31.74 213.659 29.29 210.439 29.29C205.609 29.29 205.609 32.79 205.609 39.93V54.98L212.119 61H192.029L197.209 54.98V32.09L192.449 26.7H221.429V39.09ZM261.467 61H242.707L247.747 54.98V39.44C247.747 34.05 246.977 30.62 241.587 30.62C238.997 30.62 236.337 31.74 234.097 34.75V54.98L239.137 61H220.377L225.697 54.98V36.08L220.937 30.69L234.097 26V32.37C236.897 28.03 241.447 25.86 245.647 25.86C252.787 25.86 256.147 30.48 256.147 37.06V54.98L261.467 61ZM274.343 11.3V32.23C277.143 27.89 281.693 25.72 285.893 25.72C293.033 25.72 296.393 30.34 296.393 36.92V54.98H296.463L301.643 61H282.883L287.993 55.05V39.3C287.993 33.91 287.223 30.48 281.833 30.48C279.243 30.48 276.583 31.6 274.343 34.61V54.98L279.523 61H260.763L265.943 54.98V21.38L261.183 15.99L274.343 11.3ZM335.945 42.31C335.945 51.34 329.855 61.84 316.835 61.84C306.895 61.84 301.645 53.79 301.645 45.39C301.645 36.36 307.735 25.86 320.755 25.86C330.695 25.86 335.945 33.91 335.945 42.31ZM316.975 28.52C311.165 28.52 310.535 34.82 310.535 39.02C310.535 49.94 314.525 59.18 320.685 59.18C325.865 59.18 327.195 52.32 327.195 48.68C327.195 37.76 323.135 28.52 316.975 28.52ZM349.01 26.63V48.12C349.01 53.51 349.78 56.94 355.17 56.94C357.55 56.94 360 55.75 361.82 53.65V32.72L356.64 26.63H370.22V55.26L374.98 61L361.82 61.42V55.82C359.3 59.32 356.08 61.7 351.11 61.7C343.97 61.7 340.61 57.08 340.61 50.5V32.72L335.36 26.63H349.01ZM374.617 47.77H375.177C376.997 53.79 382.527 59.04 388.267 59.04C391.137 59.04 393.517 57.64 393.517 54.49C393.517 46.23 374.967 50.29 374.967 36.43C374.967 31.25 379.517 26.7 386.657 26.7H394.357L396.947 25.23V36.85L396.527 36.78C394.007 32.23 389.807 28.87 385.327 28.94C382.387 29.01 380.707 30.83 380.707 33.56C380.707 40.77 399.887 37.62 399.887 50.43C399.887 58.55 391.697 61.7 386.167 61.7C382.667 61.7 377.907 61.21 375.247 60.09L374.617 47.77ZM430.416 41.19V41.26H407.946C408.716 50.29 413.546 54.07 419.006 54.07C423.766 54.07 427.966 51.69 429.016 48.75L430.066 49.17C427.546 55.54 422.576 61.98 414.246 61.98C405.076 61.98 399.896 53.79 399.896 45.39C399.896 36.36 405.496 26 416.906 26C425.236 26 430.346 31.6 430.416 41.05L430.486 41.19H430.416ZM421.386 39.16V38.53C421.386 31.04 418.376 28.1 415.296 28.1C409.976 28.1 407.806 34.47 407.806 38.67V39.16H421.386Z" fill="#121212" />
             <defs>

front/components/Pages/Courses/ActivityIndicators.tsx

@@ -7,13 +7,14 @@ import React from 'react'
 interface Props {
     course: any
     orgslug: string
+    course_id: string
     current_activity?: any
 }
 
 function ActivityIndicators(props: Props) {
     const course = props.course
     const orgslug = props.orgslug
-    const courseid = course.course.course_id.replace("course_", "")
+    const courseid = props.course_id.replace("course_", "")
 
     const done_activity_style = 'bg-teal-600 hover:bg-teal-700'
     const black_activity_style = 'bg-black hover:bg-gray-700'

front/components/Pages/Trail/TrailCourseElement.tsx

@@ -0,0 +1,60 @@
+'use client';
+import { getAPIUrl, getBackendUrl, getUriWithOrg } from '@services/config/config';
+import { removeCourse } from '@services/courses/activity';
+import { revalidateTags } from '@services/utils/ts/requests';
+import Link from 'next/link';
+import { mutate } from 'swr';
+
+interface TrailCourseElementProps {
+    course: any
+    orgslug: string
+}
+
+function TrailCourseElement(props: TrailCourseElementProps) {
+    const courseid = props.course.course_id.replace("course_", "")
+    const course = props.course
+
+    async function quitCourse(course_id: string) {
+        // Close activity
+        let activity = await removeCourse(course_id, props.orgslug);
+        // Mutate course
+        revalidateTags(['courses']);
+
+        // Mutate 
+        mutate(`${getAPIUrl()}trail/org_slug/${props.orgslug}/trail`);
+    }
+
+    return (
+        <div className='trailcoursebox flex p-3 bg-white rounded-xl' style={{ boxShadow: '0px 4px 7px 0px rgba(0, 0, 0, 0.03)' }}>
+
+            <Link href={getUriWithOrg(props.orgslug, "/course/" + courseid)}>
+                <div className="course_tumbnail inset-0 ring-1 ring-inset ring-black/10 rounded-lg relative h-[50px] w-[72px] bg-cover bg-center" style={{ backgroundImage: `url(${getBackendUrl()}content/uploads/img/${props.course.course_object.thumbnail})`, boxShadow: '0px 4px 7px 0px rgba(0, 0, 0, 0.03)' }}></div>
+            </Link>
+            <div className="course_meta pl-5 flex-grow space-y-1">
+                <div className="course_top">
+                    <div className="course_info flex">
+                        <div className="course_basic flex flex-col flex-end -space-y-2">
+                            <p className='p-0 font-bold text-sm text-gray-700'>Course</p>
+                            <div className="course_progress flex items-center space-x-2">
+                                <h2 className='font-bold text-xl'>{course.course_object.name}</h2>
+                                <div className='bg-slate-300 rounded-full w-[10px] h-[5px]'></div>
+                                <h2>{course.progress}%</h2>
+                            </div>
+                        </div>
+                        <div className="course_actions flex-grow flex flex-row-reverse">
+                        <button onClick={() => quitCourse(course.course_id)} className="bg-red-200 text-red-700 hover:bg-red-300  rounded-full text-xs h-5 px-2 font-bold">Quit Course</button>
+                        </div>
+                    </div>
+                </div>
+                <div className="course_progress indicator w-full">
+                    <div className="w-full bg-gray-200 rounded-full h-1.5 ">
+                        <div className={`bg-teal-600 h-1.5 rounded-full`} style={{ width: `${course.progress}%` }} ></div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default TrailCourseElement