feat: init new edit course page

apps/web/components/Dashboard/CourseContext.tsx

@@ -0,0 +1,62 @@
+'use client';
+import { getAPIUrl } from '@services/config/config';
+import { swrFetcher } from '@services/utils/ts/requests';
+import React, { createContext, useContext, useEffect, useReducer } from 'react'
+import useSWR, { mutate } from 'swr';
+
+export const CourseContext = createContext(null) as any;
+export const CourseDispatchContext = createContext(null) as any;
+
+export function CourseProvider({ children, courseuuid }: { children: React.ReactNode, courseuuid: string }) {
+    const { data: courseStructureData } = useSWR(`${getAPIUrl()}courses/${courseuuid}/meta`, swrFetcher);
+    const [courseStructure, dispatchCourseStructure] = useReducer(courseReducer,
+        {
+            courseStructure: courseStructureData ? courseStructureData : {},
+            courseOrder: {},
+            isSaved: true
+        }
+    );
+
+
+    // When courseStructureData is loaded, update the state
+    useEffect(() => {
+        if (courseStructureData) {
+            dispatchCourseStructure({ type: 'setCourseStructure', payload: courseStructureData });
+        }
+    }, [courseStructureData]);
+
+
+    if (!courseStructureData) return <div>Loading...</div>
+
+
+    return (
+        <CourseContext.Provider value={courseStructure}>
+            <CourseDispatchContext.Provider value={dispatchCourseStructure}>
+                {children}
+            </CourseDispatchContext.Provider>
+        </CourseContext.Provider>
+    )
+}
+
+export function useCourse() {
+    return useContext(CourseContext);
+}
+
+export function useCourseDispatch() {
+    return useContext(CourseDispatchContext);
+}
+
+function courseReducer(state: any, action: any) {
+    switch (action.type) {
+        case 'setCourseStructure':
+            return { ...state, courseStructure: action.payload };
+        case 'setCourseOrder':
+            return { ...state, courseOrder: action.payload };
+        case 'setIsSaved':
+            return { ...state, isSaved: true };
+        case 'setIsNotSaved':
+            return { ...state, isSaved: false };
+        default:
+            throw new Error(`Unhandled action type: ${action.type}`);
+    }
+}

apps/web/components/Dashboard/EditCourseStructure/Buttons/NewActivityButton.tsx

@@ -0,0 +1,93 @@
+import { useCourse } from '@components/Dashboard/CourseContext';
+import NewActivityModal from '@components/Objects/Modals/Activities/Create/NewActivity';
+import Modal from '@components/StyledElements/Modal/Modal';
+import { getAPIUrl } from '@services/config/config';
+import { createActivity, createExternalVideoActivity, createFileActivity } from '@services/courses/activities';
+import { getOrganizationContextInfoWithoutCredentials } from '@services/organizations/orgs';
+import { revalidateTags } from '@services/utils/ts/requests';
+import { Sparkles } from 'lucide-react'
+import { useRouter } from 'next/navigation';
+import React, { use, useEffect } from 'react'
+import { mutate } from 'swr';
+
+type NewActivityButtonProps = {
+    chapterId: string,
+    orgslug: string
+}
+
+function NewActivityButton(props: NewActivityButtonProps) {
+    const [newActivityModal, setNewActivityModal] = React.useState(false);
+    const router = useRouter();
+    const course = useCourse() as any;
+
+    const openNewActivityModal = async (chapterId: any) => {
+        setNewActivityModal(true);
+    };
+
+    const closeNewActivityModal = async () => {
+        setNewActivityModal(false);
+    };
+
+    // Submit new activity
+    const submitActivity = async (activity: any) => {
+        let org = await getOrganizationContextInfoWithoutCredentials(props.orgslug, { revalidate: 1800 });
+        await createActivity(activity, props.chapterId, org.org_id);
+        mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
+        setNewActivityModal(false);
+        await revalidateTags(['courses'], props.orgslug);
+        router.refresh();
+    };
+
+
+
+    // Submit File Upload
+    const submitFileActivity = async (file: any, type: any, activity: any, chapterId: string) => {
+        await createFileActivity(file, type, activity, chapterId);
+        mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
+        setNewActivityModal(false);
+        await revalidateTags(['courses'], props.orgslug);
+        router.refresh();
+    };
+
+    // Submit YouTube Video Upload
+    const submitExternalVideo = async (external_video_data: any, activity: any, chapterId: string) => {
+        await createExternalVideoActivity(external_video_data, activity, props.chapterId);
+        mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
+        setNewActivityModal(false);
+        await revalidateTags(['courses'], props.orgslug);
+        router.refresh();
+    };
+
+    useEffect(() => { }
+        , [course])
+
+    return (
+        <div>
+            <Modal
+                isDialogOpen={newActivityModal}
+                onOpenChange={setNewActivityModal}
+                minHeight="no-min"
+                addDefCloseButton={false}
+                dialogContent={<NewActivityModal
+                    closeModal={closeNewActivityModal}
+                    submitFileActivity={submitFileActivity}
+                    submitExternalVideo={submitExternalVideo}
+                    submitActivity={submitActivity}
+                    chapterId={props.chapterId}
+                    course={course}
+                ></NewActivityModal>}
+                dialogTitle="Create Activity"
+                dialogDescription="Choose between types of activities to add to the course"
+
+            />
+            <div onClick={() => {
+                openNewActivityModal(props.chapterId)
+            }} className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center text-white  bg-black  hover:cursor-pointer">
+                <Sparkles className="" size={17} />
+                <div className="text-sm mx-auto my-auto  items-center font-bold">Add Activity + </div>
+            </div>
+        </div>
+    )
+}
+
+export default NewActivityButton

