2 files changed, 50 insertions, 3 deletions
diff --git a/frontend/src/routes/status/[id]/+page.svelte b/frontend/src/routes/status/[id]/+page.svelte
index 0701eeb..d47797d 100644
--- a/frontend/src/routes/status/[id]/+page.svelte
+++ b/frontend/src/routes/status/[id]/+page.svelte
@@ -126,6 +126,50 @@
 			{/if}
 		</div>
 
+		<!-- SSL Card -->
+		{#if data.sslInfo}
+			{@const ssl = data.sslInfo}
+			{@const isExpiring = ssl.days_remaining < 7}
+			<div
+				class="mb-6 overflow-hidden rounded-xl border p-5 transition-all"
+				style="border-color: {isExpiring ? 'rgba(250,204,21,0.3)' : 'rgba(34,240,106,0.2)'}; background-color: {isExpiring ? 'rgba(250,204,21,0.04)' : 'rgba(34,240,106,0.03)'}"
+			>
+				<div class="flex items-start gap-4">
+					<div
+						class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg"
+						style="background-color: {isExpiring ? 'rgba(250,204,21,0.12)' : 'rgba(34,240,106,0.1)'}"
+					>
+						<svg class="h-5 w-5" style="color: {isExpiring ? '#facc15' : 'var(--green)'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+						</svg>
+					</div>
+					<div class="min-w-0 flex-1">
+						<div class="flex items-center justify-between gap-2">
+							<h2 class="text-xs font-semibold uppercase tracking-wider text-[var(--text-secondary)]">
+								Segurança SSL/TLS
+							</h2>
+							<span
+								class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[10px] font-semibold"
+								style="background-color: {isExpiring ? 'rgba(250,204,21,0.12)' : 'rgba(34,240,106,0.1)'}; color: {isExpiring ? '#facc15' : 'var(--green)'}"
+							>
+								{ssl.days_remaining >= 0 ? 'Válido' : 'Expirado'}
+							</span>
+						</div>
+						<p class="mt-2 text-sm font-medium text-white">
+							{ssl.issuer}
+						</p>
+						<p class="mt-0.5 text-xs" style="color: {isExpiring ? '#facc15' : 'var(--text-muted)'}">
+							{ssl.days_remaining >= 0
+								? isExpiring
+									? '⚠ Certificado expira em ' + ssl.days_remaining + ' dia' + (ssl.days_remaining === 1 ? '' : 's')
+									: 'Certificado válido por mais ' + ssl.days_remaining + ' dias'
+								: '⚠ Certificado expirado há ' + Math.abs(ssl.days_remaining) + ' dias'}
+						</p>
+					</div>
+				</div>
+			</div>
+		{/if}
+
 		<div class="grid gap-6 lg:grid-cols-5">
 			<!-- SLA Breakdown -->
 			{#if stats}
diff --git a/frontend/src/routes/status/[id]/+page.ts b/frontend/src/routes/status/[id]/+page.ts
index 1b91c67..13a72b1 100644
--- a/frontend/src/routes/status/[id]/+page.ts
+++ b/frontend/src/routes/status/[id]/+page.ts
@@ -3,10 +3,11 @@ import type { PageLoad } from './$types';
 export const load: PageLoad = async ({ params, fetch }) => {
 	const id = params.id;
 
-	const [servicesRes, historyRes, statsRes] = await Promise.all([
+	const [servicesRes, historyRes, statsRes, sslRes] = await Promise.all([
 		fetch(`http://localhost:8080/api/services`).catch(() => null),
 		fetch(`http://localhost:8080/api/services/${id}/history`).catch(() => null),
-		fetch(`http://localhost:8080/api/services/${id}/stats`).catch(() => null)
+		fetch(`http://localhost:8080/api/services/${id}/stats`).catch(() => null),
+		fetch(`http://localhost:8080/api/services/${id}/ssl`).catch(() => null)
 	]);
 
 	const services = servicesRes?.ok ? await servicesRes.json() : [];
@@ -14,10 +15,12 @@ export const load: PageLoad = async ({ params, fetch }) => {
 	const historyJson = historyRes?.ok ? await historyRes.json() : [];
 	const history = Array.isArray(historyJson) ? historyJson : (historyJson.data ?? []);
 	const stats = statsRes?.ok ? await statsRes.json() : null;
+	const sslInfo = sslRes?.ok ? await sslRes.json() : null;
 
 	return {
 		service: svc ?? null,
 		history,
-		stats
+		stats,
+		sslInfo
 	};
 };