Overview
A comprehensive web platform that automates the end-to-end billing workflow for managing 47+ external collaborators—from time tracking to invoice processing. The system integrates with Teamwork and Google Sheets, using AI agents to reduce manual work by 80%+.
The Problem
Project managers spent 10-15 hours monthly on manual tasks:
- Extracting time logs from Teamwork
- Creating purchase orders for each collaborator
- Tracking invoice submissions and sending reminders
- Managing multiple client billing cycles (15th vs. 21st cutoffs)
- Reconciling data across disconnected systems
Result: Missed deadlines, payment delays, and frustrated freelancers.
The Solution
An integrated platform with 39 pages across 5 core modules:
1. Collaborator Management – Centralized directory with multi-language proficiency tracking, rate cards, and complete history
2. Automated Time Tracking – Teamwork API integration with bulk import, real-time calculations, and Google Sheets sync
3. Purchase Order System – Auto-generation from approved time logs, approval workflows, and email notifications
4. Invoice Management – File upload portal with automated validation, review workflows, and acknowledgment emails
5. AI Agent Automation – Five specialized agents handling validation, monitoring, communication, and data synchronization
My Role
Product Designer & Full-Stack Developer
Design & Architecture
- Conducted stakeholder interviews and workflow analysis
- Designed information architecture for 39 pages with role-based access (5 user levels)
- Created wireframes for all interfaces including complex table designs and multi-step forms
- Researched industry standards for language proficiency UI patterns
- Defined database schema with 15+ tables for Supabase (PostgreSQL)
Development
- Built full-stack application using Next.js 14, TypeScript, React, and Tailwind CSS
- Implemented Supabase for authentication, database, and row-level security
- Integrated Teamwork API V3 for automated time log import
- Connected Google Sheets API for data validation and sync
- Developed SendGrid email automation for notifications and reminders
- Created AI agent workflows using LangGraph + Claude 4 (Sonnet 4.5)
- Implemented scheduled jobs for monthly billing cycle automation
- Built mobile-responsive interfaces with real-time notifications
Project Management
- Created 12-week development roadmap (MVP → Full Workflow → AI Automation)
- Prioritized features and managed sprint planning
- Wrote comprehensive technical specifications (100+ pages)
Key Features
✅ Automated time log import from Teamwork API ✅ Google Sheets sync for data validation ✅ Auto-generated purchase orders with approval workflows ✅ Invoice upload and review system with validation ✅ AI agents for anomaly detection, deadline monitoring, and communication ✅ Multi-language proficiency tracking (5 standard levels) ✅ Project-specific rate cards and billing cycles ✅ Role-based dashboards (superadmin, admin, lead, collaborator, officer) ✅ Real-time notifications and deadline alerts ✅ Complete audit trail from time entry to payment
Technology Stack
Frontend: Next.js 14, React 18, TypeScript, Tailwind CSS Backend: Next.js API Routes, Node.js Database: Supabase (PostgreSQL) Authentication: Supabase Auth with RLS Integrations: Teamwork API V3, Google Sheets API, SendGrid AI/Agents: LangGraph, Anthropic Claude 4 (Sonnet 4.5) Deployment: Vercel, Railway Monitoring: Sentry
Key Design Decisions
Language Proficiency UI: Adopted LinkedIn’s industry-standard 5-level system (Native, Full Professional, Professional Working, Limited Working, Elementary) over custom translation-pair approach after UX research
Table Design: 10-column Collaborator Directory with progressive disclosure—compact view for scanning, expandable details on demand
Automation Timing: Scheduled time log sync for days 18-21 to balance accuracy with billing deadline (21st cutoff)
AI Agent Architecture: Five specialized agents rather than one monolithic system for better error handling and maintainability
Deliverables
✅ 39-page wireframe set with complete user journeys ✅ Database schema and technical specifications ✅ Full-stack web application (deployed) ✅ AI agent workflows with 5 specialized agents ✅ API integrations (Teamwork, Google Sheets, SendGrid) ✅ 12-week development roadmap ✅ Component library and design system ✅ User documentation and training materials