From 6ee7b6129de9652561f5f27865d73803e4542e15 Mon Sep 17 00:00:00 2001 From: AkshuBalkitta Date: Tue, 2 Jun 2026 11:50:39 +0530 Subject: [PATCH] Fix issue #11 --- .gitignore | 1 + src/app/history/page.tsx | 52 +++++++++++++- src/app/result/page.tsx | 123 ++++++++++++++++++++++++++++++--- src/components/ui/Skeleton.tsx | 11 +++ 4 files changed, 174 insertions(+), 13 deletions(-) create mode 100644 src/components/ui/Skeleton.tsx diff --git a/.gitignore b/.gitignore index 77383f8..d0e37ca 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ backend/__pycache__/ *.csv *.db .env +.env.local .vscode/ *.log server/uploads/* diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx index 82ca0ad..d192ca5 100644 --- a/src/app/history/page.tsx +++ b/src/app/history/page.tsx @@ -1,6 +1,7 @@ "use client"; import { useEffect, useState } from "react"; +import { Skeleton } from "@/components/ui/Skeleton"; import Link from "next/link"; interface Record { @@ -12,6 +13,53 @@ interface Record { riskLevel: string; } +function HistoryTableSkeleton() { + return ( +
+ + + + {["Date & Time", "File Reference", "Diagnosis", "Confidence", "Action"].map((col) => ( + + ))} + + + + {Array.from({ length: 7 }).map((_, i) => ( + + {/* Date & Time */} + + {/* File Reference */} + + {/* Diagnosis badge */} + + {/* Confidence bar + number */} + + {/* Action button */} + + + ))} + +
+ {col} +
+ + + + + + +
+ + +
+ 		+ +
+
+ ); +} + export default function HistoryPage() { const [records, setRecords] = useState([]); const [loading, setLoading] = useState(true); @@ -49,9 +97,7 @@ export default function HistoryPage() {
{loading ? ( -
- Syncing with Clinical Database... -
+ ) : records.length === 0 ? (

No records found in the database.

diff --git a/src/app/result/page.tsx b/src/app/result/page.tsx index 54e6841..6d43a3e 100644 --- a/src/app/result/page.tsx +++ b/src/app/result/page.tsx @@ -1,7 +1,8 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import Link from "next/link"; +import { Skeleton } from "@/components/ui/Skeleton"; interface AnalysisResult { _id?: string; @@ -15,15 +16,118 @@ interface AnalysisResult { heatmap?: string; } +function ResultSkeleton() { + return ( +
+ {/* Report Header */} +
+
+ + +
+
+ + +
+
+ +
+ {/* Main card — lg:col-span-3 */} +
+
+ + {/* Diagnosis status + right panel */} +
+ {/* Left: diagnosis title + confidence bar */} +
+ {/* "Diagnosis Status" label */} + {/* Big diagnosis word */} +
+
+ + +
+ {/* confidence bar */} +
+
+ + {/* Right: severity card + scan preview */} +
+
+ + +
+ {/* scan preview */} +
+
+ + {/* Technical Observations */} +
+ +
+ {/* Observation rows */} +
+ {Array.from({ length: 5 }).map((_, i) => ( +
+ + +
+ ))} +
+ {/* Heatmap placeholder */} + +
+
+ + {/* Explanation section */} +
+ +
+ {Array.from({ length: 2 }).map((_, i) => ( +
+ + + + +
+ ))} +
+
+
+
+ + {/* Recommendations sidebar — lg:col-span-1 */} +
+
+ +
+ + + +
+
+ {Array.from({ length: 3 }).map((_, i) => ( +
+ + +
+ ))} +
+ +
+
+
+
+ ); +} + export default function ResultPage() { - const [result] = useState(() => { - if (typeof window === "undefined") { - return null; - } + const [result, setResult] = useState(null); - const data = sessionStorage.getItem("lastAnalysis"); - return data ? JSON.parse(data) : null; - }); +useEffect(() => { + const data = sessionStorage.getItem("lastAnalysis"); + setResult(data ? JSON.parse(data) : null); +}, []); const handleExportPDF = () => { if (result?._id) { @@ -35,8 +139,7 @@ export default function ResultPage() { if (!result) { return (
-

Loading analysis results...

- Go back to upload +
); } diff --git a/src/components/ui/Skeleton.tsx b/src/components/ui/Skeleton.tsx new file mode 100644 index 0000000..f38d216 --- /dev/null +++ b/src/components/ui/Skeleton.tsx @@ -0,0 +1,11 @@ +// src/components/ui/Skeleton.tsx + +interface SkeletonProps { + className?: string; +} + +export function Skeleton({ className = "" }: SkeletonProps) { + return ( +
+ ); +} \ No newline at end of file