apps/web/components/Dashboard/EditCourseStructure/DraggableElements/ActivityElement.tsx

@@ -0,0 +1,96 @@
+import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
+import { getAPIUrl, getUriWithOrg } from '@services/config/config'
+import { deleteActivity } from '@services/courses/activities'
+import { revalidateTags } from '@services/utils/ts/requests'
+import { Eye, File, MoreVertical, Pencil, Save, Sparkles, Video, X } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import React from 'react'
+import { Draggable } from 'react-beautiful-dnd'
+import { mutate } from 'swr'
+
+type ActivitiyElementProps = {
+    orgslug: string,
+    activity: any,
+    activityIndex: any,
+    course_uuid: string
+}
+
+function ActivityElement(props: ActivitiyElementProps) {
+    const router = useRouter();
+
+    async function deleteActivityUI() {
+        await deleteActivity(props.activity.id);
+        mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`);
+        await revalidateTags(['courses'], props.orgslug);
+        router.refresh();
+    }
+
+    return (
+        <Draggable key={props.activity.activity_uuid} draggableId={props.activity.activity_uuid} index={props.activityIndex}>
+            {(provided, snapshot) => (
+                <div
+                    className="flex flex-row py-2 my-2 w-full rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow space-x-1 items-center ring-1 ring-inset ring-gray-400/10 shadow-sm transition-all delay-100 duration-75 ease-linear"
+                    key={props.activity.id}
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                    ref={provided.innerRef}
+                >
+
+                    {/*   Activity Type Icon  */}
+                    <div className="px-3 text-gray-300 space-x-1 w-28" >
+                        {props.activity.activity_type === "video" &&
+                            <>
+                                <div className="flex space-x-2 items-center">
+                                    <Video size={16} />
+                                    <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle">Video</div>
+                                </div>
+                            </>}
+                    </div>
+
+
+                    {/*   Centered Activity Name  */}
+                    <div className="grow items-center space-x-2 flex mx-auto justify-center">
+                        {(<p className="first-letter:uppercase"> {props.activity.name} </p>)}
+                        <Pencil size={12} className="text-neutral-400 hover:cursor-pointer" />
+                    </div>
+                    {/*   Edit and View Button  */}
+                    <div className="flex flex-row space-x-2">
+                        {props.activity.activity_type === "TYPE_DYNAMIC" && <>
+                            <Link
+                                href={''}
+                                className=" hover:cursor-pointer p-1 px-3 bg-sky-700 rounded-md items-center"
+                                rel="noopener noreferrer">
+                                <div className="text-sky-100 font-bold text-xs" >Edit  </div>
+                            </Link>
+                        </>}
+                        <Link
+                            href={''}
+                            className=" hover:cursor-pointer p-1 px-3 bg-gray-200 rounded-md"
+                            rel="noopener noreferrer">
+                            <Eye strokeWidth={2} size={15} className="text-gray-600" />
+                        </Link>
+                    </div>
+                    {/*   Delete Button  */}
+                    <div className="flex flex-row pr-3 space-x-1 items-center">
+                        <MoreVertical size={15} className="text-gray-300" />
+                        <ConfirmationModal
+                            confirmationMessage="Are you sure you want to delete this activity ?"
+                            confirmationButtonText="Delete Activity"
+                            dialogTitle={"Delete " + props.activity.name + " ?"}
+                            dialogTrigger={
+                                <div
+                                    className=" hover:cursor-pointer p-1 px-5 bg-red-600 rounded-md"
+                                    rel="noopener noreferrer">
+                                    <X size={15} className="text-rose-200 font-bold" />
+                                </div>}
+                            functionToExecute={() => deleteActivityUI()}
+                            status='warning'
+                        ></ConfirmationModal></div>
+                </div>
+            )}
+        </Draggable>
+    )
+}
+
+export default ActivityElement

apps/web/components/Dashboard/EditCourseStructure/DraggableElements/ChapterElement.tsx

@@ -0,0 +1,104 @@
+import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
+import { Activity, Hexagon, MoreHorizontal, MoreVertical, Pencil, Save, Sparkles, X } from 'lucide-react';
+import React from 'react'
+import ActivitiyElement from './ActivityElement';
+import { Draggable, Droppable } from 'react-beautiful-dnd';
+import ActivityElement from './ActivityElement';
+import NewActivity from '../Buttons/NewActivityButton';
+import NewActivityButton from '../Buttons/NewActivityButton';
+import { deleteChapter } from '@services/courses/chapters';
+import { revalidateTags } from '@services/utils/ts/requests';
+import { useRouter } from 'next/navigation';
+import { getAPIUrl } from '@services/config/config';
+import { mutate } from 'swr';
+
+type ChapterElementProps = {
+    chapter: any,
+    chapterIndex: number,
+    orgslug: string
+    course_uuid: string
+}
+
+function ChapterElement(props: ChapterElementProps) {
+    const activities = props.chapter.activities || [];
+    const router = useRouter();
+
+    const deleteChapterUI = async () => {
+        await deleteChapter(props.chapter.id);
+        mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`);
+        await revalidateTags(['courses'], props.orgslug);
+        router.refresh();
+    };
+
+    return (
+        <Draggable
+            key={props.chapter.chapter_uuid}
+            draggableId={props.chapter.chapter_uuid}
+            index={props.chapterIndex}
+        >
+            {(provided, snapshot) => (
+                <div
+                    className="max-w-screen-2xl mx-auto bg-white rounded-xl shadow-sm px-6 pt-6"
+                    key={props.chapter.chapter_uuid}
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                    ref={provided.innerRef}
+                >
+                    <div className="flex font-bold text-md items-center space-x-2 pb-3" >
+                        <div className="flex grow text-lg space-x-3 items-center rounded-md ">
+                            <div className="bg-neutral-100 rounded-md p-2">
+                                <Hexagon strokeWidth={3} size={16} className="text-neutral-600 " />
+                            </div>
+                            <div className="flex space-x-2 items-center">
+                                <p className="text-neutral-700 first-letter:uppercase">{props.chapter.name}   </p>
+                                <Pencil size={15} className="text-neutral-600 hover:cursor-pointer" />
+                            </div>
+                        </div>
+                        <MoreVertical size={15} className="text-gray-300" />
+                        <ConfirmationModal
+                            confirmationButtonText="Delete Chapter"
+                            confirmationMessage="Are you sure you want to delete this chapter?"
+                            dialogTitle={"Delete " + props.chapter.name + " ?"}
+                            dialogTrigger={
+                                <div
+                                    className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-md shadow flex space-x-1 items-center text-rose-100 text-sm"
+                                    rel="noopener noreferrer">
+                                    <X size={15} className="text-rose-200 font-bold" />
+                                    <p>Delete Chapter</p>
+                                </div>}
+                            functionToExecute={() => deleteChapterUI()}
+                            status='warning'
+                        ></ConfirmationModal>
+                    </div>
+                    <Droppable key={props.chapter.chapter_uuid} droppableId={props.chapter.chapter_uuid} type="activity">
+                        {(provided) => (
+                            <div {...provided.droppableProps} ref={provided.innerRef}>
+                                <div className="flex flex-col">
+                                    {activities.map((activity: any, index: any) => {
+                                        return (
+                                            <div key={index} className="flex items-center ">
+                                                <ActivityElement
+                                                    orgslug={props.orgslug}
+                                                    course_uuid={props.course_uuid}
+                                                    activityIndex={index}
+                                                    activity={activity} />
+                                            </div>
+                                        )
+                                    })}
+                                    {provided.placeholder}
+                                </div>
+                            </div>
+
+                        )}
+                    </Droppable>
+                    <NewActivityButton orgslug={props.orgslug} chapterId={props.chapter.id} />
+                    <div className='h-6'>
+                        <div className='flex items-center'><MoreHorizontal size={19} className="text-gray-300 mx-auto" /></div>
+                    </div>
+                </div>
+            )}
+        </Draggable>
+    )
+}
+
+export default ChapterElement

