From 38374acdcd9769924e0523218c22fcc6a13fca5f Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Mon, 26 May 2025 21:52:10 +0800
Subject: [PATCH] Fix: Apply grid style to SSL overview cards

---
 .../ssl-domain/SSLCertificateStatusCards.tsx  | 66 +++++++------------
 1 file changed, 25 insertions(+), 41 deletions(-)

diff --git a/application/src/components/ssl-domain/SSLCertificateStatusCards.tsx b/application/src/components/ssl-domain/SSLCertificateStatusCards.tsx
index b703a44..d449cfe 100644
--- a/application/src/components/ssl-domain/SSLCertificateStatusCards.tsx
+++ b/application/src/components/ssl-domain/SSLCertificateStatusCards.tsx
@@ -1,7 +1,9 @@
+
 import React from "react";
-import { Card } from "@/components/ui/card";
 import { SSLCertificate } from "@/types/ssl.types";
 import { useLanguage } from "@/contexts/LanguageContext";
+import { OverviewCard } from "@/components/schedule-incident/common/OverviewCard";
+import { Shield, ShieldAlert, ShieldX } from "lucide-react";
 
 interface SSLCertificateStatusCardsProps {
   certificates: SSLCertificate[];
@@ -16,48 +18,30 @@ export const SSLCertificateStatusCards = ({ certificates }: SSLCertificateStatus
   const expiredCount = certificates.filter(cert => cert.status === 'expired').length;
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-      <Card className="p-6 flex items-center space-x-4">
-        <div className="bg-green-100 dark:bg-green-900/20 p-3 rounded-full">
-          <div className="h-12 w-12 rounded-full bg-green-500/20 flex items-center justify-center">
-            <div className="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center text-white">
-              ✓
-            </div>
-          </div>
-        </div>
-        <div>
-          <p className="text-sm font-medium text-muted-foreground">{t('validCertificates')}</p>
-          <p className="text-3xl font-bold">{validCount}</p>
-        </div>
-      </Card>
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <OverviewCard
+        title={t('validCertificates')}
+        value={validCount}
+        icon={<Shield className="h-6 w-6 text-white" />}
+        color="green"
+        className="hover:scale-105 transition-transform duration-200"
+      />
 
-      <Card className="p-6 flex items-center space-x-4">
-        <div className="bg-yellow-100 dark:bg-yellow-900/20 p-3 rounded-full">
-          <div className="h-12 w-12 rounded-full bg-yellow-500/20 flex items-center justify-center">
-            <div className="h-8 w-8 rounded-full bg-yellow-500 flex items-center justify-center text-white">
-              !
-            </div>
-          </div>
-        </div>
-        <div>
-          <p className="text-sm font-medium text-muted-foreground">{t('expiringSoon')}</p>
-          <p className="text-3xl font-bold">{expiringCount}</p>
-        </div>
-      </Card>
+      <OverviewCard
+        title={t('expiringSoon')}
+        value={expiringCount}
+        icon={<ShieldAlert className="h-6 w-6 text-white" />}
+        color="amber"
+        className="hover:scale-105 transition-transform duration-200"
+      />
 
-      <Card className="p-6 flex items-center space-x-4">
-        <div className="bg-red-100 dark:bg-red-900/20 p-3 rounded-full">
-          <div className="h-12 w-12 rounded-full bg-red-500/20 flex items-center justify-center">
-            <div className="h-8 w-8 rounded-full bg-red-500 flex items-center justify-center text-white">
-              ✗
-            </div>
-          </div>
-        </div>
-        <div>
-          <p className="text-sm font-medium text-muted-foreground">{t('expired')}</p>
-          <p className="text-3xl font-bold">{expiredCount}</p>
-        </div>
-      </Card>
+      <OverviewCard
+        title={t('expired')}
+        value={expiredCount}
+        icon={<ShieldX className="h-6 w-6 text-white" />}
+        color="red"
+        className="hover:scale-105 transition-transform duration-200"
+      />
     </div>
   );
 };
\ No newline at end of file