feat: initiate new home page

front/app/_orgs/[orgslug]/layout.tsx

@@ -1,15 +1,11 @@
-"use client";
+
 import "@styles/globals.css";
-import { Menu } from "@components/UI/Elements/Menu";
-import AuthProvider from "@components/Security/AuthProvider";
 
 export default function RootLayout({ children, params }: { children: React.ReactNode , params:any}) {
   
   return (
     <>
-      <AuthProvider>
         {children}
-      </AuthProvider>
     </>
   );
 }

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

@@ -1,21 +1,83 @@
-"use client";
-import { Title } from "@components/UI/Elements/Styles/Title";
-import { getUriWithOrg } from "@services/config/config";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
 
-const OrgHomePage = (params: any) => {
+import { Menu } from "@components/UI/Elements/Menu";
+import { getBackendUrl, getUriWithOrg } from "@services/config/config";
+import { getOrgCourses } from "@services/courses/courses";
+import CoursesLogo from "public/svg/courses.svg";
+import CollectionsLogo from "public/svg/collections.svg";
+import Link from "next/link";
+import Image from "next/image";
+import { log } from "console";
+import AuthProvider from "@components/Security/AuthProvider";
+import { getOrgCollections } from "@services/courses/collections";
+
+const OrgHomePage = async (params: any) => {
   const orgslug = params.params.orgslug;
-  const pathname = usePathname();
+  const courses = await getOrgCourses(orgslug);
+  const collections = await getOrgCollections();
+
+  // function to remove "course_" from the course_id
+  function removeCoursePrefix(course_id: string) {
+    return course_id.replace("course_", "");
+  }
 
   return (
     <div>
-      <Title>Welcome {orgslug} 👋🏻</Title>
-      <Link href={getUriWithOrg(orgslug, "/courses")}>
-        <button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 font text-sm font-bold text-white drop-shadow-lg">See Courses </button>
-      </Link>
+
+      <AuthProvider>
+        <Menu orgslug={orgslug}></Menu>
+      </AuthProvider>
+      <div className="max-w-7xl mx-auto px-4 py-10">
+        {/* Collections */}
+        <Title title="Collections" type="col" />
+        <div className="home_collections flex flex-wrap">
+          {collections.map((collection: any) => (
+            <div className="pr-8 flex flex-col" key={collection.collection_id}>
+              <Link href={getUriWithOrg(orgslug, "/collection/" + removeCoursePrefix(collection.collection_id))}>
+                <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" >
+                  <h1 className="font-bold text-lg py-2 justify-center mb-2">{collection.name}</h1>
+                  <div className="flex -space-x-4">
+                    {collection.courses.slice(0,3).map((course: any) => (
+                      <Link key={course.course_id} href={getUriWithOrg(orgslug, "/course/" + course.course_id.substring(7))}>
+                        <img className="w-12 h-12 rounded-full flex items-center justify-center shadow-lg ring-2 ring-white z-50" key={course.course_id} src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt={course.name} />
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              </Link>
+            </div>
+          ))}
+        </div>
+
+        {/* Courses */}
+        <Title title="Courses" type="cou" />
+        <div className="home_courses flex flex-wrap">
+          {courses.map((course: any) => (
+            <div className="pr-8" key={course.course_id}>
+              <Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id))}>
+                <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getBackendUrl()}content/uploads/img/${course.thumbnail})` }}>
+                </div>
+              </Link>
+              <h2 className="font-bold text-lg w-[250px] py-2">{course.name}</h2>
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
+
   );
 };
 
+
+const Title = (props: any) => {
+  return (
+    <div className="home_category_title flex my-5">
+      <div className="rounded-full ring-1 ring-slate-900/5 shadow-sm p-2 my-auto mr-4">
+        <Image className="" src={props.type == "col" ? CollectionsLogo : CoursesLogo} alt="Courses logo" />
+      </div>
+      <h1 className="font-bold text-lg">{props.title}</h1>
+    </div>
+  )
+}
+
+
 export default OrgHomePage;

front/app/_orgs/[orgslug]/settings/layout.tsx

@@ -12,7 +12,7 @@ function SettingsLayout({ children, params }: { children: React.ReactNode, param
 
     return (
         <>  
-        <AuthProvider/>
+        <AuthProvider>
             <Main>
                 <LeftWrapper>
                     <LeftTopArea>
@@ -37,7 +37,7 @@ function SettingsLayout({ children, params }: { children: React.ReactNode, param
                 <RightWrapper>
                     {children}
                 </RightWrapper>
-            </Main>
+            </Main></AuthProvider>
         </>
     )
 }

front/public/svg/collections.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.4997 5.22045C14.4997 5.22045 14.4997 5.22045 14.4997 5.16378L14.4572 5.05753C14.4424 5.03499 14.4259 5.01367 14.4076 4.99379C14.3887 4.9638 14.3674 4.93537 14.3439 4.90878L14.2801 4.8592L14.1668 4.80254L8.85431 1.52295C8.74173 1.45259 8.61165 1.41528 8.47889 1.41528C8.34614 1.41528 8.21605 1.45259 8.10348 1.52295L2.83348 4.80254L2.76973 4.8592L2.70598 4.90878C2.6825 4.93537 2.66118 4.9638 2.64223 4.99379C2.62402 5.01367 2.60744 5.03499 2.59264 5.05753L2.55014 5.16378C2.55014 5.16378 2.55014 5.16378 2.55014 5.22045C2.54318 5.28164 2.54318 5.34343 2.55014 5.40462V11.5955C2.5499 11.7158 2.58034 11.8343 2.63859 11.9396C2.69684 12.045 2.78098 12.1337 2.88306 12.1975L8.19556 15.4771C8.22826 15.4973 8.26421 15.5117 8.30181 15.5196C8.30181 15.5196 8.33723 15.5196 8.35848 15.5196C8.47831 15.5576 8.60697 15.5576 8.72681 15.5196C8.72681 15.5196 8.76223 15.5196 8.78348 15.5196C8.82108 15.5117 8.85703 15.4973 8.88973 15.4771V15.4771L14.1668 12.1975C14.2689 12.1337 14.353 12.045 14.4113 11.9396C14.4695 11.8343 14.5 11.7158 14.4997 11.5955V5.40462C14.5067 5.34343 14.5067 5.28164 14.4997 5.22045V5.22045ZM7.79181 13.6071L3.89598 11.1988V6.67962L7.79181 9.08087V13.6071ZM8.50014 7.85545L4.53348 5.40462L8.50014 2.96087L12.4668 5.40462L8.50014 7.85545ZM13.1043 11.1988L9.20848 13.6071V9.08087L13.1043 6.67962V11.1988Z" fill="#0F0F0F"/>
+</svg>

front/public/svg/courses.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.7507 0.416626H3.66732C2.91587 0.416626 2.1952 0.715137 1.66385 1.24649C1.1325 1.77784 0.833984 2.49851 0.833984 3.24996V11.75C0.833984 12.5014 1.1325 13.2221 1.66385 13.7534C2.1952 14.2848 2.91587 14.5833 3.66732 14.5833H10.7507C11.1264 14.5833 11.4867 14.434 11.7524 14.1684C12.0181 13.9027 12.1673 13.5423 12.1673 13.1666V1.83329C12.1673 1.45757 12.0181 1.09723 11.7524 0.831558C11.4867 0.565881 11.1264 0.416626 10.7507 0.416626ZM2.25065 3.24996C2.25065 2.87424 2.39991 2.5139 2.66558 2.24822C2.93126 1.98255 3.29159 1.83329 3.66732 1.83329H10.7507V8.91663H3.66732C3.16797 8.91872 2.67848 9.05578 2.25065 9.31329V3.24996ZM3.66732 13.1666C3.29159 13.1666 2.93126 13.0174 2.66558 12.7517C2.39991 12.486 2.25065 12.1257 2.25065 11.75C2.25065 11.3742 2.39991 11.0139 2.66558 10.7482C2.93126 10.4825 3.29159 10.3333 3.66732 10.3333H10.7507V13.1666H3.66732ZM5.08398 4.66663H7.91732C8.10518 4.66663 8.28535 4.592 8.41819 4.45916C8.55102 4.32632 8.62565 4.14615 8.62565 3.95829C8.62565 3.77043 8.55102 3.59026 8.41819 3.45743C8.28535 3.32459 8.10518 3.24996 7.91732 3.24996H5.08398C4.89612 3.24996 4.71596 3.32459 4.58312 3.45743C4.45028 3.59026 4.37565 3.77043 4.37565 3.95829C4.37565 4.14615 4.45028 4.32632 4.58312 4.45916C4.71596 4.592 4.89612 4.66663 5.08398 4.66663V4.66663Z" fill="black"/>
+</svg>

front/services/courses/collections.ts

@@ -18,3 +18,12 @@ export async function createCollection(collection: any) {
   const res = await errorHandling(result);
   return res;
 }
+
+// Get collections 
+// TODO : add per org filter
+export async function getOrgCollections() {
+  const result: any = await fetch(`${getAPIUrl()}collections/page/1/limit/10`);
+  const res = await errorHandling(result);
+  return res;
+}
+

front/services/courses/courses.ts

@@ -7,8 +7,9 @@ import { RequestBody, RequestBodyForm, errorHandling } from "@services/utils/ts/
 */
 
 export async function getOrgCourses(org_id: number) {
-  const result: any = await fetch(`${getAPIUrl()}courses/${org_id}/page/1/limit/10`, RequestBody("GET", null));
+  const result: any = await fetch(`${getAPIUrl()}courses/org_slug/${org_id}/page/1/limit/10`, RequestBody("GET", null));
   const res = await errorHandling(result);
+  
   return res;
 }
 

front/services/utils/ts/requests.ts

@@ -8,6 +8,10 @@ export const RequestBody = (method: string, data: any) => {
     headers: HeadersConfig,
     redirect: "follow",
     credentials: "include",
+    // Next.js 
+    next: {
+      revalidate: 1,
+    },
   };
   if (data) {
     options.body = JSON.stringify(data);

src/services/users/schemas/users.py

@@ -10,6 +10,8 @@ class UserOrganization(BaseModel):
         return getattr(self, item)
     
 
+
+
 class User(BaseModel):
     username: str
     email: str