apps/web/components/Dashboard/EditCourseStructure/EditCourseStructure.tsx

@@ -0,0 +1,111 @@
+'use client';
+import { getAPIUrl } from '@services/config/config';
+import { revalidateTags, swrFetcher } from '@services/utils/ts/requests';
+import React, { useContext, useEffect, useState } from 'react'
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import useSWR, { mutate } from 'swr';
+import ChapterElement from './DraggableElements/ChapterElement';
+import PageLoading from '@components/Objects/Loaders/PageLoading';
+import { updateCourseOrderStructure } from '@services/courses/chapters';
+import { useRouter } from 'next/navigation';
+import { CourseStructureContext } from 'app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page';
+import { useCourse, useCourseDispatch } from '@components/Dashboard/CourseContext';
+
+type EditCourseStructureProps = {
+    orgslug: string,
+    course_uuid?: string,
+}
+
+export type OrderPayload = {
+    chapter_order_by_ids: [
+        {
+            chapter_id: string,
+            activities_order_by_ids: [
+                {
+                    activity_id: string
+                }
+            ]
+        }
+    ],
+} | undefined
+
+const EditCourseStructure = (props: EditCourseStructureProps) => {
+    const router = useRouter();
+    // Check window availability
+    const [winReady, setwinReady] = useState(false);
+
+    const dispatchCourse = useCourseDispatch() as any;
+
+    const [order, setOrder] = useState<OrderPayload>();
+    const course = useCourse() as any;
+    const course_structure = course ? course.courseStructure : {};
+    const course_uuid = course ? course.courseStructure.course_uuid : '';
+
+
+
+    const updateStructure = (result: any) => {
+        const { destination, source, draggableId, type } = result;
+        if (!destination) return;
+        if (destination.droppableId === source.droppableId && destination.index === source.index) return;
+        if (type === 'chapter') {
+            const newChapterOrder = Array.from(course_structure.chapters);
+            newChapterOrder.splice(source.index, 1);
+            newChapterOrder.splice(destination.index, 0, course_structure.chapters[source.index]);
+            dispatchCourse({ type: 'setCourseStructure', payload: { ...course_structure, chapters: newChapterOrder } })
+            dispatchCourse({ type: 'setIsNotSaved' })
+        }
+        if (type === 'activity') {
+            const newChapterOrder = Array.from(course_structure.chapters);
+            const sourceChapter = newChapterOrder.find((chapter: any) => chapter.chapter_uuid === source.droppableId) as any;
+            const destinationChapter = newChapterOrder.find((chapter: any) => chapter.chapter_uuid === destination.droppableId) ? newChapterOrder.find((chapter: any) => chapter.chapter_uuid === destination.droppableId) : sourceChapter;
+            const activity = sourceChapter.activities.find((activity: any) => activity.activity_uuid === draggableId);
+            sourceChapter.activities.splice(source.index, 1);
+            destinationChapter.activities.splice(destination.index, 0, activity);
+            dispatchCourse({ type: 'setCourseStructure', payload: { ...course_structure, chapters: newChapterOrder } })
+            dispatchCourse({ type: 'setIsNotSaved' })
+        }
+    }
+
+    useEffect(() => {
+        setwinReady(true);
+
+    }, [props.course_uuid, course_structure, course]);
+
+
+    if (!course) return <PageLoading></PageLoading>
+
+    return (
+        <div className='flex flex-col'>
+            {winReady ?
+                <DragDropContext onDragEnd={updateStructure}>
+                    <Droppable type='chapter' droppableId='chapters'>
+                        {(provided) => (
+                            <div
+                                className='space-y-4'
+                                {...provided.droppableProps}
+                                ref={provided.innerRef}>
+                                {course_structure.chapters && course_structure.chapters.map((chapter: any, index: any) => {
+                                    return (
+
+                                        <ChapterElement
+                                            key={chapter.chapter_uuid}
+                                            chapterIndex={index}
+                                            orgslug={props.orgslug}
+                                            course_uuid={course_uuid}
+                                            chapter={chapter} />
+                                    )
+                                })}
+                                {provided.placeholder}
+                            </div>
+                        )}
+                    </Droppable>
+                </DragDropContext>
+
+                : <></>}
+        </div>
+
+
+    )
+}
+
+export default EditCourseStructure

