Forced merge: merge ai-dev into master

frontend/src/components/DevModeBadge.tsx

@@ -47,7 +47,7 @@ Current request is compiling and may take a few moments.
     }, [compilationStatus]);
 
     useEffect(() => {
-        if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'dev_stage') {
+        if (process.env.NODE_ENV === 'development') {
             setIsVisible(true);
 
             setBadgeStyles(prev => ({

frontend/src/components/FormField.tsx

@@ -10,7 +10,7 @@ type Props = {
   isBorderless?: boolean
   isTransparent?: boolean
   hasTextareaHeight?: boolean
-  children: ReactNode
+  children?: ReactNode
   disabled?: boolean
   borderButtom?: boolean
   diversity?: boolean

frontend/src/components/SectionMain.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react'
 import { containerMaxW } from '../config'
 
 type Props = {
-  children: ReactNode
+  children?: ReactNode
 }
 
 export default function SectionMain({ children }: Props) {

frontend/src/pages/_app.tsx

@@ -192,7 +192,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
             stepsEnabled={stepsEnabled}
             onExit={handleExit}
           />
-            {(process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'dev_stage') && <DevModeBadge />}
+            {(process.env.NODE_ENV === 'development') && <DevModeBadge />}
         </>
       )}
     </Provider>

frontend/src/pages/dashboard.tsx

@@ -12,8 +12,12 @@ import Link from "next/link";
 
 import { hasPermission } from "../helpers/userPermissions";
 import { fetchWidgets } from '../stores/roles/rolesSlice';
+import { fetch as fetchCourses } from '../stores/courses/coursesSlice';
 import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
 import { SmartWidget } from '../components/SmartWidget/SmartWidget';
+import CardBox from '../components/CardBox';
+import BaseButton from '../components/BaseButton';
+
 
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
 const Dashboard = () => {
@@ -32,12 +36,15 @@ const Dashboard = () => {
     const [lessons, setLessons] = React.useState(loadingMessage);
     const [enrollments, setEnrollments] = React.useState(loadingMessage);
     const [progress, setProgress] = React.useState(loadingMessage);
+    const [isMounted, setIsMounted] = React.useState(false);
+
 
     
     const [widgetsRole, setWidgetsRole] = React.useState({
         role: { value: '', label: '' },
     });
     const { currentUser } = useAppSelector((state) => state.auth);
+    const { courses: allCourses } = useAppSelector((state) => state.courses);
     const { isFetchingQuery } = useAppSelector((state) => state.openAi);
     
     const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
@@ -75,6 +82,8 @@ const Dashboard = () => {
     React.useEffect(() => {
         if (!currentUser) return;
         loadData().then();
+        dispatch(fetchCourses({}));
+        setIsMounted(true);
         setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
     }, [currentUser]);
 
@@ -334,6 +343,37 @@ const Dashboard = () => {
           
           
         </div>
+
+        {isMounted && hasPermission(currentUser, 'READ_COURSES') && allCourses.length > 0 && (
+          <>
+            <SectionTitleLineWithButton
+              icon={icon.mdiBookOpenPageVariant}
+              title='Recent Courses'
+            >
+              {''}
+            </SectionTitleLineWithButton>
+            <div className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
+              {allCourses.slice(0, 5).map((course) => (
+                <CardBox key={course.id}>
+                  <div className='p-6'>
+                    <h3 className='text-xl font-semibold mb-2'>{course.title}</h3>
+                    <p className='text-gray-500 dark:text-gray-400'>{course.description}</p>
+                  </div>
+                  <div className='p-6 border-t border-gray-100 dark:border-dark-700'>
+                    <BaseButton
+                      href={`/courses/${course.id}`}
+                      label='View Course'
+                      color='info'
+                      size='md'
+                      className='w-full'
+                    />
+                  </div>
+                </CardBox>
+              ))}
+            </div>
+          </>
+        )}
+
       </SectionMain>
     </>
   )