A software engineering manager tool for evaluating team members, tracking KPIs, milestones, feedback, notes, and career events — with full dark/light theme and Arabic/English (RTL) support.
Current release: V1 — See docs/ROADMAP.md for V2 (AI Agent) and V3 (MCP + Jira/GitHub/Slack).
- Overview of all team members with quick stats (evaluations count, latest rating, tenure)
- Team-level metrics: total members, total evaluations, average rating, feedback records
- Add new employees via modal form
- Overview — bio, contact info, skills, performance trend, upcoming events
- Evaluations — full annual/mid-year evaluations with KPI progress bars, milestones, strengths, areas for improvement, development goals, salary & promotion recommendations
- Feedback — 360-feedback, peer, manager, self-assessment, stakeholder feedback with sentiment tagging
- Notes — pinnable manager notes categorized by Achievement, Performance, Career, Behavior, Concern
- Events — career timeline: onboarding, promotions, certifications, training, salary reviews, leaves, milestones
- Multi-section evaluation form: Basic Info, KPIs, Milestones, Qualitative (strengths, areas, goals, comments)
- KPI tracking with target vs. actual, weight, category, and status (exceeded / on-track / at-risk / missed)
- Milestone tracking with target and completion dates
- Performance level classification: Exceptional → Needs Improvement
- Salary recommendation and promotion flag
- Export to PDF — opens a print-ready styled report in a new window for any evaluation
- Full English / Arabic language switching with RTL layout support
- Dark / Light theme toggle
- All labels, badges, and report strings translated in both languages
- All data persisted in
localStorage— no backend required - 8 pre-loaded sample employees with multi-year data: Ahmed Al-Hassan, Omar Khalil, Sara Youssef, Khaled Ibrahim, Reem Al-Sayed, Layla Mansoor, Nour El-Din, Tariq Nasser
| Requirement | Version |
|---|---|
| Node.js | v18+ (v20 LTS recommended) |
| npm | v9+ |
If you use nvm:
nvm use 20 # or: nvm install 20# 1. Clone the repo
git clone <repo-url>
cd evaluation-tool
# 2. Install dependencies
npm install
# 3. Start the development server
npm run devThe app opens at http://localhost:5173
npm run build # Production build → dist/
npm run preview # Preview the production build locally
npm run lint # Run ESLintOn first load, the app seeds 8 sample employee profiles from src/data/sampleData.ts into localStorage. All data is stored locally — no login, no backend, no network requests.
To reset to sample data, open browser DevTools → Application → Local Storage → clear the eval-tool-v1 key, then refresh.
| Layer | Technology |
|---|---|
| Framework | React 18 + TypeScript |
| Build | Vite 5 (compatible with Node 18+) |
| Styling | Tailwind CSS v3 (darkMode: 'class') |
| Icons | Lucide React |
| i18n | Custom EN/AR translation system (src/i18n/index.ts) |
| State | React Context + localStorage |
| PDF Export | Browser window.print() via generated HTML |
evaluation-tool/
├── index.html
├── vite.config.ts
├── tailwind.config.js
├── tsconfig.json
│
├── src/
│ ├── App.tsx # Root — SettingsProvider > AppProvider
│ ├── main.tsx
│ ├── index.css # Tailwind + @layer components (semantic dark-mode classes)
│ │
│ ├── types/
│ │ └── index.ts # All TypeScript interfaces and union types
│ │
│ ├── i18n/
│ │ └── index.ts # EN/AR translation objects + getT() helper
│ │
│ ├── context/
│ │ ├── AppContext.tsx # All data CRUD, persists to localStorage
│ │ └── SettingsContext.tsx # Theme + language, applies to <html>
│ │
│ ├── data/
│ │ └── sampleData.ts # Pre-loaded sample data for 8 employees
│ │
│ ├── utils/
│ │ ├── ui.ts # Color helpers, formatDate, uid, getInitials…
│ │ └── exportReport.ts # Print-ready HTML report generator
│ │
│ └── components/
│ ├── Dashboard.tsx # Team overview page
│ ├── EmployeeProfile.tsx # Employee detail page with tab navigation
│ │
│ ├── ui/ # Shared atomic components
│ │ ├── ConfirmDialog.tsx
│ │ └── RatingStars.tsx
│ │
│ ├── tabs/ # Profile tab panels
│ │ ├── OverviewTab.tsx
│ │ ├── EvaluationsTab.tsx
│ │ ├── FeedbackTab.tsx
│ │ ├── NotesTab.tsx
│ │ └── EventsTab.tsx
│ │
│ └── modals/ # Create / edit forms
│ ├── EmployeeModal.tsx
│ ├── EvaluationModal.tsx
│ ├── FeedbackModal.tsx
│ ├── NoteModal.tsx
│ └── EventModal.tsx
│
├── docs/
│ ├── ROADMAP.md # V2 + V3 product plans
│ ├── ARCHITECTURE.md # Technical architecture decisions
│ └── screenshots/ # README screenshots (auto-generated)
│
└── scripts/
└── take-screenshots.mjs # Puppeteer script to regenerate docs/screenshots/
Screenshots in docs/screenshots/ are generated by the puppeteer script. To regenerate after UI changes:
# Dev server must be running first
npm run dev &
# Then in another terminal:
node scripts/take-screenshots.mjs| Version | Theme | Status |
|---|---|---|
| V1 | Manual evaluation tool with full CRUD, export, i18n, dark mode | ✅ Released |
| V2 | AI Agent — drafts evaluations from profile data using Claude | 🔜 Planned |
| V3 | MCP Server — auto-ingests Jira, GitHub, Slack data | 🔜 Planned |
Full roadmap details: docs/ROADMAP.md