[Flowchart-Adding-Quarters]: Allow quarters to be inserted

## **💡 User Story**

_As a student, I want to add and organize quarters (Fall, Winter, Spring, and Summer) in my academic flowchart so that I can plan my course schedule more effectively._

## **📖 Description**

Currently, the flowchart does not support explicit quarter organization, making it difficult for students to visualize their academic plan over multiple terms. We need to introduce a feature that allows students to insert and manage quarters (Fall, Winter, Spring, and Summer) within their flowchart. This will improve the planning experience and provide a clearer structure for tracking academic progress.

### **Technical Considerations:**
- Add UI elements for quarter selection and management.
- Allow users to customize their flowchart layout by adding or removing quarters dynamically.
- Provide a **clean and intuitive UI** to enhance the editing process.
- Ensure data persistence so that user modifications are saved and reload correctly.

## **✅ Acceptance Criteria**

- [ ] ✅ Students can add Fall, Winter, Spring, and Summer quarters to their flowchart.
- [ ] ✅ Courses can be assigned to specific quarters using a drag-and-drop UI.
- [ ] ✅ UI provides a seamless and visually appealing experience for managing quarters.
- [ ] ✅ User modifications persist after saving and reloading the flowchart.
- [ ] ✅ No disruption to existing flowchart functionality.

## **📌 Technical Details**

- **Files to Modify:** Flowchart component files (TBD)
- **Enhancements Needed:** UI improvements, state management for quarters, drag-and-drop interactions.
- **Potential Dependencies:** Database updates to store quarter-related data.
- **Testing:** Validate quarter addition, course assignment, and persistence across sessions.

### **Suggested Implementation Steps:**
1. **Design UI mockups** for quarter insertion and editing.
2. **Implement quarter selection** feature within the flowchart editor.
3. **Ensure data persistence** so user modifications are saved properly.
4. **Test thoroughly** for usability and data consistency.

## **🖼️ UI/UX Mockups (If applicable)**

- We should make a Figma Design of the new Flowchart layout beforehand

## **📎 Related Issues or Dependencies**

- [ ] Depends on #XX
- [ ] Related to #XX

## **🚀 Priority & Story Points**

- **Priority:** High
- **Story Points:** 8

The issue names no concrete files or tests; begin by locating the Flowchart component and its existing state and save/load paths. Review how courses are currently arranged and persisted before defining the quarter model and interaction boundaries. Done means the four quarter types can be added, courses assigned, changes reloaded, and existing flowchart behavior remains intact.

Written by the indexing model from the issue text.