fix: Authors showing on the course page

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

@@ -29,6 +29,8 @@ const CourseClient = (props: any) => {
   const router = useRouter()
   const isMobile = useMediaQuery('(max-width: 768px)')
 
+  console.log(course)
+
   function getLearningTags() {
     if (!course?.learnings) {
       setLearnings([])
@@ -333,7 +335,7 @@ const CourseClient = (props: any) => {
           </GeneralWrapperStyled>
           
           {isMobile && (
-            <div className="fixed bottom-0 left-0 right-0 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 p-4 z-50">
+            <div className="fixed bottom-0 left-0 right-0  p-4 z-50">
               <CourseActionsMobile courseuuid={courseuuid} orgslug={orgslug} course={course} />
             </div>
           )}

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

@@ -72,7 +72,7 @@ const CoursePage = async (params: any) => {
   // Fetch course metadata once
   const course_meta = await getCourseMetadata(
     params.params.courseuuid,
-    { revalidate: 1800, tags: ['courses'] },
+    { revalidate: 0, tags: ['courses'] },
     access_token ? access_token : null
   )
 

apps/web/components/Objects/Courses/CourseActions/CourseActionsMobile.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/navigation'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
 import { getUriWithoutOrg, getUriWithOrg } from '@services/config/config'
 import { getProductsByCourse } from '@services/payments/products'
-import { LogIn, LogOut, ShoppingCart } from 'lucide-react'
+import { LogIn, LogOut, ShoppingCart, AlertCircle } from 'lucide-react'
 import Modal from '@components/Objects/StyledElements/Modal/Modal'
 import CoursePaidOptions from './CoursePaidOptions'
 import { checkPaidAccess } from '@services/payments/payments'
@@ -13,11 +13,15 @@ import UserAvatar from '../../UserAvatar'
 import { getUserAvatarMediaDirectory } from '@services/media/media'
 
 interface Author {
+  user: {
     user_uuid: string
     avatar_image: string
     first_name: string
     last_name: string
     username: string
+  }
+  authorship: 'CREATOR' | 'CONTRIBUTOR' | 'MAINTAINER' | 'REPORTER'
+  authorship_status: 'ACTIVE' | 'INACTIVE' | 'PENDING'
 }
 
 interface CourseRun {
@@ -49,11 +53,81 @@ interface CourseActionsMobileProps {
   }
 }
 
+// Component for displaying multiple authors
+const MultipleAuthors = ({ authors }: { authors: Author[] }) => {
+  const displayedAvatars = authors.slice(0, 3)
+  const remainingCount = Math.max(0, authors.length - 3)
+  
+  // Avatar size for mobile
+  const avatarSize = 36
+  const borderSize = "border-2"
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex -space-x-3 relative">
+        {displayedAvatars.map((author, index) => (
+          <div
+            key={author.user.user_uuid}
+            className="relative"
+            style={{ zIndex: displayedAvatars.length - index }}
+          >
+            <UserAvatar
+              border={borderSize}
+              rounded='rounded-full'
+              avatar_url={author.user.avatar_image ? getUserAvatarMediaDirectory(author.user.user_uuid, author.user.avatar_image) : ''}
+              predefined_avatar={author.user.avatar_image ? undefined : 'empty'}
+              width={avatarSize}
+            />
+          </div>
+        ))}
+        {remainingCount > 0 && (
+          <div 
+            className="relative"
+            style={{ zIndex: 0 }}
+          >
+            <div 
+              className="flex items-center justify-center bg-neutral-100 text-neutral-600 font-medium rounded-full border-2 border-white shadow-sm"
+              style={{ 
+                width: `${avatarSize}px`, 
+                height: `${avatarSize}px`,
+                fontSize: '12px'
+              }}
+            >
+              +{remainingCount}
+            </div>
+          </div>
+        )}
+      </div>
+      
+      <div className="flex flex-col">
+        <span className="text-xs text-neutral-400 font-medium">
+          {authors.length > 1 ? 'Authors' : 'Author'}
+        </span>
+        {authors.length === 1 ? (
+          <span className="text-sm font-semibold text-neutral-800">
+            {authors[0].user.first_name && authors[0].user.last_name 
+              ? `${authors[0].user.first_name} ${authors[0].user.last_name}` 
+              : `@${authors[0].user.username}`}
+          </span>
+        ) : (
+          <span className="text-sm font-semibold text-neutral-800">
+            {authors[0].user.first_name && authors[0].user.last_name
+              ? `${authors[0].user.first_name} ${authors[0].user.last_name}`
+              : `@${authors[0].user.username}`}
+            {authors.length > 1 && ` & ${authors.length - 1} more`}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
 const CourseActionsMobile = ({ courseuuid, orgslug, course }: CourseActionsMobileProps) => {
   const router = useRouter()
   const session = useLHSession() as any
   const [linkedProducts, setLinkedProducts] = useState<any[]>([])
   const [isLoading, setIsLoading] = useState(true)
+  const [isActionLoading, setIsActionLoading] = useState(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [hasAccess, setHasAccess] = useState<boolean | null>(null)
 
@@ -107,6 +181,8 @@ const CourseActionsMobile = ({ courseuuid, orgslug, course }: CourseActionsMobil
       return
     }
 
+    setIsActionLoading(true)
+    try {
       if (isStarted) {
         await removeCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
         await revalidateTags(['courses'], orgslug)
@@ -129,44 +205,66 @@ const CourseActionsMobile = ({ courseuuid, orgslug, course }: CourseActionsMobil
           router.refresh()
         }
       }
+    } catch (error) {
+      console.error('Failed to perform course action:', error)
+    } finally {
+      setIsActionLoading(false)
+    }
   }
 
   if (isLoading) {
-    return <div className="animate-pulse h-16 bg-gray-100 rounded-lg" />
+    return <div className="animate-pulse h-16 bg-gray-100 rounded-lg mt-4 mb-8" />
   }
 
-  const author = course.authors[0]
+  // Filter active authors and sort by role priority
-  const authorName = author.first_name && author.last_name 
+  const sortedAuthors = [...course.authors]
-    ? `${author.first_name} ${author.last_name}`
+    .filter(author => author.authorship_status === 'ACTIVE')
-    : `@${author.username}`
+    .sort((a, b) => {
+      const rolePriority: Record<string, number> = {
+        'CREATOR': 0,
+        'MAINTAINER': 1,
+        'CONTRIBUTOR': 2,
+        'REPORTER': 3
+      };
+      return rolePriority[a.authorship] - rolePriority[b.authorship];
+    });
 
   return (
-    <div className="flex items-center justify-between">
+    <div className="bg-white/90 backdrop-blur-sm shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden p-4 my-6 mx-2">
-      <div className="flex items-center space-x-3">
+      <div className="flex flex-col space-y-4">
-        <UserAvatar
+        <MultipleAuthors authors={sortedAuthors} />
-          border="border-4"
-          avatar_url={author.avatar_image ? getUserAvatarMediaDirectory(author.user_uuid, author.avatar_image) : ''}
-          predefined_avatar={author.avatar_image ? undefined : 'empty'}
-          width={40}
-        />
-        <div className="flex flex-col">
-          <span className="text-xs text-neutral-400 font-medium">Author</span>
-          <span className="text-sm font-semibold text-neutral-800">{authorName}</span>
-        </div>
-      </div>
         
-      <div className="shrink-0">
         {linkedProducts.length > 0 ? (
-          hasAccess ? (
+          <div className="space-y-3">
+            {hasAccess ? (
+              <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
+                <div className="flex items-center gap-2">
+                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                  <span className="text-green-800 text-sm font-semibold">You Own This Course</span>
+                </div>
+              </div>
+            ) : (
+              <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg">
+                <div className="flex items-center gap-2">
+                  <AlertCircle className="w-4 h-4 text-amber-800" />
+                  <span className="text-amber-800 text-sm font-semibold">Paid Course</span>
+                </div>
+              </div>
+            )}
+            
+            {hasAccess ? (
               <button
                 onClick={handleCourseAction}
-              className={`py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center gap-2 ${
+                disabled={isActionLoading}
+                className={`w-full py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center justify-center gap-2 ${
                   isStarted
-                  ? 'bg-red-500 text-white hover:bg-red-600'
+                    ? 'bg-red-500 text-white hover:bg-red-600 disabled:bg-red-400'
-                  : 'bg-neutral-900 text-white hover:bg-neutral-800'
+                    : 'bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700'
                 }`}
               >
-              {isStarted ? (
+                {isActionLoading ? (
+                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                ) : isStarted ? (
                   <>
                     <LogOut className="w-4 h-4" />
                     Leave Course
@@ -190,23 +288,34 @@ const CourseActionsMobile = ({ courseuuid, orgslug, course }: CourseActionsMobil
                 />
                 <button
                   onClick={() => setIsModalOpen(true)}
-                className="py-2 px-4 rounded-lg bg-neutral-900 text-white font-semibold text-sm hover:bg-neutral-800 transition-colors flex items-center gap-2"
+                  disabled={isActionLoading}
+                  className="w-full py-2 px-4 rounded-lg bg-neutral-900 text-white font-semibold text-sm hover:bg-neutral-800 transition-colors flex items-center justify-center gap-2 disabled:bg-neutral-700"
                 >
+                  {isActionLoading ? (
+                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                  ) : (
+                    <>
                       <ShoppingCart className="w-4 h-4" />
-                Purchase
+                      Purchase Course
+                    </>
+                  )}
                 </button>
               </>
-          )
+            )}
+          </div>
         ) : (
           <button
             onClick={handleCourseAction}
-            className={`py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center gap-2 ${
+            disabled={isActionLoading}
+            className={`w-full py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center justify-center gap-2 ${
               isStarted
-                ? 'bg-red-500 text-white hover:bg-red-600'
+                ? 'bg-red-500 text-white hover:bg-red-600 disabled:bg-red-400'
-                : 'bg-neutral-900 text-white hover:bg-neutral-800'
+                : 'bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700'
             }`}
           >
-            {!session.data?.user ? (
+            {isActionLoading ? (
+              <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+            ) : !session.data?.user ? (
               <>
                 <LogIn className="w-4 h-4" />
                 Sign In

apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx

@@ -22,6 +22,7 @@ interface Author {
     username: string
   }
   authorship: 'CREATOR' | 'CONTRIBUTOR' | 'MAINTAINER' | 'REPORTER'
+  authorship_status: 'ACTIVE' | 'INACTIVE' | 'PENDING'
 }
 
 interface CourseRun {
@@ -82,11 +83,109 @@ const AuthorInfo = ({ author, isMobile }: { author: Author, isMobile: boolean })
   </div>
 )
 
+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 (
+    <div className="flex flex-col items-center space-y-4 px-2 py-2">
+      <div className="text-[12px] text-neutral-400 font-semibold self-start">Authors</div>
+      
+      {/* Avatars row */}
+      <div className="flex justify-center -space-x-6 relative">
+        {displayedAvatars.map((author, index) => (
+          <div
+            key={author.user.user_uuid}
+            className="relative"
+            style={{ zIndex: displayedAvatars.length - index }}
+          >
+            <div className="ring-white">
+              <UserAvatar
+                border={borderSize}
+                rounded='rounded-full'
+                avatar_url={author.user.avatar_image ? getUserAvatarMediaDirectory(author.user.user_uuid, author.user.avatar_image) : ''}
+                predefined_avatar={author.user.avatar_image ? undefined : 'empty'}
+                width={avatarSize}
+              />
+            </div>
+          </div>
+        ))}
+        {remainingCount > 0 && (
+          <div 
+            className="relative"
+            style={{ zIndex: 0 }}
+          >
+            <div 
+              className="flex items-center justify-center bg-neutral-100 text-neutral-600 font-medium rounded-full border-4 border-white shadow-sm"
+              style={{ 
+                width: `${avatarSize}px`, 
+                height: `${avatarSize}px`,
+                fontSize: isMobile ? '14px' : '16px'
+              }}
+            >
+              +{remainingCount}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Names row - improved display logic */}
+      <div className="text-center mt-2">
+        <div className="text-sm font-medium text-neutral-800">
+          {authors.length === 1 ? (
+            <span>
+              {authors[0].user.first_name && authors[0].user.last_name
+                ? `${authors[0].user.first_name} ${authors[0].user.last_name}`
+                : `@${authors[0].user.username}`}
+            </span>
+          ) : (
+            <>
+              {displayedNames.map((author, index) => (
+                <span key={author.user.user_uuid}>
+                  {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 && " & "}
+                </span>
+              ))}
+              {authors.length > 2 && (
+                <span className="text-neutral-500 ml-1">
+                  & {authors.length - 2} more
+                </span>
+              )}
+            </>
+          )}
+        </div>
+        <div className="text-xs text-neutral-500 mt-0.5">
+          {authors.length === 1 ? (
+            <span>@{authors[0].user.username}</span>
+          ) : (
+            <>
+              {displayedNames.map((author, index) => (
+                <span key={author.user.user_uuid}>
+                  @{author.user.username}
+                  {index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
+                </span>
+              ))}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
   const router = useRouter()
   const session = useLHSession() as any
   const [linkedProducts, setLinkedProducts] = useState<any[]>([])
   const [isLoading, setIsLoading] = useState(true)
+  const [isActionLoading, setIsActionLoading] = useState(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [hasAccess, setHasAccess] = useState<boolean | null>(null)
 
@@ -141,6 +240,8 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
       return
     }
 
+    setIsActionLoading(true)
+    try {
       if (isStarted) {
         await removeCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
         await revalidateTags(['courses'], orgslug)
@@ -163,6 +264,11 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
           router.refresh()
         }
       }
+    } catch (error) {
+      console.error('Failed to perform course action:', error)
+    } finally {
+      setIsActionLoading(false)
+    }
   }
 
   if (isLoading) {
@@ -185,13 +291,16 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
             </div>
             <button
               onClick={handleCourseAction}
-              className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 ${
+              disabled={isActionLoading}
+              className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 cursor-pointer ${
                 isStarted
-                  ? 'bg-red-500 text-white hover:bg-red-600'
+                  ? 'bg-red-500 text-white hover:bg-red-600 disabled:bg-red-400'
-                  : 'bg-neutral-900 text-white hover:bg-neutral-800'
+                  : 'bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700'
               }`}
             >
-              {isStarted ? (
+              {isActionLoading ? (
+                <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+              ) : isStarted ? (
                 <>
                   <LogOut className="w-5 h-5" />
                   Leave Course
@@ -242,13 +351,16 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
   return (
     <button
       onClick={handleCourseAction}
-      className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 ${
+      disabled={isActionLoading}
+      className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 cursor-pointer ${
         isStarted
-          ? 'bg-red-500 text-white hover:bg-red-600'
+          ? 'bg-red-500 text-white hover:bg-red-600 disabled:bg-red-400'
-          : 'bg-neutral-900 text-white hover:bg-neutral-800'
+          : 'bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700'
       }`}
     >
-      {!session.data?.user ? (
+      {isActionLoading ? (
+        <div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
+      ) : !session.data?.user ? (
         <>
           <LogIn className="w-5 h-5" />
           Authenticate to start course
@@ -273,8 +385,10 @@ function CoursesActions({ courseuuid, orgslug, course }: CourseActionsProps) {
   const session = useLHSession() as any
   const isMobile = useMediaQuery('(max-width: 768px)')
 
-  // Sort authors by role priority
+  // Filter active authors and sort by role priority
-  const sortedAuthors = [...course.authors].sort((a, b) => {
+  const sortedAuthors = [...course.authors]
+    .filter(author => author.authorship_status === 'ACTIVE')
+    .sort((a, b) => {
       const rolePriority: Record<string, number> = {
         'CREATOR': 0,
         'MAINTAINER': 1,
@@ -285,8 +399,8 @@ function CoursesActions({ courseuuid, orgslug, course }: CourseActionsProps) {
     });
 
   return (
-    <div className=" space-y-3  antialiased flex flex-col   p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
+    <div className="space-y-3 antialiased flex flex-col p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
-     <AuthorInfo author={sortedAuthors[0]} isMobile={isMobile} />
+      <MultipleAuthors authors={sortedAuthors} isMobile={isMobile} />
       <div className='px-3 py-2'>
         <Actions courseuuid={courseuuid} orgslug={orgslug} course={course} />
       </div>

apps/web/components/Objects/UserAvatar.tsx

@@ -80,7 +80,7 @@ function UserAvatar(props: UserAvatarProps) {
         ${props.border ? `border ${props.border}` : ''}
         ${props.borderColor ?? 'border-white'}
         ${props.backgroundColor ?? 'bg-gray-100'}
-        shadow-xl
+        shadow-md shadow-gray-300/45
         aspect-square
         w-[${props.width ?? 50}px]
         h-[${props.width ?? 50}px]