From 55a019c05466c21518b901fa2096622d55ac8ac2 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Fri, 27 Jun 2025 09:52:34 +1000
Subject: [PATCH] Simplify dashboard items (#9882)

---
 .../widgets/QueryCountDashboardWidget.tsx     | 67 +++++++++++--------
 1 file changed, 39 insertions(+), 28 deletions(-)

diff --git a/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx b/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
index 7c1f0f82fb..839ecc3a6d 100644
--- a/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
+++ b/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
@@ -1,7 +1,7 @@
-import { ActionIcon, Group, Loader } from '@mantine/core';
-import { IconExternalLink } from '@tabler/icons-react';
+import { ActionIcon, Anchor, Group, Loader } from '@mantine/core';
+import { IconExclamationCircle } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
-import { type ReactNode, useCallback } from 'react';
+import { type ReactNode, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
@@ -54,6 +54,10 @@ function QueryCountWidget({
 
   const onFollowLink = useCallback(
     (event: any) => {
+      if (!query.isFetched) {
+        return;
+      }
+
       if (modelProperties.url_overview) {
         let url = modelProperties.url_overview;
 
@@ -67,36 +71,43 @@ function QueryCountWidget({
         navigateToLink(url, navigate, event);
       }
     },
-    [modelProperties, params]
+    [query.isFetched, modelProperties, params]
   );
 
+  const result: ReactNode = useMemo(() => {
+    if (query.isFetching) {
+      return <Loader size='xs' />;
+    } else if (query.isError) {
+      return (
+        <ActionIcon color='red' variant='transparent' size='lg'>
+          <IconExclamationCircle />
+        </ActionIcon>
+      );
+    } else {
+      return <StylishText size='xl'>{query.data?.count ?? '-'}</StylishText>;
+    }
+  }, [query.isFetching, query.isError, query.data]);
+
   return (
-    <Group
-      gap='xs'
-      wrap='nowrap'
-      justify='space-between'
-      align='center'
-      style={{ height: '100%' }}
-    >
-      <Group gap='xs'>
-        <InvenTreeIcon icon={icon ?? modelProperties.icon} />
-        <StylishText size='md'>{title}</StylishText>
-      </Group>
-      <Group gap='xs' wrap='nowrap' justify='space-apart'>
-        <Group gap='xs' wrap='nowrap' justify='right'>
-          {query.isFetching ? (
-            <Loader size='sm' />
-          ) : (
-            <StylishText size='md'>{query.data?.count ?? '-'}</StylishText>
-          )}
-          {modelProperties?.url_overview && (
-            <ActionIcon size='sm' variant='transparent' onClick={onFollowLink}>
-              <IconExternalLink />
-            </ActionIcon>
-          )}
+    <Anchor href='#' onClick={onFollowLink}>
+      <Group
+        gap='xs'
+        wrap='nowrap'
+        justify='space-between'
+        align='center'
+        style={{ height: '100%' }}
+      >
+        <Group gap='xs'>
+          <InvenTreeIcon icon={icon ?? modelProperties.icon} />
+          <StylishText size='md'>{title}</StylishText>
+        </Group>
+        <Group gap='xs' wrap='nowrap' justify='space-apart'>
+          <Group gap='xs' wrap='nowrap' justify='right'>
+            {result}
+          </Group>
         </Group>
       </Group>
-    </Group>
+    </Anchor>
   );
 }