UI & Functionality Enhancement: Fix Layout and Implement Modal for Asset Inventory Page

[Riya-Kharade]

📝 Description

This PR resolves UI inconsistencies and functionality issues on the Asset Inventory page.

🔄 Before

• Home button was not styled properly.
• Page title was not centered and did not match theme.
• "New Request" button was not functional.
• Cards were too close to each other.
• Missing padding and spacing.
• Layout looked cramped and unstructured.

✅ After

• Styled and positioned the Home button properly.
• Center-aligned the page title with theme-consistent colors.
• Implemented functional "New Request" modal popup.
• Added basic form validation.
• Improved card spacing and internal padding.
• Wrapped content inside structured container.
• Applied consistent dashboard layout styles.
• Enhanced responsiveness for mobile and tablet.

This PR affects the Vanilla JS frontend (UI + client-side functionality).

---

🔗 Related Issue

Fixes #693

---

🛠️ Type of Change

• ✨ New Feature (Modal functionality for New Request)
• 🐞 Bug Fix (Layout & styling issues)
• 📝 Documentation
• 🔐 Security/Backend
• 📱 PWA/Offline

---

🧪 Testing & Validation

• I have tested the changes locally in Full-Stack Mode.
• I have verified that the UI remains responsive on mobile and desktop.
• (If applicable) I have tested offline functionality.
• I have run npm start and confirmed there are no console errors.

---

🚩 Checklist:

• My code follows the existing folder structure.
• I have not committed any sensitive .env secrets.
• My PR targets the main branch.

---

📸 Visuals

• Improved structured layout.
• Centered page title.
• Functional "New Request" popup modal.
• Better spacing between cards.

before

after

[vercel]

@Riya-Kharade is attempting to deploy a commit to the Renu's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thanks for the PR, @Riya-Kharade!

We really appreciate you taking the time to contribute to ExpenseFlow! 💙

---

⭐ Love this project?

Please give us a star! It helps the project grow and reach more developers! 🌟

🔗 https://github.com/Renu-code123/ExpenseFlow

---

✅ PR Checklist

Before we review, please ensure:

• Your code follows the project's coding standards
• All file changes are accurate and intentional
• You've tested your changes locally
• Any review comments have been addressed

---

🙌 Thank You for Contributing!

We truly appreciate your interest in contributing to this project.

• Please make sure your code follows the project structure
• Add clear commit messages and comments where necessary
• Ensure your changes do not break existing functionality

We'll review your PR as soon as possible. Keep up the great work! ✨

---