feat: init collectionid page

front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/error.tsx

@@ -0,0 +1,23 @@
+'use client'; // Error components must be Client Components
+
+import ErrorUI from '@components/UI/Error/Error';
+import { useEffect } from 'react';
+ 
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+ 
+  return (
+    <div>
+      <ErrorUI></ErrorUI>
+    </div>
+  );
+}

front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/loading.tsx

@@ -0,0 +1,8 @@
+import PageLoading from "@components/Pages/PageLoading";
+
+export default function Loading() {
+    return (
+        <PageLoading></PageLoading>
+    )
+
+}

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

@@ -0,0 +1,62 @@
+import { getBackendUrl, getUriWithOrg } from "@services/config/config";
+import { getCollectionByIdWithAuthHeader } from "@services/courses/collections";
+import { getOrganizationContextInfo } from "@services/organizations/orgs";
+import { Metadata } from "next";
+import { cookies } from "next/headers";
+import Link from "next/link";
+
+type MetadataProps = {
+  params: { orgslug: string, courseid: string, collectionid: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata(
+  { params }: MetadataProps,
+): Promise<Metadata> {
+  const cookieStore = cookies();
+  const access_token_cookie: any = cookieStore.get('access_token_cookie');
+  // Get Org context information 
+  const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800, tags: ['organizations'] });
+  const col = await getCollectionByIdWithAuthHeader(params.collectionid, access_token_cookie ? access_token_cookie.value : null, { revalidate: 0, tags: ['collections'] });
+
+  console.log(col)
+
+  return {
+    title: `Collection : ${col.name}  — ${org.name}`,
+    description: `${col.description} `,
+  };
+}
+
+const CollectionPage = async (params: any) => {
+  const cookieStore = cookies();
+  const access_token_cookie: any = cookieStore.get('access_token_cookie');
+  const orgslug = params.params.orgslug;
+  const col = await getCollectionByIdWithAuthHeader(params.params.collectionid, access_token_cookie ? access_token_cookie.value : null, { revalidate: 0, tags: ['collections'] });
+
+  const removeCoursePrefix = (courseid: string) => {
+    return courseid.replace("course_", "")
+  }
+
+
+  return <div className="max-w-7xl mx-auto px-4 py-10" >
+    <h2 className="text-sm font-bold text-gray-400">Collection</h2>
+    <h1 className="text-3xl font-bold">{col.name}</h1>
+    <br />
+    <div className="home_courses flex flex-wrap">
+      {col.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>;
+};
+
+export default CollectionPage;

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

@@ -15,6 +15,7 @@ export async function generateMetadata(
 ): Promise<Metadata> {
     const cookieStore = cookies();
     const access_token_cookie: any = cookieStore.get('access_token_cookie');
+   
 
     // Get Org context information 
     const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800, tags: ['organizations'] });

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

@@ -43,6 +43,10 @@ const OrgHomePage = async (params: any) => {
     return course_id.replace("course_", "");
   }
 
+  function removeCollectionPrefix(collection_id: string) {
+    return collection_id.replace("collection_", "");
+  }
+
   return (
     <div>
       <div className="max-w-7xl mx-auto px-4 py-10">
@@ -51,7 +55,7 @@ const OrgHomePage = async (params: any) => {
         <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))}>
+              <Link href={getUriWithOrg(orgslug, "/collection/" + removeCollectionPrefix(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">