- {activity.activity_type ===
- 'TYPE_DYNAMIC' && (
-
-
+
+
+
+ {isActivityDone(activity) ? (
+
+
+
+
+ ) : (
+
+
)}
- {activity.activity_type === 'TYPE_VIDEO' && (
-
-
-
- )}
- {activity.activity_type ===
- 'TYPE_DOCUMENT' && (
-
-
-
- )}
- {activity.activity_type ===
- 'TYPE_ASSIGNMENT' && (
-
-
-
- )}
-
-
-
{activity.name}
-
-
- {activity.activity_type ===
- 'TYPE_DYNAMIC' && (
-
- )}
- {activity.activity_type === 'TYPE_VIDEO' && (
-
-
-
+
+
+
{activity.name}
+ {isActivityCurrent(activity) && (
+
+ Current
-
+ )}
- )}
- {activity.activity_type ===
- 'TYPE_DOCUMENT' && (
-
- )}
- {activity.activity_type ===
- 'TYPE_ASSIGNMENT' && (
-
- )}
+
+ {activity.activity_type === 'TYPE_DYNAMIC' && (
+
+ )}
+ {activity.activity_type === 'TYPE_VIDEO' && (
+
+ )}
+ {activity.activity_type === 'TYPE_DOCUMENT' && (
+
+ )}
+ {activity.activity_type === 'TYPE_ASSIGNMENT' && (
+
+ )}
+ {getActivityTypeLabel(activity.activity_type)}
+
+
+
@@ -348,8 +301,16 @@ const CourseClient = (props: any) => {
})}
-
+
+ {/* Actions Box */}
+
+ {/* Authors & Updates Box */}
+
+
+
+
+
diff --git a/apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx b/apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx
index 49453edb..f2f45b3c 100644
--- a/apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx
+++ b/apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx
@@ -1,42 +1,31 @@
import React, { useState, useEffect } from 'react'
-import UserAvatar from '../../UserAvatar'
-import { getUserAvatarMediaDirectory } from '@services/media/media'
import { removeCourse, startCourse } from '@services/courses/activity'
import { revalidateTags } from '@services/utils/ts/requests'
import { useRouter } from 'next/navigation'
import { useLHSession } from '@components/Contexts/LHSessionContext'
-import { useMediaQuery } from 'usehooks-ts'
import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
import { getProductsByCourse } from '@services/payments/products'
-import { LogIn, LogOut, ShoppingCart, AlertCircle, UserPen, ClockIcon } from 'lucide-react'
+import { LogIn, LogOut, ShoppingCart, AlertCircle, UserPen, ClockIcon, ArrowRight, Sparkles, BookOpen } from 'lucide-react'
import Modal from '@components/Objects/StyledElements/Modal/Modal'
import CoursePaidOptions from './CoursePaidOptions'
import { checkPaidAccess } from '@services/payments/payments'
import { applyForContributor } from '@services/courses/courses'
import toast from 'react-hot-toast'
import { useContributorStatus } from '../../../../hooks/useContributorStatus'
-
-interface Author {
- user: {
- id: string
- user_uuid: string
- avatar_image: string
- first_name: string
- last_name: string
- username: string
- }
- authorship: 'CREATOR' | 'CONTRIBUTOR' | 'MAINTAINER' | 'REPORTER'
- authorship_status: 'ACTIVE' | 'INACTIVE' | 'PENDING'
-}
+import CourseProgress from '../CourseProgress/CourseProgress'
+import UserAvatar from '@components/Objects/UserAvatar'
interface CourseRun {
status: string
course_id: string
+ steps: Array<{
+ activity_id: string
+ complete: boolean
+ }>
}
interface Course {
id: string
- authors: Author[]
trail?: {
runs: CourseRun[]
}
@@ -59,137 +48,7 @@ interface CourseActionsProps {
}
}
-// Separate component for author display
-const AuthorInfo = ({ author, isMobile }: { author: Author, isMobile: boolean }) => (
-
-
-
-
Author
-
- {(author.user.first_name && author.user.last_name) ? (
-
-
{`${author.user.first_name} ${author.user.last_name}`}
-
- @{author.user.username}
-
-
- ) : (
-
-
@{author.user.username}
-
- )}
-
-
-
-)
-
-const MultipleAuthors = ({ authors, isMobile }: { authors: Author[], isMobile: boolean }) => {
- const displayedAvatars = authors.slice(0, 3)
- const displayedNames = authors.slice(0, 2)
- const remainingCount = Math.max(0, authors.length - 3)
-
- // Consistent sizes for both avatars and badge
- const avatarSize = isMobile ? 72 : 86
- const borderSize = "border-4"
-
- return (
-
-
Authors
-
- {/* Avatars row */}
-
- {displayedAvatars.map((author, index) => (
-
- ))}
- {remainingCount > 0 && (
-
-
- +{remainingCount}
-
-
- )}
-
-
- {/* Names row - improved display logic */}
-
-
- {authors.length === 1 ? (
-
- {authors[0].user.first_name && authors[0].user.last_name
- ? `${authors[0].user.first_name} ${authors[0].user.last_name}`
- : `@${authors[0].user.username}`}
-
- ) : (
- <>
- {displayedNames.map((author, index) => (
-
- {author.user.first_name && author.user.last_name
- ? `${author.user.first_name} ${author.user.last_name}`
- : `@${author.user.username}`}
- {index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
-
- ))}
- {authors.length > 2 && (
-
- & {authors.length - 2} more
-
- )}
-
- )}
-
-
- {authors.length === 1 ? (
- @{authors[0].user.username}
- ) : (
- <>
- {displayedNames.map((author, index) => (
-
- @{author.user.username}
- {index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
-
- ))}
-
- )}
-
-
-
- )
-}
-
-const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
+function CoursesActions({ courseuuid, orgslug, course }: CourseActionsProps) {
const router = useRouter()
const session = useLHSession() as any
const [linkedProducts, setLinkedProducts] = useState
([])
@@ -198,7 +57,8 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
const [isContributeLoading, setIsContributeLoading] = useState(false)
const [isModalOpen, setIsModalOpen] = useState(false)
const [hasAccess, setHasAccess] = useState(null)
- const { contributorStatus, refetch } = useContributorStatus(courseuuid);
+ const { contributorStatus, refetch } = useContributorStatus(courseuuid)
+ const [isProgressOpen, setIsProgressOpen] = useState(false)
const isStarted = course.trail?.runs?.some(
(run) => run.status === 'STATUS_IN_PROGRESS' && run.course_id === course.id
@@ -321,12 +181,33 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
}
}
- if (isLoading) {
- return
- }
+ const renderActionButton = (action: 'start' | 'leave') => {
+ if (!session.data?.user) {
+ return (
+ <>
+
+ {action === 'start' ? 'Start Course' : 'Leave Course'}
+
+
+ );
+ }
+
+ return (
+ <>
+
+ {action === 'start' ? 'Start Course' : 'Leave Course'}
+
+
+ );
+ };
const renderContributorButton = () => {
- // Don't render anything if the course is not open to contributors or if the user status is INACTIVE
if (contributorStatus === 'INACTIVE' || course.open_to_contributors !== true) {
return null;
}
@@ -379,139 +260,219 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
);
};
+ const renderProgressSection = () => {
+ const totalActivities = course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 0;
+ const completedActivities = course.trail?.runs?.find(
+ (run: CourseRun) => run.course_id === course.id
+ )?.steps?.filter((step) => step.complete)?.length || 0;
+
+ const progressPercentage = Math.round((completedActivities / totalActivities) * 100);
+
+ if (!isStarted) {
+ return (
+
+
+
+
+
+
+
+
+
Ready to Begin?
+
+ Start your learning journey with {totalActivities} exciting {totalActivities === 1 ? 'activity' : 'activities'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {progressPercentage}%
+
+
+
+
+
+
+
+
+
- {hasAccess ? (
- <>
-
-
-
-
You Own This Course
+
+
+ {hasAccess ? (
+ <>
+
+
+
+
You Own This Course
+
+
+ You have purchased this course and have full access to all content.
+
-
- You have purchased this course and have full access to all content.
-
-
-
- {renderContributorButton()}
-
- ) : (
-
-
-
- This course requires purchase to access its content.
-
-
- )}
-
- {!hasAccess && (
- <>
-
}
- dialogTitle="Purchase Course"
- dialogDescription="Select a payment option to access this course"
- minWidth="sm"
- />
-
- {renderContributorButton()}
-
- )}
+
+ {renderContributorButton()}
+
+ ) : (
+ <>
+
+
+
+ This course requires purchase to access its content.
+
+
+
}
+ dialogTitle="Purchase Course"
+ dialogDescription="Select a payment option to access this course"
+ minWidth="sm"
+ />
+
+ {renderContributorButton()}
+
+ )}
+
)
}
return (
-
-
- {renderContributorButton()}
-
- )
-}
+
+
+ {/* Progress Section */}
+ {renderProgressSection()}
-function CoursesActions({ courseuuid, orgslug, course }: CourseActionsProps) {
- const router = useRouter()
- const session = useLHSession() as any
- const isMobile = useMediaQuery('(max-width: 768px)')
+ {/* Start/Leave Course Button */}
+
- // Filter active authors and sort by role priority
- const sortedAuthors = [...course.authors]
- .filter(author => author.authorship_status === 'ACTIVE')
- .sort((a, b) => {
- const rolePriority: Record
= {
- 'CREATOR': 0,
- 'MAINTAINER': 1,
- 'CONTRIBUTOR': 2,
- 'REPORTER': 3
- };
- return rolePriority[a.authorship] - rolePriority[b.authorship];
- });
+ {/* Contributor Button */}
+ {renderContributorButton()}
- return (
-
-
-
-
+ {/* Course Progress Modal */}
+
setIsProgressOpen(false)}
+ />
+
Authors & Updates
+
+ {/* Avatars row */}
+
+ {displayedAvatars.map((author, index) => (
+
+ ))}
+ {remainingCount > 0 && (
+
+
+ +{remainingCount}
+
+
+ )}
+
+
+ {/* Names row - improved display logic */}
+
+
+ {authors.length === 1 ? (
+
+ {authors[0].user.first_name && authors[0].user.last_name
+ ? `${authors[0].user.first_name} ${authors[0].user.last_name}`
+ : `@${authors[0].user.username}`}
+
+ ) : (
+ <>
+ {displayedNames.map((author, index) => (
+
+ {author.user.first_name && author.user.last_name
+ ? `${author.user.first_name} ${author.user.last_name}`
+ : `@${author.user.username}`}
+ {index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
+
+ ))}
+ {authors.length > 2 && (
+
+ & {authors.length - 2} more
+
+ )}
+
+ )}
+
+
+ {authors.length === 1 ? (
+ @{authors[0].user.username}
+ ) : (
+ <>
+ {displayedNames.map((author, index) => (
+
+ @{author.user.username}
+ {index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+ Course Updates
+
+ {updates && updates.length > 0 && (
+
+ {updates.length} {updates.length === 1 ? 'update' : 'updates'}
+
+ )}
+
+ {adminStatus.isAdmin && (
+
+ )}
+
+
+
+
+ {selectedView === 'list' ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
No updates yet
+
Updates about this course will appear here
+
+ {updates.map((update: any) => (
+
+
+
+
+
{update.title}
+
+ {dayjs(update.creation_date).fromNow()}
+
+
+
{update.content}
+
+ {adminStatus.isAdmin && !adminStatus.loading && (
+
+
+
+ )}
+
+ ))}
+
+
+
+
+ )
+}
+
+export default CourseAuthors
\ No newline at end of file
diff --git a/apps/web/components/Objects/Courses/CourseProgress/CourseProgress.tsx b/apps/web/components/Objects/Courses/CourseProgress/CourseProgress.tsx
new file mode 100644
index 00000000..4b697d18
--- /dev/null
+++ b/apps/web/components/Objects/Courses/CourseProgress/CourseProgress.tsx
@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react'
+import { Check, Square, ArrowRight, Folder, FileText, Video, Layers, BookOpenCheck } from 'lucide-react'
+import { getUriWithOrg } from '@services/config/config'
+import Link from 'next/link'
+import Modal from '@components/Objects/StyledElements/Modal/Modal'
+
+interface CourseProgressProps {
+ course: any
+ orgslug: string
+ isOpen: boolean
+ onClose: () => void
+}
+
+const CourseProgress: React.FC = ({ course, orgslug, isOpen, onClose }) => {
+ const [completedActivities, setCompletedActivities] = useState(0)
+ const [totalActivities, setTotalActivities] = useState(0)
+
+ useEffect(() => {
+ let total = 0
+ let completed = 0
+
+ course.chapters.forEach((chapter: any) => {
+ chapter.activities.forEach((activity: any) => {
+ total++
+ if (isActivityDone(activity)) {
+ completed++
+ }
+ })
+ })
+
+ setTotalActivities(total)
+ setCompletedActivities(completed)
+ }, [course])
+
+ const isActivityDone = (activity: any) => {
+ const run = course?.trail?.runs?.find(
+ (run: any) => run.course_id === course.id
+ )
+ if (run) {
+ return run.steps.find((step: any) => step.activity_id === activity.id)
+ }
+ return false
+ }
+
+ const getActivityTypeIcon = (activityType: string) => {
+ switch (activityType) {
+ case 'TYPE_VIDEO':
+ return
+ case 'TYPE_DOCUMENT':
+ return
+ case 'TYPE_DYNAMIC':
+ return
+ case 'TYPE_ASSIGNMENT':
+ return
+ default:
+ return
+ }
+ }
+
+ const progressPercentage = totalActivities > 0 ? (completedActivities / totalActivities) * 100 : 0
+ const radius = 40
+ const circumference = 2 * Math.PI * radius
+ const strokeDashoffset = circumference - (progressPercentage / 100) * circumference
+
+ const dialogContent = (
+
+ {course.chapters.map((chapter: any) => (
+
+
+
+ {chapter.name}
+
+
+ {chapter.activities.map((activity: any) => {
+ const activityId = activity.activity_uuid.replace('activity_', '')
+ const courseId = course.course_uuid.replace('course_', '')
+ return (
+
+
+
+ {isActivityDone(activity) ? (
+
+
+
+
+ ) : (
+
+ )}
+
+ {getActivityTypeIcon(activity.activity_type)}
+
+ {activity.name}
+
+
+
+
+
+
+ )
+ })}
+
+
+ ))}
+
{course.chapters.map((chapter: any) => {
@@ -57,11 +103,33 @@ function ActivityIndicators(props: Props) {
{chapter.activities.map((activity: any) => {
+ const isDone = isActivityDone(activity)
+ const isCurrent = isActivityCurrent(activity)
return (
+
+ {getActivityTypeIcon(activity.activity_type)}
+ {activity.name}
+ {isDone && (
+
+
+
+ )}
+
+
+
+ {getActivityTypeLabel(activity.activity_type)}
+
+
+ {isCurrent ? 'Current Activity' : isDone ? 'Completed' : 'Not Started'}
+
+
+