Hour Cap Time Tracking & Billing SaaS Application

Overview

Hour Cap is a SaaS time tracking and billing application designed for freelancers, consultants, and small teams who need a streamlined way to track billable hours and send invoices through Xero. The platform combines real-time time tracking with retainer budget management, team collaboration, and direct Xero invoicing to eliminate manual billing workflows.

Built from the ground up as a Laravel 12 application using Livewire 4 for reactive UI components, Flux UI for the design system, and Tailwind CSS 4 for styling, the platform delivers an SPA-like experience with persistent timers and smooth page transitions. Stripe subscriptions power the three-tier pricing model with per-seat billing for growing teams.

Challenges

1. Disconnected Billing Workflows
   Most freelancers and small teams track their time in one tool, then manually re-enter that data into Xero to create invoices. This double-handling wastes time, introduces errors, and delays billing cycles. The platform needed to bridge the gap between time tracking and invoicing with a direct, automated connection to Xero.

2. Retainer Budget Visibility
   Teams managing retainer clients often lose track of how many hours remain in a billing period. Without real-time visibility into budget consumption, projects risk going over budget before anyone notices. The solution needed to provide automatic period calculations and proactive alerts across weekly, monthly, quarterly, and custom billing cycles.

3. Multi-Tenant Team Collaboration
   Supporting teams of varying sizes, from solo freelancers to growing agencies, required a flexible architecture. The platform needed role-based access control, per-member billing rates, timesheet approval workflows, and the ability for a single user to belong to multiple organisations. Per-seat pricing also needed to scale dynamically as teams grew.

4. Tiered Feature Gating
   Monetising the platform required a subscription model that offered a generous free tier while gating advanced features behind paid plans. The challenge was implementing plan-aware feature gating across routes, UI components, and business logic without creating a fragmented user experience.

Solution

1. Real-Time Timer and Manual Time Entry
   A persistent timer widget allows users to start, stop, and track time from anywhere in the application. The timer persists across page navigations via SPA-like transitions using wire:navigate. For retroactive logging, manual entry supports natural language duration parsing (e.g., "1h30m", "1:30", "8h") with date selection, billable status toggling, and multi-line descriptions that flow directly onto invoices.

2. Xero-First Invoicing Pipeline
   A multi-step invoice creation flow lets users select time entries by date range, retainer period, or fixed-budget project, then configure Xero-specific settings including line item grouping (per entry, project, date, or team member), account codes, tax types, branding themes, and tracking categories. Invoices are pushed to Xero asynchronously via queued jobs with automatic retry logic and error tracking. The full OAuth2 connection flow includes token auto-refresh, encrypted credential storage, and a guided setup wizard for first-time connections.

3. Retainer Budget Management
   Configurable retainers automatically calculate billing period boundaries based on an anchor date and period type (weekly, fortnightly, monthly, quarterly, or custom N-day cycles). Real-time progress tracking shows hours used versus budgeted hours, percentage consumed, and days remaining. Configurable alert thresholds trigger visual warnings on the dashboard, and retainer cards are sorted by urgency so the most critical budgets surface first.

4. Role-Based Team Management
   A four-tier role hierarchy (Owner, Administrator, Manager, Employee) controls access across the platform. Policies enforce organisation-scoped authorisation, ensuring users can only access data within their active organisation. Per-member billable rates override project and organisation defaults through a cascading rate resolution system (project rate, then member rate, then organisation default). Members can be invited via email with role selection, and the invitation system respects plan-based seat limits.

5. Timesheet Approval Workflow
   For teams requiring oversight, a configurable approval workflow routes time entries through submission and review stages. Managers can approve or reject weekly timesheets with optional rejection reasons. Approved entries are locked from editing and become eligible for invoicing, while pending entries are protected from modification. The workflow is configured per-member with a designated approver, giving teams fine-grained control over who reviews whose timesheets.

