Building a Real-Time Tech Layoff Tracker with Next.js and the WARN Act API

Oracle just announced 30,000 layoffs. The same Oracle that committed $50 billion to AI data center infrastructure in 2025. The same Oracle whose CEO stood on stage at CloudWorld and declared that AI would "transform every business process on the planet." Transformation arrived. It started with Oracle's own workforce.

This is not an isolated event. Microsoft cut 6,000. Google restructured 12,000 roles around AI priorities. Amazon quietly let go of 8,500 across AWS and Alexa. SAP shed 10,000 positions while doubling its AI R&D budget. The pattern is unmistakable: the companies spending the most on AI are cutting the most humans. We explored this trajectory in our deep dive on the AI workforce replacement timeline and what it means for enterprise transformation.

The data is all public. Every state in the US requires companies with 100 or more employees to file a WARN Act notice 60 days before mass layoffs. These filings are public records. They contain the company name, location, number of affected workers, and the planned layoff date. It is a goldmine of structured data hiding in plain sight across dozens of state government websites.

Today we are going to build a real-time tech layoff tracking dashboard that aggregates WARN Act data, normalizes it, and presents it in a clean, searchable interface. We will use Next.js 15 with React Server Components, TypeScript, Recharts for visualization, and Tailwind CSS for styling. The end result is a production-ready application you can deploy to Vercel in minutes.

The companion code for this tutorial lives at github.com/CrashBytes/ByteSizedExamples. Clone it and follow along, or build from scratch — your call.

What We Are Building

Our layoff tracker dashboard has five core features:

1. Aggregate Statistics — Total layoffs, top companies, affected states, sector breakdowns
2. Company Breakdown — Sortable table with layoff counts per company, filterable by date range
3. Trend Visualization — Line and bar charts showing layoff trends over time
4. Search and Filter — Real-time search by company name, state, or sector
5. WARN Act Details — Drill into individual WARN Act filings with full details

The architecture follows a straightforward pattern. Server components fetch and aggregate WARN Act data at the edge. Client components handle interactivity — search, filtering, and chart tooltips. ISR ensures the data stays fresh without hammering upstream data sources on every request.

Understanding WARN Act Data

The Worker Adjustment and Retraining Notification (WARN) Act is a federal law enacted in 1988. It requires employers with 100 or more employees to provide 60 calendar days advance written notice of a plant closing or mass layoff affecting 50 or more workers at a single site of employment.

Every state maintains its own database of WARN Act filings. Some states have excellent APIs. California's Employment Development Department publishes structured CSV data. New York has a searchable online database. Texas provides downloadable spreadsheets. Others are trapped in PDFs that require parsing.

A typical WARN Act filing contains these fields:

| Field | Description | Example | | ------------------- | ---------------------------------------- | ------------------------------------ | | Company Name | Legal entity name | Oracle America, Inc. | | Notice Date | Date the WARN notice was filed | 2026-01-15 | | Effective Date | Date layoffs begin | 2026-03-15 | | Number of Employees | Workers affected at this location | 450 | | Layoff/Closure | Whether this is a layoff or full closure | Layoff | | Address | Physical location of affected site | 500 Oracle Parkway, Redwood City, CA | | County | County of the affected location | San Mateo | | Industry | NAICS code or description | Software Publishers |

The challenge is normalization. "Oracle America, Inc." and "Oracle Corporation" and "Oracle Cloud Infrastructure" are all Oracle. "Alphabet Inc." and "Google LLC" and "Google Cloud" are all Google. Our data layer will need a company normalization map.

For this tutorial, we will focus on California's data as our primary source, since it has the richest tech sector WARN filings and provides clean CSV exports. The architecture supports adding more states — you just add a new fetcher that conforms to our data interface.

Project Setup

Let us start from scratch with a fresh Next.js 15 project.

npx create-next-app@latest layoff-tracker --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd layoff-tracker

Install our dependencies:

npm install recharts date-fns papaparse
npm install -D @types/papaparse

Here is what each dependency does:

• recharts — React charting library built on D3. Composable, responsive, and works great with server-rendered data.
• date-fns — Lightweight date utility library. We need it for date range filtering and formatting.
• papaparse — CSV parser that handles the messy reality of government CSV files (inconsistent quoting, BOM markers, encoding issues).

Now set up our project structure:

src/
├── app/
│   ├── page.tsx                    # Dashboard home
│   ├── layout.tsx                  # Root layout
│   ├── company/[slug]/page.tsx     # Company detail page
│   └── api/
│       └── layoffs/route.ts        # API endpoint for external consumers
├── components/
│   ├── dashboard/
│   │   ├── StatsOverview.tsx       # Top-level stat cards
│   │   ├── CompanyTable.tsx        # Sortable company breakdown
│   │   ├── TrendChart.tsx          # Layoff trends over time
│   │   ├── SectorBreakdown.tsx     # Pie chart by sector
│   │   └── StateMap.tsx            # Geographic distribution
│   ├── filters/
│   │   ├── SearchBar.tsx           # Company/keyword search
│   │   ├── DateRangeFilter.tsx     # Date range picker
│   │   └── StateFilter.tsx         # State multi-select
│   └── charts/
│       ├── LayoffBarChart.tsx      # Reusable bar chart wrapper
│       ├── LayoffLineChart.tsx     # Reusable line chart wrapper
│       └── LayoffPieChart.tsx      # Reusable pie chart wrapper
├── lib/
│   ├── types.ts                    # TypeScript interfaces
│   ├── warn-fetcher.ts            # WARN Act data fetching
│   ├── normalizer.ts              # Company name normalization
│   ├── aggregator.ts              # Data aggregation utilities
│   └── constants.ts               # Company mappings, color schemes
└── styles/
    └── globals.css                 # Tailwind + custom styles

Data Layer — Types and Interfaces

Let us start with our TypeScript types. This is the foundation everything else builds on.

// src/lib/types.ts

export interface WarnNotice {
  id: string
  companyName: string
  normalizedCompany: string
  noticeDate: Date
  effectiveDate: Date
  numberOfEmployees: number
  layoffOrClosure: 'layoff' | 'closure'
  address: string
  city: string
  state: string
  county: string
  industry: string
  naicsCode?: string
}

export interface CompanyAggregate {
  name: string
  slug: string
  totalLayoffs: number
  filingCount: number
  states: string[]
  latestNotice: Date
  earliestNotice: Date
  sector: string
}

export interface SectorAggregate {
  sector: string
  totalLayoffs: number
  companyCount: number
  percentage: number
}

export interface StateAggregate {
  state: string
  stateCode: string
  totalLayoffs: number
  filingCount: number
  topCompany: string
}

export interface MonthlyTrend {
  month: string
  layoffs: number
  filings: number
  avgPerFiling: number
}

export interface DashboardData {
  totalLayoffs: number
  totalFilings: number
  companiesAffected: number
  statesAffected: number
  companies: CompanyAggregate[]
  sectors: SectorAggregate[]
  states: StateAggregate[]
  trends: MonthlyTrend[]
  notices: WarnNotice[]
  lastUpdated: Date
}

export interface FilterState {
  search: string
  states: string[]
  dateRange: {
    start: Date | null
    end: Date | null
  }
  sector: string | null
  sortBy: 'layoffs' | 'date' | 'company'
  sortOrder: 'asc' | 'desc'
}

Every field is typed. Every aggregate has a clear purpose. The FilterState interface mirrors exactly what the UI needs for search and filtering. This is how production TypeScript should look — no any types, no loose strings where unions belong.

Fetching WARN Act Data

Now the interesting part. We need to fetch actual WARN Act CSV data from California's Employment Development Department and parse it into our typed interfaces.

// src/lib/warn-fetcher.ts

import Papa from 'papaparse'
import { WarnNotice } from './types'
import { normalizeCompanyName } from './normalizer'

const CA_WARN_URL =
  'https://edd.ca.gov/siteassets/files/jobs_and_training/warn/warn_report.csv'

interface RawWarnRow {
  'Notice Date': string
  'Effective Date': string
  'Received Date': string
  Company: string
  'City ': string
  'No. Of Employees': string
  'Layoff/Closure': string
  County: string
  Industry: string
}

