Generated by Spark: Add percentage of react pages with translation coverage to roadmap view

src/components/roadmap-view.tsx

@@ -1,10 +1,11 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
-import { CheckCircle, ClockCounterClockwise, MapTrifold, Warning, Download } from '@phosphor-icons/react'
+import { CheckCircle, ClockCounterClockwise, MapTrifold, Warning, Download, Translate } from '@phosphor-icons/react'
 import { cn } from '@/lib/utils'
 import { useState, useEffect } from 'react'
 import { useTranslation } from '@/hooks/use-translation'
 import { useAppSelector } from '@/store/hooks'
+import { calculateTranslationCoverage } from '@/lib/translation-coverage'
 
 type FeatureStatus = 'completed' | 'inProgress' | 'planned'
 
@@ -76,6 +77,7 @@ export function RoadmapView() {
   const locale = useAppSelector(state => state.ui.locale)
   const [data, setData] = useState<RoadmapData | null>(null)
   const [isLoading, setIsLoading] = useState(true)
+  const translationCoverage = calculateTranslationCoverage()
 
   useEffect(() => {
     const loadRoadmap = async () => {
@@ -188,7 +190,7 @@ export function RoadmapView() {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
         <Card className="border-l-4 border-success/20">
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground flex items-center gap-2">
@@ -228,6 +230,21 @@ export function RoadmapView() {
           </CardContent>
         </Card>
 
+        <Card className="border-l-4 border-info/20">
+          <CardHeader>
+            <CardTitle className="text-sm text-muted-foreground flex items-center gap-2">
+              <Translate size={18} className="text-info" weight="fill" />
+              {t('roadmap.translationCoverage')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-semibold">{translationCoverage.percentage}%</div>
+            <p className="text-sm text-muted-foreground mt-1">
+              {translationCoverage.translatedPages}/{translationCoverage.totalPages} {t('roadmap.pagesTranslated')}
+            </p>
+          </CardContent>
+        </Card>
+
         <Card className="border-l-4 border-accent/20">
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground flex items-center gap-2">

src/data/translations/en.json

@@ -1177,6 +1177,8 @@
     "componentLibrary": "Component Library",
     "currentFocus": "Current Focus",
     "totalPhases": "Total Phases",
+    "translationCoverage": "Translation Coverage",
+    "pagesTranslated": "pages translated",
     "overview": "Overview",
     "legend": "Legend",
     "technicalInfrastructure": "Technical Infrastructure",

src/data/translations/es.json

@@ -1177,6 +1177,8 @@
     "componentLibrary": "Biblioteca de Componentes",
     "currentFocus": "Enfoque Actual",
     "totalPhases": "Fases Totales",
+    "translationCoverage": "Cobertura de Traducción",
+    "pagesTranslated": "páginas traducidas",
     "overview": "Resumen",
     "legend": "Leyenda",
     "technicalInfrastructure": "Infraestructura Técnica",

src/data/translations/fr.json

@@ -1177,6 +1177,8 @@
     "componentLibrary": "Bibliothèque de Composants",
     "currentFocus": "Focus Actuel",
     "totalPhases": "Phases Totales",
+    "translationCoverage": "Couverture des Traductions",
+    "pagesTranslated": "pages traduites",
     "overview": "Vue d'Ensemble",
     "legend": "Légende",
     "technicalInfrastructure": "Infrastructure Technique",

src/lib/translation-coverage.ts

@@ -0,0 +1,132 @@
+const REACT_PAGES = [
+  'App.tsx',
+  'ErrorFallback.tsx',
+  'components/AdvancedSearch.tsx',
+  'components/ApprovalWorkflowTemplateManager.tsx',
+  'components/AuditTrailViewer.tsx',
+  'components/BatchImportManager.tsx',
+  'components/BusinessLogicDemo.tsx',
+  'components/ComplianceDetailDialog.tsx',
+  'components/ComponentShowcase.tsx',
+  'components/ContractValidator.tsx',
+  'components/CreateInvoiceDialog.tsx',
+  'components/CreatePAYESubmissionDialog.tsx',
+  'components/CreatePayrollDialog.tsx',
+  'components/CreditNoteGenerator.tsx',
+  'components/CurrencyManagement.tsx',
+  'components/CustomReportBuilder.tsx',
+  'components/DataManagement.tsx',
+  'components/DetailedTimesheetEntry.tsx',
+  'components/EmailTemplateManager.tsx',
+  'components/ExpenseDetailDialog.tsx',
+  'components/HolidayPayManager.tsx',
+  'components/IndexedDBDemo.tsx',
+  'components/InvoiceDetailDialog.tsx',
+  'components/InvoiceTemplateManager.tsx',
+  'components/KeyboardShortcutsDialog.tsx',
+  'components/LanguageSwitcher.tsx',
+  'components/LoginScreen.tsx',
+  'components/MissingTimesheetsReport.tsx',
+  'components/NotificationCenter.tsx',
+  'components/NotificationRulesManager.tsx',
+  'components/OnboardingWorkflowManager.tsx',
+  'components/OneClickPayroll.tsx',
+  'components/PAYEManager.tsx',
+  'components/ParallelApprovalDemo.tsx',
+  'components/PayrollApprovalWorkflow.tsx',
+  'components/PayrollBatchList.tsx',
+  'components/PayrollBatchProcessor.tsx',
+  'components/PayrollDetailDialog.tsx',
+  'components/PermanentPlacementInvoice.tsx',
+  'components/PermissionGate.tsx',
+  'components/PurchaseOrderManager.tsx',
+  'components/PurchaseOrderTracking.tsx',
+  'components/QRTimesheetScanner.tsx',
+  'components/QueryLanguageGuide.tsx',
+  'components/RateTemplateManager.tsx',
+  'components/ReportsView.tsx',
+  'components/ScreenReaderOnly.tsx',
+  'components/SessionExpiryDialog.tsx',
+  'components/SessionManager.tsx',
+  'components/ShiftDetailDialog.tsx',
+  'components/ShiftPatternManager.tsx',
+  'components/ShiftPremiumCalculator.tsx',
+  'components/TimeAndRateAdjustmentWizard.tsx',
+  'components/TimesheetAdjustmentWizard.tsx',
+  'components/TimesheetCard.tsx',
+  'components/TimesheetDetailDialog.tsx',
+  'components/TranslationDemo.tsx',
+  'components/ViewRouter.tsx',
+  'components/dashboard-view.tsx',
+  'components/roadmap-view.tsx',
+  'components/views/BillingView.tsx',
+  'components/views/ComplianceView.tsx',
+  'components/views/DashboardView.tsx',
+  'components/views/ExpensesView.tsx',
+  'components/views/PayrollView.tsx',
+  'components/views/TimesheetsView.tsx',
+  'components/views/data-admin-view.tsx',
+  'components/views/profile-view.tsx',
+  'components/views/roles-permissions-view.tsx',
+  'components/nav/sidebar.tsx',
+]
+
+const PAGES_WITH_TRANSLATIONS = [
+  'App.tsx',
+  'components/AdvancedSearch.tsx',
+  'components/AuditTrailViewer.tsx',
+  'components/BatchImportManager.tsx',
+  'components/CurrencyManagement.tsx',
+  'components/CustomReportBuilder.tsx',
+  'components/EmailTemplateManager.tsx',
+  'components/HolidayPayManager.tsx',
+  'components/InvoiceTemplateManager.tsx',
+  'components/KeyboardShortcutsDialog.tsx',
+  'components/LanguageSwitcher.tsx',
+  'components/MissingTimesheetsReport.tsx',
+  'components/NotificationCenter.tsx',
+  'components/NotificationRulesManager.tsx',
+  'components/OnboardingWorkflowManager.tsx',
+  'components/PAYEManager.tsx',
+  'components/PurchaseOrderManager.tsx',
+  'components/PurchaseOrderTracking.tsx',
+  'components/QRTimesheetScanner.tsx',
+  'components/QueryLanguageGuide.tsx',
+  'components/RateTemplateManager.tsx',
+  'components/ReportsView.tsx',
+  'components/SessionExpiryDialog.tsx',
+  'components/ShiftPatternManager.tsx',
+  'components/ViewRouter.tsx',
+  'components/roadmap-view.tsx',
+  'components/views/BillingView.tsx',
+  'components/views/ComplianceView.tsx',
+  'components/views/DashboardView.tsx',
+  'components/views/ExpensesView.tsx',
+  'components/views/PayrollView.tsx',
+  'components/views/TimesheetsView.tsx',
+  'components/nav/sidebar.tsx',
+]
+
+export interface TranslationCoverage {
+  totalPages: number
+  translatedPages: number
+  percentage: number
+  pagesWithoutTranslations: string[]
+}
+
+export function calculateTranslationCoverage(): TranslationCoverage {
+  const totalPages = REACT_PAGES.length
+  const translatedPages = PAGES_WITH_TRANSLATIONS.length
+  const percentage = Math.round((translatedPages / totalPages) * 100)
+  
+  const pagesWithoutTranslations = REACT_PAGES.filter(
+    page => !PAGES_WITH_TRANSLATIONS.includes(page)
+  )
+
+  return {
+    totalPages,
+    translatedPages,
+    percentage,
+    pagesWithoutTranslations,
+  }
+}