feat: enhance activity completion handling and tooltip functionality

apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx

@@ -260,14 +260,26 @@ export function MarkStatus(props: {
   const router = useRouter()
   const session = useLHSession() as any;
   const isMobile = useMediaQuery('(max-width: 768px)')
+  const [isLoading, setIsLoading] = React.useState(false);
+
   async function markActivityAsCompleteFront() {
+    try {
+      setIsLoading(true);
       const trail = await markActivityAsComplete(
         props.orgslug,
         props.course.course_uuid,
         props.activity.activity_uuid,
         session.data?.tokens?.access_token
-    )
+      );
-    router.refresh()
+      
+      // Mutate the course data to trigger re-render
+      await mutate(`${getAPIUrl()}courses/${props.course.course_uuid}/meta`);
+      router.refresh();
+    } catch (error) {
+      toast.error('Failed to mark activity as complete');
+    } finally {
+      setIsLoading(false);
+    }
   }
 
   const isActivityCompleted = () => {
@@ -292,14 +304,22 @@ export function MarkStatus(props: {
         </div>
       ) : (
         <div
-          className="bg-gray-800 rounded-full px-5 drop-shadow-md flex  items-center space-x-2 p-2.5  text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out"
+          className={`${isLoading ? 'opacity-75 cursor-not-allowed' : ''} bg-gray-800 rounded-full px-5 drop-shadow-md flex items-center space-x-2 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out`}
-          onClick={markActivityAsCompleteFront}
+          onClick={!isLoading ? markActivityAsCompleteFront : undefined}
         >
-          {' '}
+          {isLoading ? (
+            <div className="animate-spin">
+              <svg className="w-4 h-4" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            </div>
+          ) : (
             <i>
               <Check size={17}></Check>
-          </i>{' '}
+            </i>
-          {!isMobile && <i className="not-italic text-xs font-bold">Mark as complete</i>}
+          )}{' '}
+          {!isMobile && <i className="not-italic text-xs font-bold">{isLoading ? 'Marking...' : 'Mark as complete'}</i>}
         </div>
       )}
     </>

apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx

@@ -21,7 +21,7 @@ type Session = {
 async function fetchCourseMetadata(courseuuid: string, access_token: string | null | undefined) {
   return await getCourseMetadata(
     courseuuid,
-    { revalidate: 1800, tags: ['courses'] },
+    { revalidate: 0, tags: ['courses'] },
     access_token || null
   )
 }

apps/web/components/Objects/StyledElements/Tooltip/Tooltip.tsx

@@ -9,6 +9,7 @@ type TooltipProps = {
   children: React.ReactNode
   side?: 'top' | 'right' | 'bottom' | 'left' // default is bottom
   slateBlack?: boolean
+  unstyled?: boolean // new prop to remove default styling
 }
 
 const ToolTip = (props: TooltipProps) => {
@@ -19,6 +20,7 @@ const ToolTip = (props: TooltipProps) => {
         <Tooltip.Portal>
           <TooltipContent
             slateBlack={props.slateBlack}
+            unstyled={props.unstyled}
             side={props.side ? props.side : 'bottom'}
             sideOffset={props.sideOffset}
           >
@@ -63,6 +65,17 @@ const TooltipContent = styled(Tooltip.Content, {
         color: 'white',
       },
     },
+    unstyled: {
+      true: {
+        padding: 0,
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+        borderRadius: 0,
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+        color: 'inherit',
+      },
+    },
   },
 
   borderRadius: 4,

apps/web/components/Pages/Courses/ActivityIndicators.tsx

@@ -2,6 +2,7 @@ import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
 import { getUriWithOrg } from '@services/config/config'
 import Link from 'next/link'
 import React from 'react'
+import { Video, FileText, Layers, BookOpenCheck, Check } from 'lucide-react'
 
 interface Props {
   course: any
@@ -16,7 +17,7 @@ function ActivityIndicators(props: Props) {
   const courseid = props.course_uuid.replace('course_', '')
 
   const done_activity_style = 'bg-teal-600 hover:bg-teal-700'
-  const black_activity_style = 'bg-black hover:bg-gray-700'
+  const black_activity_style = 'bg-zinc-300 hover:bg-zinc-400'
   const current_activity_style = 'bg-gray-600 animate-pulse hover:bg-gray-700'
 
   const trail = props.course.trail
@@ -50,6 +51,51 @@ function ActivityIndicators(props: Props) {
     return black_activity_style
   }
 
+  const getActivityTypeIcon = (activityType: string) => {
+    switch (activityType) {
+      case 'TYPE_VIDEO':
+        return <Video size={16} className="text-gray-400" />
+      case 'TYPE_DOCUMENT':
+        return <FileText size={16} className="text-gray-400" />
+      case 'TYPE_DYNAMIC':
+        return <Layers size={16} className="text-gray-400" />
+      case 'TYPE_ASSIGNMENT':
+        return <BookOpenCheck size={16} className="text-gray-400" />
+      default:
+        return <FileText size={16} className="text-gray-400" />
+    }
+  }
+
+  const getActivityTypeLabel = (activityType: string) => {
+    switch (activityType) {
+      case 'TYPE_VIDEO':
+        return 'Video'
+      case 'TYPE_DOCUMENT':
+        return 'Document'
+      case 'TYPE_DYNAMIC':
+        return 'Page'
+      case 'TYPE_ASSIGNMENT':
+        return 'Assignment'
+      default:
+        return 'Learning Material'
+    }
+  }
+
+  const getActivityTypeBadgeColor = (activityType: string) => {
+    switch (activityType) {
+      case 'TYPE_VIDEO':
+        return 'bg-blue-50 text-blue-600 font-bold'
+      case 'TYPE_DOCUMENT':
+        return 'bg-orange-50 text-orange-600 font-bold'
+      case 'TYPE_DYNAMIC':
+        return 'bg-purple-50 text-purple-600 font-bold'
+      case 'TYPE_ASSIGNMENT':
+        return 'bg-green-50 text-green-600 font-bold'
+      default:
+        return 'bg-gray-50 text-gray-600 font-bold'
+    }
+  }
+
   return (
     <div className="grid grid-flow-col justify-stretch space-x-6">
       {course.chapters.map((chapter: any) => {
@@ -57,11 +103,33 @@ function ActivityIndicators(props: Props) {
           <React.Fragment key={chapter.id || `chapter-${chapter.name}`}>
             <div className="grid grid-flow-col justify-stretch space-x-2">
               {chapter.activities.map((activity: any) => {
+                const isDone = isActivityDone(activity)
+                const isCurrent = isActivityCurrent(activity)
                 return (
                   <ToolTip
                     sideOffset={8}
-                    slateBlack
+                    unstyled
-                    content={activity.name}
+                    content={
+                      <div className="bg-white rounded-lg nice-shadow py-3 px-4 min-w-[200px] animate-in fade-in duration-200">
+                        <div className="flex items-center gap-2">
+                          {getActivityTypeIcon(activity.activity_type)}
+                          <span className="text-sm text-gray-700">{activity.name}</span>
+                          {isDone && (
+                            <span className="ml-auto text-gray-400">
+                              <Check size={14} />
+                            </span>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2 mt-2">
+                          <span className={`text-xs px-2 py-0.5 rounded-full ${getActivityTypeBadgeColor(activity.activity_type)}`}>
+                            {getActivityTypeLabel(activity.activity_type)}
+                          </span>
+                          <span className="text-xs text-gray-400">
+                            {isCurrent ? 'Current Activity' : isDone ? 'Completed' : 'Not Started'}
+                          </span>
+                        </div>
+                      </div>
+                    }
                     key={activity.activity_uuid}
                   >
                     <Link
@@ -77,7 +145,7 @@ function ActivityIndicators(props: Props) {
                       <div
                         className={`h-[7px] w-auto ${getActivityClass(
                           activity
-                        )} rounded-lg shadow-md`}
+                        )} rounded-lg`}
                       ></div>
                     </Link>
                   </ToolTip>