Added all frontend documentation and tests

frontend/README.md

@@ -1,70 +1,145 @@
-# Getting Started with Create React App
+# GenEd Frontend
+
+This directory contains the React.js frontend application for the CMU-Q General Education course planning platform. It provides a searchable, filterable UI to explore and plan general education and core requirements across different majors.
+
+---
+
+## Getting Started
+
+### Prerequisites
+
+* Node.js (v16+ recommended)
+* npm (comes with Node.js)
+
+### Setup
+
+1. **Navigate to the frontend directory:**
+   ```bash
+   cd path/to/GenEd-CMUQ/frontend
+   ```
+
+2. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+3. **Run the development server:**
+   ```bash
+   npm start
+   ```
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+The app will be accessible at `http://localhost:3000`.
+
+> ⚠️ Make sure the backend is running and available at the correct API base URL. You can configure this in `.env`:
+> ```env
+> REACT_APP_API_BASE_URL=http://127.0.0.1:8000
+> ```
 
-## Available Scripts
+---
 
-In the project directory, you can run:
+## Features
 
-### `npm start`
+- 🔍 Search for courses by department and course number.
+- ✅ Filter by campus offering, prerequisites, GenEd/Core types, and requirement fulfillment.
+- 📚 View courses fulfilling specific requirements.
+- 📊 Paginated results for easy navigation.
+- 🧩 Modular components with popup detail views.
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+---
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+## Components Overview
 
-### `npm test`
+| Component | Purpose |
+|----------|---------|
+| `CourseTablePage.js` | Top-level controller for state and layout. Combines filters, search bar, and table. |
+| `SearchBar.js` | Handles department selection, search input, and checkbox filters. |
+| `CourseTable.js` | Renders the course data in a table format with dynamic requirement columns. |
+| `MultiSelectDropdown.js` | Generic dropdown for selecting multiple filters (e.g. requirements, semesters). |
+| `MultiSelectDepartment.js` | Specialized dropdown for department filtering. |
+| `SelectedFilters.js` | Shows active filters with remove buttons. |
+| `PopUp.js` | Modal that shows detailed course or requirement information. |
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+---
 
-### `npm run build`
+## File Structure
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+```
+frontend/
+│
+├── public/                # Static files
+│   ├── index.html
+│   ├── manifest.json      # PWA settings
+│   └── icons              # App icons 
+│
+├── docs/                # Documentation on all components
+│
+├── src/
+│   ├── components/        # React components
+│   │   ├── CourseTablePage.js
+│   │   ├── CourseTable.js
+│   │   ├── SearchBar.js
+│   │   ├── PopUp.js
+│   │   ├── MultiSelectDropdown.js
+│   │   ├── MultiSelectDepartment.js
+│   │   └── SelectedFilters.js
+│   ├── styles.css         # App styling
+│   ├── planTabStyles.css  # App styling for planning tab
+│   └── index.js           # Entry point
+│   └── App.js           
+│
+├── .env                   # API base URL config
+├── package.json           # Project metadata & dependencies
+└── README.md              # This file
+```
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+---
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+## Running Tests
 
-### `npm run eject`
+The frontend uses **Jest** and **React Testing Library** for testing. Make sure you are in the frontend folder before running tests.
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+### Running All Tests
+```bash
+npm test
+```
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### Running a Specific Test File
+```bash
+npm test CourseTable.test.js
+```
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+### Example Test Files
+Tests are located in the `frontend/tests/` directory and include:
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+```
+tests/
+├── CourseTable.test.js
+├── SearchBar.test.js
+├── CourseTablePage.test.js
+├── MultiSelectDropdown.test.js
+└── ...
+```
+
+Tests cover component rendering, user interactions, and prop handling. Each test simulates real user behavior using `@testing-library/react`.
 
-## Learn More
+> Make sure all required props are mocked correctly in your tests to avoid runtime errors.
+
+---
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+## Development Notes
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+- Data is fetched dynamically via REST API endpoints from the FastAPI backend.
+- API errors are handled in `useEffect` hooks with simple `console.error()` logs—consider improving with user notifications.
+- The UI is responsive and works across modern browsers.
+
+---
 
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+## Progressive Web App (PWA)
+
+The frontend includes a `manifest.json` file to support installation as a PWA. Icons and colors can be customized in `public/manifest.json`.
+
+---
+
+## Authors
+
+This project was developed by CMU-Q Students, Boushra, Jullia, and Yousuf, for the **67-373 Information Systems Consulting Project**.

frontend/docs/AnalyticsPage.md