6. Multi-Organisation Architecture
   Users can belong to multiple organisations via membership records, switching between them seamlessly. Each organisation maintains isolated data with cascade deletes on all foreign keys. Middleware automatically routes users to a valid organisation or prompts creation if none exist. This architecture supports freelancers who work across multiple clients or agencies.

7. Subscription Billing with Per-Seat Pricing
   Three plan tiers (Free, Team, Business) are managed through Laravel Cashier with Stripe. Each plan includes a base allocation of users, with additional seats billed automatically as team members are added or removed. Feature gating is enforced at the route, policy, and UI levels using a Feature enum that maps capabilities to minimum plan tiers. Blade directives and upgrade prompts provide contextual upsell opportunities without disrupting the user experience.

Key Features Implemented:

• Persistent real-time timer with SPA-like navigation
• Natural language duration parsing ("1h30m", "1:30", "8h")
• Full Xero OAuth2 integration with guided setup wizard
• Flexible invoice line item grouping (per entry, project, date, or member)
• Automatic Xero contact, item, and tracking category synchronisation
• Retainer budget tracking with configurable billing periods and alert thresholds
• Four-tier role hierarchy with organisation-scoped authorisation
• Timesheet approval workflow with submission tracking and entry locking
• Multi-organisation support with seamless switching
• Per-seat Stripe subscription billing with automatic quantity sync
• Activity logging with append-only audit trail
• Dashboard with weekly stats, activity heatmap, and retainer urgency sorting
• Report exports to Excel
• Two-factor authentication with TOTP and recovery codes
• Xero signup flow for frictionless onboarding
• Demo data seeding with guided onboarding tour
• Dark mode support across all pages

Results

1. Streamlined Billing Workflow
   By connecting time tracking directly to Xero invoicing, the platform eliminates manual data re-entry. Users select their time entries, configure invoice settings, and push to Xero in a single flow. Flexible grouping options let teams present invoices at the level of detail their clients expect, whether that is individual entries, project summaries, daily breakdowns, or per-member line items.

2. Proactive Budget Management
   Real-time retainer tracking with automatic period calculations and configurable alert thresholds gives teams visibility into budget consumption before problems arise. Dashboard urgency sorting surfaces the retainers that need attention first, helping prevent scope overruns and enabling proactive client conversations about budget adjustments.

3. Scalable Team Collaboration
   The multi-tenant architecture with role-based access control supports teams from solo freelancers through to growing agencies. Per-seat pricing scales dynamically, the approval workflow adds oversight without friction, and multi-organisation support accommodates users who work across different teams or clients.

4. Sustainable SaaS Monetisation
   The three-tier subscription model with feature gating provides a clear upgrade path. A generous free tier with full time tracking and a 30-day Business trial lets users experience the platform's value before committing. Plan-aware UI elements guide users toward the features that match their needs, creating natural upgrade moments without hard walls.

5. Production-Ready Platform
   Built on Laravel 12 with Livewire 4, the application delivers a modern, reactive user experience with persistent timers, smooth page transitions, and real-time updates. Comprehensive test coverage, queued job processing with automatic retries, encrypted credential storage, and two-factor authentication provide the reliability and security expected of a production SaaS platform.

Project Services Breakdown

• Full-Stack Web Application Development
• SaaS Architecture & Multi-Tenancy
• Xero API Integration (OAuth2, Invoicing, Webhooks)
• Stripe Subscription Billing (Laravel Cashier)
• UI/UX Design with Flux UI & Tailwind CSS 4
• Role-Based Access Control & Authorisation
• Queue-Based Job Processing
• Automated Testing & CI/CD

Technology Stack: Laravel 12, Livewire 4, Flux UI, Tailwind CSS 4, Alpine.js, Stripe (Laravel Cashier), Xero OAuth2 API, SQLite/PostgreSQL, Redis, Laravel Excel, GitHub Actions

Services provided

Website URL

https://hourcap.com