apps/web/components/Dashboard/UI/BreadCrumbs.tsx

@@ -0,0 +1,30 @@
+import { useCourse } from '@components/Dashboard/CourseContext'
+import { Book, ChevronRight, User } from 'lucide-react'
+import Link from 'next/link'
+import React, { use, useEffect } from 'react'
+
+type BreadCrumbsProps = {
+    type: 'courses' | 'users'
+    last_breadcrumb?: string
+}
+
+function BreadCrumbs(props: BreadCrumbsProps) {
+    const course = useCourse() as any;
+
+    return (
+        <div>
+            <div className='h-7'></div>
+            <div className='text-gray-400 tracking-tight font-medium text-sm flex space-x-1'>
+                <div className='flex items-center space-x-1'>
+                    {props.type == 'courses' ? <div className='flex space-x-2 items-center'> <Book className='text-gray' size={14}></Book><Link href='/dash/courses'>Courses</Link></div> : ''}
+                    {props.type == 'users' ? <div> <User size={14}></User><Link href='/dash/users'>Users</Link></div> : ''}
+                    <div className='flex items-center space-x-1 first-letter:uppercase'>
+                        {props.last_breadcrumb ? <ChevronRight size={17} /> : ''}
+                        <div className='first-letter:uppercase'>  {props.last_breadcrumb}</div>
+                    </div></div></div>
+
+        </div>
+    )
+}
+
+export default BreadCrumbs

