+
diff --git a/src/components/UploadCard/UploadCard.tsx b/src/components/UploadCard/UploadCard.tsx
index c5047eb..9f964c9 100644
--- a/src/components/UploadCard/UploadCard.tsx
+++ b/src/components/UploadCard/UploadCard.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router-dom'
import { BcfData, downloadBcfReport } from '../../utils/bcfUtils'
+import { ValidationResult } from '../../types/validation'
import { processFile } from './processFile.ts'
import {
ErrorDisplay,
@@ -15,7 +16,8 @@ import {
UploadInstructions,
} from './components'
import { UploadCardTitle } from './UploadCardTitle.tsx'
-import { useFileProcessor, useHtmlReport } from './hooks'
+import { useFileProcessor } from './hooks'
+import { useEnhancedHtmlReport } from './hooks/useEnhancedHtmlReport'
import { FileError } from './hooks/useFileProcessor'
export const UploadCard = () => {
@@ -53,7 +55,7 @@ export const UploadCard = () => {
reportFormats,
})
- const { openHtmlReport } = useHtmlReport(templateContent, i18n)
+ const { openHtmlReport, downloadHtmlReport } = useEnhancedHtmlReport(templateContent, i18n)
// Function to scroll to results
const scrollToResults = () => {
@@ -77,13 +79,16 @@ export const UploadCard = () => {
useEffect(() => {
// Load the HTML template
- fetch('/report.html')
- .then((response) => response.text())
- .then((content) => {
- console.log('Template loaded, length:', content.length)
+ const loadTemplate = async () => {
+ try {
+ const response = await fetch('/report.html')
+ const content = await response.text()
setTemplateContent(content)
- })
- .catch((error) => console.error('Error loading template:', error))
+ } catch (error) {
+ console.error('Failed to load template:', error)
+ }
+ }
+ loadTemplate()
}, [])
const handleBcfDownload = (result: {
@@ -104,6 +109,15 @@ export const UploadCard = () => {
}
}
+ const handleHtmlDownload = async (result: ValidationResult, fileName: string) => {
+ try {
+ await downloadHtmlReport(result, fileName)
+ } catch (error) {
+ console.error('Failed to download HTML report:', error)
+ setUploadError(`Failed to download HTML report: ${error instanceof Error ? error.message : 'Unknown error'}`)
+ }
+ }
+
const handleClick = async () => {
setUploadError(null)
setProcessedResults([])
@@ -178,6 +192,7 @@ export const UploadCard = () => {
processedResults={processedResults}
reportFormats={reportFormats}
onHtmlReport={openHtmlReport}
+ onHtmlDownload={handleHtmlDownload}
onBcfDownload={handleBcfDownload}
resultsRef={resultsRef}
/>
diff --git a/src/components/UploadCard/components/ProcessingConsole.tsx b/src/components/UploadCard/components/ProcessingConsole.tsx
index acf0c71..c4d8b9f 100644
--- a/src/components/UploadCard/components/ProcessingConsole.tsx
+++ b/src/components/UploadCard/components/ProcessingConsole.tsx
@@ -1,5 +1,5 @@
import { Group, Paper, ScrollArea, Stack, Text } from '@mantine/core'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
interface ProcessingConsoleProps {
@@ -25,6 +25,7 @@ const consoleStyles = {
export const ProcessingConsole = ({ isProcessing, logs }: ProcessingConsoleProps) => {
const { t } = useTranslation()
const [loadingDots, setLoadingDots] = useState('')
+ const bottomRef = useRef
(null)
useEffect(() => {
if (isProcessing) {
@@ -35,6 +36,15 @@ export const ProcessingConsole = ({ isProcessing, logs }: ProcessingConsoleProps
}
}, [isProcessing])
+ // Auto-scroll to the latest log entry whenever logs update or processing state changes
+ useEffect(() => {
+ // Slight delay ensures DOM has rendered the new log before scrolling
+ const id = setTimeout(() => {
+ bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })
+ }, 0)
+ return () => clearTimeout(id)
+ }, [logs.length, isProcessing])
+
if (!isProcessing && logs.length === 0) {
return null
}
@@ -77,6 +87,7 @@ export const ProcessingConsole = ({ isProcessing, logs }: ProcessingConsoleProps
{loadingDots}
)}
+
diff --git a/src/components/UploadCard/components/ResultsDisplay.tsx b/src/components/UploadCard/components/ResultsDisplay.tsx
index f4975c5..bfecbd1 100644
--- a/src/components/UploadCard/components/ResultsDisplay.tsx
+++ b/src/components/UploadCard/components/ResultsDisplay.tsx
@@ -1,4 +1,4 @@
-import { Alert, Button, Group, Text } from '@mantine/core'
+import { Alert, Button, Group, Text, Tooltip } from '@mantine/core'
import { IconDownload, IconFileText } from '@tabler/icons-react'
import { useTranslation } from 'react-i18next'
import { useEffect, RefObject } from 'react'
@@ -13,6 +13,7 @@ interface ResultsDisplayProps {
bcf: boolean
}
onHtmlReport: (result: ValidationResult, fileName: string) => void
+ onHtmlDownload: (result: ValidationResult, fileName: string) => Promise
onBcfDownload: (result: {
fileName: string
result: {
@@ -26,6 +27,7 @@ export const ResultsDisplay = ({
processedResults,
reportFormats,
onHtmlReport,
+ onHtmlDownload,
onBcfDownload,
resultsRef,
}: ResultsDisplayProps) => {
@@ -67,57 +69,93 @@ export const ResultsDisplay = ({
{processedResults.map((result, index) => (
{reportFormats.html && (
-
+
+
+
+
)}
{reportFormats.bcf && (