Forced merge: merge ai-dev into master

.gitignore

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

backend/src/routes/courses.js

@@ -10,7 +10,6 @@ const { parse } = require('json2csv');
 
 const { checkCrudPermissions } = require('../middlewares/check-permissions');
 
-router.use(checkCrudPermissions('courses'));
 
 /**
  *  @swagger

backend/src/routes/courses.js.temp

@@ -0,0 +1,439 @@
+const express = require('express');
+
+const CoursesService = require('../services/courses');
+const CoursesDBApi = require('../db/api/courses');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+const { checkCrudPermissions } = require('../middlewares/check-permissions');
+
+
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Courses:
+ *        type: object
+ *        properties:
+
+ *          title:
+ *            type: string
+ *            default: title
+ *          description:
+ *            type: string
+ *            default: description
+
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Courses
+ *   description: The Courses managing API
+ */
+
+/**
+ *  @swagger
+ *  /api/courses:
+ *    post:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Courses]
+ *      summary: Add new item
+ *      description: Add new item
+ *      requestBody:
+ *        required: true
+ *        content:
+ *          application/json:
+ *            schema:
+ *              properties:
+ *                data:
+ *                  description: Data of the updated item
+ *                  type: object
+ *                  $ref: "#/components/schemas/Courses"
+ *      responses:
+ *        200:
+ *          description: The item was successfully added
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Courses"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        405:
+ *          description: Invalid input data
+ *        500:
+ *          description: Some server error
+ */
+router.post(
+  '/',
+  wrapAsync(async (req, res) => {
+    const referer =
+      req.headers.referer ||
+      `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await CoursesService.create(
+      req.body.data,
+      req.currentUser,
+      true,
+      link.host,
+    );
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Courses]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Courses"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Courses"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post(
+  '/bulk-import',
+  wrapAsync(async (req, res) => {
+    const referer =
+      req.headers.referer ||
+      `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await CoursesService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/courses/{id}:
+ *    put:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Courses]
+ *      summary: Update the data of the selected item
+ *      description: Update the data of the selected item
+ *      parameters:
+ *        - in: path
+ *          name: id
+ *          description: Item ID to update
+ *          required: true
+ *          schema:
+ *            type: string
+ *      requestBody:
+ *        description: Set new item data
+ *        required: true
+ *        content:
+ *          application/json:
+ *            schema:
+ *              properties:
+ *                id:
+ *                  description: ID of the updated item
+ *                  type: string
+ *                data:
+ *                  description: Data of the updated item
+ *                  type: object
+ *                  $ref: "#/components/schemas/Courses"
+ *              required:
+ *                - id
+ *      responses:
+ *        200:
+ *          description: The item data was successfully updated
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Courses"
+ *        400:
+ *          description: Invalid ID supplied
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Item not found
+ *        500:
+ *          description: Some server error
+ */
+router.put(
+  '/:id',
+  wrapAsync(async (req, res) => {
+    await CoursesService.update(req.body.data, req.body.id, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ * @swagger
+ *  /api/courses/{id}:
+ *    delete:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Courses]
+ *      summary: Delete the selected item
+ *      description: Delete the selected item
+ *      parameters:
+ *        - in: path
+ *          name: id
+ *          description: Item ID to delete
+ *          required: true
+ *          schema:
+ *            type: string
+ *      responses:
+ *        200:
+ *          description: The item was successfully deleted
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Courses"
+ *        400:
+ *          description: Invalid ID supplied
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Item not found
+ *        500:
+ *          description: Some server error
+ */
+router.delete(
+  '/:id',
+  wrapAsync(async (req, res) => {
+    await CoursesService.remove(req.params.id, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/courses/deleteByIds:
+ *    post:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Courses]
+ *      summary: Delete the selected item list
+ *      description: Delete the selected item list
+ *      requestBody:
+ *        required: true
+ *        content:
+ *          application/json:
+ *            schema:
+ *              properties:
+ *                ids:
+ *                  description: IDs of the updated items
+ *                  type: array
+ *      responses:
+ *        200:
+ *          description: The items was successfully deleted
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Courses"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Items not found
+ *        500:
+ *          description: Some server error
+ */
+router.post(
+  '/deleteByIds',
+  wrapAsync(async (req, res) => {
+    await CoursesService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/courses:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Courses]
+ *      summary: Get all courses
+ *      description: Get all courses
+ *      responses:
+ *        200:
+ *          description: Courses list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Courses"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get(
+  '/',
+  wrapAsync(async (req, res) => {
+    const filetype = req.query.filetype;
+
+    const currentUser = req.currentUser;
+    const payload = await CoursesDBApi.findAll(req.query, { currentUser });
+    if (filetype && filetype === 'csv') {
+      const fields = ['id', 'title', 'description'];
+      const opts = { fields };
+      try {
+        const csv = parse(payload.rows, opts);
+        res.status(200).attachment(csv);
+        res.send(csv);
+      } catch (err) {
+        console.error(err);
+      }
+    } else {
+      res.status(200).send(payload);
+    }
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/courses/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Courses]
+ *      summary: Count all courses
+ *      description: Count all courses
+ *      responses:
+ *        200:
+ *          description: Courses count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Courses"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get(
+  '/count',
+  wrapAsync(async (req, res) => {
+    const currentUser = req.currentUser;
+    const payload = await CoursesDBApi.findAll(req.query, null, {
+      countOnly: true,
+      currentUser,
+    });
+
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/courses/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Courses]
+ *      summary: Find all courses that match search criteria
+ *      description: Find all courses that match search criteria
+ *      responses:
+ *        200:
+ *          description: Courses list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Courses"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  const payload = await CoursesDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+ * @swagger
+ *  /api/courses/{id}:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Courses]
+ *      summary: Get selected item
+ *      description: Get selected item
+ *      parameters:
+ *        - in: path
+ *          name: id
+ *          description: ID of item to get
+ *          required: true
+ *          schema:
+ *            type: string
+ *      responses:
+ *        200:
+ *          description: Selected item successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Courses"
+ *        400:
+ *          description: Invalid ID supplied
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Item not found
+ *        500:
+ *          description: Some server error
+ */
+router.get(
+  '/:id',
+  wrapAsync(async (req, res) => {
+    const payload = await CoursesDBApi.findBy({ id: req.params.id });
+
+    res.status(200).send(payload);
+  }),
+);
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;

frontend/json/runtimeError.json

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

frontend/next.config.mjs

@@ -50,6 +50,10 @@ const nextConfig = {
         source: '/about',
         destination: '/web_pages/about',
       },
+      {
+        source: '/courses',
+        destination: '/web_pages/courses',
+      },
     ];
   },
 };

frontend/src/colors.ts

@@ -1,7 +1,7 @@
 import type { ColorButtonKey } from './interfaces';
 
 export const gradientBgBase = 'bg-gradient-to-tr';
-export const colorBgBase = 'bg-violet-50/50';
+export const colorBgBase = 'bg-[#f6f8fa]';
 export const gradientBgPurplePink = `${gradientBgBase} from-purple-400 via-pink-500 to-red-500`;
 export const gradientBgViolet = `${gradientBgBase} ${colorBgBase}`;
 export const gradientBgDark = `${gradientBgBase} from-dark-700 via-dark-900 to-dark-800`;

frontend/src/components/AsideMenuItem.tsx

@@ -1,113 +1,34 @@
-import React, { useEffect, useState } from 'react';
-import { mdiMinus, mdiPlus } from '@mdi/js';
-import BaseIcon from './BaseIcon';
+import React from 'react';
 import Link from 'next/link';
-import { getButtonColor } from '../colors';
-import AsideMenuList from './AsideMenuList';
-import { MenuAsideItem } from '../interfaces';
-import { useAppSelector } from '../stores/hooks';
 import { useRouter } from 'next/router';
+import BaseIcon from './BaseIcon';
+
+import { useAppSelector } from '../stores/hooks';
+import { MenuAsideItem } from '../interfaces';
 
 type Props = {
   item: MenuAsideItem;
-  isDropdownList?: boolean;
 };
 
-const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
-  const [isLinkActive, setIsLinkActive] = useState(false);
-  const [isDropdownActive, setIsDropdownActive] = useState(false);
-
-  const asideMenuItemStyle = useAppSelector(
-    (state) => state.style.asideMenuItemStyle,
-  );
-  const asideMenuDropdownStyle = useAppSelector(
-    (state) => state.style.asideMenuDropdownStyle,
-  );
-  const asideMenuItemActiveStyle = useAppSelector(
-    (state) => state.style.asideMenuItemActiveStyle,
-  );
-  const borders = useAppSelector((state) => state.style.borders);
-  const activeLinkColor = useAppSelector(
-    (state) => state.style.activeLinkColor,
-  );
-  const activeClassAddon =
-    !item.color && isLinkActive ? asideMenuItemActiveStyle : '';
-
+const AsideMenuItem = ({ item }: Props) => {
   const { asPath, isReady } = useRouter();
+  const isActive = isReady && item.href ? asPath.startsWith(item.href) : false;
+  const borders = useAppSelector((state) => state.style.borders);
 
-  useEffect(() => {
-    if (item.href && isReady) {
-      const linkPathName = new URL(item.href, location.href).pathname + '/';
-      const activePathname = new URL(asPath, location.href).pathname;
-
-      const activeView = activePathname.split('/')[1];
-      const linkPathNameView = linkPathName.split('/')[1];
-
-      setIsLinkActive(linkPathNameView === activeView);
-    }
-  }, [item.href, isReady, asPath]);
-
-  const asideMenuItemInnerContents = (
-    <>
-      {item.icon && (
-        <BaseIcon
-          path={item.icon}
-          className={`flex-none mx-3 ${activeClassAddon}`}
-          size='18'
-        />
-      )}
-      <span
-        className={`grow text-ellipsis line-clamp-1 ${
-          item.menu ? '' : 'pr-12'
-        } ${activeClassAddon}`}
-      >
-        {item.label}
-      </span>
-      {item.menu && (
-        <BaseIcon
-          path={isDropdownActive ? mdiMinus : mdiPlus}
-          className={`flex-none ${activeClassAddon}`}
-          w='w-12'
-        />
-      )}
-    </>
-  );
-
-  const componentClass = [
-    'flex cursor-pointer py-1.5 ',
-    isDropdownList ? 'px-6 text-sm' : '',
-    item.color
-      ? getButtonColor(item.color, false, true)
-      : `${asideMenuItemStyle}`,
-    isLinkActive
-      ? `text-black ${activeLinkColor} dark:text-white dark:bg-dark-800`
-      : '',
-  ].join(' ');
+  const baseClass = 'block px-3 py-2 text-gray-800 hover:bg-gray-100';
+  const activeClass = isActive ? 'border-b-2 border-blue-600' : '';
 
   return (
-    <li className={'px-3 py-1.5'}>
-      {item.withDevider && <hr className={`${borders} mb-3`} />}
-      {item.href && (
-        <Link href={item.href} target={item.target} className={componentClass}>
-          {asideMenuItemInnerContents}
+    <li title={item.label}>
+      {item.withDevider && <hr className={`${borders} my-2`} />}
+      {item.href ? (
+        <Link href={item.href} target={item.target} title={item.label} className={`${baseClass} ${activeClass}`}>
+          <BaseIcon path={item.icon} size="20" />
         </Link>
-      )}
-      {!item.href && (
-        <div
-          className={componentClass}
-          onClick={() => setIsDropdownActive(!isDropdownActive)}
-        >
-          {asideMenuItemInnerContents}
-        </div>
-      )}
-      {item.menu && (
-        <AsideMenuList
-          menu={item.menu}
-          className={`${asideMenuDropdownStyle} ${
-            isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden'
-          }`}
-          isDropdownList
-        />
+      ) : (
+        <span title={item.label} className={`${baseClass} ${activeClass}`}>
+          <BaseIcon path={item.icon} size="20" />
+        </span>
       )}
     </li>
   );

frontend/src/components/Logo/index.tsx

@@ -6,10 +6,6 @@ type Props = {
 
 export default function Logo({ className = '' }: Props) {
   return (
-    <img
-      src={'https://flatlogic.com/logo.svg'}
-      className={className}
-      alt={'Flatlogic logo'}
-    ></img>
+  <div className={className}>App</div>
   );
 }

frontend/src/css/_app.css

@@ -1,3 +1,10 @@
+@layer base {
+  /* Global reset */
+  * { @apply m-0 p-0; }
+  /* System font and smaller text */
+  body { @apply font-sans text-sm; }
+}
+
 html {
   @apply h-full;
 }

frontend/src/css/_table.css

@@ -8,8 +8,7 @@
   }
 
   tr {
-    @apply max-w-full block relative border-b-4 border-gray-100
-      lg:table-row lg:border-b-0 dark:border-slate-800;
+    @apply max-w-full block relative lg:table-row;
   }
 
   tr:last-child {

frontend/src/layouts/Authenticated.tsx

@@ -8,9 +8,7 @@ import BaseIcon from '../components/BaseIcon';
 import NavBar from '../components/NavBar';
 import NavBarItemPlain from '../components/NavBarItemPlain';
 import AsideMenu from '../components/AsideMenu';
-import FooterBar from '../components/FooterBar';
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
-import Search from '../components/Search';
 import { useRouter } from 'next/router';
 import { findMe, logoutUser } from '../stores/authSlice';
 
@@ -114,9 +112,6 @@ export default function LayoutAuthenticated({
           >
             <BaseIcon path={mdiMenu} size='24' />
           </NavBarItemPlain>
-          <NavBarItemPlain useMargin>
-            <Search />
-          </NavBarItemPlain>
         </NavBar>
         <AsideMenu
           isAsideMobileExpanded={isAsideMobileExpanded}
@@ -125,7 +120,6 @@ export default function LayoutAuthenticated({
           onAsideLgClose={() => setIsAsideLgActive(false)}
         />
         {children}
-        <FooterBar>Hand-crafted & Made with ❤️</FooterBar>
       </div>
     </div>
   );

frontend/src/menuNavBar.ts

@@ -51,6 +51,10 @@ export const webPagesNavBar = [
     href: '/faq',
     label: 'FAQ',
   },
+  {
+    href: '/courses',
+    label: 'courses',
+  },
   {
     href: '/services',
     label: 'services',

frontend/src/pages/web_pages/courses.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import LayoutGuest from '../../layouts/Guest';
+import WebSiteHeader from '../../components/WebPageComponents/Header';
+import WebSiteFooter from '../../components/WebPageComponents/Footer';
+
+export default function CoursesPage() {
+  const projectName = 'test i18';
+  const [courses, setCourses] = useState([]);
+
+  useEffect(() => {
+    const darkElement = document.querySelector('body .dark');
+    if (darkElement) {
+      darkElement.classList.remove('dark');
+    }
+    // Fetch public courses list
+    axios.get('/courses')
+      .then(response => {
+        const list = Array.isArray(response.data.rows) ? response.data.rows : [];
+        setCourses(list);
+      })
+      .catch(error => console.error(error));
+  }, []);
+
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Head>
+        <title>{`Courses - ${projectName}`}</title>
+        <meta
+          name="description"
+          content={`Access our list of courses on ${projectName}.`}
+        />
+      </Head>
+      <WebSiteHeader projectName={projectName} />
+      <main className="flex-grow bg-white rounded-none p-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          {courses.map((course) => (
+            <div key={course.id} className="bg-gray-100 p-4 rounded shadow">
+              <h3 className="text-lg font-semibold">{course.title}</h3>
+              {course.instructors && course.instructors.length > 0 && (
+                <div className="mt-2">
+                  <h4 className="text-sm font-semibold">Instructors:</h4>
+                  <p className="text-gray-600">{course.instructors.map(i => i.first_name + ' ' + i.last_name).join(', ')}</p>
+                </div>
+              )}
+              {course.students && course.students.length > 0 && (
+                <div className="mt-2">
+                  <h4 className="text-sm font-semibold">Students:</h4>
+                  <p className="text-gray-600">{course.students.length} students</p>
+                </div>
+              )}
+
+              <p className="text-gray-700">{course.description}</p>
+            </div>
+          ))}
+        </div>
+      </main>
+      <WebSiteFooter projectName={projectName} />
+    </div>
+  );
+}
+
+CoursesPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};

frontend/src/styles.ts

@@ -25,31 +25,29 @@ interface StyleObject {
 }
 
 export const white: StyleObject = {
-  aside: 'bg-white dark:text-white',
+  aside: 'bg-white',
   asideScrollbars: 'aside-scrollbars-light',
   asideBrand: '',
-  asideMenuItem:
-    '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',
-  navBarItemLabelHover: 'hover:text-black',
-  navBarItemLabelActiveColor: 'text-black',
-  overlay: 'from-white via-gray-100 to-white',
-  activeLinkColor: 'bg-gray-100/70',
-  bgLayoutColor: 'bg-gray-50',
-  iconsColor: 'text-blue-500',
+  asideMenuItem: 'text-gray-800 hover:bg-gray-100',
+  asideMenuItemActive: 'font-bold text-blue-600',
+  asideMenuDropdown: '',
+  navBarItemLabel: 'text-gray-800',
+  navBarItemLabelHover: 'hover:text-blue-600',
+  navBarItemLabelActiveColor: 'text-blue-600',
+  overlay: '',
+  activeLinkColor: 'bg-gray-100',
+  bgLayoutColor: 'bg-white',
+  iconsColor: 'text-gray-800',
   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',
-  corners: 'rounded',
-  cardsStyle: 'bg-white border border-pavitra-400',
+  focusRingColor: 'focus:ring focus:ring-blue-300 focus:outline-none',
+  corners: '',
+  cardsStyle: 'bg-white',
   linkColor: 'text-blue-600',
   websiteHeder: 'border-b border-gray-200',
   borders: 'border-gray-200',
   shadow: '',
   websiteSectionStyle: '',
-  textSecondary: 'text-gray-500',
+  textSecondary: 'text-gray-600',
 };
 
 export const dataGridStyles = {