function generateId(row: RawWarnRow, index: number): string {
  const company =
    row.Company?.trim().toLowerCase().replace(/\s+/g, '-') ?? 'unknown'
  const date = row['Notice Date']?.trim().replace(/\//g, '-') ?? 'no-date'
  return `ca-${company}-${date}-${index}`
}

function parseDate(dateStr: string): Date {
  if (!dateStr || dateStr.trim() === '') return new Date()

  const trimmed = dateStr.trim()

  // Handle MM/DD/YYYY format
  const parts = trimmed.split('/')
  if (parts.length === 3) {
    const month = parseInt(parts[0], 10) - 1
    const day = parseInt(parts[1], 10)
    const year = parseInt(parts[2], 10)
    return new Date(year, month, day)
  }

  // Fallback to native parsing
  return new Date(trimmed)
}

function parseEmployeeCount(value: string): number {
  if (!value) return 0
  const cleaned = value
    .trim()
    .replace(/,/g, '')
    .replace(/[^0-9]/g, '')
  const parsed = parseInt(cleaned, 10)
  return isNaN(parsed) ? 0 : parsed
}

export async function fetchCaliforniaWarnData(): Promise<WarnNotice[]> {
  const response = await fetch(CA_WARN_URL, {
    next: { revalidate: 3600 }, // Cache for 1 hour
  })

  if (!response.ok) {
    throw new Error(
      `Failed to fetch CA WARN data: ${response.status} ${response.statusText}`
    )
  }

  const csvText = await response.text()

  return new Promise((resolve, reject) => {
    Papa.parse<RawWarnRow>(csvText, {
      header: true,
      skipEmptyLines: true,
      transformHeader: header => header.trim(),
      complete: results => {
        const notices: WarnNotice[] = results.data
          .map((row, index) => ({
            id: generateId(row, index),
            companyName: row.Company?.trim() ?? 'Unknown',
            normalizedCompany: normalizeCompanyName(row.Company?.trim() ?? ''),
            noticeDate: parseDate(row['Notice Date']),
            effectiveDate: parseDate(row['Effective Date']),
            numberOfEmployees: parseEmployeeCount(row['No. Of Employees']),
            layoffOrClosure: (row['Layoff/Closure']?.trim().toLowerCase() ===
            'closure'
              ? 'closure'
              : 'layoff') as 'layoff' | 'closure',
            address: '',
            city: row['City ']?.trim() ?? row['City']?.trim() ?? '',
            state: 'CA',
            county: row.County?.trim() ?? '',
            industry: row.Industry?.trim() ?? 'Unknown',
            naicsCode: undefined,
          }))
          .filter(notice => notice.numberOfEmployees > 0)

        resolve(notices)
      },
      error: (error: Error) => {
        reject(new Error(`CSV parse error: ${error.message}`))
      },
    })
  })
}

A few important details in that code. First, we use PapaParse's header: true option so each row becomes an object keyed by column headers. Second, California's CSV has a trailing space in the "City " column header — that transformHeader trim handles it. Third, we filter out rows with zero employees because some WARN filings are amendments or corrections.

The next: { revalidate: 3600 } in the fetch call is Next.js ISR at work. The data gets cached at the edge for one hour, then revalidated in the background on the next request.

Company Name Normalization

This is where real-world data gets messy. A single company might file WARN notices under a dozen different legal entity names. We need a normalization layer.

// src/lib/normalizer.ts

const COMPANY_MAP: Record<string, string> = {
  // Oracle entities
  'oracle america': 'Oracle',
  'oracle corporation': 'Oracle',
  'oracle cloud infrastructure': 'Oracle',
  'oracle financial services': 'Oracle',
  'oracle health': 'Oracle',

  // Google / Alphabet
  'google llc': 'Google',
  'google cloud': 'Google',
  'alphabet inc': 'Google',
  alphabet: 'Google',
  'waymo llc': 'Waymo (Alphabet)',
  'youtube llc': 'Google',
  'verily life sciences': 'Verily (Alphabet)',

  // Microsoft
  'microsoft corporation': 'Microsoft',
  'microsoft mobile': 'Microsoft',
  'linkedin corporation': 'Microsoft (LinkedIn)',
  'github inc': 'Microsoft (GitHub)',

  // Amazon
  'amazon.com services': 'Amazon',
  'amazon web services': 'Amazon (AWS)',
  'amazon.com llc': 'Amazon',
  'whole foods market': 'Amazon (Whole Foods)',
  'ring llc': 'Amazon (Ring)',
  'twitch interactive': 'Amazon (Twitch)',

  // Meta
  'meta platforms': 'Meta',
  'facebook inc': 'Meta',
  'instagram llc': 'Meta',
  'whatsapp llc': 'Meta',
  'oculus vr': 'Meta',

  // Apple
  'apple inc': 'Apple',

  // Salesforce
  'salesforce.com': 'Salesforce',
  'salesforce inc': 'Salesforce',
  'slack technologies': 'Salesforce (Slack)',
  'tableau software': 'Salesforce (Tableau)',

  // SAP
  'sap america': 'SAP',
  'sap labs': 'SAP',
  'sap se': 'SAP',
  'concur technologies': 'SAP (Concur)',

  // Intel
  'intel corporation': 'Intel',
  'intel federal': 'Intel',
  mobileye: 'Intel (Mobileye)',

  // Cisco
  'cisco systems': 'Cisco',
  'cisco meraki': 'Cisco',

  // Dell
  'dell technologies': 'Dell',
  'dell inc': 'Dell',
  'vmware inc': 'Dell (VMware)',
  'vmware llc': 'Dell (VMware)',
}

const SECTOR_MAP: Record<string, string> = {
  'software publishers': 'Software',
  'computer systems design': 'IT Services',
  'data processing': 'Cloud/Data',
  semiconductor: 'Hardware',
  'electronic computer manufacturing': 'Hardware',
  'web search portals': 'Internet',
  'internet publishing': 'Internet',
  telecommunications: 'Telecom',
  'computer and peripheral equipment': 'Hardware',
  'other information services': 'IT Services',
}

export function normalizeCompanyName(raw: string): string {
  const lower = raw.toLowerCase().trim()

  // Check exact matches first
  if (COMPANY_MAP[lower]) {
    return COMPANY_MAP[lower]
  }

  // Check partial matches
  for (const [pattern, normalized] of Object.entries(COMPANY_MAP)) {
    if (lower.includes(pattern)) {
      return normalized
    }
  }

  // Clean up common suffixes for unrecognized companies
  return raw
    .replace(/,?\s*(inc\.?|llc\.?|corp\.?|corporation|ltd\.?|l\.p\.?)$/i, '')
    .trim()
}

export function normalizeSector(raw: string): string {
  const lower = raw.toLowerCase().trim()

  for (const [pattern, normalized] of Object.entries(SECTOR_MAP)) {
    if (lower.includes(pattern)) {
      return normalized
    }
  }

  return raw || 'Other'
}

The normalization map is the secret weapon. Without it, your dashboard would show "Oracle America, Inc." and "Oracle Corporation" as completely separate companies, splitting Oracle's 30,000 layoffs across multiple entries. The sector map does the same for NAICS industry descriptions, collapsing dozens of granular categories into the six or seven that matter for a tech layoff tracker.

Data Aggregation

With types, fetching, and normalization in place, we need aggregation utilities that transform raw notices into dashboard-ready data.

// src/lib/aggregator.ts

import { format, parseISO, isAfter, isBefore, startOfMonth } from 'date-fns'
import {
  WarnNotice,
  CompanyAggregate,
  SectorAggregate,
  StateAggregate,
  MonthlyTrend,
  DashboardData,
} from './types'
import { normalizeSector } from './normalizer'

function slugify(name: string): string {
  return name
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-|-$/g, '')
}

