Forced merge: merge ai-dev into master

.gitignore

@@ -1,3 +1,8 @@
 node_modules/
 */node_modules/
 */build/
+
+**/node_modules/
+**/build/
+.DS_Store
+.env

frontend/json/runtimeError.json

@@ -0,0 +1 @@
+{}

frontend/src/colors.ts

@@ -15,7 +15,7 @@ export const colorsBgLight = {
     'bg-emerald-500 border-emerald-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
   danger: 'bg-red-500 border-red-500 text-white',
   warning: 'bg-yellow-500 border-yellow-500 text-white',
-  info: 'bg-blue-500 border-blue-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
+  info: 'bg-sky-600 border-sky-600 dark:bg-sky-600 dark:border-sky-600 text-white',
 };
 
 export const colorsText = {
@@ -25,7 +25,7 @@ export const colorsText = {
   success: 'text-emerald-500',
   danger: 'text-red-500',
   warning: 'text-yellow-500',
-  info: 'text-blue-500',
+  info: 'text-sky-600 dark:text-sky-400',
 };
 
 export const colorsOutline = {
@@ -37,7 +37,7 @@ export const colorsOutline = {
   success: [colorsText.success, 'border-emerald-500'].join(' '),
   danger: [colorsText.danger, 'border-red-500'].join(' '),
   warning: [colorsText.warning, 'border-yellow-500'].join(' '),
-  info: [colorsText.info, 'border-blue-500'].join(' '),
+  info: [colorsText.info, 'border-sky-600'].join(' '),
 };
 
 export const getButtonColor = (
@@ -59,7 +59,7 @@ export const getButtonColor = (
       success: 'ring-emerald-300 dark:ring-pavitra-blue',
       danger: 'ring-red-300 dark:ring-red-700',
       warning: 'ring-yellow-300 dark:ring-yellow-700',
-      info: 'ring-blue-300 dark:ring-pavitra-blue',
+      info: 'ring-sky-300 dark:ring-sky-700',
     },
     active: {
       white: 'bg-gray-100',
@@ -69,7 +69,7 @@ export const getButtonColor = (
       success: 'bg-emerald-700 dark:bg-pavitra-blue',
       danger: 'bg-red-700 dark:bg-red-600',
       warning: 'bg-yellow-700 dark:bg-yellow-600',
-      info: 'bg-blue-700  dark:bg-pavitra-blue',
+      info: 'bg-sky-700 dark:bg-sky-600',
     },
     bg: {
       white: 'bg-white text-black',
@@ -79,7 +79,7 @@ export const getButtonColor = (
       success: 'bg-emerald-600 dark:bg-pavitra-blue text-white',
       danger: 'bg-red-600 text-white    dark:bg-red-500 ',
       warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
-      info: ' bg-blue-600  dark:bg-pavitra-blue  text-white ',
+      info: 'bg-sky-600 dark:bg-sky-600 text-white',
     },
     bgHover: {
       white: 'hover:bg-gray-100',
@@ -92,7 +92,7 @@ export const getButtonColor = (
         'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
       warning:
         'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
-      info: 'hover:bg-blue-700 hover:border-blue-700   hover:dark:bg-pavitra-blue/80 hover:dark:border-pavitra-blue/80',
+      info: 'hover:bg-sky-700 hover:border-sky-700 hover:dark:bg-sky-600 hover:dark:border-sky-600',
     },
     borders: {
       white: 'border-white',
@@ -102,14 +102,14 @@ export const getButtonColor = (
       success: 'border-emerald-600 dark:border-pavitra-blue',
       danger: 'border-red-600 dark:border-red-500',
       warning: 'border-yellow-600 dark:border-yellow-500',
-      info: 'border-blue-600  border-blue-600 dark:border-pavitra-blue',
+      info: 'border-sky-600 dark:border-sky-600',
     },
     text: {
       contrast: 'dark:text-slate-100',
       success: 'text-emerald-600 dark:text-pavitra-blue',
       danger: 'text-red-600 dark:text-red-500',
       warning: 'text-yellow-600 dark:text-yellow-500',
-      info: 'text-blue-600  dark:text-pavitra-blue',
+      info: 'text-sky-600 dark:text-sky-400',
     },
     outlineHover: {
       contrast:
@@ -120,7 +120,7 @@ export const getButtonColor = (
         'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
       warning:
         'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
-      info: 'hover:bg-blue-600  hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue',
+      info: 'hover:bg-sky-600 hover:border-sky-600 hover:text-white hover:dark:bg-sky-600 hover:dark:border-sky-600',
     },
   };
 

frontend/src/components/BaseButton.tsx

@@ -64,7 +64,7 @@ export default function BaseButton({
   } else if (small) {
     componentClass.push('text-sm', roundedFull ? 'px-3 py-1' : 'p-1');
   } else {
-    componentClass.push('py-2', roundedFull ? 'px-6' : 'px-3');
+    componentClass.push('py-1.5', roundedFull ? 'px-4' : 'px-2');
   }
 
   if (disabled) {

frontend/src/css/main.css

@@ -32,3 +32,9 @@
 .introjs-prevbutton {
   @apply bg-transparent border border-blue-600 text-blue-600 !important;
 }
+
+/* Compact UI overrides */
+html { font-size: 14px; }
+.container { padding-left: 1rem; padding-right: 1rem; }
+td, th { padding: 0.5rem !important; }
+.gap-4 { gap: 0.75rem !important; }

frontend/src/menuNavBar.ts

@@ -67,6 +67,11 @@ export const webPagesNavBar = [
     href: '/about',
     label: 'about',
   },
+  {
+    href: '/web_pages/cources',
+    label: 'Cources',
+  },
+
 ];
 
 export default menuNavBar;

frontend/src/pages/web_pages/cources.tsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import Head from 'next/head';
+import axios from 'axios';
+import LayoutGuest from '../../layouts/Guest';
+import WebSiteHeader from '../../components/WebPageComponents/Header';
+import WebSiteFooter from '../../components/WebPageComponents/Footer';
+
+const Cources = () => {
+  const [courses, setCourses] = useState([]);
+
+  useEffect(() => {
+    axios.get('/courses')
+      .then(response => {
+        const dataList = Array.isArray(response.data.rows) ? response.data.rows : [];
+        setCourses(dataList);
+      })
+      .catch(error => console.error(error));
+  }, []);
+
+  return (
+    <>
+      <Head>
+        <title>Cources</title>
+      </Head>
+      <WebSiteHeader />
+      <main className="container mx-auto py-8">
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {courses.map(course => (
+            <div key={course.id} className="bg-white rounded shadow p-4">
+              <h2 className="text-lg font-semibold mb-2">{course.title}</h2>
+              <p className="text-gray-600">{course.description}</p>
+            </div>
+          ))}
+        </div>
+      </main>
+      <WebSiteFooter />
+    </>
+  );
+};
+
+Cources.getLayout = page => <LayoutGuest>{page}</LayoutGuest>;
+
+export default Cources;

frontend/src/styles.ts

@@ -32,24 +32,24 @@ export const white: StyleObject = {
     'text-gray-700 hover:bg-gray-100/70 dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800',
   asideMenuItemActive: 'font-bold text-black dark:text-white',
   asideMenuDropdown: 'bg-gray-100/75',
-  navBarItemLabel: 'text-blue-600',
+  navBarItemLabel: 'text-sky-600',
   navBarItemLabelHover: 'hover:text-black',
   navBarItemLabelActiveColor: 'text-black',
-  overlay: 'from-white via-gray-100 to-white',
+  overlay: 'from-white via-sky-100 to-white',
-  activeLinkColor: 'bg-gray-100/70',
+  activeLinkColor: 'bg-sky-100/70',
-  bgLayoutColor: 'bg-gray-50',
+  bgLayoutColor: 'bg-sky-50',
-  iconsColor: 'text-blue-500',
+  iconsColor: 'text-sky-500',
   cardsColor: 'bg-white',
   focusRingColor:
-    'focus:ring focus:ring-blue-600 focus:border-blue-600 focus:outline-none border-gray-300 dark:focus:ring-blue-600 dark:focus:border-blue-600',
+    'focus:ring focus:ring-sky-600 focus:border-sky-600 focus:outline-none border-sky-200 dark:focus:ring-sky-600 dark:focus:border-sky-600',
   corners: 'rounded',
-  cardsStyle: 'bg-white border border-pavitra-400',
+  cardsStyle: 'bg-white border border-sky-200',
-  linkColor: 'text-blue-600',
+  linkColor: 'text-sky-600',
-  websiteHeder: 'border-b border-gray-200',
+  websiteHeder: 'border-b border-sky-200',
-  borders: 'border-gray-200',
+  borders: 'border-sky-200',
   shadow: '',
   websiteSectionStyle: '',
-  textSecondary: 'text-gray-500',
+  textSecondary: 'text-sky-500',
 };
 
 export const dataGridStyles = {