TSM.ID
876 lines
53 KiB
TypeScript
876 lines
53 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface Feature {
|
|
key: string;
|
|
name: string;
|
|
module?: string;
|
|
}
|
|
|
|
interface Package {
|
|
id: string;
|
|
name: string;
|
|
price: string;
|
|
features: string;
|
|
}
|
|
|
|
interface Tenant {
|
|
id: string;
|
|
name: string;
|
|
licenseNumber: string;
|
|
licenses?: string | Record<string, string>;
|
|
package?: {
|
|
id: string;
|
|
name: string;
|
|
features: string;
|
|
};
|
|
byokEnabled?: boolean;
|
|
byokKey?: string;
|
|
users?: any[];
|
|
}
|
|
|
|
interface User {
|
|
email: string;
|
|
role: string;
|
|
}
|
|
|
|
export default function SupremeAdminDashboard() {
|
|
const [data, setData] = useState<User | null>(null);
|
|
const [tenants, setTenants] = useState<Tenant[]>([]);
|
|
const [packages, setPackages] = useState<Package[]>([]);
|
|
const [systemFeatures, setSystemFeatures] = useState<Feature[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const router = useRouter();
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
|
window.location.href = '/';
|
|
} catch (e) {
|
|
console.error("Logout failed", e);
|
|
window.location.href = '/';
|
|
}
|
|
};
|
|
|
|
// Modal States
|
|
const [showPackageModal, setShowPackageModal] = useState(false);
|
|
const [showTenantModal, setShowTenantModal] = useState(false);
|
|
const [selectedTenant, setSelectedTenant] = useState<Tenant | null>(null);
|
|
|
|
// Quantum Toast System
|
|
const [toast, setToast] = useState<{message: string, type: 'success' | 'error'} | null>(null);
|
|
|
|
const showToast = (message: string, type: 'success' | 'error' = 'success') => {
|
|
setToast({ message, type });
|
|
setTimeout(() => setToast(null), 4000);
|
|
};
|
|
const [tenantLicenses, setTenantLicenses] = useState<Record<string, string>>({});
|
|
const [byokEnabled, setByokEnabled] = useState(false);
|
|
const [byokKey, setByokKey] = useState("");
|
|
|
|
// Form States
|
|
const [editingPkgId, setEditingPkgId] = useState<string | null>(null);
|
|
const [newPkgName, setNewPkgName] = useState("");
|
|
const [newPkgPrice, setNewPkgPrice] = useState("");
|
|
const [selectedFeatures, setSelectedFeatures] = useState<string[]>([]);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
// XCU Engine State
|
|
const [xcuNodes, setXcuNodes] = useState<any[]>([]);
|
|
const [xcuLoading, setXcuLoading] = useState(false);
|
|
|
|
// Security Tier Modal
|
|
const [tierModal, setTierModal] = useState<{tenantId: string; tenantName: string; currentTier: string} | null>(null);
|
|
const [tierSwitching, setTierSwitching] = useState(false);
|
|
const [selectedTier, setSelectedTier] = useState('STANDARD');
|
|
|
|
const TIER_CONFIG: Record<string, {label:string; desc:string; color:string; bg:string; border:string; icon:string}> = {
|
|
STANDARD: { label: "Let's Encrypt", desc: 'Sertifikat global, dipercaya semua browser. Auto-renew 90 hari.', color: 'text-emerald-400', bg: 'bg-emerald-500/10', border: 'border-emerald-500/20', icon: '🌐' },
|
|
SOVEREIGN: { label: 'Private CA (X)', desc: 'RSA-4096, 30 tahun. Offline-ready, tidak bergantung internet global.', color: 'text-cyan-400', bg: 'bg-cyan-500/10', border: 'border-cyan-500/20', icon: '🛡️' },
|
|
CLIENT_CA: { label: 'Client CA (Upload)', desc: 'Tenant upload CA mereka sendiri (BSSN/Komdigi/Militer/BIN).', color: 'text-amber-400', bg: 'bg-amber-500/10', border: 'border-amber-500/20', icon: '🏛️' },
|
|
};
|
|
|
|
const fetchXcuStatus = useCallback(async () => {
|
|
setXcuLoading(true);
|
|
try {
|
|
const resp = await fetch('/api/superadmin/xcu-tls-switch');
|
|
const data = await resp.json();
|
|
setXcuNodes(data.nodes || []);
|
|
} catch (_e) {
|
|
console.error('XCU fetch failed', _e);
|
|
} finally {
|
|
setXcuLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
const fetchData = useCallback(async () => {
|
|
try {
|
|
const [pkgResp, eyeResp] = await Promise.all([
|
|
fetch("/api/superadmin/packages"),
|
|
fetch("/api/superadmin/supreme-dashboard")
|
|
]);
|
|
const pkgData = await pkgResp.json();
|
|
const eyeData = await eyeResp.json();
|
|
|
|
if (eyeData.error) {
|
|
router.push("/");
|
|
return;
|
|
}
|
|
|
|
setPackages(pkgData.packages || []);
|
|
setTenants(eyeData.matrix || []);
|
|
setSystemFeatures(pkgData.systemFeatures || []);
|
|
setData(eyeData.user || { email: "Supreme Admin", role: "superadmin" });
|
|
} catch (_e) {
|
|
console.error(_e);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [router]);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
|
|
// Live polling XCU Engine status every 5s
|
|
const pollXcu = async () => {
|
|
try {
|
|
const resp = await fetch('/api/superadmin/xcu-tls-switch');
|
|
if (resp.ok) {
|
|
const data = await resp.json();
|
|
if (data.nodes) setXcuNodes(data.nodes);
|
|
}
|
|
} catch {}
|
|
setXcuLoading(false);
|
|
};
|
|
pollXcu();
|
|
const xcuInterval = setInterval(pollXcu, 5000);
|
|
return () => clearInterval(xcuInterval);
|
|
}, [fetchData]);
|
|
|
|
const handleSavePackage = async (e?: React.FormEvent | React.MouseEvent) => {
|
|
if (e) e.preventDefault();
|
|
try {
|
|
const resp = await fetch("/api/superadmin/packages", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
action: editingPkgId ? "update" : "create",
|
|
id: editingPkgId,
|
|
name: newPkgName,
|
|
price: newPkgPrice,
|
|
features: selectedFeatures
|
|
})
|
|
});
|
|
if (resp.ok) {
|
|
setShowPackageModal(false);
|
|
setEditingPkgId(null);
|
|
fetchData();
|
|
showToast(editingPkgId ? "Paket berhasil diperbarui." : "Paket berhasil dibuat.");
|
|
} else {
|
|
const errorData = await resp.json();
|
|
showToast(errorData.error || "Gagal menyimpan paket.", "error");
|
|
}
|
|
} catch (_e) {
|
|
showToast("Error menyimpan paket. Periksa koneksi Anda.", "error");
|
|
}
|
|
};
|
|
|
|
const handleDeletePackage = async (id: string) => {
|
|
try {
|
|
const resp = await fetch("/api/superadmin/packages", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ action: "delete", id })
|
|
});
|
|
if (resp.ok) {
|
|
fetchData();
|
|
showToast("Paket berhasil dihapus.");
|
|
} else {
|
|
const errorData = await resp.json();
|
|
showToast(errorData.error || "Gagal menghapus paket.", "error");
|
|
}
|
|
} catch (_e) {
|
|
showToast("Error menghapus paket. Periksa koneksi Anda.", "error");
|
|
}
|
|
};
|
|
|
|
const saveTenantPackage = async (tenantId: string, packageId: string) => {
|
|
try {
|
|
const resp = await fetch("/api/superadmin/supreme-dashboard", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
action: "update_tenant_package",
|
|
tenantId,
|
|
packageId
|
|
})
|
|
});
|
|
if (resp.ok) {
|
|
fetchData();
|
|
showToast("Paket tenant berhasil diperbarui.");
|
|
} else {
|
|
const errorData = await resp.json();
|
|
showToast(errorData.error || "Gagal menetapkan paket.", "error");
|
|
}
|
|
} catch (_e) {
|
|
showToast("Gagal menetapkan paket. Periksa koneksi.", "error");
|
|
}
|
|
};
|
|
|
|
const openTenantMatrix = (tenant: Tenant) => {
|
|
setSelectedTenant(tenant);
|
|
setByokEnabled(tenant.byokEnabled || false);
|
|
setByokKey(tenant.byokKey || "");
|
|
let parsed: Record<string, string> = {};
|
|
try {
|
|
if (typeof tenant.licenses === 'string') parsed = JSON.parse(tenant.licenses);
|
|
else parsed = tenant.licenses || {};
|
|
|
|
if (Array.isArray(parsed)) {
|
|
const temp: Record<string, string> = {};
|
|
parsed.forEach((k: string) => temp[k] = "GRANTED");
|
|
parsed = temp;
|
|
}
|
|
} catch(_e) {}
|
|
setTenantLicenses(parsed);
|
|
setShowTenantModal(true);
|
|
};
|
|
|
|
const [isSavingMatrix, setIsSavingMatrix] = useState(false);
|
|
|
|
const saveTenantMatrix = async () => {
|
|
setIsSavingMatrix(true);
|
|
try {
|
|
const resp = await fetch("/api/superadmin/supreme-dashboard", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
action: "update_tenant_licenses",
|
|
tenantId: selectedTenant?.id,
|
|
licenses: tenantLicenses,
|
|
byokEnabled,
|
|
byokKey
|
|
})
|
|
});
|
|
if (resp.ok) {
|
|
setShowTenantModal(false);
|
|
fetchData();
|
|
showToast("Matriks Sovereignty berhasil di-deploy tanpa henti (Zero Downtime).");
|
|
} else {
|
|
const errorData = await resp.json();
|
|
showToast(errorData.error || "Gagal menyimpan matrix.", "error");
|
|
}
|
|
} catch (_e) {
|
|
showToast("Koneksi terputus. Gagal menyimpan matrix.", "error");
|
|
} finally {
|
|
setIsSavingMatrix(false);
|
|
}
|
|
};
|
|
|
|
const applySecurityTier = async () => {
|
|
if (!tierModal || selectedTier === tierModal.currentTier) return;
|
|
setTierSwitching(true);
|
|
try {
|
|
const resp = await fetch('/api/superadmin/supreme-dashboard', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ action: 'update_security_tier', tenantId: tierModal.tenantId, securityTier: selectedTier }),
|
|
});
|
|
if (resp.ok) {
|
|
fetchData();
|
|
showToast(`Security Tier berhasil di-switch ke ${TIER_CONFIG[selectedTier]?.label || selectedTier}`);
|
|
setTierModal(null);
|
|
} else {
|
|
showToast('Gagal mengubah Security Tier', 'error');
|
|
}
|
|
} catch { showToast('Koneksi gagal', 'error'); }
|
|
setTierSwitching(false);
|
|
};
|
|
|
|
if (loading) return <div className="min-h-screen bg-[#f4f5f9] flex items-center justify-center text-blue-600 font-medium">Loading Supreme Admin...</div>;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#f4f5f9] text-gray-900 font-sans pb-20 relative">
|
|
|
|
{/* Quantum Toast Notification System */}
|
|
{toast && (
|
|
<div className={`fixed top-20 right-8 z-[100] px-6 py-4 rounded-xl shadow-2xl backdrop-blur-xl border flex items-center gap-4 animate-in slide-in-from-right-8 fade-in duration-300 ${toast.type === 'success' ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-700' : 'bg-red-500/10 border-red-500/30 text-red-700'}`}>
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${toast.type === 'success' ? 'bg-emerald-500 text-white' : 'bg-red-500 text-white'}`}>
|
|
{toast.type === 'success' ? (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
|
|
) : (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<div className="text-xs font-black uppercase tracking-widest opacity-80 mb-0.5">{toast.type === 'success' ? 'System Success' : 'System Alert'}</div>
|
|
<div className="text-sm font-medium">{toast.message}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<header className="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-8 sticky top-0 z-40 shadow-sm">
|
|
<div className="flex items-center gap-3">
|
|
<svg className="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 24 24"><path d="M4 4h10a2 2 0 0 1 2 2v3.5l4-3v11l-4-3V18a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"></path></svg>
|
|
<h1 className="text-xl font-bold tracking-tight text-gray-800">Supreme Admin <span className="text-sm font-normal text-gray-500 ml-2">Workspace Control</span></h1>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<a href="/supreme-admin/telepathy" className="px-3 py-1.5 bg-gradient-to-r from-[#ff0080] to-[#7928ca] text-white text-xs font-bold rounded-md hover:opacity-90 transition-opacity flex items-center gap-2 shadow-sm">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
|
|
TELEPATHY MATRIX
|
|
</a>
|
|
<a href="/supreme-admin/telemetry" className="px-3 py-1.5 bg-gradient-to-r from-[#25D366] to-[#0b5cff] text-white text-xs font-bold rounded-md hover:opacity-90 transition-opacity flex items-center gap-2 shadow-sm">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
|
|
PANOPTICON
|
|
</a>
|
|
<span className="text-sm text-gray-600 font-medium">{data?.email}</span>
|
|
<button onClick={handleLogout} className="text-sm text-blue-600 hover:text-blue-800 font-semibold transition-colors">Sign Out</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="max-w-7xl mx-auto px-6 py-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
|
<div className="bg-white p-5 rounded-lg border border-gray-200 shadow-sm">
|
|
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Total Tenants</div>
|
|
<div className="text-3xl font-bold text-gray-900">{tenants.length}</div>
|
|
</div>
|
|
<div className="bg-white p-5 rounded-lg border border-gray-200 shadow-sm">
|
|
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">XCU Modules</div>
|
|
<div className="text-3xl font-bold text-gray-900">{systemFeatures.length || '101'}</div>
|
|
</div>
|
|
<div className="bg-white p-5 rounded-lg border border-gray-200 shadow-sm">
|
|
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Active Packages</div>
|
|
<div className="text-3xl font-bold text-gray-900">{packages.length}</div>
|
|
</div>
|
|
<div className="bg-blue-600 p-5 rounded-lg border border-blue-700 shadow-sm text-white flex flex-col justify-center cursor-pointer hover:bg-blue-700 transition-colors" onClick={() => { setEditingPkgId(null); setNewPkgName(""); setNewPkgPrice(""); setSelectedFeatures([]); setShowPackageModal(true); }}>
|
|
<div className="text-sm font-bold flex items-center justify-between">
|
|
Create New Package
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4"></path></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* XCU QUIC ENGINE STATUS PANEL */}
|
|
<div className="mb-8 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 rounded-2xl border border-slate-700/50 shadow-xl overflow-hidden">
|
|
<div className="px-6 py-4 border-b border-slate-700/50 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/20">
|
|
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-base font-bold text-white tracking-tight">XCom ULTRA Engine</h2>
|
|
<p className="text-[10px] text-slate-400 font-mono">QUIC/WebTransport • Port 8443 (UDP) • Port 8081 (HTTP)</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-2 px-3 py-1.5 bg-red-500/10 border border-red-500/20 rounded-lg">
|
|
<span className="relative flex h-2.5 w-2.5">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-red-500"></span>
|
|
</span>
|
|
<span className="text-[10px] font-bold uppercase tracking-wider text-red-400">LIVE</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="p-5">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{xcuNodes.length > 0 ? xcuNodes.map((node: any, idx: number) => (
|
|
<div key={idx} className={`relative rounded-xl border p-4 transition-all duration-300 ${
|
|
node.online
|
|
? 'bg-slate-800/80 border-slate-600/50 hover:border-cyan-500/50 hover:shadow-lg hover:shadow-cyan-500/5'
|
|
: 'bg-red-950/30 border-red-800/30'
|
|
}`}>
|
|
{/* Pulse indicator */}
|
|
<div className="absolute top-3 right-3">
|
|
<span className={`relative flex h-3 w-3`}>
|
|
{node.online && <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>}
|
|
<span className={`relative inline-flex rounded-full h-3 w-3 ${node.online ? 'bg-emerald-400' : 'bg-red-500'}`}></span>
|
|
</span>
|
|
</div>
|
|
{/* Node name */}
|
|
<div className="text-xs font-black text-slate-400 uppercase tracking-widest mb-2">{node.name}</div>
|
|
<div className="text-[10px] font-mono text-slate-500 mb-3">{node.host}</div>
|
|
{node.online ? (
|
|
<>
|
|
{/* TLS Mode Badge */}
|
|
<div className="mb-3">
|
|
<div className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-bold uppercase tracking-wider ${
|
|
node.tlsMode === 'SELFSIGNED'
|
|
? 'bg-amber-500/10 text-amber-400 border border-amber-500/20'
|
|
: 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
|
|
}`}>
|
|
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
TLS: {node.tlsMode || 'LETSENCRYPT'}
|
|
</div>
|
|
</div>
|
|
{/* Metrics */}
|
|
<div className="grid grid-cols-2 gap-2 mb-3">
|
|
<div className="bg-slate-900/50 rounded-lg p-2">
|
|
<div className="text-[9px] text-slate-500 uppercase font-bold">CPU</div>
|
|
<div className="text-sm font-bold text-cyan-400">{typeof node.cpu === 'number' ? node.cpu.toFixed(1) : '0'}%</div>
|
|
</div>
|
|
<div className="bg-slate-900/50 rounded-lg p-2">
|
|
<div className="text-[9px] text-slate-500 uppercase font-bold">RAM</div>
|
|
<div className="text-sm font-bold text-purple-400">{typeof node.ram === 'number' ? node.ram.toFixed(1) : '0'}%</div>
|
|
</div>
|
|
</div>
|
|
{/* Cert hash */}
|
|
<div className="text-[8px] font-mono text-slate-600 truncate" title={node.certHash}>CERT: {node.certHash?.substring(0, 16)}...</div>
|
|
{/* Status */}
|
|
<div className={`mt-2 text-[10px] font-bold uppercase tracking-wider ${
|
|
node.status === 'SECURE' ? 'text-emerald-400' : node.status === 'OUROBOROS_IGNITED' ? 'text-red-400' : 'text-slate-400'
|
|
}`}>
|
|
● {node.status}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="text-sm font-bold text-red-400 mt-2">● OFFLINE</div>
|
|
)}
|
|
</div>
|
|
)) : (
|
|
<div className="col-span-3 text-center py-8">
|
|
<div className="text-slate-500 text-sm">Loading XCU Engine status...</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
|
<div className="px-6 py-5 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
|
|
<h2 className="text-lg font-semibold text-gray-800">Client Organizations (Tenants)</h2>
|
|
</div>
|
|
<div className="divide-y divide-gray-100">
|
|
{tenants.map((t: Tenant) => {
|
|
const isVIP = t.name.toLowerCase().includes('tsm') || t.name.toLowerCase().includes('snowy');
|
|
return (
|
|
<div key={t.id} className="flex flex-col border-b border-gray-100 last:border-0">
|
|
<div className="p-6 hover:bg-gray-50 transition-colors flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<h3 className="text-base font-bold text-gray-900">{t.name}</h3>
|
|
{isVIP && <span className="px-2 py-0.5 bg-blue-100 text-blue-700 text-[10px] font-bold rounded uppercase tracking-wider">VIP Partner</span>}
|
|
{/* Security Tier Badge */}
|
|
{(() => {
|
|
const tier = (t as any).securityTier || 'STANDARD';
|
|
const badgeMap: Record<string,string> = {
|
|
STANDARD: 'bg-emerald-50 text-emerald-600 border-emerald-200',
|
|
SOVEREIGN: 'bg-cyan-50 text-cyan-700 border-cyan-200',
|
|
CLIENT_CA: 'bg-amber-50 text-amber-700 border-amber-200',
|
|
};
|
|
const labelMap: Record<string,string> = { STANDARD: '🌐 LET\'S ENCRYPT', SOVEREIGN: '🛡️ PRIVATE CA', CLIENT_CA: '🏛️ CLIENT CA' };
|
|
return (
|
|
<>
|
|
<button
|
|
onClick={() => { setSelectedTier(tier); setTierModal({ tenantId: t.id, tenantName: t.name, currentTier: tier }); }}
|
|
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider transition-all hover:scale-105 border ${badgeMap[tier] || badgeMap.STANDARD}`}
|
|
title="Klik untuk ubah Security Tier"
|
|
>
|
|
{labelMap[tier] || '🌐 STANDARD'}
|
|
</button>
|
|
{(tier === 'SOVEREIGN' || tier === 'CLIENT_CA') && (
|
|
<a href="/supreme-admin/sovereign-setup" className={`px-2 py-0.5 text-white text-[10px] font-bold rounded transition-colors ${tier === 'CLIENT_CA' ? 'bg-amber-500 hover:bg-amber-600' : 'bg-cyan-600 hover:bg-cyan-700'}`}>CA Setup →</a>
|
|
)}
|
|
</>
|
|
);
|
|
})()}
|
|
</div>
|
|
<div className="text-xs text-gray-500 font-mono mb-2 flex items-center gap-2">
|
|
<svg className="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
|
|
License: <strong className="text-gray-700">{t.licenseNumber || 'PENDING'}</strong>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col sm:items-end gap-3 w-full sm:w-auto">
|
|
<div className="flex flex-col items-end gap-1 w-full">
|
|
<span className="text-[10px] font-bold text-gray-500 uppercase">Assigned Package</span>
|
|
<select
|
|
className="text-xs border rounded px-2 py-1 bg-gray-50 w-full sm:w-48 outline-none focus:ring-1 focus:ring-blue-500"
|
|
value={t.package?.id || ""}
|
|
onChange={e => saveTenantPackage(t.id, e.target.value)}
|
|
>
|
|
<option value="">-- No Package (Custom) --</option>
|
|
{packages.map(p => (
|
|
<option key={p.id} value={p.id}>{p.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<button onClick={() => openTenantMatrix(t)} className="px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-blue-600 transition-colors self-start sm:self-auto">
|
|
Manage Feature Matrix & BYOK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* Render Users List for the Tenant */}
|
|
{t.users && t.users.length > 0 && (
|
|
<div className="bg-gray-50 border-t border-gray-100 p-4 pl-10">
|
|
<div className="text-[11px] font-bold text-gray-500 uppercase tracking-widest mb-2 flex items-center gap-2">
|
|
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
|
|
Registered Neural Entities
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
|
{t.users.map((u: any) => (
|
|
<div key={u.id} className="flex justify-between items-center bg-white border border-gray-200 p-2 rounded-md shadow-sm">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-semibold text-gray-800">{u.email}</span>
|
|
<span className="text-[10px] text-gray-400 font-mono">{u.id}</span>
|
|
</div>
|
|
<span className={`text-[10px] px-2 py-0.5 rounded-full font-bold uppercase ${u.role === 'admin' ? 'bg-purple-100 text-purple-700' : u.role === 'superadmin' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700'}`}>
|
|
{u.role}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:col-span-1 space-y-6">
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
|
<div className="px-6 py-5 border-b border-gray-200 bg-gray-50">
|
|
<h2 className="text-lg font-semibold text-gray-800">Module Packages</h2>
|
|
</div>
|
|
<div className="p-4 space-y-3">
|
|
{packages.map((p: Package) => {
|
|
let featList: string[] = [];
|
|
try {
|
|
featList = JSON.parse(p.features || "[]");
|
|
} catch (e) {}
|
|
|
|
const isJVC = p.name.includes("JVC");
|
|
const isJC = p.name.includes("JC");
|
|
const isCombo = isJVC && isJC;
|
|
|
|
const bgClass = isCombo ? "bg-gradient-to-br from-blue-800 via-teal-700 to-emerald-600 text-white border-none shadow-2xl shadow-teal-900/40 ring-1 ring-teal-400/50" : isJVC ? "bg-gradient-to-br from-indigo-950 via-blue-900 to-indigo-900 text-white border-none shadow-xl shadow-blue-900/20" : isJC ? "bg-gradient-to-br from-teal-950 via-emerald-900 to-teal-900 text-white border-none shadow-xl shadow-emerald-900/20" : "bg-white border border-gray-200 text-gray-900 shadow-sm";
|
|
const badgeClass = isCombo ? "bg-white/20 text-white border border-white/30 font-bold drop-shadow-sm" : isJVC ? "bg-blue-500/20 text-blue-100 border border-blue-400/30" : isJC ? "bg-emerald-500/20 text-emerald-100 border border-emerald-400/30" : "bg-gray-50 text-gray-700 border border-gray-200";
|
|
const textMuted = isJVC || isJC || isCombo ? "text-gray-300" : "text-gray-500";
|
|
|
|
return (
|
|
<div key={p.id} className={`p-5 rounded-2xl transition-all duration-300 hover:-translate-y-1 relative overflow-hidden group ${bgClass}`}>
|
|
{/* Decorative background glow */}
|
|
{(isJVC || isJC || isCombo) && <div className="absolute -top-12 -right-12 w-40 h-40 bg-white opacity-[0.03] blur-3xl rounded-full pointer-events-none group-hover:opacity-10 transition-opacity"></div>}
|
|
{isCombo && <div className="absolute -bottom-10 -left-10 w-32 h-32 bg-emerald-400 opacity-20 blur-3xl rounded-full pointer-events-none"></div>}
|
|
{isCombo && <div className="absolute -top-10 -right-10 w-32 h-32 bg-blue-400 opacity-20 blur-3xl rounded-full pointer-events-none"></div>}
|
|
|
|
<div className="flex justify-between items-start mb-4 relative z-10">
|
|
<div className="font-bold text-lg tracking-tight flex items-center gap-2 drop-shadow-md">
|
|
{isCombo && <svg className="w-5 h-5 text-teal-100" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>}
|
|
{p.name}
|
|
</div>
|
|
<div className="flex flex-col items-end gap-1.5">
|
|
<div className={`text-sm font-black ${isJVC || isJC || isCombo ? 'text-white' : 'text-blue-600'}`}>{p.price}</div>
|
|
<div className="flex gap-3 mt-1">
|
|
<button onClick={() => { setEditingPkgId(p.id); setNewPkgName(p.name); setNewPkgPrice(p.price); setSelectedFeatures(featList); setShowPackageModal(true); }} className={`text-[10px] font-bold uppercase tracking-wider hover:underline ${textMuted}`}>Edit</button>
|
|
<button onClick={() => handleDeletePackage(p.id)} className={`text-[10px] font-bold uppercase tracking-wider hover:underline ${isJVC || isJC || isCombo ? 'text-red-300' : 'text-red-500'}`}>Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`text-[10px] font-bold uppercase tracking-widest mb-3 border-t pt-4 ${isJVC || isJC || isCombo ? 'border-white/10 text-white/50' : 'border-gray-100 text-gray-400'}`}>
|
|
Core Capabilities ({featList.length} Modules)
|
|
</div>
|
|
<div className="flex flex-wrap gap-1.5 relative z-10">
|
|
{featList.length > 0 ? (
|
|
featList.map((f: string) => (
|
|
<span key={f} className={`text-[9.5px] font-mono px-2 py-1 rounded-md backdrop-blur-md ${badgeClass}`}>
|
|
{f}
|
|
</span>
|
|
))
|
|
) : (
|
|
<span className={`text-[10px] italic ${textMuted}`}>No modules defined</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* CREATE PACKAGE MODAL */}
|
|
{showPackageModal && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
|
<div className="bg-white w-full max-w-2xl rounded-xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
|
|
<div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center bg-gray-50">
|
|
<h2 className="text-xl font-bold text-gray-900">Create XCU Module Package</h2>
|
|
<button onClick={() => setShowPackageModal(false)} className="text-gray-400 hover:text-gray-700">✕</button>
|
|
</div>
|
|
<div className="p-6 overflow-y-auto flex-1">
|
|
<div id="pkgForm" className="space-y-6">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<input type="text" value={newPkgName} onChange={e => setNewPkgName(e.target.value)} placeholder="Package Name" className="border p-2 rounded" required />
|
|
<input type="text" value={newPkgPrice} onChange={e => setNewPkgPrice(e.target.value)} placeholder="Price (Rp)" className="border p-2 rounded" required />
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center justify-between mb-4 border-b pb-2">
|
|
<h3 className="text-sm font-bold">Select Modules</h3>
|
|
<input type="text" placeholder="Search..." value={searchQuery} onChange={e => setSearchQuery(e.target.value)} className="text-xs border rounded-full px-3 py-1 outline-none" />
|
|
</div>
|
|
<div className="space-y-4">
|
|
{['JVC', 'JC', 'XCU', 'XTM', 'IAM'].map(mod => {
|
|
const filtered = systemFeatures.filter(f => (f.module === mod || (!f.module && mod === 'IAM')) && (f.name.toLowerCase().includes(searchQuery.toLowerCase()) || f.key.toLowerCase().includes(searchQuery.toLowerCase())));
|
|
if (filtered.length === 0) return null;
|
|
return (
|
|
<div key={mod}>
|
|
<div className="text-[10px] font-black text-blue-600 mb-2 flex justify-between">
|
|
<span>{mod} MODULES</span>
|
|
<div className="space-x-2">
|
|
<button type="button" onClick={() => setSelectedFeatures(Array.from(new Set([...selectedFeatures, ...systemFeatures.filter(f => f.module === mod || (!f.module && mod === 'IAM')).map(f => f.key)])))} className="hover:underline">Select All</button>
|
|
<button type="button" onClick={() => setSelectedFeatures(selectedFeatures.filter(k => !systemFeatures.filter(f => f.module === mod || (!f.module && mod === 'IAM')).some(f => f.key === k)))} className="hover:underline">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{filtered.map(f => (
|
|
<label key={f.key} className="flex items-center gap-2 p-2 border rounded hover:bg-gray-50 cursor-pointer">
|
|
<input type="checkbox" checked={selectedFeatures.includes(f.key)} onChange={e => e.target.checked ? setSelectedFeatures([...selectedFeatures, f.key]) : setSelectedFeatures(selectedFeatures.filter(x => x !== f.key))} />
|
|
<div className="text-[10px]">{f.name}</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 border-t bg-gray-50 flex justify-end gap-2">
|
|
<button type="button" onClick={() => setShowPackageModal(false)} className="px-4 py-2 border rounded">Cancel</button>
|
|
<button type="button" onClick={handleSavePackage} className="px-4 py-2 bg-blue-600 text-white rounded">Save Package</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TENANT MATRIX MODAL */}
|
|
{showTenantModal && selectedTenant && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
|
<div className="bg-white w-full max-w-3xl rounded-xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
|
|
<div className="px-6 py-4 border-b bg-gray-50 flex justify-between items-center relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-64 h-full bg-gradient-to-l from-blue-100/50 to-transparent pointer-events-none"></div>
|
|
<div>
|
|
<h2 className="text-2xl font-black text-gray-900 tracking-tight flex items-center gap-3">
|
|
{selectedTenant.name}
|
|
<span className="px-3 py-1 bg-gray-900 text-white text-[10px] font-bold rounded-full uppercase tracking-widest shadow-sm">
|
|
{selectedTenant.package ? selectedTenant.package.name : "A LA CARTE (CUSTOM)"}
|
|
</span>
|
|
</h2>
|
|
<p className="text-xs text-gray-500 font-medium mt-1">Superadmin Matrix Control & Sovereignty Panel</p>
|
|
</div>
|
|
<button onClick={() => setShowTenantModal(false)} className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200 text-gray-500 transition-colors z-10">✕</button>
|
|
</div>
|
|
<div className="p-6 overflow-y-auto flex-1 bg-gradient-to-b from-gray-50/50 to-white">
|
|
|
|
{/* SPECTACULAR LICENSE TIER BANNER */}
|
|
<div className={`mb-6 relative overflow-hidden rounded-2xl p-6 border ${selectedTenant.package ? 'bg-gradient-to-br from-indigo-950 via-blue-900 to-indigo-900 border-none shadow-xl shadow-blue-900/20 text-white' : 'bg-white border-dashed border-gray-300 text-gray-800'}`}>
|
|
{selectedTenant.package && <div className="absolute -top-24 -right-24 w-64 h-64 bg-blue-400 opacity-20 blur-3xl rounded-full pointer-events-none"></div>}
|
|
{selectedTenant.package && <div className="absolute -bottom-24 -left-24 w-64 h-64 bg-cyan-400 opacity-20 blur-3xl rounded-full pointer-events-none"></div>}
|
|
|
|
<div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
|
<div>
|
|
<div className={`text-[10px] font-black uppercase tracking-widest mb-1 ${selectedTenant.package ? 'text-blue-300' : 'text-gray-400'}`}>Active Quantum Tier</div>
|
|
<div className="text-2xl font-black flex items-center gap-2">
|
|
{selectedTenant.package ? (
|
|
<>
|
|
<svg className="w-6 h-6 text-cyan-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l10-7.27z"/></svg>
|
|
{selectedTenant.package.name}
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
|
|
Custom A La Carte
|
|
</>
|
|
)}
|
|
</div>
|
|
<p className={`text-xs mt-2 max-w-xl ${selectedTenant.package ? 'text-blue-100' : 'text-gray-500'}`}>
|
|
{selectedTenant.package ?
|
|
"Modul-modul di bawah ini otomatis di-kunci (GRANTED) berdasarkan paket yang dipilih. Anda dapat menambahkan modul tambahan sebagai A La Carte." :
|
|
"Tenant ini tidak terikat pada paket apapun. Semua modul diatur secara manual per-item melalui saklar di bawah ini."}
|
|
</p>
|
|
</div>
|
|
{selectedTenant.package && (
|
|
<div className="px-4 py-2 bg-white/10 backdrop-blur border border-white/20 rounded-xl text-xs font-bold text-blue-50">
|
|
Paket Terkunci (Auto-Granted)
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-blue-50/80 p-6 rounded-2xl border border-blue-100 shadow-inner">
|
|
<div className="flex-1">
|
|
<h3 className="text-sm font-black text-blue-900 uppercase tracking-widest mb-1 flex items-center gap-2">
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"></path></svg>
|
|
Quantum BYOK Sovereignty
|
|
</h3>
|
|
<p className="text-[10px] text-blue-700 font-medium">Berikan otoritas penuh kepada tenant untuk mendikte kunci enkripsi E2EE mereka sendiri.</p>
|
|
</div>
|
|
<div className="flex flex-col gap-2 w-full md:w-64">
|
|
<label className="flex items-center gap-3 cursor-pointer bg-white px-4 py-3 rounded-xl border border-blue-200 shadow-sm hover:border-blue-400 transition-colors">
|
|
<input type="checkbox" checked={byokEnabled} onChange={e => setByokEnabled(e.target.checked)} className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500" />
|
|
<span className="text-[10px] font-bold text-gray-700">Enable BYOK Mode</span>
|
|
</label>
|
|
{byokEnabled && (
|
|
<input
|
|
type="text"
|
|
placeholder="Enter Custom Quantum Key..."
|
|
value={byokKey}
|
|
onChange={e => setByokKey(e.target.value)}
|
|
className="text-[10px] font-mono bg-white border border-blue-200 rounded-xl px-3 py-2 outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6 flex justify-between items-center">
|
|
<input type="text" placeholder="Filter Matrix..." value={searchQuery} onChange={e => setSearchQuery(e.target.value)} className="border rounded-full px-4 py-2 text-sm w-64 outline-none focus:ring-2 focus:ring-blue-500" />
|
|
</div>
|
|
<div className="space-y-8">
|
|
{['JVC', 'JC', 'XCU', 'XTM', 'IAM'].map(mod => {
|
|
const filtered = systemFeatures.filter(f => (f.module === mod || (!f.module && mod === 'IAM')) && (f.name.toLowerCase().includes(searchQuery.toLowerCase()) || f.key.toLowerCase().includes(searchQuery.toLowerCase())));
|
|
if (filtered.length === 0) return null;
|
|
return (
|
|
<div key={mod}>
|
|
<div className="flex justify-between items-center mb-4 border-l-4 border-blue-600 pl-3">
|
|
<span className="text-[10px] font-black text-blue-600">{mod} MODULES</span>
|
|
<div className="space-x-2">
|
|
<button type="button" onClick={() => { const u = {...tenantLicenses}; systemFeatures.filter(f => f.module === mod || (!f.module && mod === 'IAM')).forEach(f => u[f.key] = 'GRANTED'); setTenantLicenses(u); }} className="text-[8px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded">Grant All</button>
|
|
<button type="button" onClick={() => { const u = {...tenantLicenses}; systemFeatures.filter(f => f.module === mod || (!f.module && mod === 'IAM')).forEach(f => u[f.key] = 'UPSELL'); setTenantLicenses(u); }} className="text-[8px] font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded">Upsell All</button>
|
|
<button type="button" onClick={() => { const u = {...tenantLicenses}; systemFeatures.filter(f => f.module === mod || (!f.module && mod === 'IAM')).forEach(f => u[f.key] = 'HIDDEN'); setTenantLicenses(u); }} className="text-[8px] font-bold text-red-600 bg-red-50 px-2 py-1 rounded">Block All</button>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-2">
|
|
{filtered.map(feat => {
|
|
let isIncludedInPackage = false;
|
|
if (selectedTenant?.package) {
|
|
try {
|
|
const pkgFeats = JSON.parse(selectedTenant.package.features || "[]");
|
|
if (pkgFeats.includes(feat.key)) isIncludedInPackage = true;
|
|
} catch(e) {}
|
|
}
|
|
const val = isIncludedInPackage ? 'GRANTED' : (tenantLicenses[feat.key] || 'HIDDEN');
|
|
|
|
return (
|
|
<div key={feat.key} className={`flex justify-between items-center p-3 border rounded-lg ${isIncludedInPackage ? 'bg-gray-50 border-gray-200 opacity-70' : 'hover:border-blue-200'}`}>
|
|
<div className="text-sm font-bold">{feat.name} <span className="text-[9px] font-mono text-gray-400 block">{feat.key}</span></div>
|
|
<div className="flex items-center gap-3">
|
|
{isIncludedInPackage && <span className="text-[9px] font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded border border-blue-100 uppercase">Included in Package</span>}
|
|
<select
|
|
value={val}
|
|
onChange={e => setTenantLicenses({...tenantLicenses, [feat.key]: e.target.value})}
|
|
className="text-xs font-bold p-1 rounded border"
|
|
disabled={isIncludedInPackage}
|
|
>
|
|
<option value="GRANTED">🟢 GRANTED</option>
|
|
<option value="UPSELL">💎 UPSELL</option>
|
|
<option value="HIDDEN">❌ HIDDEN</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className="p-5 border-t bg-gray-50 flex justify-end gap-3 relative z-50 shadow-[0_-10px_20px_-10px_rgba(0,0,0,0.05)]">
|
|
<button type="button" onClick={(e) => { e.preventDefault(); e.stopPropagation(); setShowTenantModal(false); }} disabled={isSavingMatrix} className="px-6 py-2.5 border border-gray-300 rounded-xl hover:bg-gray-100 text-gray-700 font-bold transition-colors cursor-pointer relative z-50">Cancel</button>
|
|
<button type="button" onClick={(e) => { e.preventDefault(); e.stopPropagation(); saveTenantMatrix(); }} disabled={isSavingMatrix} className={`px-6 py-2.5 rounded-xl font-bold transition-all shadow-lg cursor-pointer relative z-50 flex items-center gap-2 ${isSavingMatrix ? 'bg-blue-400 text-white cursor-not-allowed' : 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white hover:shadow-blue-500/30 hover:-translate-y-0.5'}`}>
|
|
{isSavingMatrix ? (
|
|
<>
|
|
<svg className="animate-spin h-5 w-5 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>
|
|
Menyimpan...
|
|
</>
|
|
) : 'Deploy Matrix'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* SECURITY TIER SWITCH MODAL */}
|
|
{tierModal && (
|
|
<div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/60 backdrop-blur-md" onClick={() => !tierSwitching && setTierModal(null)}>
|
|
<div className="bg-gradient-to-b from-slate-900 to-slate-950 w-full max-w-lg rounded-2xl shadow-2xl border border-slate-700/50 overflow-hidden" onClick={e => e.stopPropagation()}>
|
|
{/* Header */}
|
|
<div className="p-6 text-center border-b border-slate-800">
|
|
<div className="w-14 h-14 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/20">
|
|
<svg className="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<h3 className="text-lg font-bold text-white">Security Tier Configuration</h3>
|
|
<p className="text-xs text-slate-400 mt-1">Tenant: <strong className="text-white">{tierModal.tenantName}</strong></p>
|
|
</div>
|
|
|
|
{/* Radio Options */}
|
|
<div className="p-5 space-y-2">
|
|
{Object.entries(TIER_CONFIG).map(([key, cfg]) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => setSelectedTier(key)}
|
|
className={`w-full text-left p-4 rounded-xl border-2 transition-all ${
|
|
selectedTier === key
|
|
? `${cfg.bg} ${cfg.border} ring-1 ${cfg.border}`
|
|
: 'border-slate-700/50 hover:border-slate-600'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
|
|
selectedTier === key ? cfg.border : 'border-slate-600'
|
|
}`}>
|
|
{selectedTier === key && <div className={`w-2.5 h-2.5 rounded-full ${
|
|
key === 'STANDARD' ? 'bg-emerald-400' : key === 'SOVEREIGN' ? 'bg-cyan-400' : 'bg-amber-400'
|
|
}`}></div>}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-base">{cfg.icon}</span>
|
|
<span className={`text-sm font-bold ${selectedTier === key ? cfg.color : 'text-slate-300'}`}>{cfg.label}</span>
|
|
{tierModal.currentTier === key && <span className="text-[8px] font-bold px-1.5 py-0.5 rounded bg-slate-700 text-slate-400 uppercase">Current</span>}
|
|
</div>
|
|
<p className="text-[11px] text-slate-500 mt-0.5 ml-7">{cfg.desc}</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="px-5 pb-5 flex gap-3">
|
|
<button
|
|
onClick={() => setTierModal(null)}
|
|
disabled={tierSwitching}
|
|
className="flex-1 px-4 py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold rounded-xl transition-colors border border-slate-700"
|
|
>Batal</button>
|
|
<button
|
|
onClick={applySecurityTier}
|
|
disabled={tierSwitching || selectedTier === tierModal.currentTier}
|
|
className={`flex-1 px-4 py-3 font-bold rounded-xl transition-all shadow-lg flex items-center justify-center gap-2 ${
|
|
tierSwitching || selectedTier === tierModal.currentTier
|
|
? 'bg-slate-700 text-slate-500 cursor-not-allowed'
|
|
: 'bg-gradient-to-r from-cyan-600 to-blue-600 text-white hover:shadow-cyan-500/30 hover:scale-[1.02]'
|
|
}`}
|
|
>
|
|
{tierSwitching ? (
|
|
<><div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div> Switching...</>
|
|
) : (
|
|
<><svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> {selectedTier === tierModal.currentTier ? 'No Change' : 'Apply Security Tier'}</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|