feat: Upload component and Client Upload Page #24

[sab115]

Developer: Sabrina Huang

Closes #24

Pull Request Summary

Implemented the DocumentUpload component and the ClientUpload page.
DocumentUpload component allows users to upload PDFs and other documents via drag-and-drop or file selection.
The client-upload page integrates this component and provides a placeholder for a client checklist.

Modifications

components/DocumentUpload.tsx:

• Created the DocumentUpload component using react-drag-drop-files for document uploading.
• Added file type restrictions and size limit (1GB).
• Added UI elements for drag-and-drop interaction and file preview.
• Displays selected file name for now

client-upload/page.tsx:

• Created the client-upload page which incorporates the DocumentUpload component.
• Added a checklist placeholder (for future use).
• Included buttons (Delete, Download) that are currently disabled.

components/Navbar.tsx + components/Footer.tsx:

• Adjusted the padding and height of the Navbar and Footer components to improve the page layout.

Testing Considerations

• Ensure that the DocumentUpload component correctly handles file drag-and-drop and file selection for valid file types (PDF, JPEG, PNG, DOCX, DOC).
• Verify the file size validation works (files above 1GB should trigger an error).
• Confirm that the layout of the ClientUploadPage matches the design provided in Figma.
• Test that the checklist placeholder renders correctly and the buttons are displayed, but remain disabled for now.
• Test that the DocumentUpload component displays the correct selected file name.

Pull Request Checklist

• Code is neat, readable, and works
• Comments are appropriate
• The commit messages follows our guidelines
• The developer name is specified
• The summary is completed
• Assign reviewers

Screenshots/Screencast

[aarav27]

Really nice job Sabrina, LGTM! Thanks for the detailed PR write up as well.