An AI-powered coaching tool for managers navigating employee performance issues. This Next.js application provides a comprehensive interface for assessing situations, receiving AI guidance, creating action plans, and practicing conversations.
- Node.js 18+
- npm or yarn
# Clone the repository
git clone [your-repo-url]
# Navigate to the project directory
cd manager-coach
# Install dependencies
npm install
# Start the development server
npm run devOpen http://localhost:3000 in your browser.
- View all active coaching situations at a glance
- Track case status (on-track, needs attention, overdue)
- Monitor upcoming reminders and follow-ups
- View personal coaching metrics and team health insights
- Describe performance situations with guided prompts
- Select from quick context cards (first-time issue, recurring problem, etc.)
- Voice-to-text input capability
- View employee context from integrated systems (mocked)
- AI-powered suggestions based on input
- Risk assessment with visual indicators
- Bias detection and warnings
- Personalized recommendations with frameworks (GROW, FUEL, SBI)
- Quick actions for scheduling and documentation
- Policy references based on region
- Create and customize different document types:
- Conversation guides
- Meeting notes
- Performance plans
- Follow-up emails
- AI-assisted content with smart suggestions
- Tone adjustment (direct, supportive, developmental)
- Smart placeholders for consistency
- Interactive role-play simulation
- Real-time coaching feedback
- Multiple scenario variations:
- Standard conversation
- Defensive employee
- Emotional responses
- Denial situations
- Job security concerns
- Live performance metrics tracking
- Framework: Next.js 14 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Icons: Lucide React
- Animations: Framer Motion
- Date Handling: date-fns
- Notifications: Sonner
manager-coach/
├── src/
│ ├── app/ # App router pages
│ │ ├── dashboard/ # Progress tracking dashboard
│ │ ├── assessment/ # Situation assessment wizard
│ │ ├── guidance/ # AI guidance dashboard
│ │ ├── composer/ # Action plan composer
│ │ └── practice/ # Conversation practice
│ ├── components/
│ │ ├── ui/ # Reusable UI components
│ │ └── layout/ # Layout components
│ └── lib/
│ ├── types/ # TypeScript type definitions
│ └── data/ # Mock data and utilities
├── public/ # Static assets
└── package.json
- Privacy First: All conversations marked as confidential and encrypted
- Bias Awareness: Built-in bias detection and warnings
- Regional Compliance: Adapts to different regional labor laws
- Empathetic Design: Focuses on supportive, constructive interactions
- Mobile Responsive: Works seamlessly across devices
- Start: Manager lands on dashboard viewing active cases
- New Issue: Click "Start New Coaching" to begin assessment
- Assessment: Describe situation, select employee, receive AI suggestions
- Guidance: View risk assessment and personalized recommendations
- Action Planning: Create conversation guide with AI assistance
- Practice: Role-play the conversation with AI simulation
- Execute: Schedule real meeting and track progress
The application uses comprehensive mock data including:
- Employee profiles with performance ratings
- Pre-defined situation types
- Sample recommendations with frameworks
- Regional policy references
- Active coaching cases
- Confidentiality notices throughout the application
- Regional compliance checks (US, EU, UK, APAC)
- Bias detection alerts
- Audit trail capabilities (simulated)
# Run development server
npm run dev
# Build for production
npm run build
# Run production build
npm start- This is a UI mockup with no real backend
- All data is mocked for demonstration purposes
- Integrations (Workday, Slack, etc.) are simulated
- AI responses are pre-defined examples
This is a demonstration project showcasing the UI/UX design for an AI-powered manager coaching platform.
Built with ❤️ for better manager-employee conversations