Project Management Dashboard with S-Curve Analytics

A comprehensive project management system with Supabase authentication, role-based access control, and advanced analytics.

Features

🔐 Authentication & Authorization

• User Authentication: Secure login/signup with Supabase Auth
• Role-Based Access Control: Admin, Editor, and Viewer roles
• Row Level Security: Database-level security policies

📊 Project Management

• Work Breakdown Structure: 2-level hierarchical project organization
• S-Curve Analytics: Earned Value Management with visual charts
• Real-time Progress Tracking: Live updates of project metrics
• Cost Performance Indicators: CPI, SPI, EAC calculations

💬 Communication

• Comments System: Project-specific discussions
• Query Notifications: Email alerts for admin queries
• Activity Logging: Comprehensive audit trail

👥 Administration

• User Management: Admin panel for user administration
• Role Assignment: Flexible role-based permissions
• Activity Monitoring: System-wide activity tracking

Quick Start

Prerequisites

• Node.js 18+ and npm
• Supabase account and project

1. Environment Setup

Create a .env file in the root directory:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

2. Supabase Setup

Database Migration

Run the SQL migration in your Supabase SQL editor:

-- Copy and paste the contents of supabase/migrations/001_initial_schema.sql

This creates:

• User profiles and roles tables
• Projects, phases, and tasks tables
• Comments and activity log tables
• Row Level Security policies
• Automatic user profile creation triggers

Edge Functions (Optional)

Deploy the email notification function:

# Install Supabase CLI
npm install -g supabase

# Deploy edge function
supabase functions deploy send-query-notification

3. Application Setup

# Install dependencies
npm install

# Start development server
npm run dev

4. Initial Admin Setup

1. Create First User: Sign up through the application
2. Assign Admin Role: In Supabase dashboard, run:

   -- Replace 'user-uuid' with the actual user ID from auth.users
   INSERT INTO user_roles (user_id, role_id)
   SELECT 'user-uuid', id FROM roles WHERE name = 'admin';

User Roles & Permissions

👑 Admin

• Full system access
• User management and role assignment
• View activity logs
• All project operations

✏️ Editor

• Create and edit projects
• Manage phases and tasks
• Add comments and queries
• View assigned projects

👁️ Viewer

• Read-only access to assigned projects
• View project analytics
• Add comments (no queries)

Database Schema

Core Tables

• profiles - User profile information
• roles - System roles (admin, editor, viewer)
• user_roles - User-role assignments
• projects - Project master data
• phases - Project phases
• tasks - Individual tasks
• comments - Project discussions
• activity_log - System audit trail

Security Features

• Row Level Security on all tables
• Automatic user profile creation on signup
• Role-based data access policies
• Activity logging for all operations

API Integration

Supabase Client

The application uses @supabase/supabase-js for:

• Authentication management
• Real-time data operations
• File storage (if needed)
• Edge function calls

Key Utilities

• src/lib/supabase.ts - Supabase client configuration
• src/hooks/useAuth.ts - Authentication hook
• src/utils/supabaseQueries.ts - Database operations

Development

Project Structure

src/
├── components/          # React components
│   ├── auth/           # Authentication components
│   ├── admin/          # Admin panel components
│   ├── comments/       # Comments system
│   └── activity/       # Activity logging
├── hooks/              # Custom React hooks
├── lib/                # Third-party integrations
├── pages/              # Page components
├── types/              # TypeScript definitions
└── utils/              # Utility functions

Key Technologies

• Frontend: React 18, TypeScript, Tailwind CSS
• Backend: Supabase (PostgreSQL, Auth, Edge Functions)
• Charts: Recharts for S-curve visualization
• Icons: Lucide React
• Date Handling: date-fns

Deployment

Frontend Deployment

The application can be deployed to any static hosting service:

# Build for production
npm run build

# Deploy dist/ folder to your hosting service

Supabase Configuration

1. Environment Variables: Set in your hosting platform
2. Database Policies: Already configured via migration
3. Edge Functions: Deploy via Supabase CLI

Email Notifications

Configure email service in the edge function:

1. Set ADMIN_EMAIL environment variable in Supabase
2. Configure your preferred email service (SendGrid, Mailgun, etc.)
3. Update the edge function with your email service API

Troubleshooting

Common Issues

1. Authentication Errors

   • Verify Supabase URL and keys
   • Check RLS policies are enabled

2. Permission Denied

   • Ensure user has proper role assignment
   • Verify RLS policies match user roles

3. Data Not Loading

   • Check network connectivity to Supabase
   • Verify database migration completed successfully

Support

For technical support, check:

• Supabase dashboard for database issues
• Browser console for frontend errors
• Supabase logs for backend issues

License

This project is proprietary software. All rights reserved.