Dashboard

api.getDashboard(token: string): Promise<DashboardData>

GET /api/v1/dashboard

interface DashboardData {
  total_employees: number
  new_hire_count: number
  upcoming_event: number
  open_positions: number
}

{
  "success": true,
  "data": {
    "total_employees": 150,
    "new_hire_count": 5,
    "upcoming_event": 3,
    "open_positions": 8
  }
}

return {
  total_employees: data.total_employees ?? 0,
  new_hire_count: data.new_hire_count ?? 0,
  upcoming_event: data.upcoming_event ?? 0,
  open_positions: data.open_positions ?? 0,
}

import { api } from '@/lib/api'
import { auth } from '@/lib/auth'

const token = auth.getToken()

if (token) {
  try {
    const dashboard = await api.getDashboard(token)
    
    console.log('Dashboard Metrics:')
    console.log(`Total Employees: ${dashboard.total_employees}`)
    console.log(`New Hires: ${dashboard.new_hire_count}`)
    console.log(`Upcoming Events: ${dashboard.upcoming_event}`)
    console.log(`Open Positions: ${dashboard.open_positions}`)
  } catch (error) {
    console.error('Failed to fetch dashboard:', error.message)
  }
}

{
  "total_employees": 150,
  "new_hire_count": 5,
  "upcoming_event": 3,
  "open_positions": 8
}

import { useState, useEffect } from 'react'
import { api } from '@/lib/api'
import { auth } from '@/lib/auth'
import type { DashboardData } from '@/lib/api'

export default function DashboardStats() {
  const [data, setData] = useState<DashboardData | null>(null)
  const [loading, setLoading] = useState(true)
  
  useEffect(() => {
    const fetchDashboard = async () => {
      const token = auth.getToken()
      if (token) {
        try {
          const dashboard = await api.getDashboard(token)
          setData(dashboard)
        } catch (error) {
          console.error('Error:', error)
        } finally {
          setLoading(false)
        }
      }
    }
    
    fetchDashboard()
  }, [])
  
  if (loading) return <div>Loading...</div>
  if (!data) return <div>No data available</div>
  
  return (
    <div>
      <StatCard title="Total Employees" value={data.total_employees} />
      <StatCard title="New Hires" value={data.new_hire_count} />
      <StatCard title="Upcoming Events" value={data.upcoming_event} />
      <StatCard title="Open Positions" value={data.open_positions} />
    </div>
  )
}

try {
  const dashboard = await api.getDashboard(token)
} catch (error) {
  if (error.message.includes('401')) {
    // Token expired, redirect to login
    auth.clearSession()
    window.location.href = '/login'
  } else {
    // Handle other errors
    console.error('Dashboard error:', error.message)
  }
}