You are an expert AI assistant tasked with generating the complete codebase for a single-page application (SPA) named 'Digital Talent: HR and Career Transformation Platform'. This platform aims to help organizations adapt to evolving workforce needs driven by technological advancements by providing AI-powered talent management, reskilling, and career coaching.
PROJECT OVERVIEW:
The core problem this application addresses is the potential obsolescence of human labor due to rapid technological change, similar to how ATMs were expected to eliminate bank tellers but instead shifted their roles. The 'Digital Talent' platform proactively helps businesses identify future skill gaps, guide their workforce through reskilling initiatives, and offer career development support to individuals. The value proposition is to transform workforce challenges into opportunities for growth, productivity, and employee retention, ensuring businesses remain competitive and employees remain relevant.
TECH STACK:
- Frontend Framework: React.js (using Vite for rapid development)
- Styling: Tailwind CSS for utility-first styling and rapid UI development
- State Management: Zustand for efficient and simple global state management
- Routing: React Router DOM for client-side navigation
- UI Components: Headless UI for accessible and customizable component primitives
- Icons: React Icons
- Data Fetching: Axios for HTTP requests (if an API were integrated, though for MVP, mock data will suffice)
- Form Handling: React Hook Form with Zod for validation
- Animation Library: Framer Motion for engaging animations and transitions
CORE FEATURES:
1. **AI-Powered Talent Analysis Dashboard:**
* **User Flow:** Upon login, HR managers see a dashboard summarizing current workforce skills, projected future skill needs (based on industry trends and company goals), and identified skill gaps. Users can filter data by department or role.
* **Functionality:** This feature will display mock data representing skill inventories and future projections. Visualizations (charts, graphs) will be used to represent this data.
2. **Personalized Reskilling Roadmaps:**
* **User Flow:** An HR manager or employee can select a specific skill gap or career goal. The system generates a personalized roadmap, suggesting courses, workshops, and internal projects. Employees can track their progress on these roadmaps.
* **Functionality:** This involves displaying a list of suggested learning modules/activities linked to identified gaps. Each module will have details like estimated time, prerequisites, and learning objectives.
3. **Career Coaching & Mentorship Matching:**
* **User Flow:** Employees can set career aspirations. The platform uses an algorithm (simulated for MVP) to match them with suitable mentors within the organization based on expertise and experience. Both mentor and mentee can schedule sessions.
* **Functionality:** Displays potential mentors with profiles, areas of expertise, and availability. Includes a simple interface for requesting/confirming mentorship connections.
4. **Workforce Transformation Reporting:**
* **User Flow:** Managers can generate reports on the progress of reskilling initiatives, employee engagement with development programs, and the overall impact on workforce readiness. Reports can be customized by date range and department.
* **Functionality:** Generates mock report summaries with key metrics like completion rates, skill improvement percentages, and predicted future readiness.
UI/UX DESIGN:
- **Layout:** A clean, modern, and intuitive single-page application layout. A persistent sidebar navigation for accessing different features (Dashboard, Reskilling, Mentorship, Reports). Main content area displays the selected feature.
- **Color Palette:** Primary: Deep Blue (#1E3A8A), Secondary: Teal (#14B8A6), Accent: Orange (#F97316), Neutrals: Grays (#F3F4F6, #9CA3AF, #1F2937).
- **Typography:** Use a sans-serif font family like Inter or Poppins for readability. Headings should be clear and distinct from body text.
- **Responsive Design:** Mobile-first approach. The layout must adapt seamlessly to various screen sizes (mobile, tablet, desktop). Use Tailwind CSS's responsive modifiers (sm:, md:, lg:).
- **Interactions:** Subtle animations on button clicks, hover effects on interactive elements, smooth page transitions.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing and global layout.
- `Layout.jsx`: Wrapper component providing the persistent sidebar and main content area.
- `Sidebar.jsx`: Navigation component with links to different sections. Receives `navItems` array as props.
- `Dashboard.jsx`: Displays the Talent Analysis summary. Uses `StatCard`, `SkillGapChart`, `ProjectionGraph` components.
- `StatCard.jsx`: Displays a single key metric (e.g., 'Total Employees', 'Skill Gap Score'). Props: `title`, `value`, `icon`.
- `SkillGapChart.jsx`: Displays a bar or pie chart of current skill distribution or gaps. Props: `data`.
- `ProjectionGraph.jsx`: Displays a line or area chart showing future skill projections. Props: `data`.
- `Reskilling.jsx`: Main page for viewing and managing reskilling roadmaps. Uses `RoadmapList`, `RoadmapDetail`, `AddRoadmapForm`.
- `RoadmapList.jsx`: Displays a list of available reskilling roadmaps. Props: `roadmaps`.
- `RoadmapDetail.jsx`: Shows details of a selected roadmap, including modules and progress. Props: `roadmap`.
- `AddRoadmapForm.jsx`: Form to create a new reskilling roadmap. Uses `ReactHookForm` and `Zod`.
- `Mentorship.jsx`: Page for viewing mentor suggestions and managing mentorship connections. Uses `MentorList`, `MentorProfile`, `RequestMentorForm`.
- `MentorList.jsx`: Displays a list of potential mentors. Props: `mentors`.
- `MentorProfile.jsx`: Shows detailed profile of a mentor. Props: `mentor`.
- `RequestMentorForm.jsx`: Form to request a mentorship. Props: `mentorId`.
- `Reports.jsx`: Page for generating and viewing workforce transformation reports. Uses `ReportGenerator`, `ReportViewer`.
- `ReportGenerator.jsx`: UI to select parameters for report generation. Props: `onSubmit`.
- `ReportViewer.jsx`: Displays the generated report data. Props: `reportData`.
- `Button.jsx`: Reusable button component. Props: `onClick`, `children`, `variant`, `isLoading`.
- `Input.jsx`: Reusable input field component. Props: `label`, `register`, `error`.
- `Chart.jsx`: Generic chart component using a charting library. Props: `type`, `data`, `options`.
DATA MODEL:
- **State Structure (Zustand):**
```javascript
// Example for Zustand store
useStore(set => ({
user: null, // { id, name, role: 'HR' | 'Employee' }
dashData: { stats: [], skillGaps: [], projections: [] },
reskillingRoadmaps: [],
mentors: [],
requestedMentorships: [],
reports: [],
setDashData: (data) => set({ dashData: data }),
addRoadmap: (roadmap) => set(state => ({ reskillingRoadmaps: [...state.reskillingRoadmaps, roadmap] })),
// ... other state setters
}))
```
- **Mock Data Formats:**
* `stats`: `[{ title: string, value: number | string, icon: string }]`
* `skillGaps`: `[{ skill: string, current: number, needed: number, difference: number }]`
* `projections`: `[{ year: number, skill: string, projectedNeed: number }]`
* `roadmaps`: `[{ id: string, title: string, description: string, status: 'Not Started' | 'In Progress' | 'Completed', modules: Array<{ title: string, duration: string, completed: boolean }> }]`
* `mentors`: `[{ id: string, name: string, expertise: string[], availability: string, rating: number }]`
* `reports`: `[{ id: string, title: string, generatedDate: string, metrics: object }]`
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Use Framer Motion for smooth `AnimatePresence` based transitions between major sections/pages.
- **Hover Effects:** Subtle background color changes or slight scaling on buttons, cards, and navigation items.
- **Loading States:** Display skeleton loaders or spinners (e.g., using Zustand state) when fetching/generating data. Buttons should show an `isLoading` state during async operations.
- **Micro-interactions:** Animate the progress bars in reskilling roadmaps, provide visual feedback on form submissions.
- **Chart Animations:** Use built-in animations of the charting library for smoother data visualization updates.
EDGE CASES:
- **Empty States:** Design informative and visually appealing empty states for when there's no data (e.g., 'No roadmaps created yet. Start building one!'). Provide clear calls to action.
- **Error Handling:** Implement robust error handling for form submissions (using Zod validation) and potential (future) API errors. Display user-friendly error messages.
- **Validation:** Use Zod and React Hook Form for comprehensive validation on all user inputs (e.g., email format, required fields, number ranges).
- **Accessibility (a11y):** Ensure all interactive elements are focusable and keyboard navigable. Use semantic HTML. Leverage Headless UI components which are built with accessibility in mind. Use ARIA attributes where necessary.
- **Role-Based Access:** Although MVP uses mock data, the structure should implicitly support different views for HR managers vs. employees (e.g., showing different navigation options or data views).
SAMPLE DATA:
```json
{
"stats": [
{"title": "Total Employees", "value": 520, "icon": "users"},
{"title": "Avg. Skill Gap Score", "value": 6.5, "icon": "target"},
{"title": "Active Reskilling Programs", "value": 15, "icon": "play"}
],
"skillGaps": [
{"skill": "AI/ML", "current": 30, "needed": 120, "difference": 90},
{"skill": "Cloud Computing", "current": 150, "needed": 250, "difference": 100},
{"skill": "Data Analytics", "current": 200, "needed": 300, "difference": 100},
{"skill": "Cybersecurity", "current": 100, "needed": 180, "difference": 80}
],
"projections": [
{"year": 2024, "skill": "AI/ML", "projectedNeed": 150},
{"year": 2024, "skill": "Cloud Computing", "projectedNeed": 300},
{"year": 2025, "skill": "AI/ML", "projectedNeed": 200},
{"year": 2025, "skill": "Quantum Computing", "projectedNeed": 50}
],
"roadmaps": [
{
"id": "r1", "title": "Become a Cloud Architect", "description": "Upskill in AWS, Azure, and GCP services.", "status": "In Progress",
"modules": [
{"title": "AWS Fundamentals", "duration": "4 weeks", "completed": true},
{"title": "Azure Core Services", "duration": "6 weeks", "completed": false}
]
},
{
"id": "r2", "title": "Master Data Science", "description": "Focus on Python, Machine Learning, and Big Data.", "status": "Not Started",
"modules": []
}
],
"mentors": [
{"id": "m1", "name": "Alice Smith", "expertise": ["AI/ML", "Data Science"], "availability": "Weekends", "rating": 4.8},
{"id": "m2", "name": "Bob Johnson", "expertise": ["Cloud Computing", "DevOps"], "availability": "Weekdays (Mornings)", "rating": 4.5},
{"id": "m3", "name": "Charlie Brown", "expertise": ["Project Management", "Agile"], "availability": "Flexible", "rating": 4.9}
],
"reports": [
{
"id": "rep1", "title": "Q3 Reskilling Progress Report", "generatedDate": "2023-09-30",
"metrics": {"completionRate": "75%", "avgImprovement": "1.2 skill levels", "readinessScore": "7.1/10"}
}
]
}
```
DEPLOYMENT NOTES:
- **Build Command:** Use Vite's build command: `npm run build` or `yarn build`.
- **Environment Variables:** Use `.env` files for managing environment variables (e.g., API URLs if applicable later). Vite automatically loads variables prefixed with `VITE_`.
- **Performance Optimizations:** Code splitting (handled by Vite/React Router), lazy loading components, optimizing images, memoization (React.memo, useMemo, useCallback).
- **Static Site Generation/Server-Side Rendering:** For MVP, client-side rendering is sufficient. Future iterations could explore Next.js for SSR/SSG benefits.
- **Hosting:** Suitable for deployment on platforms like Vercel, Netlify, or GitHub Pages.
This comprehensive prompt provides the AI with all the necessary details to generate a functional, well-structured, and aesthetically pleasing SPA for the 'Digital Talent' platform. Remember to replace mock data fetching/logic with actual API calls and backend integration in a production environment.