Villeto

Overview

Villeto is the operating system for modern finance teams—unifying seven core products into one workflow: Cards, Expenses, Procurement Intake, Vendor Management, BillPay, and Ledger. As their Frontend Engineer, I engineered the entire frontend ecosystem across the primary dashboard (app.villeto.com), the vendor portal (vendors.villeto.com), and the high-conversion marketing landing page (villeto.com).

The Problem

Finance teams were struggling with fragmented workflows—managing procurement, vendor onboarding, invoice verification, and card expenses across 10 different disconnected tools. They needed a single, intuitive interface with strict controls (audit logs, policy-as-code approvals, and granular RBAC). The platform needed to handle complex data relationships securely without sacrificing performance or user experience.

Process

I built the applications using Next.js 16 (App Router) and TypeScript, ensuring strict type safety from API responses to UI components. Forms were centralized using React Hook Form and Zod to guarantee data integrity. I implemented optimistic UI updates and leveraged React Query's extensive caching to keep the dashboard feeling instantaneous. For onboarding, I integrated contextual Walkthroughs and Setup Guides.

Technical Deep-Dive

One major technical challenge was the advanced Role-Based Access Control (RBAC). I implemented a highly granular, resource-and-action-based permission system (e.g., `procurement.purchase_request.read_company`) where the UI automatically adapts and gates views or actions based on the user's explicit capabilities and department scope. I also built a custom optimistic update hook for transaction states, utilizing a Set of pending IDs to reflect card operations immediately.

Code Sample

Resource-and-action-based RBAC Gate component — automatically adapts the UI based on explicit user capabilities.

// components/auth/RoleGate.tsx — from Villeto codebase
import { useAuthStore } from '@/stores/authStore';
import type { PermissionNode } from '@/lib/types/auth';

interface RoleGateProps {
  /** e.g., 'procurement.purchase_request.read_company' */
  permission: PermissionNode;
  children: React.ReactNode;
  fallback?: React.ReactNode;
}

export function RoleGate({ permission, children, fallback = null }: RoleGateProps) {
  // Zustand store contains a pre-computed Set of permissions for O(1) lookups
  const permissions = useAuthStore((state) => state.permissions);
  const isSuperAdmin = useAuthStore((state) => state.isSuperAdmin);
  
  const hasAccess = isSuperAdmin || permissions.has(permission);

  if (!hasAccess) {
    return <>{fallback}</>;
  }

  return <>{children}</>;
}

Results