Upload New Data Form Front-End

[dilanurbayraktar]

Upload New Data Form Front-End

Summary 💻

Welcome back from break! Hope you had an amazing Thanksgiving with delicious food 🦃🥧

For this ticket, your task is to build the front-end component for the “Upload New Data” form on the Diapers tab of the Admin View.

On src/app/admin/page.tsx, you should see the “Upload New Data” button.
When that button is clicked, we want a modal pop-up to open that looks similar to the design below:

Form Behavior and Structure

1️⃣ Dataset Time Selection

In the design, there are radio buttons and an input field to select the dataset time.

However, for implementation, you can use Mantine’s Month Picker Input to let Rachel choose the relevant month and year of the dataset she’s uploading instead of the radio buttons.

Example behavior:

• Rachel opens the modal
• She selects the dataset time (e.g., May 2025) using the Month Picker
• This value is stored in component state for later use (back-end work will come in a future ticket)

2️⃣ File Upload

For the “Files” section of the form, you’ll need to implement a file upload input.

We already have a similar component you can reference:

• src/components/sprint2/FileUpload.tsx

You don’t need full back-end uploading logic in this ticket — just:

• A working file selection field
• Proper UI states (e.g., when a file is selected, show its name)
• Validate the inputs
• Good styling consistent with the design

3️⃣ Modal Behavior

The Upload New Data modal should:

• Open when the “Upload New Data” button is clicked on the Diapers tab
• Contain:
  • Dataset time selection (Month Picker)
  • File upload field
  • Buttons such as Cancel and Upload (buttons can follow the Figma)
• Close when:
  • Rachel clicks Cancel
  • Or when she clicks Upload

Make sure it:

• Does not break the layout on the Admin View
• Is consistent with the overall styling of the Admin pages

Deliverables 🚀

• Schedule at least two meetings as a pair
• Create a new branch using the “Create a branch” button
• Create a new component file: UploadNewData.tsx
• Import and use UploadNewData in src/app/admin/page.tsx so that it opens when the “Upload New Data” button is clicked
• Use Mantine’s Month Picker Input (or a similar date selector) for the dataset time field
• Implement a file upload UI, referencing src/components/sprint2/FileUpload.tsx
• Open a PR and request review from @coopergolemme

Wireframe 🎨

Here's the wireframe!

Tips for success 📈

Where to get help!

Reach out to @dilanurbayraktar and @coopergolemme .