Quper Web Application

The Quper web application is a modern, enterprise-grade observability dashboard built with Next.js 16 and React 19. It provides a comprehensive suite of tools for monitoring and optimizing Amazon Redshift clusters, managing costs, controlling access, and leveraging AI-powered insights.

Application Architecture

The application follows Next.js App Router conventions with a clear separation between public authentication routes and protected dashboard routes. The root layout wraps the entire application with Auth0 authentication and Sonner toast notifications.

/                           → Redirects to /auth/sign-in
/auth/sign-in               → Email/password login
/auth/sign-up               → Account creation
/auth/create-tenant         → Tenant onboarding
/auth/send-otp              → OTP-based password reset
/auth/sso-callback          → Auth0 OAuth callback
/(dashboard)/               → Protected routes (requires auth)
  /cost-and-usage           → FinOps analytics module
  /redshift-health          → Cluster health module
  /identity-and-access-management  → IAM module
  /monitoring               → Alerting module
  /vidura                   → AI chat module

Tech Stack

Design System

The application uses a sophisticated OKLCH-based color system with full dark mode support via next-themes. Colors are defined as CSS variables and toggled using Tailwind's dark: class prefix.

Color Tokens

Typography

The application uses Geist Sans (by Vercel) as the primary typeface and Geist Mono for code blocks, both loaded via Next.js font optimization.

Gradient Sidebar Pills

Active sidebar navigation items feature an animated gradient pill indicator using linear-gradient(90deg, #6366f1, #06b6d4, #10b981) — indigo → cyan → emerald — with a 3-second CSS animation cycle.

Modules

Authentication Flow

The application supports three authentication methods:

1. Email/Password — Direct credential authentication with JWT tokens stored in cookies
2. SSO via Auth0 — OAuth2 flow with Auth0 as the identity provider, supporting enterprise SSO
3. OTP Password Reset — Time-based OTP sent via email for password recovery

Upon successful authentication, the middleware validates the JWT token and routes the user to the appropriate tenant workspace. The SchemaContext stores the selected Redshift schema globally so all dashboard modules use the same database context.

Data Fetching Pattern

// Standard API response structure
type ApiResponse<T> = {
  success: boolean;
  data?: T;
  error?: string;
};

// Server action example (cost-and-usage)
async function fetchCostTrends(
  params: CostFilterParams
): Promise<ApiResponse<CostTrend[]>> {
  try {
    const response = await axios.get('/api/finops/trends', { params });
    return { success: true, data: response.data };
  } catch (error) {
    return { success: false, error: 'Failed to fetch cost trends' };
  }
}