feat: add activity page

front/app/_orgs/[orgslug]/activity/page.tsx

@@ -0,0 +1,124 @@
+"use client";
+import { getBackendUrl } from "@services/config";
+import { getActivities } from "@services/courses/activity";
+import { getOrganizationContextInfo } from "@services/orgs";
+import {  RequestBody } from "@services/utils/requests";
+import React from "react";
+import { styled } from "styled-components";
+import useSWR from "swr";
+
+function Activity(params: any) {
+  let orgslug = params.params.orgslug;
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [activities, setActivities] = React.useState([]);
+
+  async function fetchActivities() {
+    setIsLoading(true);
+    const org = await getOrganizationContextInfo(orgslug);
+    const activities = await getActivities(org.org_id);
+    console.log(activities);
+    
+    setActivities(activities);
+    setIsLoading(false);
+  }
+  React.useEffect(() => {
+    fetchActivities();
+  }, []);
+
+  return (
+    <ActivityLayout>
+      <h1>Activity</h1>
+      <br />
+      {isLoading ? (
+        <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>
+                  <h2>Course</h2>
+                  <h3>{activity.course.name}</h3>
+                </ActivityInfo>
+              </ActivityMetadata>
+              <ActivityProgress progress={activity.progression} />
+            </ActivityBox>
+          ))}
+        </div>
+      )}
+    </ActivityLayout>
+  );
+}
+
+export default Activity;
+
+const ActivityLayout = styled.div`
+  display: flex;
+  margin: 0 auto;
+  width: 1300px;
+  height: 100%;
+  flex-direction: column;
+`;
+
+const ActivityMetadata = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+`;
+const ActivityBox = 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 ActivityThumbnail = styled.div`
+  padding-right: 30px;
+  height: 100%;
+  border-radius: 7px 0px 0px 7px;
+
+  img {
+    width: 60px;
+    border-radius: 7px;
+  }
+`;
+
+const ActivityInfo = 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 ActivityProgress = styled.div`
+  margin-top: 10px;
+  border-radius: 20px;
+  height: 10px;
+  width: ${(props: any) => props.progress + "%"};
+  background: #06a487;
+`;

front/components/UI/Elements/Menu.tsx

@@ -7,10 +7,9 @@ import learnhouseLogo from "public/learnhouse_logo.png";
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
-import { headers } from 'next/headers';
+import { headers } from "next/headers";
-
-export const Menu = ({orgslug } : any) => {
 
+export const Menu = ({ orgslug }: any) => {
   return (
     <GlobalHeader>
       <LogoArea>
@@ -30,12 +29,15 @@ export const Menu = ({orgslug } : any) => {
       <MenuArea>
         <ul>
           <li>
-            <Link href={ "/courses"}>Courses</Link>
+            <Link href={"/courses"}>Courses</Link>
           </li>
           <li>
-            <Link href={ "/collections"}>Collections</Link>
+            <Link href={"/collections"}>Collections</Link>
+          </li>
+          <li>
+            {" "}
+            <Link href={"/activity"}>Activity</Link>
           </li>
-          <li>Activity</li>
           <li>More</li>
         </ul>
       </MenuArea>

front/package-lock.json

@@ -24,6 +24,7 @@
         "react-beautiful-dnd": "^13.1.1",
         "react-dom": "^18.2.0",
         "styled-components": "^6.0.0-beta.9",
+        "swr": "^2.0.1",
         "y-indexeddb": "^9.0.9",
         "y-webrtc": "^10.2.3",
         "yjs": "^13.5.42"
@@ -6731,6 +6732,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.0.1.tgz",
+      "integrity": "sha512-6z4FpS9dKAay7axedlStsPahEw25nuMlVh4GHkuPpGptbmEEP8v/+kr0GkAE/7ErUs25U2VFOnZQz3AWfkmXdw==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.0"
+      },
+      "engines": {
+        "pnpm": "7"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/synckit": {
       "version": "0.8.4",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz",
@@ -7014,6 +7029,14 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -11817,6 +11840,14 @@
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
+    "swr": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.0.1.tgz",
+      "integrity": "sha512-6z4FpS9dKAay7axedlStsPahEw25nuMlVh4GHkuPpGptbmEEP8v/+kr0GkAE/7ErUs25U2VFOnZQz3AWfkmXdw==",
+      "requires": {
+        "use-sync-external-store": "^1.2.0"
+      }
+    },
     "synckit": {
       "version": "0.8.4",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz",
@@ -12008,6 +12039,12 @@
         "tslib": "^2.0.0"
       }
     },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

front/package.json

@@ -25,6 +25,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "styled-components": "^6.0.0-beta.9",
+    "swr": "^2.0.1",
     "y-indexeddb": "^9.0.9",
     "y-webrtc": "^10.2.3",
     "yjs": "^13.5.42"

front/services/courses/activity.ts

@@ -29,3 +29,12 @@ export async function maskLectureAsComplete(org_id: string, course_id: string, l
     .catch((error) => console.log("error", error));
   return result;
 }
+
+// get all activities 
+export async function getActivities(org_id: string) {
+  const result: any = await fetch(`${getAPIUrl()}activity/${org_id}/activities`, RequestBody("GET", null))
+    .then((result) => result.json())
+    .catch((error) => console.log("error", error));
+  return result;
+}
+

front/services/utils/requests.ts

@@ -11,3 +11,4 @@ export const RequestBody = (method: string, data: any) => {
   }
   return options;
 };
+