feat: add user owned courses page

apps/web/app/orgs/[orgslug]/dash/user-account/owned/page.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import React from 'react'
+import { useOrg } from '@components/Contexts/OrgContext'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
+import useSWR from 'swr'
+import { getOwnedCourses } from '@services/payments/payments'
+import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
+import PageLoading from '@components/Objects/Loaders/PageLoading'
+import { BookOpen } from 'lucide-react'
+
+function OwnedCoursesPage() {
+  const org = useOrg() as any
+  const session = useLHSession() as any
+  const access_token = session?.data?.tokens?.access_token
+
+  const { data: ownedCourses, error, isLoading } = useSWR(
+    org ? [`/payments/${org.id}/courses/owned`, access_token] : null,
+    ([url, token]) => getOwnedCourses(org.id, token)
+  )
+
+  if (isLoading) return <PageLoading />
+  if (error) return <div>Error loading owned courses</div>
+
+  return (
+    <div className="h-full w-full bg-[#f8f8f8] pl-10 pr-10 pt-5 ">
+      <div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-6">
+        <h1 className="font-bold text-xl text-gray-800">My Courses</h1>
+        <h2 className="text-gray-500 text-md">Courses you have purchased or subscribed to</h2>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 w-full">
+        {ownedCourses?.map((course: any) => (
+          <div key={course.course_uuid} className="p-3">
+            <CourseThumbnail course={course} orgslug={org.slug} />
+          </div>
+        ))}
+
+        {(!ownedCourses || ownedCourses.length === 0) && (
+          <div className="col-span-full flex justify-center items-center py-8">
+            <div className="text-center">
+              <div className="mb-4">
+                <BookOpen className="w-12 h-12 mx-auto text-gray-400" />
+              </div>
+              <h2 className="text-xl font-bold text-gray-600 mb-2">
+                No purchased courses
+              </h2>
+              <p className="text-md text-gray-400">
+                You haven't purchased any courses yet
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default OwnedCoursesPage

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

@@ -3,7 +3,7 @@ import { useOrg } from '@components/Contexts/OrgContext'
 import { signOut } from 'next-auth/react'
 import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
 import LearnHouseDashboardLogo from '@public/dashLogo.png'
-import { Backpack, BadgeDollarSign, BookCopy, Home, LogOut, School, Settings, Users } from 'lucide-react'
+import { Backpack, BadgeDollarSign, BookCopy, Home, LogOut, Package2, School, Settings, Users, Vault } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
 import React, { useEffect } from 'react'
@@ -147,23 +147,41 @@ function DashLeftMenu() {
                 <UserAvatar border="border-4" width={35} />
               </div>
             </ToolTip>
-            <div className="flex items-center flex-col space-y-1">
-              <ToolTip
-                content={session.data.user.username + "'s Settings"}
+            <div className="flex items-center flex-col space-y-3">
+              <div className="flex flex-col space-y-1 py-1">
+                <ToolTip
+                  content={session.data.user.username + "'s Owned Courses"}
+                slateBlack
+                sideOffset={8}
+                side="right"
+              >
+                <Link
+                    href={'/dash/user-account/owned'}
+                    className="py-1"
+                >
+                  <Package2
+                    className="mx-auto text-neutral-400 cursor-pointer"
+                    size={18}
+                  />
+                </Link>
+              </ToolTip>
+                <ToolTip
+                  content={session.data.user.username + "'s Settings"}
                 slateBlack
                 sideOffset={8}
                 side="right"
               >
                 <Link
                   href={'/dash/user-account/settings/general'}
-                  className="py-3"
+                  className="py-1"
                 >
                   <Settings
                     className="mx-auto text-neutral-400 cursor-pointer"
                     size={18}
                   />
-                </Link>
-              </ToolTip>
+                  </Link>
+                </ToolTip>
+              </div>
               <ToolTip
                 content={'Logout'}
                 slateBlack

apps/web/components/Security/HeaderProfileBox.tsx

@@ -2,16 +2,17 @@
 import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import Link from 'next/link'
-import { Settings } from 'lucide-react'
+import { Package2, Settings } from 'lucide-react'
 import UserAvatar from '@components/Objects/UserAvatar'
 import useAdminStatus from '@components/Hooks/useAdminStatus'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
 import { useOrg } from '@components/Contexts/OrgContext'
 import { getUriWithoutOrg } from '@services/config/config'
+import Tooltip from '@components/StyledElements/Tooltip/Tooltip'
 
 export const HeaderProfileBox = () => {
   const session = useLHSession() as any
-  const isUserAdmin = useAdminStatus() 
+  const isUserAdmin = useAdminStatus()
   const org = useOrg() as any
 
   useEffect(() => { }
@@ -39,12 +40,30 @@ export const HeaderProfileBox = () => {
               <p className='text-sm capitalize'>{session.data.user.username}</p>
               {isUserAdmin.isAdmin && <div className="text-[10px] bg-rose-300 px-2 font-bold rounded-md shadow-inner py-1">ADMIN</div>}
             </div>
+
+            <div className="flex items-center space-x-2">
+              <Tooltip 
+                content={"Your Owned Courses"}
+                sideOffset={15}
+                side="bottom"
+              >
+                <Link className="text-gray-600" href={'/dash/user-account/owned'}>
+                  <Package2 size={14} />
+                </Link>
+              </Tooltip>
+              <Tooltip 
+                content={"Your Settings"}
+                sideOffset={15}
+                side="bottom"
+              >
+                <Link className="text-gray-600" href={'/dash'}>
+                  <Settings size={14} />
+                </Link>
+              </Tooltip>
+            </div>
             <div className="py-4">
               <UserAvatar border="border-4" rounded="rounded-lg" width={30} />
             </div>
-            <Link className="text-gray-600" href={'/dash'}>
-              <Settings size={14} />
-            </Link>
           </div>
         </AccountArea>
       )}

apps/web/services/payments/payments.ts

@@ -53,4 +53,13 @@ export async function getOrgCustomers(orgId: number, access_token: string) {
   );
   const res = await errorHandling(result);
   return res;
+}
+
+export async function getOwnedCourses(orgId: number, access_token: string) {
+  const result = await fetch(
+    `${getAPIUrl()}payments/${orgId}/courses/owned`,
+    RequestBodyWithAuthHeader('GET', null, null, access_token)
+  );
+  const res = await errorHandling(result);
+  return res;
 }