export function aggregateByCompany(notices: WarnNotice[]): CompanyAggregate[] {
  const map = new Map<
    string,
    {
      totalLayoffs: number
      filingCount: number
      states: Set<string>
      latestNotice: Date
      earliestNotice: Date
      industries: string[]
    }
  >()

  for (const notice of notices) {
    const key = notice.normalizedCompany
    const existing = map.get(key)

    if (existing) {
      existing.totalLayoffs += notice.numberOfEmployees
      existing.filingCount += 1
      existing.states.add(notice.state)
      existing.industries.push(notice.industry)
      if (isAfter(notice.noticeDate, existing.latestNotice)) {
        existing.latestNotice = notice.noticeDate
      }
      if (isBefore(notice.noticeDate, existing.earliestNotice)) {
        existing.earliestNotice = notice.noticeDate
      }
    } else {
      map.set(key, {
        totalLayoffs: notice.numberOfEmployees,
        filingCount: 1,
        states: new Set([notice.state]),
        latestNotice: notice.noticeDate,
        earliestNotice: notice.noticeDate,
        industries: [notice.industry],
      })
    }
  }

  return Array.from(map.entries())
    .map(([name, data]) => ({
      name,
      slug: slugify(name),
      totalLayoffs: data.totalLayoffs,
      filingCount: data.filingCount,
      states: Array.from(data.states),
      latestNotice: data.latestNotice,
      earliestNotice: data.earliestNotice,
      sector: normalizeSector(mostCommon(data.industries)),
    }))
    .sort((a, b) => b.totalLayoffs - a.totalLayoffs)
}

export function aggregateBySector(
  companies: CompanyAggregate[]
): SectorAggregate[] {
  const map = new Map<string, { totalLayoffs: number; companyCount: number }>()

  for (const company of companies) {
    const sector = company.sector
    const existing = map.get(sector)

    if (existing) {
      existing.totalLayoffs += company.totalLayoffs
      existing.companyCount += 1
    } else {
      map.set(sector, {
        totalLayoffs: company.totalLayoffs,
        companyCount: 1,
      })
    }
  }

  const totalLayoffs = companies.reduce((sum, c) => sum + c.totalLayoffs, 0)

  return Array.from(map.entries())
    .map(([sector, data]) => ({
      sector,
      totalLayoffs: data.totalLayoffs,
      companyCount: data.companyCount,
      percentage: Math.round((data.totalLayoffs / totalLayoffs) * 100),
    }))
    .sort((a, b) => b.totalLayoffs - a.totalLayoffs)
}

export function aggregateByState(notices: WarnNotice[]): StateAggregate[] {
  const map = new Map<
    string,
    {
      totalLayoffs: number
      filingCount: number
      companies: Map<string, number>
    }
  >()

  for (const notice of notices) {
    const existing = map.get(notice.state)

    if (existing) {
      existing.totalLayoffs += notice.numberOfEmployees
      existing.filingCount += 1
      const companyCount = existing.companies.get(notice.normalizedCompany) ?? 0
      existing.companies.set(
        notice.normalizedCompany,
        companyCount + notice.numberOfEmployees
      )
    } else {
      const companies = new Map<string, number>()
      companies.set(notice.normalizedCompany, notice.numberOfEmployees)
      map.set(notice.state, {
        totalLayoffs: notice.numberOfEmployees,
        filingCount: 1,
        companies,
      })
    }
  }

  return Array.from(map.entries())
    .map(([state, data]) => {
      let topCompany = ''
      let topCount = 0
      for (const [company, count] of data.companies) {
        if (count > topCount) {
          topCompany = company
          topCount = count
        }
      }
      return {
        state,
        stateCode: state,
        totalLayoffs: data.totalLayoffs,
        filingCount: data.filingCount,
        topCompany,
      }
    })
    .sort((a, b) => b.totalLayoffs - a.totalLayoffs)
}

export function aggregateByMonth(notices: WarnNotice[]): MonthlyTrend[] {
  const map = new Map<string, { layoffs: number; filings: number }>()

  for (const notice of notices) {
    const monthKey = format(startOfMonth(notice.noticeDate), 'yyyy-MM')
    const existing = map.get(monthKey)

    if (existing) {
      existing.layoffs += notice.numberOfEmployees
      existing.filings += 1
    } else {
      map.set(monthKey, {
        layoffs: notice.numberOfEmployees,
        filings: 1,
      })
    }
  }

  return Array.from(map.entries())
    .map(([month, data]) => ({
      month: format(new Date(month + '-01'), 'MMM yyyy'),
      layoffs: data.layoffs,
      filings: data.filings,
      avgPerFiling: Math.round(data.layoffs / data.filings),
    }))
    .sort((a, b) => a.month.localeCompare(b.month))
}

export function buildDashboardData(notices: WarnNotice[]): DashboardData {
  const companies = aggregateByCompany(notices)
  const sectors = aggregateBySector(companies)
  const states = aggregateByState(notices)
  const trends = aggregateByMonth(notices)

  const uniqueStates = new Set(notices.map(n => n.state))

  return {
    totalLayoffs: notices.reduce((sum, n) => sum + n.numberOfEmployees, 0),
    totalFilings: notices.length,
    companiesAffected: companies.length,
    statesAffected: uniqueStates.size,
    companies,
    sectors,
    states,
    trends,
    notices,
    lastUpdated: new Date(),
  }
}

function mostCommon(arr: string[]): string {
  const counts = new Map<string, number>()
  for (const item of arr) {
    counts.set(item, (counts.get(item) ?? 0) + 1)
  }
  let maxCount = 0
  let maxItem = arr[0] ?? 'Unknown'
  for (const [item, count] of counts) {
    if (count > maxCount) {
      maxCount = count
      maxItem = item
    }
  }
  return maxItem
}

The aggregation layer does the heavy lifting. It takes a flat list of WARN notices and produces the four views our dashboard needs: company breakdown, sector analysis, state distribution, and monthly trends. Each aggregator returns data sorted by the most relevant metric — layoffs for companies, percentage for sectors, total for states, and chronological order for trends.

Notice the mostCommon utility function at the bottom. When a company files multiple WARN notices across different industry categories, we pick the most frequently reported category. Oracle might have filings tagged as "Software Publishers," "Data Processing," and "Computer Systems Design" — we want the most common one.

Server Components for Data

This is where Next.js 15 shines. React Server Components let us fetch and aggregate data directly in our component tree, with zero client-side JavaScript for the data-heavy parts.

// src/app/page.tsx

import { Suspense } from 'react';
import { fetchCaliforniaWarnData } from '@/lib/warn-fetcher';
import { buildDashboardData } from '@/lib/aggregator';
import StatsOverview from '@/components/dashboard/StatsOverview';
import CompanyTable from '@/components/dashboard/CompanyTable';
import TrendChart from '@/components/dashboard/TrendChart';
import SectorBreakdown from '@/components/dashboard/SectorBreakdown';
import DashboardFilters from '@/components/filters/DashboardFilters';

export const revalidate = 60; // ISR: revalidate every 60 seconds

async function getDashboardData() {
  const notices = await fetchCaliforniaWarnData();

  // Filter to tech-related industries only
  const techNotices = notices.filter((notice) => {
    const industry = notice.industry.toLowerCase();
    return (
      industry.includes('software') ||
      industry.includes('computer') ||
      industry.includes('data processing') ||
      industry.includes('semiconductor') ||
      industry.includes('electronic') ||
      industry.includes('internet') ||
      industry.includes('telecommunication') ||
      industry.includes('information') ||
      industry.includes('web') ||
      notice.normalizedCompany === 'Oracle' ||
      notice.normalizedCompany === 'Google' ||
      notice.normalizedCompany === 'Microsoft' ||
      notice.normalizedCompany === 'Amazon' ||
      notice.normalizedCompany === 'Meta' ||
      notice.normalizedCompany === 'Apple' ||
      notice.normalizedCompany === 'Salesforce' ||
      notice.normalizedCompany === 'SAP' ||
      notice.normalizedCompany === 'Intel' ||
      notice.normalizedCompany === 'Cisco'
    );
  });

  return buildDashboardData(techNotices);
}

export default async function DashboardPage() {
  const data = await getDashboardData();

  return (
    <main className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <header className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
            Tech Layoff Tracker
          </h1>
          <p className="mt-2 text-gray-600 dark:text-gray-400">
            Real-time WARN Act data for the technology sector.
            Last updated:{' '}
            {data.lastUpdated.toLocaleDateString('en-US', {
              month: 'long',
              day: 'numeric',
              year: 'numeric',
              hour: '2-digit',
              minute: '2-digit',
            })}
          </p>
        </header>

        <Suspense fallback={<StatsOverviewSkeleton />}>
          <StatsOverview data={data} />
        </Suspense>

        <div className="mt-8">
          <DashboardFilters
            companies={data.companies}
            sectors={data.sectors}
            states={data.states}
            notices={data.notices}
            trends={data.trends}
          />
        </div>
      </div>
    </main>
  );
}

