Internal View: Demographics Spreadsheet

[idil-bit]

!!! DUE DEC 10TH !!! (both this and other ticket)

Purpose

You will be working on the spreadsheet for the demographics tab! You will be creating a similar component to components/InventorySpreadsheet.tsx which is for the inventory and customizing it for the demographics page. You can view the code for the inventory page (inventory/page.tsx) to see how the component and page work together.

You can work together with the team that is working on the categories page ticket as they are also building a spreadsheet component. You could also ask the team that worked on the inventory spreadsheet ticket questions you might have in addition to me and Jiyoon!

TODO

• Move this ticket to the In Progress column
• THIS STEP IS DIFFERENT FROM OTHER TICKETS SO PLEASE BE CAREFUL
  • while in the branch for the navbar ticket, create a new branch (so that it takes the new nav bar code to the new branch). do NOT branch from dev
• Open demographics/page.tsx and create components/DemographicsSpreadsheet.tsx
• in demographics/page.tsx
  • Create dummy data to populate/test the spreadsheet with before the return statement in demographics/page.tsx, which will be passed into the call for components/DemographicsSpreadsheet.tsx
  • Add the title in. No need to include the count of responses in parentheses, just saying "Demographic Responses" is enough for now! (don't worry about the run report button and the search bar for now)
  • Import the spreadsheet (from components/DemographicsSpreadsheet.tsx) and pass in the dummy data properly (view props resources below!)
• in components/DemographicsSpreadsheet.tsx
  • refer to components/InventorySpreadsheet.tsx and the Figma design
• create a PR for this ticket
  • add yourselves as assignees and Jiyoon as the reviewer to the PR
• move this ticket to the Ready for Review column

Helpful Resources

About the font/boldness: In your tailwind styling, you can use: crimson-bold, crimson-semibold, crimson-regular, as Jiyoon pre-set in our globals.css. You can also just customize the thickness yourself - up to you!

1. Tailwind table layout: https://tailwindcss.com/docs/table-layout
2. React's map function that would help go through no more than necessary rows: https://legacy.reactjs.org/docs/lists-and-keys.html
3. Props: https://react.dev/learn/passing-props-to-a-component
4. Use Figma's functionalities to your advantage! Remember you can copy and download icons by right clicking like in the following photo!

Pictures (click to get to its figma)