apps/web/components/Dashboard/UI/CourseOverviewTop.tsx

@@ -0,0 +1,31 @@
+import { useCourse } from "@components/Dashboard/CourseContext";
+import { useEffect } from "react";
+import BreadCrumbs from "./BreadCrumbs";
+import SaveState from "./SaveState";
+import { CourseOverviewParams } from "app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page";
+
+export function CourseOverviewTop({ params }: { params: CourseOverviewParams }) {
+    const course = useCourse() as any;
+
+    useEffect(() => { }
+        , [course])
+
+    return (
+        <>
+            <BreadCrumbs type='courses' last_breadcrumb={course.courseStructure.name} ></BreadCrumbs>
+            <div className='flex'>
+                <div className='flex py-5 grow items-center'>
+                    <div className="image rounded-lg shadow-md bg-gray-900 w-28 h-14"></div>
+                    <div className="flex flex-col course_metadata justify-center pl-5">
+                        <div className='text-gray-400 font-semibold text-sm'>Course</div>
+                        <div className='text-black font-bold text-xl -mt-1 first-letter:uppercase'>{course.courseStructure.name}</div>
+                    </div>
+                </div>
+                <div className='flex items-center'>
+                    <SaveState orgslug={params.orgslug} />
+                </div>
+            </div>
+        </>
+    )
+
+}

apps/web/components/Dashboard/UI/LeftMenu.tsx