function StatsOverviewSkeleton() {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {Array.from({ length: 4 }).map((_, i) => (
        <div
          key={i}
          className="h-32 animate-pulse rounded-xl bg-gray-200 dark:bg-gray-800"
        />
      ))}
    </div>
  );
}

The revalidate = 60 export at the top of the page is critical. It tells Next.js to cache the page for 60 seconds, then revalidate in the background. Users always get a fast cached response, and the data stays within 60 seconds of fresh. For WARN Act data that updates daily at most, this is more than adequate.

Notice we use Suspense with a skeleton fallback for the stats overview. Even though this is a server component, Suspense lets Next.js stream the page progressively — the shell renders immediately, and the data-dependent sections appear as they resolve.

Building the Dashboard UI

Let us build the stat cards first. These are the four numbers at the top of every good dashboard.

// src/components/dashboard/StatsOverview.tsx

import { DashboardData } from '@/lib/types';

interface StatsOverviewProps {
  data: DashboardData;
}

const stats = [
  {
    key: 'totalLayoffs',
    label: 'Total Layoffs',
    format: (n: number) => n.toLocaleString(),
    color: 'text-red-600 dark:text-red-400',
    bgColor: 'bg-red-50 dark:bg-red-950',
    icon: '📉',
  },
  {
    key: 'totalFilings',
    label: 'WARN Filings',
    format: (n: number) => n.toLocaleString(),
    color: 'text-amber-600 dark:text-amber-400',
    bgColor: 'bg-amber-50 dark:bg-amber-950',
    icon: '📋',
  },
  {
    key: 'companiesAffected',
    label: 'Companies',
    format: (n: number) => n.toLocaleString(),
    color: 'text-blue-600 dark:text-blue-400',
    bgColor: 'bg-blue-50 dark:bg-blue-950',
    icon: '🏢',
  },
  {
    key: 'statesAffected',
    label: 'States Affected',
    format: (n: number) => n.toString(),
    color: 'text-purple-600 dark:text-purple-400',
    bgColor: 'bg-purple-50 dark:bg-purple-950',
    icon: '🗺️',
  },
] as const;

export default function StatsOverview({ data }: StatsOverviewProps) {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {stats.map((stat) => (
        <div
          key={stat.key}
          className={`rounded-xl ${stat.bgColor} p-6 shadow-sm transition-shadow hover:shadow-md`}
        >
          <div className="flex items-center justify-between">
            <span className="text-2xl">{stat.icon}</span>
            <span
              className={`text-sm font-medium ${stat.color}`}
            >
              {stat.label}
            </span>
          </div>
          <p className={`mt-3 text-3xl font-bold ${stat.color}`}>
            {stat.format(data[stat.key] as number)}
          </p>
        </div>
      ))}
    </div>
  );
}

Now the company breakdown table. This is a client component because it needs to handle sorting and search interactions.

// src/components/dashboard/CompanyTable.tsx

'use client';

import { useState, useMemo } from 'react';
import { CompanyAggregate } from '@/lib/types';
import { format } from 'date-fns';

interface CompanyTableProps {
  companies: CompanyAggregate[];
  searchQuery: string;
}

type SortField = 'name' | 'totalLayoffs' | 'filingCount' | 'latestNotice';
type SortOrder = 'asc' | 'desc';

