Chazy Web Dashboard: The Missing Link of Automation

The Challenge: The Operational Void

Initially, Chazy (see the case study) was conceived as a purely "Headless" solution.
The vision was elegant:

zero interface, absolute automation

However, as we moved from concept to reality, I identified a critical flaw in the headless approach. It wasn't just about user comfort; it was an operational dead end. The initial requirements overlooked basic functional necessities:

• Connectivity: Where does a user securely authorize the Xero connection via OAuth?
• Configuration: Where does the client set up billing or manage API keys?
• Context Switching: How does an accountant who works 50% for a firm and 50% as a freelancer switch between their employer's data and their private practice?

We realized that an "invisible" engine still needs a cockpit. Without a dedicated interface to manage these complex relationships, Chazy was just a script, not a scalable SaaS product.

🛠 The Solution: A Control Center, Not Just an Admin Panel

I built the Chazy Web Dashboard to fill this gap, creating a centralized hub for authentication, configuration, and control.

1. Architecting for Multi-Tenancy (Workspace Management)

The system needed to support complex real-world scenarios from Day 1.

• Seamless Context Switching: I designed a workspace architecture that allows a single user identity to belong to multiple organizations with different permissions. This solved the "Freelancer vs. Employee" dilemma, allowing users to toggle contexts instantly without logging out.

  

• Centralized Integration Hub: The dashboard serves as the secure anchor for OAuth flows (Xero, Google), managing token lifecycles and permissions in a way that a headless script never could.

2. Humanizing the AI (Agent Onboarding)

Once the operational layer was secured, we focused on adoption. We decided to treat the bot setup like a hiring process.

• Generative Persona: Users "onboard" their agent by selecting a personality—from a "Strict Auditor" to a "Friendly Assistant."
• Technical Execution: I implemented a custom randomizer and complex transition animations to visualize changes in real-time. As the user adjusts settings, they immediately see how the agent's email drafting style shifts.

3. Explainable AI & Trust

In Fintech, "magic" is dangerous. If a document is matched, the accountant needs to verify the logic.

• Transparent Scoring: I built a visual scoring system that exposes the backend’s decision-making. Users can see specific "Match Reasons" (e.g., Match by Amount & Date vs. Semantic Match).
• Visual Logic: The UI actively flags documents for fraud or compliance risks using clear badges, exposing the underlying data analysis without requiring the user to dig into logs.

🏗 Engineering & Infrastructure

To balance the heavy functional requirements with low maintenance:

• Bleeding Edge Stack: The frontend is built on Vue 3 and Tailwind CSS 4.0. Adopting version 4.0 early allowed for significant bundle size optimization and access to the latest CSS engine features.
• Zero-Config Deployment: I set up the frontend on Cloudflare Pages. This provides global edge caching and instant CI/CD. A git push automatically builds and distributes the new version worldwide in seconds, removing the need for the client to manage any DevOps infrastructure.

🚀 Business Outcomes

The dashboard transformed Chazy from an internal utility into a marketable platform.