@@ -0,0 +1,22 @@
+
+import { Book } from 'lucide-react'
+import Link from 'next/link'
+import React from 'react'
+
+function LeftMenu() {
+    return (
+        <div
+            style={{ background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), radial-gradient(271.56% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.00) 100%), #2E2D2D" }}
+            className='flex flex-col w-20 justifiy-center bg-black h-screen justify-center text-white'>
+
+            <div className='flex items-center mx-auto'>
+                <Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/courses`} ><Book size={18}/></Link>
+            </div>
+
+
+        </div>
+    )
+}
+
+export default LeftMenu
+

apps/web/components/Dashboard/UI/SaveState.tsx

@@ -0,0 +1,100 @@
+'use client';
+import { getAPIUrl } from '@services/config/config';
+import { updateCourseOrderStructure } from '@services/courses/chapters';
+import { revalidateTags } from '@services/utils/ts/requests';
+import { useCourse, useCourseDispatch } from '@components/Dashboard/CourseContext'
+import { Check, SaveAllIcon, Timer } from 'lucide-react'
+import { useRouter } from 'next/navigation';
+import React, { useEffect } from 'react'
+import { mutate } from 'swr';
+
+function SaveState(props: { orgslug: string }) {
+    const course = useCourse() as any;
+    const router = useRouter();
+    const saved = course ? course.isSaved : true;
+    const dispatchCourse = useCourseDispatch() as any;
+    const course_structure = course.courseStructure;
+
+    const saveCourseState = async () => {
+        // Course structure & order 
+        if (saved) return;
+        await changeOrderBackend();
+        mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
+        dispatchCourse({ type: 'setIsSaved' })
+    }
+
+
+    // 
+    // Course Order 
+    const changeOrderBackend = async () => {
+        mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
+        await updateCourseOrderStructure(course.courseStructure.course_uuid, course.courseOrder);
+        await revalidateTags(['courses'], props.orgslug)
+        router.refresh();
+        dispatchCourse({ type: 'setIsSaved' })
+    }
+
+
+
+    const handleCourseOrder = (course_structure: any) => {
+        const chapters = course_structure.chapters;
+        const chapter_order_by_ids = chapters.map((chapter: any) => {
+            return {
+                chapter_id: chapter.id,
+                activities_order_by_ids: chapter.activities.map((activity: any) => {
+                    return {
+                        activity_id: activity.id
+                    }
+                })
+            }
+        })
+        dispatchCourse({ type: 'setCourseOrder', payload: { chapter_order_by_ids: chapter_order_by_ids } })
+        dispatchCourse({ type: 'setIsNotSaved' })
+    }
+
+    const initOrderPayload = () => {
+        if (course_structure && course_structure.chapters) {
+            handleCourseOrder(course_structure);
+            dispatchCourse({ type: 'setIsSaved' })
+
+        }
+    }
+
+    const changeOrderPayload = () => {
+        if (course_structure && course_structure.chapters) {
+            handleCourseOrder(course_structure);
+            dispatchCourse({ type: 'setIsNotSaved' })
+
+        }
+    }
+
+    useEffect(() => {
+        if (course_structure?.chapters) {
+            initOrderPayload();
+        }
+        if (course_structure?.chapters && !saved) {
+            changeOrderPayload();
+        }
+    }, [course_structure]); // This effect depends on the `course_structure` variable
+
+    return (
+        <div className='flex space-x-4'>
+            {saved ? <></> : <div className='text-gray-600 flex space-x-2 items-center antialiased'>
+                <Timer size={15} />
+                <div>
+                    Unsaved changes
+                </div>
+
+            </div>}
+            <div className={`px-4 py-2 rounded-lg drop-shadow-md cursor-pointer flex space-x-2 items-center font-bold antialiased transition-all ease-linear ` + (saved ? 'bg-gray-600 text-white' : 'bg-black text-white border hover:bg-gray-900 ')
+            } onClick={saveCourseState}>
+
+                {saved ? <Check size={20} /> : <SaveAllIcon size={20} />}
+                {saved ? <div className=''>Saved</div> : <div className=''>Save</div>}
+            </div>
+        </div>
+
+    )
+}
+
+export default SaveState