Academics & Programs

Overview

The Academics & Programs module is designed to showcase the educational offerings of the institution. It manages a two-tier hierarchy consisting of Faculties (e.g., Science and Technology, Management) and Programs (e.g., BSc CSIT, MBA).

Academic Structure

The system organizes academic data into two primary entities:

1. Faculties: High-level categories that group related academic programs.
2. Programs: Specific courses of study containing detailed descriptions, duration, and level information.

Program Display

Programs are displayed to users through a dynamic detail page. The ProgramPage component fetches data based on a unique ID provided in the URL and renders comprehensive information about the course.

The Program Detail View

The public interface includes:

• Header Information: Program name and faculty association.
• Detailed Description: Supports rich text content (HTML) for curriculum details or course objectives.
• Quick Info Card: A sidebar displaying the program's short name, academic level, and faculty.
• Navigation: A "See other programs" action to return to the catalog.

// Example of how the Program Detail is accessed via routing
<Route path="/program/:id" element={<ProgramPage />} />

Data Integration

The system uses a set of API utilities to fetch academic data from the backend. These functions are located in academicsApi.js.

Fetching Programs and Faculties

These functions are typically used on listing pages or navigation menus to populate the UI with available academic content.

| Function | Description | Returns | | :--- | :--- | :--- | | getAllPrograms() | Fetches all available academic programs. | Array<Object> | | getProgramById(id) | Fetches details for a specific program. | Object | | getAllFaculties() | Fetches all faculty categories. | Array<Object> |

Usage Example:

import { getProgramById } from './api/academicsApi';

const loadProgram = async (programId) => {
  try {
    const data = await getProgramById(programId);
    console.log("Program Name:", data.programName);
  } catch (error) {
    console.error("Failed to load program details");
  }
};

Management via CMS

While the public consumes data via the GET methods, the administrative interface allows for full CRUD (Create, Read, Update, Delete) operations.

Authentication Requirement

All modification requests (POST, PATCH, DELETE) require a valid administrative token stored in localStorage under the key authToken. This is handled automatically by the API utilities.

Administrative API Reference

Faculty Management

• addFaculty(data): Creates a new faculty category.
• updateFacultyById(id, data): Modifies existing faculty details.
• deleteFacultyById(id): Removes a faculty from the system.

Program Management

• addProgram(data): Creates a new academic program. Requires a payload including programName, programDetails (HTML string), facultyName, and shortName.
• updateProgramById(id, data): Updates specific program fields.
• deleteProgram(id): Permanently removes a program.

Program Data Object

When adding or updating programs, the data object typically follows this structure:

{
  "programName": "Bachelor of Computer Science",
  "shortName": "BCS",
  "facultyName": "Science & Technology",
  "programDetails": "<p>Detailed course syllabus and requirements...</p>",
  "status": true
}

Rich Text Support

The template supports rich text for program descriptions. In the ProgramPage component, the programDetails field is rendered using dangerouslySetInnerHTML. This allows administrators to include formatted lists, links, and bold text directly from the CMS.

// Internal rendering logic
<div dangerouslySetInnerHTML={{ __html: programDetail.programDetails }} />