@@ -0,0 +1,74 @@
+# Component: `<AnalyticsPage>`
+
+## Purpose
+
+Serves as the main analytics dashboard in the GenEd platform. Displays visual insights on:
+- **Requirement Category Coverage** for a selected major
+- **Enrollment Trends** across semesters and student classes
+
+---
+
+## Instructions
+1. On the tab located on the top of the page, click on the *Analytics* tab.
+<img width="800" alt="Screenshot 2025-04-19 at 1 08 46 PM" src="https://github.com/user-attachments/assets/77952f5d-91e2-494a-8a4b-6d71a7b4d80a" />
+
+---
+
+## Internal State
+
+| State Variable   | Description |
+|------------------|-------------|
+| `selectedMajor`  | Currently selected major code (e.g., `"cs"`, `"bio"`) — saved in `localStorage` |
+
+---
+
+## Logic Overview
+
+- Renders two major analytics sections:
+  - `<CategoryCoverage>`: shows how many courses fulfill each requirement category
+  - `<EnrollmentAnalytics>`: visualizes overall enrollment and enrollment by class year
+- Uses localStorage to persist the selected major across page reloads
+
+---
+
+## Example Usage
+
+```jsx
+<AnalyticsPage />
+```
+
+Used in the **Analytics** tab of the GenEd app. This component provides an overview of course coverage and participation trends per major.
+
+---
+
+## Related Components
+
+- `<CategoryCoverage />` — Major/semester-wise requirement category chart
+- `<EnrollmentAnalytics />` — Enrollment comparison charts
+
+---
+
+## Related Tests
+
+- `AnalyticsPage.test.js` — covers:
+  - LocalStorage persistence of `selectedMajor`
+  - Rendering both child components
+  - UI behavior when switching majors
+
+---
+
+## Styling
+
+| Class | Description |
+|-------|-------------|
+| `analytics-container` | Main page layout |
+| `title`, `subtitle`   | Page header styles |
+| `<hr />`              | Section separator |
+
+---
+
+## Notes
+
+- Majors are hardcoded in the component for display purposes, but can be dynamically sourced if backend supports it.
+- The selected major is passed to both analytics views for synchronized filtering.
+

frontend/docs/CategoryCoverage.md

@@ -0,0 +1,87 @@
+# Component: `<CategoryCoverage>`
+
+## Purpose
+
+Displays a bar chart showing how many courses fulfill each requirement category for a selected major and semester. Uses Plotly for charting and dynamically fetches data from the backend via `/analytics/course-coverage`.
+
+---
+## Instructions
+1. On the top of the page, select the *Analytics* tab.
+2. Locate the *Category Coverage* section.
+3. Click on the *Major* dropdown to select a major. This will display all the Core and Gen-Ed requirements on the graph, listed on the Y-axis. <br>
+   <img width="200" alt="Screenshot 2025-04-19 at 1 11 48 PM" src="https://github.com/user-attachments/assets/471af2c3-429a-4856-8763-53d50974afdd" />
+
+5. Click on the *Semester* dropdown to select a specific semester. This will update the graph to show the total count of how many courses satisfy each requirement category for your chosen major and semester. <br>
+   <img width="100" alt="Screenshot 2025-04-19 at 1 12 00 PM" src="https://github.com/user-attachments/assets/c8975ad8-b921-4629-9d8b-246d4b2cd32f" />
+
+6. Hovering over each bar will show the exact count of offered courses for the respective requirement. <br>
+<img width="400" alt="Screenshot 2025-04-19 at 1 17 40 PM" src="https://github.com/user-attachments/assets/13a3c2c4-3f57-4645-b5ae-3bfce1ffc21e" />
+
+<img width="800" alt="Screenshot 2025-04-19 at 1 11 43 PM" src="https://github.com/user-attachments/assets/431762a0-6fd1-49bf-b5cd-176b03a12548" />
+
+---
+
+## Props
+
+| Prop Name         | Type     | Required | Description |
+|-------------------|----------|----------|-------------|
+| `selectedMajor`   | String   | ✅       | The major currently selected (e.g., "CS") |
+| `setSelectedMajor`| Function | ✅       | Updates the selected major |
+| `majors`          | Object   | ✅       | Dictionary of major codes to names (e.g., `{ CS: "Computer Science" }`) |
+
+---
+
+## Logic Overview
+
+- Fetches available semesters with data for the selected major
+- Fetches requirement coverage data for the selected major + semester
+- Aggregates the number of courses per requirement (based on the last node in path)
+- Uses Plotly to render a horizontal bar chart, sorted by course count
+- Dynamically switches content based on data availability and loading state
+
+---
+
+## Example Usage
+
+```jsx
+<CategoryCoverage
+  selectedMajor={selectedMajor}
+  setSelectedMajor={setSelectedMajor}
+  majors={{ CS: "Computer Science", IS: "Information Systems" }}
+/>
+```
+
+Used in the **Analytics** page to let users visually explore course distribution across requirement categories. You can change the major and limit by semester.
+
+---
+
+## Related Tests
+
+- `CategoryCoverage.test.js` — test coverage includes:
+  - Valid/invalid API responses
+  - Dropdown behavior
+  - Chart rendering based on dynamic data
+  - Conditional “No Data” message
+
+---
+
+## Styling
+
+| Class | Description |
+|-------|-------------|
+| `search-container` | Wrapper layout |
+| `filter-control-group` | Wrapper for dropdowns |
+| `search-dropdown` | Select element styling |
+| `loading-spinner` | Visual feedback during API load |
+| `filter-tag` | Display fallback “no data” status |
+
+---
+
+## Notes
+
+- Filters out requirement categories with `num_courses === 0` to reduce noise
+- Responsive to container size (`useResizeHandler`)
+- Resets semester when major is changed
+- Requires the backend endpoint:  
+  `GET /analytics/course-coverage?major=CS&semester=F23`
+