PJIAE 360 is a comprehensive employee performance management platform built with React 18, TypeScript, Vite, and Supabase. It provides a complete solution for goal setting, performance appraisals, competency evaluations, and organizational analytics with enterprise-grade security and role-based access control.
- Goal Management: Goal creation, tracking, and alignment across organizational levels
- Performance Appraisals: Comprehensive evaluation system with competency assessments
- Digital Sign-off: Secure digital signatures for appraisal completion
- 360-Degree Feedback: Multi-source feedback collection and analysis
- Analytics Dashboard: Real-time performance metrics and organizational insights
- Guided Setup Flow: Step-by-step organization configuration
- Employee Import: CSV import with intelligent column mapping
- Draft Recovery: Auto-save and recovery of incomplete setups
- Role Assignment: Automated role-based access configuration
- Appraisal Cycle Setup: Customizable review periods and competency frameworks
- 5-Tier Role System: Admin, Director, Manager, Supervisor, Employee
- Dynamic Navigation: Role-specific dashboards and functionality
- Permission Guards: Granular access control throughout the application
- Security Audit: Comprehensive logging and monitoring
- Email Automation: Branded email notifications via Supabase Edge Functions
- Mobile Responsive: Optimized experience across all devices
- Data Analytics: Advanced reporting and visualization
- Organizational Chart: Interactive hierarchy visualization
- Calendar Integration: Appraisal scheduling and deadline management
- React 18 with React Router for navigation
- TypeScript for type safety and developer experience
- Vite for lightning-fast development and builds
- Tailwind CSS with custom design system
- shadcn/ui component library with extensive customization
- Framer Motion for smooth animations and transitions
- Supabase for authentication, database, and real-time features
- PostgreSQL with Row Level Security (RLS)
- Supabase Edge Functions for serverless operations
- Email Service Integration via Resend API
- TanStack Query (React Query) for server state management
- Zustand for client state management
- React Hook Form with Zod validation
- Optimistic Updates for enhanced user experience
- TanStack Table for advanced data tables
- Recharts for data visualization
- React Calendar for scheduling
- Sonner for toast notifications
- Radix UI primitives for accessibility
├── Admin Dashboard # System administration, user management, analytics
├── Director Dashboard # Strategic oversight, division-level analytics
├── Manager Dashboard # Team management, goal alignment, appraisals
├── Supervisor Dashboard# Direct reports, performance tracking
└── Employee Dashboard # Personal goals, self-assessment, feedback
├── Authentication # Supabase Auth with email verification
├── Onboarding # Multi-step organization setup
├── Goals Management # Goal creation with hierarchical alignment
├── Appraisals # Performance evaluation workflows
├── Analytics # Real-time reporting and insights
├── Admin Tools # User management, system configuration
└── Security # Audit logs, permission management
- Bun (recommended package manager)
- Supabase account (for backend services)
- Install dependencies
bun install- Environment Setup
cp .env.example .env.localConfigure your Supabase credentials in .env.local:
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key- Start development server
bun dev- Build for production
bun run buildsrc/
├── components/ # React components organized by feature
│ ├── admin/ # Administrative tools and dashboards
│ ├── appraisals/ # Performance evaluation workflows
│ ├── auth/ # Authentication forms and flows
│ ├── goals/ # Goal management system
│ ├── onboarding/ # Setup and configuration flows
│ ├── ui/ # Reusable UI components (shadcn/ui)
│ └── layouts/ # Page layouts and navigation
├── hooks/ # Custom React hooks for data and logic
├── lib/ # Utility functions and configurations
├── pages/ # Route components and page layouts
├── stores/ # Zustand state management
├── integrations/ # Supabase client and type definitions
└── types/ # TypeScript type definitions
supabase/
├── functions/ # Edge Functions for email and data processing
├── migrations/ # Database schema and migrations
└── config.toml # Supabase project configuration
- Row Level Security (RLS) on all database tables
- JWT-based authentication with automatic token refresh
- Organization-scoped data access preventing cross-tenant data leaks
- Input sanitization and validation at all entry points
- Comprehensive audit logging for all user actions
- Role change tracking with detailed security logs
- Failed login attempt monitoring
- Real-time security alerting
- Granular permission system based on organizational roles
- Route-level protection with role verification
- API endpoint security with Supabase RLS policies
- Session management with secure logout
- Performance KPIs: Goal completion rates, appraisal scores
- Team Analytics: Department and division-level insights
- Trend Analysis: Historical performance data visualization
- Real-time dashboards with interactive charts
- Export capabilities for compliance and reporting
- Custom date ranges and filtering options
- Mobile-optimized views for executive dashboards
- Welcome emails for new user onboarding
- Appraisal reminders and deadline notifications
- Goal milestone alerts and achievement recognition
- System notifications for administrative updates
- Branded templates with organization customization
- Responsive design for all email clients
- Multi-language support capabilities
- Delivery tracking and analytics
The platform uses a comprehensive design system built on Tailwind CSS:
- Semantic color tokens defined in
index.css - Consistent component variants via
class-variance-authority - Dark/light mode support with automatic system detection
- Responsive design with mobile-first approach
- Accessibility compliance with WCAG 2.1 guidelines
- TypeScript strict mode for type safety
- ESLint + Prettier for code formatting
- Component-driven development with reusable patterns
- Custom hooks for business logic separation
- Error boundaries for graceful error handling
- Unit tests for utilities and hooks
- Component testing with React Testing Library
- Integration tests for critical user flows
- End-to-end testing for complete scenarios
- Code splitting with React.lazy and Suspense
- Optimistic updates for immediate user feedback
- Query optimization with React Query caching
- Image optimization and lazy loading
- Bundle size monitoring and optimization
The platform is optimized for deployment on:
- Vercel (recommended for Vite applications)
- Netlify with automatic builds
- Custom servers with Docker containerization
- Environment variables for API keys and configuration
- Build-time optimization with Vite
- CDN integration for static assets
- Database migrations via Supabase CLI
- Real-time subscriptions for live data updates
- Row Level Security policies for data access control
- Edge Functions for serverless operations
- Storage integration for file uploads (when needed)
The platform includes over 30+ custom hooks for:
- Authentication state management
- Data fetching and caching
- Form validation and submission
- Real-time notifications
- Role-based permissions
- Fork the repository and create a feature branch
- Follow the code standards defined in
STYLE_GUIDE.md - Write tests for new functionality
- Run linting and tests before submitting
- Submit a pull request with detailed description
# Install dependencies
bun install
# Start development server
bun dev
# Run tests
bun test
# Lint code
bun run lint
# Format code
bun run formatThis project is provided for demonstration and educational purposes. Please review the license terms before commercial use.
- Live Demo - Experience the platform
- Documentation - Comprehensive guides
- API Reference - Supabase integration
- Design System - Component guidelines
- Contributing - Development guidelines
PJIAE 360 - Transforming performance management through intelligent goal setting and comprehensive appraisal systems.
