Skip to main content

​
Overview

The Dashboard (/dashboard) is the primary landing page after authentication, providing a comprehensive overview of your organization’s compliance posture, suggested actions, and quick access to key features.
The dashboard is located at /app/(protected)/dashboard/page.tsx and uses the DashboardPage component.

​
Dashboard Layout

The dashboard is organized into distinct sections designed for quick comprehension and action: 
// apps/console/src/components/pages/protected/dashboard/dashboard-page.tsx
const DashboardPage: React.FC = () => {
  return (
    <div className="max-w-[1076px] mx-auto w-full px-4 flex flex-col gap-4">
      {/* Welcome Header */}
      <div>
        <p className="text-3xl">Welcome, {userData?.user?.displayName}!</p>
        <p className="text-muted-foreground">
          Here's what's happening in your organization.
        </p>
      </div>

      {/* Quick Actions */}
      <DashboardActions />
      
      {/* Compliance Overview */}
      <DashboardComplianceOverview />

      {/* Bottom Grid */}
      <div className="grid grid-cols-2 gap-4">
        <DashboardSuggestedActions />
        <DashboardViewDocumentation />
        <DashboardContactSupport />
      </div>
    </div>
  )
}

​
Dashboard Components

​
Welcome Section

Personalized greeting with the user’s display name pulled from session data:
1

Session Data Retrieval

const { data: sessionData } = useSession()
const userId = sessionData?.user?.userId
const { data: userData } = useGetCurrentUser(userId)
2

Display Name

Shows user’s display name: Welcome, {userData?.user?.displayName}!
3

Context Message

Provides context: “Here’s what’s happening in your organization.”

​
Dashboard Actions

Quick action buttons for common tasks:

Create Control

Navigate to control creation flow

Create Policy

Start a new internal policy

Create Procedure

Document a new procedure

Create Risk

Log a new organizational risk

Upload Evidence

Add compliance evidence

Create Program

Start a compliance program

​
Compliance Overview

Real-time compliance status across active programs: 
const { data, isLoading } = useGetAllPrograms({
  where: {
    statusNotIn: [
      ProgramProgramStatus.COMPLETED,
      ProgramProgramStatus.ARCHIVED
    ],
  },
})
Automatically filters out completed and archived programs to show only active compliance efforts.

​
Suggested Actions

AI-powered or rule-based recommendations for improving compliance posture:
  • Missing Controls: Identify gaps in control coverage
  • Evidence Needed: Controls requiring evidence
  • Policy Reviews: Policies due for review
  • Risk Assessments: Risks needing reassessment
  • Task Overdue: Past-due compliance tasks
When enabled with Google AI integration:
NEXT_PUBLIC_AI_SUGGESTIONS_ENABLED=true
GOOGLE_AI_PROJECT_ID=your-project-id
GOOGLE_AI_REGION=us-central1
GOOGLE_AI_MODEL_NAME=gemini-pro
GOOGLE_GENERATIVE_AI_API_KEY=your-api-key
The Console can provide intelligent recommendations based on:
  • Industry best practices
  • Compliance framework requirements
  • Organizational patterns and history
  • RAG-enhanced context from compliance documentation
Suggested actions are prioritized by:
  1. Critical: Compliance gaps that could affect audit readiness
  2. High: Important improvements with significant impact
  3. Medium: Recommended optimizations
  4. Low: Nice-to-have enhancements

​
View Documentation

Quick links to relevant documentation:
  • Getting started guides
  • Feature documentation
  • Compliance framework guides
  • API documentation
  • Video tutorials

​
Contact Support

Integrated support options:
When configured with DevRev:
DEVREV_AAT=your_devrev_token
Provides in-app chat support with your customer success team.

​
Data Flow

The dashboard fetches data from multiple sources:

​
GraphQL Queries

The dashboard uses TanStack Query with GraphQL: 
// Fetch all programs
const { data, isLoading } = useGetAllPrograms({
  where: {
    statusNotIn: [COMPLETED, ARCHIVED],
  },
})

// Fetch current user
const { data: userData } = useGetCurrentUser(userId)

// Real-time updates via GraphQL subscriptions
const GRAPHQL_ENDPOINT = process.env.NEXT_PUBLIC_API_GQL_URL!
Dashboard data is cached by TanStack Query and automatically revalidated on window focus or network reconnection.
The dashboard sets breadcrumb context: 
const { setCrumbs } = React.useContext(BreadcrumbContext)

useEffect(() => {
  setCrumbs([{ label: 'Home', href: '/dashboard' }])
}, [setCrumbs])
Breadcrumbs help users understand their location and navigate back: 
Home
Home > Controls
Home > Controls > SOC 2 Type II
Home > Controls > SOC 2 Type II > CC1.1

​
Loading States

The dashboard implements loading states for better UX: 
if (isLoading) return <Loading />

// apps/console/src/app/(protected)/dashboard/loading.tsx
const Loading = () => {
  return (
    <div className="flex items-center justify-center h-screen">
      <Spinner size="lg" />
    </div>
  )
}
Avoid blocking the entire dashboard while fetching data. Use skeleton loaders for individual sections to improve perceived performance.

​
Customization

​
Dashboard Widgets

Organizations can customize dashboard widgets based on:
  • User Role: Show different metrics for auditors vs. engineers
  • Organization Type: Industry-specific compliance metrics
  • Active Programs: Dynamically adjust based on compliance programs
  • User Preferences: Saved dashboard layouts and filters
Dashboard data can be filtered by: 
// URL query params
/dashboard?id=program_123              // Specific program
/dashboard?status=in_progress          // Program status
/dashboard?assignee=user_456           // Assigned to user

​
Performance Optimization

The dashboard is optimized for performance:
  • Parallel Queries: Multiple data sources fetched in parallel
  • Query Caching: TanStack Query caches results
  • Stale-While-Revalidate: Show cached data while fetching fresh data
  • Query Invalidation: Smart cache invalidation on mutations
  • useMemo: Expensive computations memoized
  • React 19: Automatic batching and concurrent features
  • Code Splitting: Dashboard components lazy-loaded
  • Image Optimization: Next.js Image component for logos/avatars
  • Tailwind CSS: Purged unused styles
  • Tree Shaking: Unused code eliminated
  • Dynamic Imports: Heavy components loaded on demand
  • Font Optimization: Next.js font optimization

​
Accessibility

The dashboard follows WCAG 2.1 AA standards:
  • Semantic HTML: Proper heading hierarchy
  • ARIA Labels: Screen reader support
  • Keyboard Navigation: Full keyboard access
  • Focus Management: Visible focus indicators
  • Color Contrast: Meets WCAG contrast ratios
  • Responsive Design: Mobile-friendly layouts

​
Next Steps

Compliance Features

Explore controls, policies, procedures, risks, and evidence

Organizations

Manage multiple organizations

API Integration

Integrate with dashboard APIs

Deployment

Configure dashboard for production

Build docs developers (and LLMs) love

Get started for freeTalk to us