style: refine Root CA Management layout and restore spec-sync buttons

src/app/dashboard/admin/root-ca/RootCaManagementClient.tsx

@@ -53,7 +53,7 @@ export default function RootCaManagementClient() {
   const { addToast } = useToast();
   const { data, error, mutate, isLoading } = useSWR("/api/admin/ca-certificates", fetcher);
   const [isRenewing, setIsRenewing] = useState(false);
-  const [isSyncing, setIsSyncing] = useState(false);
+  const [activeSync, setActiveSync] = useState<string | null>(null);
   const [isPromoting, setIsPromoting] = useState(false);
   const [confirmRenewUuid, setConfirmRenewUuid] = useState<string | null>(null);
 
@@ -83,7 +83,8 @@ export default function RootCaManagementClient() {
   };
 
   const handleSyncCdn = async (type: 'all' | 'crt' | 'installers' | 'bundles', mode: 'latest' | 'archive' | 'both' = 'both') => {
-    setIsSyncing(true);
+    const syncKey = `${type}-${mode}`;
+    setActiveSync(syncKey);
     try {
       let endpoint = "/api/admin/ca-certificates/sync-cdn";
       let msg = `Sync successful (Mode: ${mode})`;
@@ -106,7 +107,7 @@ export default function RootCaManagementClient() {
       console.error(err);
       addToast(err.response?.data?.message || "Sync failed", "error");
     } finally {
-      setIsSyncing(false);
+      setActiveSync(null);
     }
   };
 
@@ -129,61 +130,58 @@ export default function RootCaManagementClient() {
   const certificates = data?.data || [];
 
   return (
-    <div>
-      <div className="flex flex-col md:flex-row md:items-center justify-between mb-4 gap-4">
+    <div className="space-y-6">
+      <div className="flex flex-col md:flex-row md:items-center justify-between mb-2 gap-4">
         <PageBreadcrumb pageTitle={t("management_title")} />
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Left Column: Management & Renew Table */}
-        <div className="lg:col-span-2 space-y-6">
-            <CdnManagementCard 
-                onSync={handleSyncCdn}
-                isSyncing={isSyncing}
-                disabled={isLoading}
+      <div className="space-y-6">
+        {/* Main CA Management Table */}
+        <ComponentCard
+            title={t("card_title")}
+            desc={t("card_desc")}
+            className="relative"
+        >
+            <RootCaTable
+                certificates={certificates.filter((c: any) => c.is_latest || certificates.length === 1)}
+                onRenew={setConfirmRenewUuid}
+                isRenewing={isRenewing}
             />
 
-            <ComponentCard
-                title={t("card_title")}
-                desc={t("card_desc")}
-                className="relative"
-            >
-                <RootCaTable
-                    certificates={certificates.filter((c: any) => c.is_latest || certificates.length === 1)}
-                    onRenew={setConfirmRenewUuid}
-                    isRenewing={isRenewing}
-                />
+            {(isLoading || isRenewing) && (
+                <div className="absolute inset-0 bg-white/50 dark:bg-gray-900/50 flex items-center justify-center z-10 backdrop-blur-sm rounded-2xl">
+                    <PageLoader text={t("processing")} className="h-full" />
+                </div>
+            )}
+        </ComponentCard>
 
-                {(isLoading || isRenewing) && (
-                    <div className="absolute inset-0 bg-white/50 dark:bg-gray-900/50 flex items-center justify-center z-10 backdrop-blur-sm rounded-2xl">
-                        <PageLoader text={t("processing")} className="h-full" />
-                    </div>
-                )}
-            </ComponentCard>
+        {/* CDN Synchronization Controls */}
+        <CdnManagementCard 
+            onSync={handleSyncCdn}
+            activeSync={activeSync}
+            disabled={isLoading || isPromoting}
+        />
 
-            <div className="p-4 bg-blue-50 border-l-4 border-blue-400 dark:bg-blue-900/20 dark:border-blue-600 rounded-md">
-                <h4 className="text-sm font-bold text-blue-800 dark:text-blue-200">{t("info_title")}</h4>
-                <ul className="mt-2 text-xs text-blue-700 dark:text-blue-300 list-disc list-inside space-y-1">
-                    <li>{t("info_point_1")}</li>
-                    <li>{t("info_point_2")}</li>
-                    <li>{t("info_point_3")}</li>
-                    <li>{t("info_point_4")}</li>
-                </ul>
-            </div>
-        </div>
+        {/* Full-width Archive History */}
+        <ComponentCard
+            title="Version Archives"
+            desc="Browse historical versions and promote them back to Latest if needed. This table provides full visibility into your CDN audit trail."
+        >
+            <ArchiveManagementTable 
+                certificates={certificates}
+                onPromote={handlePromote}
+                isPromoting={isPromoting}
+            />
+        </ComponentCard>
 
-        {/* Right Column: Archives */}
-        <div className="lg:col-span-1">
-            <ComponentCard
-                title="Version Archives"
-                desc="Browse historical versions and promote them back to Latest if needed."
-            >
-                <ArchiveManagementTable 
-                    certificates={certificates}
-                    onPromote={handlePromote}
-                    isPromoting={isPromoting}
-                />
-            </ComponentCard>
+        <div className="p-4 bg-blue-50 border-l-4 border-blue-400 dark:bg-blue-900/20 dark:border-blue-600 rounded-md">
+            <h4 className="text-sm font-bold text-blue-800 dark:text-blue-200">{t("info_title")}</h4>
+            <ul className="mt-2 text-xs text-blue-700 dark:text-blue-300 list-disc list-inside space-y-1">
+                <li>{t("info_point_1")}</li>
+                <li>{t("info_point_2")}</li>
+                <li>{t("info_point_3")}</li>
+                <li>{t("info_point_4")}</li>
+            </ul>
         </div>
       </div>
 

src/components/admin/CdnManagementCard.tsx

@@ -6,54 +6,61 @@ import { useTranslations } from "next-intl";
 
 interface CdnManagementCardProps {
   onSync: (type: "all" | "crt" | "installers" | "bundles", mode: "latest" | "archive" | "both") => void;
-  isSyncing: boolean;
+  activeSync: string | null;
   disabled: boolean;
 }
 
-export default function CdnManagementCard({ onSync, isSyncing, disabled }: CdnManagementCardProps) {
+export default function CdnManagementCard({ onSync, activeSync, disabled }: CdnManagementCardProps) {
   const t = useTranslations("RootCA");
 
   const SyncButton = ({ 
-    onClick, 
+    type,
+    mode,
     label, 
     desc, 
     variant = "blue" 
   }: { 
-    onClick: () => void; 
+    type: "all" | "crt" | "installers" | "bundles";
+    mode: "latest" | "archive" | "both";
     label: string; 
     desc: string; 
-    variant?: "blue" | "purple" | "indigo" | "gray" 
+    variant?: "blue" | "purple" | "indigo" | "gray" | "success" | "warning";
   }) => {
+    const syncKey = `${type}-${mode}`;
+    const isLoading = activeSync === syncKey;
+
     const variantClasses = {
       blue: "bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400",
       purple: "bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400",
       indigo: "bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400",
       gray: "bg-gray-600 hover:bg-gray-700 disabled:bg-gray-400",
+      success: "bg-success-600 hover:bg-success-700 disabled:bg-success-400",
+      warning: "bg-warning-500 hover:bg-warning-600 disabled:bg-warning-400",
     };
 
     return (
-      <div className="flex flex-col gap-2 p-4 border border-gray-100 dark:border-white/[0.05] rounded-xl hover:bg-gray-50 dark:hover:bg-white/[0.02] transition-colors">
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex flex-col">
+      <div className="flex flex-col gap-2 p-4 border border-gray-100 dark:border-white/[0.05] rounded-xl hover:bg-gray-50 dark:hover:bg-white/[0.02] transition-colors h-full">
+        <div className="flex items-center justify-between gap-4 h-full">
+          <div className="flex flex-col flex-1">
             <span className="text-sm font-bold text-gray-800 dark:text-white/90">{label}</span>
-            <p className="text-xs text-gray-500 dark:text-gray-400 max-w-[250px]">{desc}</p>
+            <p className="text-[11px] text-gray-500 dark:text-gray-400 leading-tight mt-1">{desc}</p>
           </div>
           <button
-            onClick={onClick}
-            disabled={disabled || isSyncing}
-            className={`flex items-center justify-center gap-2 px-4 py-2 ${variantClasses[variant]} text-white text-xs font-medium rounded-lg transition-all shadow-sm active:scale-95 whitespace-nowrap`}
+            onClick={() => onSync(type, mode)}
+            disabled={disabled || activeSync !== null}
+            className={`flex items-center justify-center gap-2 px-4 py-2 ${variantClasses[variant]} text-white text-[11px] font-medium rounded-lg transition-all shadow-sm active:scale-95 whitespace-nowrap min-w-[100px]`}
           >
-            {isSyncing ? (
-              <svg className="animate-spin h-3.5 w-3.5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            {isLoading ? (
+              <svg className="animate-spin h-3 w-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                 <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
               </svg>
             ) : (
-              <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
               </svg>
             )}
-            {isSyncing ? "Syncing..." : "Sync Now"}
+            {isLoading ? "Syncing..." : "Sync Now"}
           </button>
         </div>
       </div>
@@ -61,36 +68,68 @@ export default function CdnManagementCard({ onSync, isSyncing, disabled }: CdnMa
   };
 
   return (
-    <ComponentCard
-      title="CDN Management"
-      desc="Control how your SSL assets are distributed and archived on the Global CDN."
-    >
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <SyncButton
-          label="Sync All (Latest & Archive)"
-          desc="The safest option. Updates human-friendly URLs and creates permanent archives for all certs."
-          onClick={() => onSync("all", "both")}
-          variant="indigo"
-        />
-        <SyncButton
-          label="Update Public Link (Latest Only)"
-          desc="Only updates 'Clean URLs'. Useful for quickly updating current public certificates."
-          onClick={() => onSync("all", "latest")}
-          variant="blue"
-        />
-        <SyncButton
-          label="Create Archives (Archive Only)"
-          desc="Only uploads to versioned folders. Won't affect current public download links."
-          onClick={() => onSync("all", "archive")}
-          variant="purple"
-        />
-        <SyncButton
-          label="Sync Global Bundles"
-          desc="Regenerate all-in-one installers using currently promoted 'Latest' versions."
-          onClick={() => onSync("bundles", "latest")}
-          variant="gray"
-        />
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+        {/* Specific Assets Column */}
+        <ComponentCard
+          title={t("cdn_group_assets")}
+          desc={t("cdn_group_assets_desc")}
+        >
+          <div className="grid grid-cols-1 gap-4">
+            <SyncButton
+              type="crt"
+              mode="both"
+              label="Update CRT Only"
+              desc="Hanya unggah file sertifikat publik (.crt, .der)."
+              variant="blue"
+            />
+            <SyncButton
+              type="installers"
+              mode="both"
+              label="Update Scripts Only"
+              desc="Hanya perbarui skrip installer individual (.sh, .bat, .mac)."
+              variant="purple"
+            />
+            <SyncButton
+              type="bundles"
+              mode="latest"
+              label="Update Global Bundles"
+              desc="Perbarui paket installer sapujagat (Recommended)."
+              variant="success"
+            />
+          </div>
+        </ComponentCard>
+
+        {/* Sync Modes Column */}
+        <ComponentCard
+          title={t("cdn_group_modes")}
+          desc={t("cdn_group_modes_desc")}
+        >
+          <div className="grid grid-cols-1 gap-4">
+            <SyncButton
+              type="all"
+              mode="both"
+              label="Dual Sync (Latest & Archive)"
+              desc="Sinkronisasi massal ke kedua jalur. Paling aman untuk integritas data."
+              variant="indigo"
+            />
+            <SyncButton
+              type="all"
+              mode="latest"
+              label="Latest Sync (Clean URLs)"
+              desc="Hanya perbarui link publik utama pendukung installer."
+              variant="blue"
+            />
+            <SyncButton
+              type="all"
+              mode="archive"
+              label="Archive Sync (Versioned)"
+              desc="Hanya simpan arsip permanen tanpa mengubah link publik."
+              variant="gray"
+            />
+          </div>
+        </ComponentCard>
       </div>
-    </ComponentCard>
+    </div>
   );
 }

src/components/admin/RootCaTable.tsx

@@ -109,7 +109,7 @@ export default function RootCaTable({
                   <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).toLocaleString()}</span>
-                      <span className="text-gray-400">{t("to")}</span>
+                      <span className="text-gray-400">{t("validity_to_label")}</span>
                       <span>{new Date(cert.valid_to).toLocaleString()}</span>
                     </div>
                   </TableCell>

src/messages/en.json

@@ -639,6 +639,10 @@
         "management_title": "Root CA Management",
         "card_title": "CA Certificates",
         "card_desc": "Manage Root and Intermediate Certification Authorities",
+        "cdn_group_assets": "Sync Specific Assets",
+        "cdn_group_assets_desc": "Update specific file types to the CDN (Uses 'Both' mode by default).",
+        "cdn_group_modes": "Dual CDN Strategy",
+        "cdn_group_modes_desc": "Control asset distribution paths (Clean URLs vs Global Archives).",
         "toast_renew_success": "CA Certificate renewed successfully.",
         "toast_renew_failed": "Failed to renew CA certificate",
         "load_failed": "Failed to load CA certificates. Admin access required.",
@@ -661,7 +665,7 @@
         "validity_to_label": "to",
         "status_valid": "Valid",
         "status_expired": "Expired",
-        "renew_button": "Renew (10Y)",
+        "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

@@ -639,6 +639,10 @@
         "management_title": "Manajemen Root CA",
         "card_title": "Sertifikat CA",
         "card_desc": "Kelola Otoritas Sertifikasi Root dan Intermediat",
+        "cdn_group_assets": "Aset Sinkronisasi (Asset-specific)",
+        "cdn_group_assets_desc": "Perbarui file spesifik ke CDN (Menggunakan mode 'Both' secara default).",
+        "cdn_group_modes": "Strategi Dual CDN (Mode-specific)",
+        "cdn_group_modes_desc": "Kontrol jalur distribusi aset (Clean URLs vs Global Archives).",
         "toast_renew_success": "Sertifikat CA berhasil diperbarui.",
         "toast_renew_failed": "Gagal memperbarui sertifikat CA",
         "load_failed": "Gagal memuat sertifikat CA. Diperlukan akses admin.",
@@ -661,7 +665,7 @@
         "validity_to_label": "ke",
         "status_valid": "Valid",
         "status_expired": "Kedaluwarsa",
-        "renew_button": "Perbarui (10T)",
+        "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."
     },