dev #3632
Updated by Nazmul Hossain Shovon 5 months ago
PR Description
**Changes Overview:**
* Added page.tsx as the entry point for the resources page.
* Implemented ResourceManagement.tsx with a header (including notifications and "Invite Talent" button), search bar, and talent list.
* Created reusable components for talent cards: TalentCard, TalentAvatar, TalentStatusBadge, TalentStats, TalentSkills, TalentDescription, TalentCardButtons, TalentCardMenu, and TalentCardDropdown.
* Added new SVG icons for UI elements (e.g., notifications, edit, star, work).
* Used sample talent data for demonstration; search and actions are logged to console for now.
**Testing Instructions:**
To test the changes in the browser UI:
**Navigate to the Page:**
* Open the application in your browser.
* Go to /vendor/dashboard/resources (or the equivalent route in your app's routing setup).
* Verify the page loads with a white background container, header title "Resource Management", and subtitle "Browse and connect with top professionals".
**Test Header Elements:**
* Check the notification icon (gray circle) in the top-right – click it (no action yet, but ensure it's visible).
* Click the "Invite Talent" button (blue gradient) – confirm it's styled correctly and positioned next to the notification icon.
**Test Search Bar:**
* Locate the search input below the header with placeholder "Search by skill, roll, location...".
* Type in the search field (e.g., "React") – note that filtering isn't implemented yet, but the state updates (check console for searchQuery changes).
**Test Talent Cards:**
* Scroll through the list of 4 sample talents (e.g., Michael Johnson, James Smith, etc.).
* On desktop: Verify horizontal layout with avatar on the left, details in the center, and buttons/menu on the right.
* On mobile: Verify vertical layout with avatar at the top, details below.
* Check talent details: Avatar (initials in gradient circle), name, role, availability badge (green "Available" or red "Unavailable"), experience, rating/reviews, description (truncated with "Show More/Less"), and skills as tags.
* Interact with "Set Pricing" (outlined blue button) and "View" (solid blue button) – no actions yet, but ensure they render and are clickable.
* Click the three-dots menu (⋮) on each card to open the dropdown:
* Select "Edit Profile" – logs "Edit {id}" to console.
* Select "Mark Unavailable" – logs "Mark Unavailable {id}".
* Select "Remove Talent" – logs "Remove {id}".
* Test responsiveness: Resize the browser window to mobile width (<768px) and confirm layout switches.
* Test description expansion: Click "Show More" to expand text, then "Show Less" to collapse.
**Edge Cases:**
* Ensure no console errors on load or interactions.
* Test with different screen sizes for layout integrity.
* Verify icons load correctly (e.g., star, work experience icons in stats).