From c17d902b9ae63568685dbfc676e4e2705b939522 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Wed, 28 May 2025 15:35:36 +0800
Subject: [PATCH] Fixed: in About System page, make it auto-updates with each
 new release on GitHub without any hardcoded values

---
 .../settings/about-system/AboutSystem.tsx     | 71 +++++++++++++------
 1 file changed, 48 insertions(+), 23 deletions(-)

diff --git a/application/src/components/settings/about-system/AboutSystem.tsx b/application/src/components/settings/about-system/AboutSystem.tsx
index 9509d2e..ae2ce8d 100644
--- a/application/src/components/settings/about-system/AboutSystem.tsx
+++ b/application/src/components/settings/about-system/AboutSystem.tsx
@@ -1,30 +1,51 @@
-
-import React from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import React, { useEffect, useState } from 'react';
+import { format } from 'date-fns';
+import {
+  Card, CardContent, CardDescription, CardHeader, CardTitle,
+} from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
-import { Github, FileText, Twitter, MessageCircle, Code2, ServerIcon } from "lucide-react";
+import {
+  Github, FileText, Twitter, MessageCircle, Code2, ServerIcon,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { useTheme } from "@/contexts/ThemeContext";
 import { useSystemSettings } from "@/hooks/useSystemSettings";
+
 export const AboutSystem: React.FC = () => {
-  const {
-    t
-  } = useLanguage();
-  const {
-    theme
-  } = useTheme();
-  const {
-    systemName
-  } = useSystemSettings();
-  return <div className="space-y-6 animate-fade-in">
+  const { t } = useLanguage();
+  const { theme } = useTheme();
+  const { systemName } = useSystemSettings();
+
+  const [version, setVersion] = useState<string>('...');
+  const [releaseDate, setReleaseDate] = useState<string>('...');
+
+  useEffect(() => {
+    const fetchLatestRelease = async () => {
+      try {
+        const res = await fetch('https://api.github.com/repos/operacle/checkcle/releases/latest');
+        const data = await res.json();
+        setVersion(data.tag_name || 'v1.x.x');
+        setReleaseDate(data.published_at ? format(new Date(data.published_at), 'MMMM d, yyyy') : t('unknown'));
+      } catch (err) {
+        setVersion('v1.x.x');
+        setReleaseDate(t('unknown'));
+      }
+    };
+    fetchLatestRelease();
+  }, [t]);
+
+  return (
+    <div className="space-y-6 animate-fade-in">
       <div>
         <h1 className="text-3xl font-bold tracking-tight">{t('aboutSystem')}</h1>
-        <p className="text-muted-foreground text-base leading-relaxed mt-2">{t('aboutCheckcle')}</p>
+        <p className="text-muted-foreground text-base leading-relaxed mt-2">
+          {t('aboutCheckcle')}
+        </p>
       </div>
-      
+
       <Separator />
-      
+
       <div className="grid gap-8 md:grid-cols-2">
         <Card className="overflow-hidden border border-border transition-all duration-300 hover:shadow-md">
           <CardHeader className="bg-muted/50 pb-4">
@@ -38,7 +59,7 @@ export const AboutSystem: React.FC = () => {
               <div className="flex flex-col space-y-3 pt-2">
                 <div className="flex justify-between items-center">
                   <span className="text-muted-foreground">{t('systemVersion')}</span>
-                  <span className="text-foreground font-medium">{t('version')} 1.1.0</span>
+                  <span className="text-foreground font-medium">{version}</span>
                 </div>
                 <Separator className="my-1" />
                 <div className="flex justify-between items-center">
@@ -48,20 +69,22 @@ export const AboutSystem: React.FC = () => {
                 <Separator className="my-1" />
                 <div className="flex justify-between items-center">
                   <span className="text-muted-foreground">{t('releasedOn')}</span>
-                  <span className="text-foreground font-medium">May 16, 2025</span>
+                  <span className="text-foreground font-medium">{releaseDate}</span>
                 </div>
               </div>
             </div>
           </CardContent>
         </Card>
-        
+
         <Card className="overflow-hidden border border-border transition-all duration-300 hover:shadow-md">
           <CardHeader className="bg-muted/50 pb-4">
             <CardTitle className="flex items-center gap-2">
               <Code2 className={`h-5 w-5 ${theme === 'dark' ? 'text-emerald-400' : 'text-emerald-600'}`} />
               <span>{t('links')}</span>
             </CardTitle>
-            <CardDescription className="font-medium text-base">{systemName || 'ReamStack'} {t('resources').toLowerCase()}</CardDescription>
+            <CardDescription className="font-medium text-base">
+              {systemName || 'ReamStack'} {t('resources').toLowerCase()}
+            </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4 pt-6">
             <div className="grid grid-cols-1 gap-3">
@@ -85,6 +108,8 @@ export const AboutSystem: React.FC = () => {
           </CardContent>
         </Card>
       </div>
-    </div>;
+    </div>
+  );
 };
-export default AboutSystem;
\ No newline at end of file
+
+export default AboutSystem;