From d9a0b863a826c3e6543773e3834d65937e617579 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Mon, 8 Sep 2025 12:49:38 +0200
Subject: [PATCH] Format numerical values in DataFetcher component for better
 readability (#7477)

---
 frontend/src/app/data/page.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/data/page.tsx b/frontend/src/app/data/page.tsx
index 10657627c..b0694e3cd 100644
--- a/frontend/src/app/data/page.tsx
+++ b/frontend/src/app/data/page.tsx
@@ -38,6 +38,7 @@ const DataFetcher: React.FC = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(25);
   const [sortConfig, setSortConfig] = useState<{ key: string; direction: "ascending" | "descending" } | null>(null);
+  const nf = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
 
   useEffect(() => {
     const fetchSummary = async () => {
@@ -129,19 +130,24 @@ const DataFetcher: React.FC = () => {
       <p className="text-lg font-bold mt-4"> </p>
       <div className="mb-4 flex justify-between items-center">
         <p className="text-lg font-bold">
-          {summary?.total_entries}
+          {nf.format(
+            summary?.total_entries ?? 0,
+          )}
           {" "}
           results found
         </p>
         <p className="text-lg font">
           Status Legend: 🔄 installing
-          {summary?.status_count.installing ?? 0}
+          {" "}
+          {nf.format(summary?.status_count.installing ?? 0)}
           {" "}
           | ✔️ completed
-          {summary?.status_count.done ?? 0}
+          {" "}
+          {nf.format(summary?.status_count.done ?? 0)}
           {" "}
           | ❌ failed
-          {summary?.status_count.failed ?? 0}
+          {" "}
+          {nf.format(summary?.status_count.failed ?? 0)}
           {" "}
           | ❓ unknown
         </p>