Rocky_Mountain_Vending/.formatting-backups/app/manuals/dashboard/page.tsx

import { Metadata } from 'next'
import { ManualsDashboardClient } from '@/components/manuals-dashboard-client'
import { readFileSync } from 'fs'
import { join } from 'path'

export const metadata: Metadata = {
  title: 'Manual Processing Dashboard | Rocky Mountain Vending',
  description: 'Comprehensive dashboard showing processed manual data, statistics, and analytics',
}

interface DashboardData {
  missingManuals: any
  qaData: any[]
  metadata: any[]
  structuredData: any[]
  semanticIndex: any
  acquisitionList: any
  nameMapping: any[]
}

async function loadDashboardData(): Promise<DashboardData> {
  const projectRoot = join(process.cwd(), '..')
  
  try {
    const missingManuals = JSON.parse(
      readFileSync(join(projectRoot, 'missing_manuals_report.json'), 'utf-8')
    )
    
    const qaData = JSON.parse(
      readFileSync(join(projectRoot, 'manuals_qa_comprehensive.json'), 'utf-8')
    )
    
    const metadata = JSON.parse(
      readFileSync(join(projectRoot, 'manuals_enhanced_metadata.json'), 'utf-8')
    )
    
    const structuredData = JSON.parse(
      readFileSync(join(projectRoot, 'manuals_structured_data.jsonld'), 'utf-8')
    )
    
    const semanticIndex = JSON.parse(
      readFileSync(join(projectRoot, 'manuals_semantic_index.json'), 'utf-8')
    )
    
    const acquisitionList = JSON.parse(
      readFileSync(join(projectRoot, 'manual_acquisition_list.json'), 'utf-8')
    )
    
    const nameMapping = JSON.parse(
      readFileSync(join(projectRoot, 'manual_name_mapping.json'), 'utf-8')
    )
    
    return {
      missingManuals,
      qaData,
      metadata,
      structuredData,
      semanticIndex,
      acquisitionList,
      nameMapping,
    }
  } catch (error) {
    console.error('Error loading dashboard data:', error)
    return {
      missingManuals: { summary: {} },
      qaData: [],
      metadata: [],
      structuredData: [],
      semanticIndex: {},
      acquisitionList: { total_items: 0 },
      nameMapping: [],
    }
  }
}

export default async function ManualsDashboardPage() {
  const data = await loadDashboardData()

  return (
    <div className="container mx-auto px-4 py-8 md:py-12">
      <header className="mb-8 md:mb-12">
        <h1 className="text-4xl md:text-5xl font-bold mb-4">
          Manual Processing Dashboard
        </h1>
        <p className="text-lg text-muted-foreground max-w-3xl">
          Comprehensive overview of processed manual data, statistics, gap analysis, and optimization results.
        </p>
      </header>

      <ManualsDashboardClient data={data} />
    </div>
  )
}