Development » Algonyx

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).