Create Edit Program Page

[theNatePi]

Tasks

Your task is to implement the edit program page shown on the Figma.
This page will be used to edit the information of an event.

Warning

Before, we have always called "Events" (in the db) "Classes". Going forward, "Events" will be referred to as "Programs"
This may be updated in the future in the DB. For now, use "Programs" on all client-facing pages, and use "Events" on all backend code.

This page should be created in:
/lpa/client/src/components/programs/EditProgram.jsx
This page should be at the URL:
localhost/programs/edit/:id, where id = the id of the specific program

---

This task requires you to create the following:

1. Edit Program page

This page should match this Figma
See comments on the Figma for what features to implement and to ignore.

Routing

You'll need to set up dynamic routing so that each program has its own unique url.
To do this:
When adding the route to App.jsx, do the following:

<Route
  path="/programs/edit/:id"
  element={
    <ProtectedRoute
      element={<EditProgram />}
    />
  }
/>

In your page, grab the ID from the url:

const EditProgram = () => {
    const {id}= useParams()
  return (
    <div style={{ fontSize: 32, textAlign: "center", padding: 10 }}>
      Program Id - {id}
    </div>
  );
}

See all comments on the Figma before you begin. Please ask any questions you may have about how to implement the page functionality.

2. Navbar, Match Mid-Fi

Update the Navbar component to match the Figma.
The component is found in /lpa/client/src/components/Navbar.jsx
See comments on Figma for more details.

Add the following links to the navbar:

1. Programs: /programs
2. Invoices: /invoices
3. Notifications: /notifications
4. Settings: /settings

Use the logo component at the top, which can be found in: /lpa/client/src/assets/logo/Logo.jsx

---

Important

When getting data from the DB, always do the following:

1. Check: Is there already a DB endpoint which gives me ALL of the data I need, without having to modify it in JS?
2. Add: A new endpoint that uses SQL to get all relevant data on the backend. For example, you might create a new endpoint to get all payees for an event, instead of getting all clients and filtering them locally
3. Finally: Use JS to filter results if the above two options wont work

ALSO: If possible, dont make calls which get you duplicate data. If one call to the DB gets you all program data, keep using that data rather than making another query.
Why? It is faster to query data in SQL than it is to filter it in JS on the client side.

Note

This is a large task. Please start early and ask any questions that come up as soon as possible.

---

Resources

• Use other Chakra components when possible

Using Figma dev mode

When in Figma dev mode, you can see all of the colors, spacing, border radius, etc. Please try to use these values when possible, and match the design otherwise

Deliverables (please check off as you go!):

• Edit Program page completed
  • Dynamic route added to App.jsx
  • Tested on programs in DB
• Navbar component completed
  • Added to the program page
  • Tested