Refactor section backend

[azpi-arte]

Tracking Info

Resolves #30

Changes

• Created create SectionFlow form
• Created MultiStepForm component
• Created edit Section form
• Created success popup component
• Created MultiSelect dropdown component
• Added section api calls
• MODIFIED Sections backend to inherent these props from Program:
  startDate: string
  endDate: string
  archived: boolean, default: False
  color: string
• MODIFIED Sections backend to accept FIREBASE id instead of mongodb id.
• Added a 'fit content' optional prop to modal

• TODO
• fix spawn 'close dialog' logic on escape button. right now it instantly closes the modal instead of showing 'close dialog?' dialog.

Testing

• positive test cases for regular inputs
• Went through and created multiple regular sections

Checked Mongodb Compass app

• TODO
• check form responsiveness
• check cross-session local storage functionality for multi step form state management

Confirmation of Change

[github-actions]

Visit the preview URL for this PR (updated for commit e8fc166):

https://meemli-dev--pr40-refactor-section-bac-ncc7i78p.web.app

_{(expires Sat, 21 Mar 2026 01:51:41 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 633a893569aee98f762f025e27aa080a469727e1}

[mraysu]

Functionality wise, great work. The forms work really well, and I appreciate the modular file structure and compatibility with react form hooks.

Please address the code quality comments below

[thomas-rocha]

Looks pretty good, I have one concern about functionality and a few about styling.

No error messages appear for the start and end-time if they are not filled out when trying to proceed.

The error message for the day selection appears to the right instead of underneath which throws off the UI imo since the rest gets pushed to the right.

Selecting many days expands the main bar to contain all of the entries at once, which messes up the layout. I'd recommend fixing the width, hiding excess elements on overflow, and allowing the user to scroll through the main bar to look at all the entries.

This one might be a little nitpicky, but the user has to uncheck a selected time before they can select a new one if they misclick. This feels a bit clunky imo, so maybe allowing them to switch to whichever one they click automatically could work out.

Not sure if this was intended or not, but I thought I'd point it out. The cancel button when creating a class resets the progress, but clicking outside the modal doesn't.

Other than these, the code looks good to me.

[azpi-arte]

Selecting multiple days:

Error output:

Didn't change escape behavior

[thomas-rocha]

LGTM

[mraysu]

LGTM 🚀