refactor(admin): Display version updates

ui/src/common/interface.ts

@@ -342,7 +342,10 @@ export interface AdminDashboard {
     time_zone: string;
     occupying_storage_space: string;
     app_start_time: number;
-    app_version: string;
     https: boolean;
+    version_info: {
+      remote_version: string;
+      version: string;
+    };
   };
 }

ui/src/pages/Admin/Dashboard/components/HealthStatus/index.tsx

@@ -11,7 +11,8 @@ interface IProps {
 
 const HealthStatus: FC<IProps> = ({ data }) => {
   const { t } = useTranslation('translation', { keyPrefix: 'admin.dashboard' });
-
+  const { version, remote_version } = data.version_info || {};
+  const isLatest = version === remote_version;
   return (
     <Card className="mb-4">
       <Card.Body>
@@ -19,10 +20,22 @@ const HealthStatus: FC<IProps> = ({ data }) => {
         <Row>
           <Col xs={6} className="mb-1 d-flex align-items-center">
             <span className="text-secondary me-1">{t('version')}</span>
-            <strong>90</strong>
-            <Badge pill bg="warning" text="dark" className="ms-1">
-              {t('update_to')} {data.app_version}
-            </Badge>
+            <strong>{version}</strong>
+            {isLatest && (
+              <Badge pill bg="success" className="ms-1">
+                {t('latest')}
+              </Badge>
+            )}
+            {!isLatest && remote_version && (
+              <Badge pill bg="warning" text="dark" className="ms-1">
+                {t('update_to')} {remote_version}
+              </Badge>
+            )}
+            {!isLatest && !remote_version && (
+              <Badge pill bg="danger" className="ms-1">
+                {t('check_failed')}
+              </Badge>
+            )}
           </Col>
           <Col xs={6} className="mb-1">
             <span className="text-secondary me-1">{t('https')}</span>

ui/src/pages/Admin/Dashboard/index.tsx

@@ -18,6 +18,7 @@ const Dashboard: FC = () => {
   if (!data) {
     return null;
   }
+
   return (
     <>
       <h3 className="text-capitalize">{t('title')}</h3>