feat: show issuer_name in CA tables and support outline variant in Badge

src/components/admin/ArchiveManagementTable.tsx

@@ -22,6 +22,7 @@ interface CaCertificate {
   valid_to: string;
   status: string;
   is_latest: boolean;
+  issuer_name?: string;
 }
 
 interface ArchiveManagementTableProps {
@@ -80,6 +81,9 @@ export default function ArchiveManagementTable({
                 <TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
                   {t("common_name_th")}
                 </TableCell>
+                <TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
+                  {t("issuer_th")}
+                </TableCell>
                 <TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
                   {t("validity_th")}
                 </TableCell>
@@ -104,6 +108,17 @@ export default function ArchiveManagementTable({
                         <span className="text-[10px] text-gray-400">{formatType(cert.ca_type)}</span>
                     </div>
                   </TableCell>
+                  <TableCell className="px-5 py-4 text-start">
+                    {cert.issuer_name === "Self-Signed" ? (
+                      <Badge size="sm" color="info" variant="outline" className="text-[10px]">
+                        {t("self_signed")}
+                      </Badge>
+                    ) : (
+                      <span className="text-[10px] text-gray-600 dark:text-gray-400 italic">
+                        {cert.issuer_name || "-"}
+                      </span>
+                    )}
+                  </TableCell>
                   <TableCell className="px-5 py-4 text-start text-theme-xs text-gray-500 dark:text-gray-400">
                     <div className="flex flex-col">
                       <span>{new Date(cert.valid_from).toLocaleDateString()}</span>
@@ -140,7 +155,7 @@ export default function ArchiveManagementTable({
               ))}
               {filteredCertificates.length === 0 && (
                 <TableRow>
-                  <TableCell colSpan={5} className="px-5 py-10 text-center text-gray-500 dark:text-gray-400">
+                  <TableCell colSpan={6} className="px-5 py-10 text-center text-gray-500 dark:text-gray-400">
                     No versions found.
                   </TableCell>
                 </TableRow>

src/components/admin/RootCaTable.tsx

@@ -21,6 +21,7 @@ interface CaCertificate {
   valid_from: string;
   valid_to: string;
   status: string;
+  issuer_name?: string;
 }
 
 interface RootCaTableProps {
@@ -79,6 +80,9 @@ export default function RootCaTable({
                 <TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
                   {t("common_name_th")}
                 </TableCell>
+                <TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
+                  {t("issuer_th")}
+                </TableCell>
                 <TableCell isHeader className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">
                   {t("serial_th")}
                 </TableCell>
@@ -103,6 +107,17 @@ export default function RootCaTable({
                   <TableCell className="px-5 py-4 text-start text-theme-sm text-gray-600 dark:text-gray-400">
                     {cert.common_name}
                   </TableCell>
+                  <TableCell className="px-5 py-4 text-start">
+                    {cert.issuer_name === "Self-Signed" ? (
+                      <Badge size="sm" color="info" variant="outline">
+                        {t("self_signed")}
+                      </Badge>
+                    ) : (
+                      <span className="text-theme-sm text-gray-600 dark:text-gray-400 italic">
+                        {cert.issuer_name || "-"}
+                      </span>
+                    )}
+                  </TableCell>
                   <TableCell className="px-5 py-4 text-start font-mono text-theme-xs text-gray-500 dark:text-gray-400">
                     {cert.serial_number}
                   </TableCell>
@@ -127,7 +142,7 @@ export default function RootCaTable({
               ))}
               {filteredCertificates.length === 0 && (
                 <TableRow>
-                  <TableCell colSpan={6} className="px-5 py-10 text-center text-gray-500 dark:text-gray-400">
+                  <TableCell colSpan={7} className="px-5 py-10 text-center text-gray-500 dark:text-gray-400">
                     {searchTerm ? t("no_ca_search", { term: searchTerm }) : t("no_ca_found")}
                   </TableCell>
                 </TableRow>

src/components/ui/badge/Badge.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-type BadgeVariant = "light" | "solid";
+type BadgeVariant = "light" | "solid" | "outline";
 type BadgeSize = "sm" | "md";
 type BadgeColor =
   | "primary"
@@ -18,6 +18,7 @@ interface BadgeProps {
   startIcon?: React.ReactNode; // Icon at the start
   endIcon?: React.ReactNode; // Icon at the end
   children: React.ReactNode; // Badge content
+  className?: string; // Additional classes
 }
 
 const Badge: React.FC<BadgeProps> = ({
@@ -27,6 +28,7 @@ const Badge: React.FC<BadgeProps> = ({
   startIcon,
   endIcon,
   children,
+  className = "",
 }) => {
   const baseStyles =
     "inline-flex items-center px-2.5 py-0.5 justify-center gap-1 rounded-full font-medium";
@@ -61,6 +63,16 @@ const Badge: React.FC<BadgeProps> = ({
       light: "bg-gray-400 dark:bg-white/5 text-white dark:text-white/80",
       dark: "bg-gray-700 text-white dark:text-white",
     },
+    outline: {
+      primary: "border border-brand-500 text-brand-500 dark:text-brand-400",
+      success:
+        "border border-success-500 text-success-600 dark:text-success-500",
+      error: "border border-error-500 text-error-600 dark:text-error-500",
+      warning: "border border-warning-500 text-warning-600 dark:text-orange-400",
+      info: "border border-blue-light-500 text-blue-light-500 dark:text-blue-light-500",
+      light: "border border-gray-200 text-gray-700 dark:border-white/10 dark:text-white/80",
+      dark: "border border-gray-700 text-white dark:border-white/20 dark:text-white",
+    },
   };
 
   // Get styles based on size and color variant
@@ -68,7 +80,7 @@ const Badge: React.FC<BadgeProps> = ({
   const colorStyles = variants[variant][color];
 
   return (
-    <span className={`${baseStyles} ${sizeClass} ${colorStyles}`}>
+    <span className={`${baseStyles} ${sizeClass} ${colorStyles} ${className}`}>
       {startIcon && <span className="mr-1">{startIcon}</span>}
       {children}
       {endIcon && <span className="ml-1">{endIcon}</span>}

src/messages/en.json

@@ -664,6 +664,7 @@
         "search_placeholder": "Search CAs...",
         "type_th": "Type",
         "common_name_th": "Common Name",
+        "issuer_th": "Issued By",
         "serial_th": "Serial Number",
         "validity_th": "Validity Period",
         "status_th": "Status",
@@ -671,6 +672,7 @@
         "validity_to_label": "to",
         "status_valid": "Valid",
         "status_expired": "Expired",
+        "self_signed": "Self-Signed",
         "renew_button": "Renew Now",
         "no_ca_search": "No CAs matched \"{term}\"",
         "no_ca_found": "No Root CA certificates found. Run CA Setup from Certificates page."

src/messages/id.json

@@ -664,6 +664,7 @@
         "search_placeholder": "Cari CA...",
         "type_th": "Tipe",
         "common_name_th": "Common Name",
+        "issuer_th": "Diterbitkan Oleh",
         "serial_th": "Nomor Seri",
         "validity_th": "Masa Berlaku",
         "status_th": "Status",
@@ -671,6 +672,7 @@
         "validity_to_label": "ke",
         "status_valid": "Valid",
         "status_expired": "Kedaluwarsa",
+        "self_signed": "Self-Signed",
         "renew_button": "Perbarui",
         "no_ca_search": "Tidak ada CA yang cocok dengan \"{term}\"",
         "no_ca_found": "Sertifikat Root CA tidak ditemukan. Jalankan Pengaturan CA dari halaman Sertifikat."