export default function CompanyTable({
  companies,
  searchQuery,
}: CompanyTableProps) {
  const [sortField, setSortField] = useState<SortField>('totalLayoffs');
  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
  const [page, setPage] = useState(0);
  const pageSize = 20;

  const filteredAndSorted = useMemo(() => {
    let result = companies;

    // Filter by search query
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      result = result.filter(
        (c) =>
          c.name.toLowerCase().includes(query) ||
          c.sector.toLowerCase().includes(query) ||
          c.states.some((s) => s.toLowerCase().includes(query))
      );
    }

    // Sort
    result = [...result].sort((a, b) => {
      let comparison = 0;
      switch (sortField) {
        case 'name':
          comparison = a.name.localeCompare(b.name);
          break;
        case 'totalLayoffs':
          comparison = a.totalLayoffs - b.totalLayoffs;
          break;
        case 'filingCount':
          comparison = a.filingCount - b.filingCount;
          break;
        case 'latestNotice':
          comparison =
            a.latestNotice.getTime() - b.latestNotice.getTime();
          break;
      }
      return sortOrder === 'asc' ? comparison : -comparison;
    });

    return result;
  }, [companies, searchQuery, sortField, sortOrder]);

  const paginatedData = filteredAndSorted.slice(
    page * pageSize,
    (page + 1) * pageSize
  );
  const totalPages = Math.ceil(filteredAndSorted.length / pageSize);

  function handleSort(field: SortField) {
    if (sortField === field) {
      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortOrder('desc');
    }
  }

  function SortIcon({ field }: { field: SortField }) {
    if (sortField !== field) return <span className="text-gray-400">↕</span>;
    return <span>{sortOrder === 'asc' ? '↑' : '↓'}</span>;
  }

  return (
    <div className="overflow-hidden rounded-xl bg-white shadow-sm dark:bg-gray-800">
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead className="bg-gray-50 dark:bg-gray-900">
            <tr>
              <th
                className="cursor-pointer px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 hover:text-gray-700 dark:text-gray-400"
                onClick={() => handleSort('name')}
              >
                Company <SortIcon field="name" />
              </th>
              <th
                className="cursor-pointer px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 hover:text-gray-700 dark:text-gray-400"
                onClick={() => handleSort('totalLayoffs')}
              >
                Layoffs <SortIcon field="totalLayoffs" />
              </th>
              <th
                className="cursor-pointer px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 hover:text-gray-700 dark:text-gray-400"
                onClick={() => handleSort('filingCount')}
              >
                Filings <SortIcon field="filingCount" />
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                Sector
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                States
              </th>
              <th
                className="cursor-pointer px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 hover:text-gray-700 dark:text-gray-400"
                onClick={() => handleSort('latestNotice')}
              >
                Latest Notice <SortIcon field="latestNotice" />
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
            {paginatedData.map((company) => (
              <tr
                key={company.slug}
                className="transition-colors hover:bg-gray-50 dark:hover:bg-gray-750"
              >
                <td className="whitespace-nowrap px-6 py-4">
                  <a
                    href={`/company/${company.slug}`}
                    className="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400"
                  >
                    {company.name}
                  </a>
                </td>
                <td className="whitespace-nowrap px-6 py-4 font-mono text-sm font-bold text-red-600 dark:text-red-400">
                  {company.totalLayoffs.toLocaleString()}
                </td>
                <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                  {company.filingCount}
                </td>
                <td className="whitespace-nowrap px-6 py-4">
                  <span className="inline-flex rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                    {company.sector}
                  </span>
                </td>
                <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                  {company.states.join(', ')}
                </td>
                <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                  {format(company.latestNotice, 'MMM d, yyyy')}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Pagination */}
      <div className="flex items-center justify-between border-t border-gray-200 px-6 py-3 dark:border-gray-700">
        <p className="text-sm text-gray-600 dark:text-gray-400">
          Showing {page * pageSize + 1} to{' '}
          {Math.min((page + 1) * pageSize, filteredAndSorted.length)} of{' '}
          {filteredAndSorted.length} companies
        </p>
        <div className="flex gap-2">
          <button
            onClick={() => setPage(Math.max(0, page - 1))}
            disabled={page === 0}
            className="rounded-lg px-3 py-1 text-sm font-medium text-gray-600 hover:bg-gray-100 disabled:opacity-50 dark:text-gray-400 dark:hover:bg-gray-700"
          >
            Previous
          </button>
          <button
            onClick={() => setPage(Math.min(totalPages - 1, page + 1))}
            disabled={page >= totalPages - 1}
            className="rounded-lg px-3 py-1 text-sm font-medium text-gray-600 hover:bg-gray-100 disabled:opacity-50 dark:text-gray-400 dark:hover:bg-gray-700"
          >
            Next
          </button>
        </div>
      </div>
    </div>
  );
}

The table is fully interactive. Click any column header to sort ascending or descending. Search filters apply in real time using useMemo so we only recompute when inputs change. Pagination keeps the DOM manageable even when there are hundreds of companies.

Search and Filtering

The filters component ties the dashboard together. It manages search state, date ranges, and sector filters, then passes the filtered data down to chart and table components.

// src/components/filters/DashboardFilters.tsx

'use client';

import { useState, useMemo, useCallback } from 'react';
import { isAfter, isBefore, parseISO } from 'date-fns';
import {
  CompanyAggregate,
  SectorAggregate,
  StateAggregate,
  WarnNotice,
  MonthlyTrend,
} from '@/lib/types';
import CompanyTable from '@/components/dashboard/CompanyTable';
import TrendChart from '@/components/dashboard/TrendChart';
import SectorBreakdown from '@/components/dashboard/SectorBreakdown';
import SearchBar from '@/components/filters/SearchBar';

interface DashboardFiltersProps {
  companies: CompanyAggregate[];
  sectors: SectorAggregate[];
  states: StateAggregate[];
  notices: WarnNotice[];
  trends: MonthlyTrend[];
}

export default function DashboardFilters({
  companies,
  sectors,
  states,
  notices,
  trends,
}: DashboardFiltersProps) {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedSector, setSelectedSector] = useState<string | null>(null);
  const [dateRange, setDateRange] = useState<{
    start: string;
    end: string;
  }>({ start: '', end: '' });
  const [activeTab, setActiveTab] = useState<
    'companies' | 'trends' | 'sectors'
  >('companies');

  const filteredCompanies = useMemo(() => {
    let result = companies;

    if (selectedSector) {
      result = result.filter((c) => c.sector === selectedSector);
    }

    if (dateRange.start) {
      const startDate = new Date(dateRange.start);
      result = result.filter((c) =>
        isAfter(c.latestNotice, startDate)
      );
    }

    if (dateRange.end) {
      const endDate = new Date(dateRange.end);
      result = result.filter((c) =>
        isBefore(c.earliestNotice, endDate)
      );
    }

    return result;
  }, [companies, selectedSector, dateRange]);

  const handleSearchChange = useCallback((value: string) => {
    setSearchQuery(value);
  }, []);

  const tabs = [
    { id: 'companies' as const, label: 'Companies', count: filteredCompanies.length },
    { id: 'trends' as const, label: 'Trends', count: trends.length },
    { id: 'sectors' as const, label: 'Sectors', count: sectors.length },
  ];

  return (
    <div className="space-y-6">
      {/* Filter Bar */}
      <div className="flex flex-col gap-4 rounded-xl bg-white p-4 shadow-sm dark:bg-gray-800 sm:flex-row sm:items-center">
        <div className="flex-1">
          <SearchBar
            value={searchQuery}
            onChange={handleSearchChange}
            placeholder="Search companies, sectors, states..."
          />
        </div>

        <div className="flex gap-3">
          <select
            value={selectedSector ?? ''}
            onChange={(e) =>
              setSelectedSector(e.target.value || null)
            }
            className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
          >
            <option value="">All Sectors</option>
            {sectors.map((s) => (
              <option key={s.sector} value={s.sector}>
                {s.sector} ({s.companyCount})
              </option>
            ))}
          </select>

          <input
            type="date"
            value={dateRange.start}
            onChange={(e) =>
              setDateRange((prev) => ({
                ...prev,
                start: e.target.value,
              }))
            }
            className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
            placeholder="Start date"
          />

          <input
            type="date"
            value={dateRange.end}
            onChange={(e) =>
              setDateRange((prev) => ({
                ...prev,
                end: e.target.value,
              }))
            }
            className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
            placeholder="End date"
          />
        </div>
      </div>

      {/* Tab Navigation */}
      <div className="border-b border-gray-200 dark:border-gray-700">
        <nav className="flex gap-4">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
                activeTab === tab.id
                  ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                  : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400'
              }`}
            >
              {tab.label}
              <span className="ml-2 rounded-full bg-gray-100 px-2 py-0.5 text-xs dark:bg-gray-700">
                {tab.count}
              </span>
            </button>
          ))}
        </nav>
      </div>

      {/* Tab Content */}
      {activeTab === 'companies' && (
        <CompanyTable
          companies={filteredCompanies}
          searchQuery={searchQuery}
        />
      )}
      {activeTab === 'trends' && <TrendChart trends={trends} />}
      {activeTab === 'sectors' && (
        <SectorBreakdown sectors={sectors} />
      )}
    </div>
  );
}

// src/components/filters/SearchBar.tsx

'use client';

import { useRef, useEffect } from 'react';

interface SearchBarProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
}

export default function SearchBar({
  value,
  onChange,
  placeholder = 'Search...',
}: SearchBarProps) {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    function handleKeyDown(e: KeyboardEvent) {
      if (e.key === '/' && e.target === document.body) {
        e.preventDefault();
        inputRef.current?.focus();
      }
    }
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, []);

  return (
    <div className="relative">
      <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
        <svg
          className="h-5 w-5 text-gray-400"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          />
        </svg>
      </div>
      <input
        ref={inputRef}
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="block w-full rounded-lg border border-gray-300 bg-white py-2 pl-10 pr-12 text-sm placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
      />
      <div className="absolute inset-y-0 right-0 flex items-center pr-3">
        <kbd className="rounded border border-gray-300 bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500 dark:border-gray-600 dark:bg-gray-700">
          /
        </kbd>
      </div>
    </div>
  );
}

Two things worth highlighting. First, the useCallback wrapping handleSearchChange prevents unnecessary re-renders of the SearchBar component. Second, the keyboard shortcut listener (/ to focus search) is a small UX detail that makes the dashboard feel professional. GitHub uses the same pattern.

The filter state is intentionally kept local to this client component. There is no need for a global state manager like Zustand or Redux here — the filter state is only relevant within the dashboard view. Keep it simple.

Data Visualization with Recharts

Now the fun part. Let us build the chart components that make the data visual. We will wrap Recharts in our own components to handle dark mode, responsiveness, and consistent styling.

// src/components/dashboard/TrendChart.tsx

'use client';

import {
  ResponsiveContainer,
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from 'recharts';
import { MonthlyTrend } from '@/lib/types';

interface TrendChartProps {
  trends: MonthlyTrend[];
}

export default function TrendChart({ trends }: TrendChartProps) {
  return (
    <div className="rounded-xl bg-white p-6 shadow-sm dark:bg-gray-800">
      <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
        Layoff Trends Over Time
      </h3>
      <div className="h-80">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={trends}>
            <defs>
              <linearGradient
                id="layoffGradient"
                x1="0"
                y1="0"
                x2="0"
                y2="1"
              >
                <stop
                  offset="5%"
                  stopColor="#ef4444"
                  stopOpacity={0.3}
                />
                <stop
                  offset="95%"
                  stopColor="#ef4444"
                  stopOpacity={0}
                />
              </linearGradient>
              <linearGradient
                id="filingGradient"
                x1="0"
                y1="0"
                x2="0"
                y2="1"
              >
                <stop
                  offset="5%"
                  stopColor="#3b82f6"
                  stopOpacity={0.3}
                />
                <stop
                  offset="95%"
                  stopColor="#3b82f6"
                  stopOpacity={0}
                />
              </linearGradient>
            </defs>
            <CartesianGrid
              strokeDasharray="3 3"
              className="stroke-gray-200 dark:stroke-gray-700"
            />
            <XAxis
              dataKey="month"
              className="text-xs"
              tick='{"fill":"#6b7280"}'
            />
            <YAxis
              className="text-xs"
              tick='{"fill":"#6b7280"}'
              tickFormatter={(value) =>
                value >= 1000
                  ? `${(value / 1000).toFixed(0)}k`
                  : value
              }
            />
            <Tooltip
              contentStyle='{"backgroundColor":"#1f2937","border":"none","borderRadius":"0.5rem","color":"#f9fafb"}'
              formatter={(value: number, name: string) => [
                value.toLocaleString(),
                name === 'layoffs' ? 'Employees Affected' : 'WARN Filings',
              ]}
            />
            <Legend />
            <Area
              type="monotone"
              dataKey="layoffs"
              stroke="#ef4444"
              fill="url(#layoffGradient)"
              strokeWidth={2}
              name="Employees Affected"
            />
            <Area
              type="monotone"
              dataKey="filings"
              stroke="#3b82f6"
              fill="url(#filingGradient)"
              strokeWidth={2}
              name="WARN Filings"
            />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}

The gradient fill under each line is what makes Recharts area charts look polished. We define SVG gradients in a <defs> block and reference them with fill="url(#layoffGradient)". The gradient fades from 30% opacity at the top to 0% at the bottom, creating that modern dashboard aesthetic.

Now the sector breakdown with a pie chart:

// src/components/dashboard/SectorBreakdown.tsx

'use client';

import {
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  Tooltip,
  Legend,
} from 'recharts';
import { SectorAggregate } from '@/lib/types';

interface SectorBreakdownProps {
  sectors: SectorAggregate[];
}

const COLORS = [
  '#3b82f6', // blue
  '#ef4444', // red
  '#f59e0b', // amber
  '#8b5cf6', // violet
  '#06b6a4', // teal
  '#ec4899', // pink
  '#64748b', // slate
  '#84cc16', // lime
];

export default function SectorBreakdown({
  sectors,
}: SectorBreakdownProps) {
  const chartData = sectors.map((s) => ({
    name: s.sector,
    value: s.totalLayoffs,
    percentage: s.percentage,
    companies: s.companyCount,
  }));

  return (
    <div className="rounded-xl bg-white p-6 shadow-sm dark:bg-gray-800">
      <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
        Layoffs by Sector
      </h3>
      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
        <div className="h-80">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={chartData}
                cx="50%"
                cy="50%"
                innerRadius={60}
                outerRadius={120}
                paddingAngle={2}
                dataKey="value"
                label={({ name, percentage }) =>
                  `${name} (${percentage}%)`
                }
              >
                {chartData.map((_, index) => (
                  <Cell
                    key={`cell-${index}`}
                    fill={COLORS[index % COLORS.length]}
                  />
                ))}
              </Pie>
              <Tooltip
                contentStyle={{
                  backgroundColor: '#1f2937',
                  border: 'none',
                  borderRadius: '0.5rem',
                  color: '#f9fafb',
                }}
                formatter={(value: number) => [
                  value.toLocaleString(),
                  'Employees Affected',
                ]}
              />
            </PieChart>
          </ResponsiveContainer>
        </div>

        {/* Sector Details */}
        <div className="space-y-3">
          {sectors.map((sector, index) => (
            <div
              key={sector.sector}
              className="flex items-center gap-3"
            >
              <div
                className="h-3 w-3 rounded-full"
                style={{
                  backgroundColor: COLORS[index % COLORS.length],
                }}
              />
              <div className="flex-1">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium text-gray-900 dark:text-white">
                    {sector.sector}
                  </span>
                  <span className="text-sm font-bold text-gray-900 dark:text-white">
                    {sector.totalLayoffs.toLocaleString()}
                  </span>
                </div>
                <div className="mt-1 h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
                  <div
                    className="h-full rounded-full transition-all"
                    style={{
                      width: `${sector.percentage}%`,
                      backgroundColor:
                        COLORS[index % COLORS.length],
                    }}
                  />
                </div>
                <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                  {sector.companyCount} companies · {sector.percentage}%
                  of total
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

The donut chart (inner radius of 60) gives a cleaner look than a full pie chart. The right-side panel with progress bars provides the same data in a more accessible, scannable format. This dual-presentation approach is important for data dashboards — some users are visual, some prefer numbers.

Dark Mode Support

Tailwind CSS 4.0 makes dark mode straightforward with the dark: variant, but Recharts needs extra attention since it renders SVG elements.

// src/lib/constants.ts

export const CHART_THEME = {
  light: {
    background: '#ffffff',
    text: '#374151',
    grid: '#e5e7eb',
    tooltip: {
      background: '#1f2937',
      text: '#f9fafb',
      border: 'none',
    },
  },
  dark: {
    background: '#1f2937',
    text: '#d1d5db',
    grid: '#374151',
    tooltip: {
      background: '#111827',
      text: '#f9fafb',
      border: '1px solid #374151',
    },
  },
} as const

export const LAYOFF_COLORS = {
  primary: '#ef4444', // Red for layoff counts
  secondary: '#3b82f6', // Blue for filing counts
  accent: '#f59e0b', // Amber for highlights
  success: '#10b981', // Green for positive trends
  muted: '#64748b', // Slate for secondary info
} as const

export const COMPANY_COLORS: Record<string, string> = {
  Oracle: '#dc2626',
  Google: '#4285f4',
  Microsoft: '#00a4ef',
  Amazon: '#ff9900',
  Meta: '#1877f2',
  Apple: '#a3aaae',
  Salesforce: '#00a1e0',
  SAP: '#0faaff',
  Intel: '#0071c5',
  Cisco: '#049fd9',
}

For Recharts, the trick is using Tailwind's className on CartesianGrid and applying fill via tick props on axes. The tooltips use inline styles because Recharts renders them as positioned divs, not within Tailwind's cascade.

Building the API Route

We also want an API endpoint that external consumers can hit. Maybe someone wants to build a Slack bot that reports daily layoff numbers, or a mobile app that shows a widget. The API route is simple:

// src/app/api/layoffs/route.ts

import { NextRequest, NextResponse } from 'next/server'
import { fetchCaliforniaWarnData } from '@/lib/warn-fetcher'
import { buildDashboardData } from '@/lib/aggregator'

export const revalidate = 300 // 5 minutes

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const company = searchParams.get('company')
    const sector = searchParams.get('sector')
    const limit = parseInt(searchParams.get('limit') ?? '50', 10)

    const notices = await fetchCaliforniaWarnData()

    // Filter to tech sector
    const techNotices = notices.filter(notice => {
      const industry = notice.industry.toLowerCase()
      return (
        industry.includes('software') ||
        industry.includes('computer') ||
        industry.includes('data processing') ||
        industry.includes('semiconductor') ||
        industry.includes('internet') ||
        industry.includes('information')
      )
    })

    let filtered = techNotices

    if (company) {
      const companyLower = company.toLowerCase()
      filtered = filtered.filter(
        n =>
          n.normalizedCompany.toLowerCase().includes(companyLower) ||
          n.companyName.toLowerCase().includes(companyLower)
      )
    }

    if (sector) {
      const sectorLower = sector.toLowerCase()
      filtered = filtered.filter(n =>
        n.industry.toLowerCase().includes(sectorLower)
      )
    }

    const data = buildDashboardData(filtered)

    return NextResponse.json(
      {
        success: true,
        data: {
          summary: {
            totalLayoffs: data.totalLayoffs,
            totalFilings: data.totalFilings,
            companiesAffected: data.companiesAffected,
            lastUpdated: data.lastUpdated.toISOString(),
          },
          companies: data.companies.slice(0, limit),
          sectors: data.sectors,
          trends: data.trends,
        },
        meta: {
          source: 'California EDD WARN Act Data',
          filters: { company, sector, limit },
          generatedAt: new Date().toISOString(),
        },
      },
      {
        status: 200,
        headers: {
          'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600',
        },
      }
    )
  } catch (error) {
    console.error('[API](https://glossary.crashbytes.com/api) error:', error)
    return NextResponse.json(
      {
        success: false,
        error: 'Failed to fetch layoff data',
        message: error instanceof Error ? error.message : 'Unknown error',
      },
      { status: 500 }
    )
  }
}

The API supports three query parameters: company for filtering by company name, sector for filtering by industry, and limit for controlling how many companies appear in the response. The Cache-Control header tells CDN edges to cache the response for 5 minutes and serve stale data for up to 10 minutes while revalidating in the background.

Example requests:

# Get all tech layoffs
curl https://your-app.vercel.app/api/layoffs

# Filter by company
curl https://your-app.vercel.app/api/layoffs?company=oracle

# Filter by sector with limit
curl https://your-app.vercel.app/api/layoffs?sector=software&limit=10

Error Handling and Loading States

Production applications need to handle failures gracefully. WARN Act data sources can be temporarily unavailable, CSV formats can change without warning, and network requests can time out.

// src/app/error.tsx

'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error('Dashboard error:', error);
  }, [error]);

  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-900">
      <div className="max-w-md rounded-xl bg-white p-8 shadow-lg dark:bg-gray-800">
        <div className="text-center">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900">
            <svg
              className="h-6 w-6 text-red-600 dark:text-red-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
              />
            </svg>
          </div>
          <h2 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
            Failed to Load Data
          </h2>
          <p className="mb-6 text-sm text-gray-600 dark:text-gray-400">
            We could not fetch the latest WARN Act data. This
            usually means the state data source is temporarily
            unavailable.
          </p>
          <button
            onClick={reset}
            className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          >
            Try Again
          </button>
        </div>
      </div>
    </div>
  );
}

// src/app/loading.tsx

export default function Loading() {
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        {/* Header skeleton */}
        <div className="mb-8">
          <div className="h-8 w-64 animate-pulse rounded bg-gray-200 dark:bg-gray-800" />
          <div className="mt-2 h-4 w-96 animate-pulse rounded bg-gray-200 dark:bg-gray-800" />
        </div>

        {/* Stats skeleton */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <div
              key={i}
              className="h-32 animate-pulse rounded-xl bg-gray-200 dark:bg-gray-800"
            />
          ))}
        </div>

        {/* Filter bar skeleton */}
        <div className="mt-8 h-16 animate-pulse rounded-xl bg-gray-200 dark:bg-gray-800" />

        {/* Table skeleton */}
        <div className="mt-6 space-y-2">
          {Array.from({ length: 10 }).map((_, i) => (
            <div
              key={i}
              className="h-12 animate-pulse rounded bg-gray-200 dark:bg-gray-800"
              style={{ opacity: 1 - i * 0.08 }}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

The error boundary (error.tsx) catches any exceptions thrown during server-side rendering or data fetching. The loading file (loading.tsx) provides a skeleton UI that matches the dashboard layout, so users see a structured placeholder instead of a blank screen or spinner.

Note the decreasing opacity on the table skeleton rows. This is a subtle visual cue that tells users "there is more content below" without needing actual data. Small details like this matter for perceived performance.

The Oracle Paradox in Context

Let us step back from the code and look at what the data tells us. Oracle's 30,000 layoffs represent roughly 23% of its 130,000-person workforce. This is not a trim. This is a restructuring.

The same quarter Oracle announced 30,000 cuts, it confirmed $50 billion in AI data center spending. Larry Ellison told investors this was "the largest infrastructure investment in Oracle's history." The company is building AI training clusters for enterprise customers while simultaneously laying off the humans who built and maintained its traditional product lines.

This is the AI paradox playing out in real time. Companies are not cutting jobs because business is bad. They are cutting jobs because AI is replacing specific functions faster than anyone predicted. Our prediction on AI digital workforces outnumbering humans is tracking ahead of schedule.

Oracle's cuts fell hardest on:

IT Operations and Customer Support — the two functions where AI agents have proven most capable of replacing human labor. QA and Testing follow closely, where AI-driven test generation and execution have reduced the need for manual testers. This pattern is not unique to Oracle. It is the template every major tech company is following.

The WARN Act tracker we are building today is not just a coding exercise. It is a tool for understanding one of the most significant labor market shifts in a generation. When you can see the data aggregated, normalized, and visualized, the patterns become undeniable. If you want a deeper look at the charting techniques behind dashboards like this, our guide to data visualization with interactive charts and MDX covers the full spectrum.

Deployment to Vercel

Deploying to Vercel is the shortest section of this tutorial because Next.js and Vercel were designed to work together seamlessly.

First, push your code to GitHub:

git init
git add .
git commit -m "Initial commit: tech layoff tracker"
git remote add origin https://github.com/your-username/layoff-tracker.git
git push -u origin main

Then connect to Vercel:

npx vercel

Or use the Vercel dashboard:

1. Go to vercel.com and click "New Project"
2. Import your GitHub repository
3. Vercel auto-detects Next.js — no configuration needed
4. Click "Deploy"

That is it. Vercel handles:

• Build optimization — Automatic code splitting, tree shaking, and minification
• ISR — The revalidate exports we set up work automatically on Vercel's edge network
• Edge caching — Static assets and ISR pages are served from the closest edge node
• Serverless functions — Our API route runs as a serverless function that scales to zero

Environment Variables

If you add more data sources that require API keys (some states have rate-limited APIs), set them in Vercel's environment variables:

# .env.local (for local development)
WARN_API_KEY_NY=your_ny_api_key
WARN_API_KEY_TX=your_tx_api_key
CACHE_REVALIDATE_SECONDS=60

In Vercel's dashboard, navigate to Settings then Environment Variables and add each key. Vercel encrypts them at rest and injects them into your serverless function environment at runtime.

ISR Configuration Details

Our ISR strategy uses two different revalidation periods:

// Page-level: 60 seconds
export const revalidate = 60

// API route: 300 seconds (5 minutes)
export const revalidate = 300

// Data fetch: 3600 seconds (1 hour)
fetch(url, { next: { revalidate: 3600 } })

The nested caching is intentional. The upstream CSV data changes at most once a day (when new WARN filings are published), so a 1-hour cache for the raw fetch is fine. The page revalidates every 60 seconds because we might deploy UI changes that should appear quickly. The API route gets 5 minutes because external consumers typically poll at that frequency.

Adding Multi-State Support

California is our starting point, but the architecture supports multiple states. Here is how you would add New York:

// src/lib/fetchers/new-york.ts

import { WarnNotice } from '@/lib/types'
import { normalizeCompanyName } from '@/lib/normalizer'

const NY_WARN_URL = 'https://dol.ny.gov/warn-notices'

interface NYWarnEntry {
  'Event Number': string
  Company: string
  City: string
  'Number Affected': string
  Date: string
  Reason: string
  Region: string
  County: string
  Industry: string
}

export async function fetchNewYorkWarnData(): Promise<WarnNotice[]> {
  // New York provides JSON from their API
  const response = await fetch(NY_WARN_URL, {
    next: { revalidate: 3600 },
  })

  if (!response.ok) {
    console.warn('NY WARN data unavailable, skipping')
    return []
  }

  const entries: NYWarnEntry[] = await response.json()

  return entries.map((entry, index) => ({
    id: `ny-${entry['Event Number']}-${index}`,
    companyName: entry.Company?.trim() ?? 'Unknown',
    normalizedCompany: normalizeCompanyName(entry.Company?.trim() ?? ''),
    noticeDate: new Date(entry.Date),
    effectiveDate: new Date(entry.Date),
    numberOfEmployees: parseInt(
      entry['Number Affected']?.replace(/,/g, '') ?? '0',
      10
    ),
    layoffOrClosure: entry.Reason?.toLowerCase().includes('closing')
      ? ('closure' as const)
      : ('layoff' as const),
    address: '',
    city: entry.City?.trim() ?? '',
    state: 'NY',
    county: entry.County?.trim() ?? '',
    industry: entry.Industry?.trim() ?? 'Unknown',
  }))
}

Then combine the fetchers:

// src/lib/warn-fetcher.ts (updated)

import { WarnNotice } from './types'
import { fetchCaliforniaWarnData } from './fetchers/california'
import { fetchNewYorkWarnData } from './fetchers/new-york'

export async function fetchAllWarnData(): Promise<WarnNotice[]> {
  const results = await Promise.allSettled([
    fetchCaliforniaWarnData(),
    fetchNewYorkWarnData(),
  ])

  const notices: WarnNotice[] = []

  for (const result of results) {
    if (result.status === 'fulfilled') {
      notices.push(...result.value)
    } else {
      console.error('Fetcher failed:', result.reason)
    }
  }

  // Sort by notice date, newest first
  return notices.sort((a, b) => b.noticeDate.getTime() - a.noticeDate.getTime())
}

The Promise.allSettled pattern is essential here. If California's data source is down, we still get New York's data. If both are down, we return an empty array and let the error boundary handle it. Never use Promise.all for independent data sources that can fail independently — one failure would reject the entire promise.

Performance Optimization

A few performance considerations for production:

// src/lib/cache.ts

const cache = new Map<string, { data: unknown; timestamp: number }>()

export function getCached<T>(key: string, ttlMs: number): T | null {
  const entry = cache.get(key)
  if (!entry) return null
  if (Date.now() - entry.timestamp > ttlMs) {
    cache.delete(key)
    return null
  }
  return entry.data as T
}

export function setCache<T>(key: string, data: T): void {
  cache.set(key, { data, timestamp: Date.now() })
}

// Usage in warn-fetcher.ts
import { getCached, setCache } from './cache'

export async function fetchCaliforniaWarnData(): Promise<WarnNotice[]> {
  const cached = getCached<WarnNotice[]>('ca-warn', 3600000)
  if (cached) return cached

  const notices = await fetchFromSource()
  setCache('ca-warn', notices)
  return notices
}

The in-memory cache is a safety net on top of ISR. If the same serverless function instance handles multiple requests within the TTL, it avoids re-fetching and re-parsing the CSV entirely. First request: 820ms. Subsequent requests: under 50ms. That is the difference between parsing a 2MB CSV and returning a cached JavaScript object.

Other optimizations worth implementing:

1. Dynamic imports for Recharts — Recharts is the heaviest dependency. Use next/dynamic to lazy-load chart components so they do not block the initial page render.

import dynamic from 'next/dynamic';

const TrendChart = dynamic(
  () => import('@/components/dashboard/TrendChart'),
  {
    loading: () => (
      <div className="h-80 animate-pulse rounded-xl bg-gray-200 dark:bg-gray-800" />
    ),
    ssr: false,
  }
);

2. Virtualized tables — If you end up with thousands of companies, use @tanstack/react-virtual for the table body. Rendering 2,000 table rows crashes mobile browsers.

3. Image optimization — If you add company logos, use next/image with the priority prop for above-the-fold logos and lazy loading for the rest.

What Is Next

The dashboard we built today is a strong foundation. Here are the extensions that would make it truly powerful:

Email Alerts

Use Vercel's cron jobs to check for new WARN filings hourly and send email notifications when specific companies file. Resend or Postmark for transactional email. The data layer already supports filtering by company — you just need a subscriber list and a cron trigger.

// src/app/api/cron/check-filings/route.ts

export async function GET() {
  const notices = await fetchAllWarnData()
  const recentNotices = notices.filter(
    n => Date.now() - n.noticeDate.getTime() < 3600000
  )

  if (recentNotices.length > 0) {
    await sendAlertEmails(recentNotices)
  }

  return Response.json({ checked: notices.length, new: recentNotices.length })
}

Historical Comparisons

Store daily snapshots of aggregate data in a database (Vercel KV or Turso) and show year-over-year comparisons. "Q1 2026 layoffs are up 34% compared to Q1 2025" is a powerful data point when backed by a chart showing both periods overlaid.

RSS Feed

Add an RSS feed at /feed.xml that publishes new WARN filings as items. Journalists and researchers can subscribe to get real-time updates without visiting the dashboard.

Embeddable Widgets

Build a /embed route that renders a minimal, embeddable version of the stats overview — just the four stat cards in an iframe-friendly format. Newsrooms could embed this in their articles.

Slack and Discord Bots

Use the API route we already built as the data backend for a Slack bot. /layoffs oracle returns Oracle's latest WARN filings. /layoffs trending returns this week's top companies by layoff count.

Testing the Dashboard

Before shipping, write tests for the critical paths. The data layer is the highest-value test target because it handles messy external data.

// src/lib/__tests__/normalizer.test.ts

import { normalizeCompanyName, normalizeSector } from '../normalizer'

describe('normalizeCompanyName', () => {
  it('normalizes Oracle variants', () => {
    expect(normalizeCompanyName('Oracle America, Inc.')).toBe('Oracle')
    expect(normalizeCompanyName('Oracle Corporation')).toBe('Oracle')
    expect(normalizeCompanyName('Oracle Cloud Infrastructure')).toBe('Oracle')
  })

  it('normalizes Google/Alphabet variants', () => {
    expect(normalizeCompanyName('Google LLC')).toBe('Google')
    expect(normalizeCompanyName('Alphabet Inc.')).toBe('Google')
    expect(normalizeCompanyName('YouTube LLC')).toBe('Google')
  })

  it('cleans up unknown companies', () => {
    expect(normalizeCompanyName('Acme Corp.')).toBe('Acme')
    expect(normalizeCompanyName('Startup Inc')).toBe('Startup')
  })

  it('handles empty input', () => {
    expect(normalizeCompanyName('')).toBe('')
  })
})

describe('normalizeSector', () => {
  it('maps known industries', () => {
    expect(normalizeSector('Software Publishers')).toBe('Software')
    expect(normalizeSector('Computer Systems Design')).toBe('IT Services')
    expect(normalizeSector('Semiconductor Manufacturing')).toBe('Hardware')
  })

  it('returns original for unknown industries', () => {
    expect(normalizeSector('Basket Weaving')).toBe('Basket Weaving')
  })
})

// src/lib/__tests__/aggregator.test.ts

import { aggregateByCompany, aggregateByMonth } from '../aggregator'
import { WarnNotice } from '../types'

const mockNotices: WarnNotice[] = [
  {
    id: 'test-1',
    companyName: 'Oracle America, Inc.',
    normalizedCompany: 'Oracle',
    noticeDate: new Date('2026-01-15'),
    effectiveDate: new Date('2026-03-15'),
    numberOfEmployees: 450,
    layoffOrClosure: 'layoff',
    address: '',
    city: 'Redwood City',
    state: 'CA',
    county: 'San Mateo',
    industry: 'Software Publishers',
  },
  {
    id: 'test-2',
    companyName: 'Oracle Cloud Infrastructure',
    normalizedCompany: 'Oracle',
    noticeDate: new Date('2026-02-01'),
    effectiveDate: new Date('2026-04-01'),
    numberOfEmployees: 320,
    layoffOrClosure: 'layoff',
    address: '',
    city: 'Austin',
    state: 'TX',
    county: 'Travis',
    industry: 'Data Processing',
  },
]

describe('aggregateByCompany', () => {
  it('combines filings for the same normalized company', () => {
    const result = aggregateByCompany(mockNotices)
    const oracle = result.find(c => c.name === 'Oracle')

    expect(oracle).toBeDefined()
    expect(oracle!.totalLayoffs).toBe(770)
    expect(oracle!.filingCount).toBe(2)
    expect(oracle!.states).toContain('CA')
    expect(oracle!.states).toContain('TX')
  })
})

describe('aggregateByMonth', () => {
  it('groups layoffs by month', () => {
    const result = aggregateByMonth(mockNotices)
    expect(result.length).toBe(2)
    expect(result[0].layoffs).toBe(450)
    expect(result[1].layoffs).toBe(320)
  })
})

Run the tests:

npm test -- --coverage --watchAll=false

Focus your testing effort on the normalizer and aggregator — those are the modules where bugs would cause the most visible data errors. A normalization bug that fails to map "Oracle America, Inc." to "Oracle" would split their layoff count across multiple entries, making the dashboard inaccurate.

Complete Project Checklist

Before deploying to production, run through this checklist:

Conclusion

We built a production-ready tech layoff tracker in a single tutorial. The stack — Next.js 15, React Server Components, TypeScript, Recharts, and Tailwind CSS — represents the modern standard for data-driven dashboards. The WARN Act gives us structured, public data. The normalization layer makes that data useful. The visualization layer makes it understandable.

But this tutorial is really about something bigger than code. Oracle's 30,000 layoffs are not an anomaly — they are the new normal. The companies building AI are simultaneously dismantling the human workforces that AI is designed to replace. The WARN Act data makes this visible, quantifiable, and undeniable.

Every dollar flowing into AI data centers is a bet against the current workforce. Oracle did not spend $50 billion on AI because they wanted to keep 30,000 employees doing the same jobs. They spent it because they calculated that AI would do those jobs better, faster, and cheaper. The math is brutal and the WARN Act filings are the receipts.

Build the tracker. Deploy it. Share the data. In a time when layoff announcements are carefully worded press releases designed to minimize perception of harm, raw WARN Act data tells the unvarnished story. Every filing is a legal document. Every number is a real person. A dashboard that makes these numbers visible is, in its own small way, an act of accountability.

The companion code with every file from this tutorial is available at github.com/CrashBytes/ByteSizedExamples. Star the repo, fork it, extend it. If you build on this foundation — add more states, build the Slack bot, deploy the embeddable widget — open a PR. The tracker gets more powerful with every data source.

The layoffs are not stopping. Neither should the tracking.