Create Invoice Page

[theNatePi]

Tasks

Your task is to implement the invoice page shown on the Figma.
This page will be used to show information about a single invoice.

This page should be created in:
/lpa/client/src/components/invoices/Invoice.jsx
This page should be at the URL:
localhost/invoices/:id, where id = the id of the specific invoice

---

This task requires you to create the following:

1. Invoice page

This page should match this Figma
See comments on the Figma for what features to implement and to ignore.
Add the below components for the top stats section and the bottom comments table.

Routing

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

<Route
  path="/invoices/:id"
  element={
    <ProtectedRoute
      element={<Invoice />}
    />
  }
/>

In your page, grab the ID from the url:

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

2. Invoice Stats Component

Create a stats component for the invoice page.
Put the component in /lpa/client/src/components/invoices/InvoiceComponents.jsx
Pass all data to the component from the page. Do not make any DB queries inside of the component.
See comments on Figma for more details.

3. Payments Table

Create a payments table for the invoice page.
Put the component in /lpa/client/src/components/invoices/InvoiceComponents.jsx
Pass all data to the component from the page. Do not make any DB queries inside of the component.
See comments on Figma for more details.
Use the Chakra Table component

---

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 invoice 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 the Chakra Table component
• 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!):

• Invoice page completed
  • Dynamic route added to App.jsx
  • Tested on invoices in DB
• Invoice stats component completed
  • Added to the invoice page
  • Tested
• Invoice payments table completed
  • Added to the invoice page
  • Tested