Admin Dashboard

Overview

The Admin Dashboard serves as the central Content Management System (CMS) for the Campus Template. It allows administrators to manage academic programs, faculty details, gallery media, publications, and student feedback through a unified interface. Access to these routes is restricted to authenticated users.

Authentication and Security

All administrative routes are protected by the PrivateRoutes component. This component verifies the presence of a valid authentication token and the user's role before granting access to the CMS.

Access Control Example

To protect a new admin route, wrap the route within the PrivateRoutes logic in your router configuration:

import PrivateRoutes from './Screens/PrivateRoutes';

// Inside your Route definitions
<Route element={<PrivateRoutes />}>
  <Route path="/admin/dashboard" element={<AdminHomePage />} />
  {/* Additional protected CMS routes */}
</Route>

The system retrieves the authentication token from localStorage using the key authToken to authorize API requests.

Admin Home Page

The AdminHomePage acts as the landing screen for the CMS. It displays a personalized welcome message featuring the college name, which is configured via environment variables.

Configurable Element: The college name is pulled from import.meta.env.VITE_COLLEGE_NAME.
Quick Actions: Provides direct links to "Browse Contents," typically leading to the Publications management section.

Content Management Modules

The dashboard is divided into several specialized modules, each interacting with specific API endpoints to perform CRUD (Create, Read, Update, Delete) operations.

1. Academic Management

Manages the core educational structure of the institution.

Faculties: Create and update department/faculty categories.
Programs: Manage specific courses, including program details, short names, and faculty assignments.

2. Publication System

A robust system for managing downloadable documents and research papers.

Categories: Organize publications into logical groups.
File Handling: Supports uploading and downloading files. The downloadPublicationFile utility handles secure binary transfers from the backend.

3. Media Gallery

Supports both image and video content management.

Image Gallery: Allows for single and multiple image uploads.
Video Gallery: Uses the videoIdParser utility to manage and display YouTube content via URLs.

4. Team and Faculty

Manage the profiles of staff and faculty members. This module includes the ability to list all registered users and manage specific team details.

5. Feedback and Inquiries

A read-only interface for administrators to view messages sent by users through the public "Contact Us" page.

API Integration Guide

The dashboard uses a centralized API structure. Each module has a corresponding Api.js file utilizing axios.

Standard API Pattern

Most modules follow this request pattern (using aboutUs as an example):

import { updateAboutUsById } from './aboutsAPI';

const handleUpdate = async (id, data) => {
  try {
    const response = await updateAboutUsById(id, data);
    console.log("Success:", response);
  } catch (error) {
    // Error handling logic
  }
};

API Function Reference

Environment Configuration

To ensure the Admin Dashboard connects correctly to your backend, configure the following variables in your .env file:

VITE_API_URL=https://your-api-domain.com/api
VITE_COLLEGE_NAME="Your Institution Name"
VITE_FILE_URL=https://your-api-domain.com/uploads

Feedback Management

User submissions from the ContactUsPage are captured via the addNewFeedback function. Administrators can monitor these submissions to respond to community inquiries and suggestions.

Input Fields for Feedback:

fullName (String)
email (String)
contactNo (String/Number)
message (String)