WorkFlow Pro

Live Demo: work-flow-pro-ruby.vercel.app

Enterprise task and project management dashboard with React, Redux Toolkit, Recharts, and Supabase.

Topics: react dashboard project-management task-management vite redux-toolkit supabase enterprise-app

---

WorkFlow Pro is an enterprise-style task and project management dashboard built with React 18. It simulates a real internal productivity platform with role-based access, project planning, task operations, reporting, notifications, profile settings, and a live Supabase backend.

Highlights

• Google Gemini AI: AI-driven executive project summaries and intelligent due-date suggestions.
• Realtime Sync: Supabase Realtime integration for live task updates across connected clients.
• Enterprise Features: In-app time tracking stopwatches, drag-and-drop file attachments, and @mention autocomplete.
• Advanced Analytics: Dynamic Recharts including Ideal vs. Actual Burndown charts, 52-week Activity Heatmaps, and Team Velocity Stacked Bar charts.
• Fluid UX: framer-motion backed page transitions, staggered Kanban card animations, and skeleton loading states.
• Command Palette: A global Cmd+K interface for debounced, keyboard-navigable search across all records.
• Approval Workflow: Employee tasks move to "Review", where Admins must explicitly "Approve" or "Request Changes".
• PWA & Offline Support: Native installability and vite-plugin-pwa service workers triggering accessible offline toasts.
• Authentication: JWT/session-based auth with protected routes and role-based access control (Admin vs Employee).
• Full Customization: Profile settings with dynamic avatar preview and system-wide Dark Mode toggles.

Tech Stack

• Framework: React 18 & Vite
• State & Routing: Redux Toolkit & React Router v6
• Backend as a Service: Supabase (Auth, Postgres DB, Storage, Realtime)
• AI Integration: Google Gemini API (gemini-1.5-flash)
• UI & Animations: Tailwind CSS & Framer Motion
• Data Visualization: Recharts
• PWA: Vite PWA Plugin & Workbox Window
• Testing: Jest & React Testing Library

Available Roles

Admin

• view all dashboards
• create, edit, and delete projects
• create, edit, and delete tasks
• manage users and team assignments
• access reports

Employee

• view assigned tasks
• update task progress
• comment on tasks
• use dashboard, search, notifications, and personal settings