[Frontend] Build Create Asset Modal with Form Validation

[yusuftomilola]

A slide-in or centred modal form for registering a new asset. Opened from the Assets list page.

Requirements

Form fields:

• Name (required)
• Category (required — dropdown populated from GET /api/categories)
• Department (required — dropdown populated from GET /api/departments)
• Assigned To (optional — dropdown from GET /api/users)
• Serial Number, Manufacturer, Model (optional strings)
• Purchase Date, Warranty Expiration (optional dates)
• Purchase Price, Current Value (optional numbers)
• Condition (required — enum dropdown)
• Status (optional — enum dropdown, defaults to ACTIVE)
• Location (optional string)
• Tags (optional — comma-separated or tag-input)
• Notes (optional textarea)

Validation: Zod schema via react-hook-form. Required fields show inline errors.

On success: Close modal, refetch the assets list.

Acceptance Criteria

• All dropdowns populated with live data from the API
• Required fields validated before submission
• Modal closes and list refreshes on success

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 150 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Escelit]

@Escelit has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Asset creation is the entry point for everything else in the system. If the form is clunky, confusing, or lets users submit invalid data, every subsequent feature suffers. I want to build this modal because getting it right means users can quickly and confidently add assets without friction.

The form has a lot of moving parts – required fields, optional fields, dropdowns from multiple API endpoints, validation, and a clean UI. Zod with react-hook-form provides real-time validation feedback, dropdowns need to populate asynchronously, and success should feel seamless with modal close and list refresh.

What I'd consider in implementation:

Async dropdowns – Fetch categories, departments, users in parallel with loading states

Form structure – Group fields logically, use grid layouts for related inputs

Validation – Required fields show inline errors, submission blocked until valid

UX touches – Disable submit while submitting, show success indicator, auto-close

Error handling – API errors displayed clearly, form data preserved

Performance – Memoize dropdown options, prevent unnecessary re-renders

Relevant experience:

Built complex forms with react-hook-form and Zod validation

Implemented async dropdowns with loading states and error handling

Designed modal components with proper accessibility (focus trap, ESC key)

Handled form submission and list refetching patterns

Tested edge cases – validation, API failures, rapid submissions

This is the primary data entry point. I'll make it smooth and reliable.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Escelit to this issue.

[shamoo53]

@shamoo53 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

i would like to work on this issue
kindly assign

ℹ️ Repo Maintainers: To accept this application, review their application or assign @shamoo53 to this issue.

[drips-wave]

Congratulations, @shamoo53! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on February 26, 2026.

🧑‍💻 @shamoo53: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are issued when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @shamoo53 as part of the Stellar Wave Program's 2nd Wave 🥳

😎 @shamoo53: You earned 150 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.