A comprehensive project and budget management system built with React, TypeScript, and Tailwind CSS. Features real-time budget tracking, activity-based budget codes, team collaboration, and detailed reporting with PDF export capabilities.
- Create and manage projects with detailed information
- Track project status, priority, and timeline
- Assign team members and budget codes
- Real-time budget monitoring and alerts
- Project-specific budget breakdowns
- Individual budget allocation for each activity code
- Real-time spending tracking against allocations
- Budget usage alerts and notifications
- Cross-project budget code usage
- Comprehensive budget code analytics
- Expense and income tracking
- Category-based budget entries
- Automatic budget calculations
- Budget alert thresholds
- Multi-currency support (MYR, USD, EUR, GBP)
- User role management (Super Admin, Admin, User)
- Real-time notifications
- Project assignment and collaboration
- Activity tracking and updates
- Comprehensive PDF report generation
- Project overview reports
- Budget code analysis reports
- Individual project detail reports
- Visual charts and analytics
- Export functionality
- Supabase integration for persistent storage
- Real-time data synchronization
- Automatic backups
- Row-level security
- Scalable PostgreSQL backend
- Frontend: React 18, TypeScript, Tailwind CSS
- Icons: Lucide React
- Charts: Recharts
- Database: Supabase (PostgreSQL)
- PDF Generation: jsPDF with autoTable
- Build Tool: Vite
- Styling: Tailwind CSS with dark mode support
-
Clone the repository
git clone <repository-url> cd pcr-tracker
-
Install dependencies
npm install
-
Set up environment variables
cp .env.example .env
Fill in your Supabase credentials in the
.envfile. -
Start the development server
npm run dev
-
Create a Supabase project
- Go to supabase.com
- Create a new project
- Get your project URL and anon key
-
Set up the database schema
- Go to the SQL Editor in your Supabase dashboard
- Run the SQL schema provided in the Database Setup section of the app
- This creates all necessary tables and security policies
-
Configure environment variables
VITE_SUPABASE_URL=https://your-project.supabase.co VITE_SUPABASE_ANON_KEY=your-anon-key-here
-
Restart the development server
npm run dev
The app includes mock data and in-memory storage for development and testing purposes. No additional setup required.
- Projects: Manage all projects with budget tracking
- Budget: Comprehensive budget management and analytics
- Budget Codes: Activity-based budget code management
- Users: Team member management (Admin only)
- Settings: System configuration and database setup
- Create activity-based budget codes (e.g., "1-2345 - Software Development")
- Allocate individual budgets for each code
- Track spending against each allocation
- Real-time usage monitoring and alerts
- Cross-project budget code assignment
- Dual budget system: Project budgets + Budget code allocations
- Real-time spending updates
- Budget usage alerts at configurable thresholds
- Detailed budget breakdowns by activity codes
- Visual progress indicators
- Complete Overview Report: All projects, budget codes, and transactions
- Budget Code Analysis: Detailed performance analysis by activity codes
- Project Detail Report: Comprehensive individual project reports
- PDF Export: Professional PDF generation with charts and tables
- Date Range Filtering: Customizable reporting periods
- Real-time notifications for budget alerts
- Project updates and assignments
- Budget code usage warnings
- Team collaboration notifications
- Configurable notification preferences
- Modern UI: Clean, professional interface design
- Dark Mode: Full dark mode support with system preference detection
- Responsive Design: Optimized for desktop, tablet, and mobile
- Accessibility: WCAG compliant with proper contrast ratios
- Micro-interactions: Smooth animations and hover effects
- Visual Feedback: Progress bars, status indicators, and alerts
- Company information and branding
- Currency and regional settings
- Budget alert thresholds
- Project defaults and policies
- Notification preferences
- Theme and appearance options
- Super Admin: Full system access and user management
- Admin: Project and budget management, limited user access
- User: View projects and budgets, basic collaboration
- Configurable budget alert thresholds
- Budget approval requirements
- Negative budget allowances
- Category management
- Fiscal year settings
- Project spending distribution (pie charts)
- Monthly and yearly spending trends (bar/line charts)
- Category-based spending analysis
- Budget usage progress indicators
- Real-time dashboard metrics
- PDF reports with professional formatting
- Comprehensive data tables
- Visual charts and graphs
- Customizable date ranges
- Multiple report types
-
Build the application:
npm run build
-
Deploy the
distfolder to your hosting provider -
Ensure environment variables are set in production
-
Configure Supabase for production use with proper security policies
VITE_SUPABASE_URL=your-production-supabase-url
VITE_SUPABASE_ANON_KEY=your-production-anon-key- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
For support and questions:
- Check the in-app Database Setup guide
- Review the Settings documentation
- Contact your system administrator
The application includes:
- Automatic data synchronization with Supabase
- Real-time notifications
- Progressive web app capabilities
- Offline support (coming soon)
- Mobile app version (planned)
PCR Tracker - Professional project and budget management made simple.