Spaces:

formol2025
/

vigitoxo-app

Running

App Files Files Community

vigitoxo-app / index.html

formol2025

Add 3 files

073c4e8 verified 8 months ago

raw

history blame contribute delete

85.5 kB

	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>VIGI_TOXO-ONE \| Vigilância Integrada de Toxoplasmose</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	/* Custom CSS for elements Tailwind can't handle easily */
	.risk-meter {
	width: 100%;
	height: 20px;
	background: linear-gradient(to right, #4ade80, #f59e0b, #ef4444);
	border-radius: 10px;
	margin-top: 5px;
	}

	.risk-indicator {
	height: 100%;
	width: 30%;
	background-color: rgba(255,255,255,0.7);
	border-radius: 10px;
	transition: all 0.3s ease;
	}

	.map-container {
	height: 400px;
	background-color: #e5e7eb;
	position: relative;
	overflow: hidden;
	}

	.heat-point {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: rgba(239, 68, 68, 0.7);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	}

	.offline-badge {
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% { opacity: 0.6; }
	50% { opacity: 1; }
	100% { opacity: 0.6; }
	}

	/* Custom scrollbar */
	::-webkit-scrollbar {
	width: 8px;
	}

	::-webkit-scrollbar-track {
	background: #f1f1f1;
	}

	::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
	}

	::-webkit-scrollbar-thumb:hover {
	background: #555;
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans">
	<!-- Offline Mode Indicator -->
	<div id="offlineAlert" class="hidden fixed top-4 right-4 z-50">
	<div class="bg-yellow-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center offline-badge">
	<i class="fas fa-wifi-slash mr-2"></i>
	<span>Modo offline ativado - Dados serão sincronizados quando a conexão for restabelecida</span>
	</div>
	</div>

	<!-- Login Screen (Default View) -->
	<div id="loginScreen" class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-blue-50">
	<div class="sm:mx-auto sm:w-full sm:max-w-md">
	<img class="mx-auto h-24 w-auto" src="https://via.placeholder.com/150" alt="VIGI_TOXO-ONE Logo">
	<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
	VIGI_TOXO-ONE
	</h2>
	<p class="mt-2 text-center text-sm text-gray-600">
	Sistema Integrado de Vigilância de Toxoplasmose Gestacional e Congênita
	</p>
	</div>

	<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
	<div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
	<form class="space-y-6" id="loginForm">
	<div>
	<label for="email" class="block text-sm font-medium text-gray-700">
	Email ou CPF
	</label>
	<div class="mt-1">
	<input id="email" name="email" type="text" autocomplete="email" required
	class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
	</div>
	</div>

	<div>
	<label for="password" class="block text-sm font-medium text-gray-700">
	Senha
	</label>
	<div class="mt-1">
	<input id="password" name="password" type="password" autocomplete="current-password" required
	class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
	</div>
	</div>

	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<input id="remember-me" name="remember-me" type="checkbox"
	class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
	<label for="remember-me" class="ml-2 block text-sm text-gray-900">
	Lembrar de mim
	</label>
	</div>

	<div class="text-sm">
	<a href="#" class="font-medium text-green-600 hover:text-green-500">
	Esqueceu sua senha?
	</a>
	</div>
	</div>

	<div>
	<button type="submit"
	class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
	Entrar
	</button>
	</div>
	</form>

	<div class="mt-6">
	<div class="relative">
	<div class="absolute inset-0 flex items-center">
	<div class="w-full border-t border-gray-300"></div>
	</div>
	<div class="relative flex justify-center text-sm">
	<span class="px-2 bg-white text-gray-500">
	Ou selecione seu perfil
	</span>
	</div>
	</div>

	<div class="mt-6 grid grid-cols-3 gap-3">
	<div>
	<button onclick="simulateLogin('professional')" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
	<i class="fas fa-user-md mr-2 text-green-600"></i> Profissional
	</button>
	</div>

	<div>
	<button onclick="simulateLogin('pregnant')" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
	<i class="fas fa-female mr-2 text-pink-600"></i> Gestante
	</button>
	</div>

	<div>
	<button onclick="simulateLogin('manager')" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
	<i class="fas fa-chart-line mr-2 text-blue-600"></i> Gestor
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Main App Container (Hidden by default) -->
	<div id="appContainer" class="hidden min-h-screen bg-gray-100">
	<!-- Header -->
	<header class="bg-white shadow-sm">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between h-16">
	<div class="flex">
	<!-- Logo -->
	<div class="flex-shrink-0 flex items-center">
	<img class="block lg:hidden h-8 w-auto" src="https://via.placeholder.com/40" alt="VIGI_TOXO-ONE">
	<img class="hidden lg:block h-8 w-auto" src="https://via.placeholder.com/150" alt="VIGI_TOXO-ONE">
	</div>
	<!-- Navigation -->
	<nav class="hidden sm:ml-6 sm:flex sm:space-x-8">
	<a href="#" id="dashboardTab" class="border-green-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
	<i class="fas fa-home mr-1"></i> Dashboard
	</a>
	<a href="#" id="riskAssessmentTab" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
	<i class="fas fa-clipboard-check mr-1"></i> Avaliação de Risco
	</a>
	<a href="#" id="casesTab" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
	<i class="fas fa-notes-medical mr-1"></i> Casos
	</a>
	<a href="#" id="oneHealthTab" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
	<i class="fas fa-globe-americas mr-1"></i> One Health
	</a>
	<a href="#" id="reportsTab" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
	<i class="fas fa-file-pdf mr-1"></i> Relatórios
	</a>
	</nav>
	</div>

	<!-- User dropdown -->
	<div class="hidden sm:ml-6 sm:flex sm:items-center">
	<div class="ml-3 relative">
	<div>
	<button id="userMenuButton" type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" aria-expanded="false" aria-haspopup="true">
	<span class="sr-only">Abrir menu do usuário</span>
	<img class="h-8 w-8 rounded-full" src="https://via.placeholder.com/32" alt="User profile">
	</button>
	</div>
	</div>
	</div>

	<!-- Mobile menu button -->
	<div class="-mr-2 flex items-center sm:hidden">
	<button id="mobileMenuButton" type="button" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" aria-expanded="false">
	<span class="sr-only">Abrir menu principal</span>
	<i class="fas fa-bars"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Mobile menu -->
	<div id="mobileMenu" class="hidden sm:hidden">
	<div class="pt-2 pb-3 space-y-1">
	<a href="#" class="bg-green-50 border-green-500 text-green-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dashboard</a>
	<a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Avaliação de Risco</a>
	<a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Casos</a>
	<a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">One Health</a>
	<a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Relatórios</a>
	</div>
	<div class="pt-4 pb-3 border-t border-gray-200">
	<div class="flex items-center px-4">
	<div class="flex-shrink-0">
	<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="User profile">
	</div>
	<div class="ml-3">
	<div class="text-base font-medium text-gray-800" id="mobileUserName">Dr. Ana Silva</div>
	<div class="text-sm font-medium text-gray-500" id="mobileUserRole">Médica - Saúde da Família</div>
	</div>
	</div>
	<div class="mt-3 space-y-1">
	<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Seu perfil</a>
	<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Configurações</a>
	<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100" onclick="logout()">Sair</a>
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
	<!-- Dashboard Tab Content -->
	<div id="dashboardContent" class="px-4 py-6 sm:px-0">
	<div class="mb-6 flex justify-between items-center">
	<h2 class="text-2xl font-bold text-gray-900">Dashboard de Vigilância</h2>
	<div class="flex space-x-3">
	<div class="relative">
	<select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	<option>Últimos 7 dias</option>
	<option>Últimos 30 dias</option>
	<option>Últimos 90 dias</option>
	<option selected>Personalizado</option>
	</select>
	<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
	<i class="fas fa-chevron-down text-xs"></i>
	</div>
	</div>
	<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-md text-sm flex items-center">
	<i class="fas fa-download mr-2"></i> Exportar
	</button>
	</div>
	</div>

	<!-- Stats Cards -->
	<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
	<div class="bg-white overflow-hidden shadow rounded-lg">
	<div class="px-4 py-5 sm:p-6">
	<div class="flex items-center">
	<div class="flex-shrink-0 bg-green-500 rounded-md p-3">
	<i class="fas fa-female text-white"></i>
	</div>
	<div class="ml-5 w-0 flex-1">
	<dl>
	<dt class="text-sm font-medium text-gray-500 truncate">
	Gestantes em acompanhamento
	</dt>
	<dd>
	<div class="text-lg font-medium text-gray-900">
	248
	</div>
	</dd>
	</dl>
	</div>
	</div>
	<div class="mt-4">
	<span class="text-xs font-medium inline-block py-1 px-2 rounded text-green-600 bg-green-100">
	<i class="fas fa-arrow-up mr-1"></i> 12% em relação ao mês passado
	</span>
	</div>
	</div>
	</div>

	<div class="bg-white overflow-hidden shadow rounded-lg">
	<div class="px-4 py-5 sm:p-6">
	<div class="flex items-center">
	<div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
	<i class="fas fa-exclamation-triangle text-white"></i>
	</div>
	<div class="ml-5 w-0 flex-1">
	<dl>
	<dt class="text-sm font-medium text-gray-500 truncate">
	Casos suspeitos
	</dt>
	<dd>
	<div class="text-lg font-medium text-gray-900">
	32
	</div>
	</dd>
	</dl>
	</div>
	</div>
	<div class="mt-4">
	<span class="text-xs font-medium inline-block py-1 px-2 rounded text-yellow-600 bg-yellow-100">
	<i class="fas fa-arrow-up mr-1"></i> 5% em relação ao mês passado
	</span>
	</div>
	</div>
	</div>

	<div class="bg-white overflow-hidden shadow rounded-lg">
	<div class="px-4 py-5 sm:p-6">
	<div class="flex items-center">
	<div class="flex-shrink-0 bg-red-500 rounded-md p-3">
	<i class="fas fa-virus text-white"></i>
	</div>
	<div class="ml-5 w-0 flex-1">
	<dl>
	<dt class="text-sm font-medium text-gray-500 truncate">
	Casos confirmados
	</dt>
	<dd>
	<div class="text-lg font-medium text-gray-900">
	8
	</div>
	</dd>
	</dl>
	</div>
	</div>
	<div class="mt-4">
	<span class="text-xs font-medium inline-block py-1 px-2 rounded text-red-600 bg-red-100">
	<i class="fas fa-arrow-down mr-1"></i> 20% em relação ao mês passado
	</span>
	</div>
	</div>
	</div>

	<div class="bg-white overflow-hidden shadow rounded-lg">
	<div class="px-4 py-5 sm:p-6">
	<div class="flex items-center">
	<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
	<i class="fas fa-paw text-white"></i>
	</div>
	<div class="ml-5 w-0 flex-1">
	<dl>
	<dt class="text-sm font-medium text-gray-500 truncate">
	Animais sentinelas positivos
	</dt>
	<dd>
	<div class="text-lg font-medium text-gray-900">
	15
	</div>
	</dd>
	</dl>
	</div>
	</div>
	<div class="mt-4">
	<span class="text-xs font-medium inline-block py-1 px-2 rounded text-blue-600 bg-blue-100">
	<i class="fas fa-arrow-up mr-1"></i> 8% em relação ao mês passado
	</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Map and Risk Assessment -->
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
	<div class="lg:col-span-2 bg-white shadow rounded-lg overflow-hidden">
	<div class="px-4 py-5 sm:px-6 border-b border-gray-200">
	<h3 class="text-lg leading-6 font-medium text-gray-900">
	Mapa de Risco Geo-referenciado
	</h3>
	<p class="mt-1 text-sm text-gray-500">
	Áreas com maior concentração de casos e fatores de risco
	</p>
	</div>
	<div class="p-4">
	<div class="map-container rounded-md">
	<!-- Heatmap points would be dynamically generated here -->
	<div class="heat-point" style="top: 30%; left: 25%;"></div>
	<div class="heat-point" style="top: 45%; left: 60%; width: 30px; height: 30px;"></div>
	<div class="heat-point" style="top: 70%; left: 40%;"></div>
	<div class="heat-point" style="top: 20%; left: 75%; width: 25px; height: 25px;"></div>
	<div class="heat-point" style="top: 65%; left: 80%;"></div>
	</div>
	<div class="mt-4 flex justify-between items-center">
	<div class="flex items-center">
	<div class="w-3 h-3 rounded-full bg-red-500 mr-1"></div>
	<span class="text-xs text-gray-600">Alto risco</span>
	<div class="w-3 h-3 rounded-full bg-yellow-500 mx-2 mr-1"></div>
	<span class="text-xs text-gray-600">Médio risco</span>
	<div class="w-3 h-3 rounded-full bg-green-500 mx-2 mr-1"></div>
	<span class="text-xs text-gray-600">Baixo risco</span>
	</div>
	<button class="text-sm text-green-600 hover:text-green-800 flex items-center">
	<i class="fas fa-layer-group mr-1"></i> Camadas
	</button>
	</div>
	</div>
	</div>

	<div class="bg-white shadow rounded-lg overflow-hidden">
	<div class="px-4 py-5 sm:px-6 border-b border-gray-200">
	<h3 class="text-lg leading-6 font-medium text-gray-900">
	Perfil de Risco da Área
	</h3>
	<p class="mt-1 text-sm text-gray-500">
	Fatores de risco predominantes na sua região
	</p>
	</div>
	<div class="p-4">
	<div class="mb-4">
	<h4 class="text-sm font-medium text-gray-700 mb-1">Consumo de água não tratada</h4>
	<div class="risk-meter">
	<div class="risk-indicator" style="width: 70%;"></div>
	</div>
	<span class="text-xs text-gray-500 mt-1 block">70% das gestantes na área</span>
	</div>

	<div class="mb-4">
	<h4 class="text-sm font-medium text-gray-700 mb-1">Contato com gatos</h4>
	<div class="risk-meter">
	<div class="risk-indicator" style="width: 45%;"></div>
	</div>
	<span class="text-xs text-gray-500 mt-1 block">45% das gestantes na área</span>
	</div>

	<div class="mb-4">
	<h4 class="text-sm font-medium text-gray-700 mb-1">Consumo de carne mal cozida</h4>
	<div class="risk-meter">
	<div class="risk-indicator" style="width: 30%;"></div>
	</div>
	<span class="text-xs text-gray-500 mt-1 block">30% das gestantes na área</span>
	</div>

	<div class="mb-4">
	<h4 class="text-sm font-medium text-gray-700 mb-1">Manipulação de terra</h4>
	<div class="risk-meter">
	<div class="risk-indicator" style="width: 60%;"></div>
	</div>
	<span class="text-xs text-gray-500 mt-1 block">60% das gestantes na área</span>
	</div>

	<button class="mt-4 w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm flex items-center justify-center">
	<i class="fas fa-plus-circle mr-2"></i> Ver todos os indicadores
	</button>
	</div>
	</div>
	</div>

	<!-- Recent Cases and Alerts -->
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
	<div class="lg:col-span-2 bg-white shadow rounded-lg overflow-hidden">
	<div class="px-4 py-5 sm:px-6 border-b border-gray-200">
	<div class="flex justify-between items-center">
	<h3 class="text-lg leading-6 font-medium text-gray-900">
	Casos Recentes
	</h3>
	<button class="text-sm text-green-600 hover:text-green-800">
	Ver todos
	</button>
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Nome
	</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Idade
	</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Localidade
	</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Status
	</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Data
	</th>
	<th scope="col" class="relative px-6 py-3">
	<span class="sr-only">Ações</span>
	</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">
	Maria Oliveira
	</div>
	<div class="text-sm text-gray-500">
	G3P2A0
	</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">28</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">Bairro X</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
	Confirmado
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
	12/05/2023
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
	<a href="#" class="text-green-600 hover:text-green-900">Detalhes</a>
	</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">
	Ana Santos
	</div>
	<div class="text-sm text-gray-500">
	G1P0A0
	</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">22</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">Bairro Y</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
	Suspeito
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
	10/05/2023
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
	<a href="#" class="text-green-600 hover:text-green-900">Detalhes</a>
	</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">
	Joana Pereira
	</div>
	<div class="text-sm text-gray-500">
	G2P1A0
	</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">25</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">Bairro Z</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
	Descartado
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
	08/05/2023
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
	<a href="#" class="text-green-600 hover:text-green-900">Detalhes</a>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<div class="bg-white shadow rounded-lg overflow-hidden">
	<div class="px-4 py-5 sm:px-6 border-b border-gray-200">
	<h3 class="text-lg leading-6 font-medium text-gray-900">
	Alertas e Ações
	</h3>
	</div>
	<div class="p-4">
	<div class="mb-4 p-3 bg-red-50 rounded-md border border-red-200">
	<div class="flex">
	<div class="flex-shrink-0">
	<i class="fas fa-exclamation-circle text-red-500"></i>
	</div>
	<div class="ml-3">
	<h3 class="text-sm font-medium text-red-800">
	Surto em investigação
	</h3>
	<div class="mt-2 text-sm text-red-700">
	<p>
	3 casos confirmados no Bairro X nas últimas 2 semanas. Ações de bloqueio necessárias.
	</p>
	</div>
	<div class="mt-2">
	<button class="text-sm font-medium text-red-800 hover:text-red-900">
	Ver detalhes <span aria-hidden="true">→</span>
	</button>
	</div>
	</div>
	</div>
	</div>

	<div class="mb-4 p-3 bg-yellow-50 rounded-md border border-yellow-200">
	<div class="flex">
	<div class="flex-shrink-0">
	<i class="fas fa-info-circle text-yellow-500"></i>
	</div>
	<div class="ml-3">
	<h3 class="text-sm font-medium text-yellow-800">
	Atualização de protocolo
	</h3>
	<div class="mt-2 text-sm text-yellow-700">
	<p>
	Novo fluxograma de atendimento disponível para casos suspeitos.
	</p>
	</div>
	<div class="mt-2">
	<button class="text-sm font-medium text-yellow-800 hover:text-yellow-900">
	Baixar documento <span aria-hidden="true">→</span>
	</button>
	</div>
	</div>
	</div>
	</div>

	<div class="mb-4 p-3 bg-blue-50 rounded-md border border-blue-200">
	<div class="flex">
	<div class="flex-shrink-0">
	<i class="fas fa-calendar-alt text-blue-500"></i>
	</div>
	<div class="ml-3">
	<h3 class="text-sm font-medium text-blue-800">
	Capacitação
	</h3>
	<div class="mt-2 text-sm text-blue-700">
	<p>
	Treinamento sobre diagnóstico precoce dia 20/05 às 14h no CRS.
	</p>
	</div>
	<div class="mt-2">
	<button class="text-sm font-medium text-blue-800 hover:text-blue-900">
	Confirmar presença <span aria-hidden="true">→</span>
	</button>
	</div>
	</div>
	</div>
	</div>

	<div class="p-3 bg-green-50 rounded-md border border-green-200">
	<div class="flex">
	<div class="flex-shrink-0">
	<i class="fas fa-check-circle text-green-500"></i>
	</div>
	<div class="ml-3">
	<h3 class="text-sm font-medium text-green-800">
	Ação concluída
	</h3>
	<div class="mt-2 text-sm text-green-700">
	<p>
	Educação em saúde realizada no Bairro Y com 35 gestantes.
	</p>
	</div>
	<div class="mt-2">
	<button class="text-sm font-medium text-green-800 hover:text-green-900">
	Ver relatório <span aria-hidden="true">→</span>
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Risk Assessment Tab Content -->
	<div id="riskAssessmentContent" class="hidden px-4 py-6 sm:px-0">
	<div class="mb-6 flex justify-between items-center">
	<h2 class="text-2xl font-bold text-gray-900">Avaliação de Risco para Toxoplasmose</h2>
	<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-md text-sm flex items-center">
	<i class="fas fa-history mr-2"></i> Histórico de avaliações
	</button>
	</div>

	<div class="bg-white shadow rounded-lg overflow-hidden">
	<div class="px-4 py-5 sm:px-6 border-b border-gray-200">
	<h3 class="text-lg leading-6 font-medium text-gray-900">
	Questionário de Avaliação de Risco
	</h3>
	<p class="mt-1 text-sm text-gray-500">
	Preencha o formulário abaixo para avaliar o risco de infecção por toxoplasmose
	</p>
	</div>

	<div class="p-6">
	<form id="riskAssessmentForm">
	<!-- Patient Info -->
	<div class="mb-8">
	<h4 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Dados da Paciente</h4>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div>
	<label for="patient-name" class="block text-sm font-medium text-gray-700 mb-1">Nome completo</label>
	<input type="text" id="patient-name" name="patient-name" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="patient-cpf" class="block text-sm font-medium text-gray-700 mb-1">CPF</label>
	<input type="text" id="patient-cpf" name="patient-cpf" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="patient-dob" class="block text-sm font-medium text-gray-700 mb-1">Data de Nascimento</label>
	<input type="date" id="patient-dob" name="patient-dob" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="patient-gestational-age" class="block text-sm font-medium text-gray-700 mb-1">Idade Gestacional (semanas)</label>
	<input type="number" id="patient-gestational-age" name="patient-gestational-age" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="patient-address" class="block text-sm font-medium text-gray-700 mb-1">Endereço</label>
	<input type="text" id="patient-address" name="patient-address" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="patient-neighborhood" class="block text-sm font-medium text-gray-700 mb-1">Bairro</label>
	<input type="text" id="patient-neighborhood" name="patient-neighborhood" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	</div>
	</div>

	<!-- Risk Factors -->
	<div class="mb-8">
	<h4 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Fatores de Risco Comportamentais</h4>

	<div class="space-y-6">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">1. Consome água não tratada (poço, rio, cacimba)?</label>
	<div class="mt-1 space-y-2">
	<div class="flex items-center">
	<input id="water-yes" name="water" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="water-yes" class="ml-2 block text-sm text-gray-700">Sim</label>
	</div>
	<div class="flex items-center">
	<input id="water-no" name="water" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="water-no" class="ml-2 block text-sm text-gray-700">Não</label>
	</div>
	<div class="flex items-center">
	<input id="water-sometimes" name="water" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="water-sometimes" class="ml-2 block text-sm text-gray-700">Às vezes</label>
	</div>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">2. Consome carne mal cozida ou crua?</label>
	<div class="mt-1 space-y-2">
	<div class="flex items-center">
	<input id="meat-yes" name="meat" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="meat-yes" class="ml-2 block text-sm text-gray-700">Sim</label>
	</div>
	<div class="flex items-center">
	<input id="meat-no" name="meat" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="meat-no" class="ml-2 block text-sm text-gray-700">Não</label>
	</div>
	<div class="flex items-center">
	<input id="meat-sometimes" name="meat" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="meat-sometimes" class="ml-2 block text-sm text-gray-700">Às vezes</label>
	</div>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">3. Tem contato com gatos (domésticos ou de rua)?</label>
	<div class="mt-1 space-y-2">
	<div class="flex items-center">
	<input id="cats-yes" name="cats" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="cats-yes" class="ml-2 block text-sm text-gray-700">Sim</label>
	</div>
	<div class="flex items-center">
	<input id="cats-no" name="cats" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="cats-no" class="ml-2 block text-sm text-gray-700">Não</label>
	</div>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">4. Manipula terra (jardinagem, agricultura)?</label>
	<div class="mt-1 space-y-2">
	<div class="flex items-center">
	<input id="soil-yes" name="soil" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="soil-yes" class="ml-2 block text-sm text-gray-700">Sim</label>
	</div>
	<div class="flex items-center">
	<input id="soil-no" name="soil" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="soil-no" class="ml-2 block text-sm text-gray-700">Não</label>
	</div>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">5. Consome verduras cruas sem higienização adequada?</label>
	<div class="mt-1 space-y-2">
	<div class="flex items-center">
	<input id="vegetables-yes" name="vegetables" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="vegetables-yes" class="ml-2 block text-sm text-gray-700">Sim</label>
	</div>
	<div class="flex items-center">
	<input id="vegetables-no" name="vegetables" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="vegetables-no" class="ml-2 block text-sm text-gray-700">Não</label>
	</div>
	<div class="flex items-center">
	<input id="vegetables-sometimes" name="vegetables" type="radio" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300">
	<label for="vegetables-sometimes" class="ml-2 block text-sm text-gray-700">Às vezes</label>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Serological Tests -->
	<div class="mb-8">
	<h4 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Resultados Sorológicos</h4>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
	<div>
	<label for="igm-test" class="block text-sm font-medium text-gray-700 mb-1">IgM</label>
	<select id="igm-test" name="igm-test" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	<option value="">Selecione</option>
	<option value="positive">Positivo</option>
	<option value="negative">Negativo</option>
	<option value="indeterminate">Indeterminado</option>
	<option value="not-done">Não realizado</option>
	</select>
	</div>

	<div>
	<label for="igg-test" class="block text-sm font-medium text-gray-700 mb-1">IgG</label>
	<select id="igg-test" name="igg-test" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	<option value="">Selecione</option>
	<option value="positive">Positivo</option>
	<option value="negative">Negativo</option>
	<option value="indeterminate">Indeterminado</option>
	<option value="not-done">Não realizado</option>
	</select>
	</div>

	<div>
	<label for="avidity-test" class="block text-sm font-medium text-gray-700 mb-1">Avidez</label>
	<select id="avidity-test" name="avidity-test" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	<option value="">Selecione</option>
	<option value="high">Alta</option>
	<option value="low">Baixa</option>
	<option value="intermediate">Intermediária</option>
	<option value="not-done">Não realizado</option>
	</select>
	</div>
	</div>

	<div class="mt-4">
	<label for="test-date" class="block text-sm font-medium text-gray-700 mb-1">Data da coleta</label>
	<input type="date" id="test-date" name="test-date" class="w-full md:w-1/3 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	</div>

	<!-- Clinical Symptoms -->
	<div class="mb-8">
	<h4 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Sintomas Clínicos</h4>

	<div class="space-y-4">
	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="fever" name="fever" type="checkbox" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="fever" class="font-medium text-gray-700">Febre</label>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="lymphadenopathy" name="lymphadenopathy" type="checkbox" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="lymphadenopathy" class="font-medium text-gray-700">Linfadenopatia</label>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="headache" name="headache" type="checkbox" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="headache" class="font-medium text-gray-700">Cefaleia</label>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="myalgia" name="myalgia" type="checkbox" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="myalgia" class="font-medium text-gray-700">Mialgia</label>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="visual-changes" name="visual-changes" type="checkbox" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="visual-changes" class="font-medium text-gray-700">Alterações visuais</label>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="asymptomatic" name="asymptomatic" type="checkbox" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="asymptomatic" class="font-medium text-gray-700">Assintomática</label>
	</div>
	</div>
	</div>
	</div>

	<!-- Risk Calculation -->
	<div class="mb-8 p-4 bg-blue-50 rounded-lg border border-blue-200">
	<h4 class="text-lg font-medium text-blue-800 mb-2">Resultado da Avaliação de Risco</h4>
	<p class="text-sm text-blue-700 mb-4">O cálculo de risco será exibido após o preenchimento do questionário.</p>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
	<div class="bg-white p-3 rounded-md shadow-sm border border-gray-200">
	<h5 class="text-sm font-medium text-gray-700 mb-1">Risco Comportamental</h5>
	<div class="h-2 w-full bg-gray-200 rounded-full mt-2">
	<div class="h-2 rounded-full bg-yellow-500" style="width: 60%;"></div>
	</div>
	<p class="text-xs text-gray-500 mt-1">Moderado</p>
	</div>

	<div class="bg-white p-3 rounded-md shadow-sm border border-gray-200">
	<h5 class="text-sm font-medium text-gray-700 mb-1">Risco Sorológico</h5>
	<div class="h-2 w-full bg-gray-200 rounded-full mt-2">
	<div class="h-2 rounded-full bg-green-500" style="width: 20%;"></div>
	</div>
	<p class="text-xs text-gray-500 mt-1">Baixo</p>
	</div>

	<div class="bg-white p-3 rounded-md shadow-sm border border-gray-200">
	<h5 class="text-sm font-medium text-gray-700 mb-1">Risco Total</h5>
	<div class="h-2 w-full bg-gray-200 rounded-full mt-2">
	<div class="h-2 rounded-full bg-yellow-500" style="width: 45%;"></div>
	</div>
	<p class="text-xs text-gray-500 mt-1">Moderado</p>
	</div>
	</div>

	<div class="mt-4 p-3 bg-white rounded-md border border-gray-200">
	<h5 class="text-sm font-medium text-gray-700 mb-2">Recomendações</h5>
	<ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
	<li>Orientar sobre higienização adequada de alimentos</li>
	<li>Evitar contato com fezes de gato</li>
	<li>Usar luvas para manipulação de terra</li>
	<li>Repetir sorologia em 4 semanas</li>
	</ul>
	</div>
	</div>

	<!-- Form Actions -->
	<div class="flex justify-end space-x-3">
	<button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
	Cancelar
	</button>
	<button type="button" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-calculator mr-2"></i> Calcular Risco
	</button>
	<button type="submit" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
	<i class="fas fa-save mr-2"></i> Salvar Avaliação
	</button>
	</div>
	</form>
	</div>
	</div>
	</div>

	<!-- Cases Tab Content -->
	<div id="casesContent" class="hidden px-4 py-6 sm:px-0">
	<div class="mb-6 flex justify-between items-center">
	<h2 class="text-2xl font-bold text-gray-900">Registro de Casos</h2>
	<div class="flex space-x-3">
	<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-md text-sm flex items-center">
	<i class="fas fa-plus-circle mr-2"></i> Novo Caso
	</button>
	<button class="bg-white border border-gray-300 text-gray-700 px-3 py-2 rounded-md text-sm flex items-center hover:bg-gray-50">
	<i class="fas fa-filter mr-2"></i> Filtrar
	</button>
	</div>
	</div>

	<div class="bg-white shadow rounded-lg overflow-hidden">
	<div class="px-4 py-5 sm:px-6 border-b border-gray-200">
	<h3 class="text-lg leading-6 font-medium text-gray-900">
	Formulário de Notificação - SINAN Adaptado
	</h3>
	<p class="mt-1 text-sm text-gray-500">
	Preencha os dados abaixo para notificação de caso suspeito ou confirmado de toxoplasmose gestacional/congênita
	</p>
	</div>

	<div class="p-6">
	<form id="caseForm">
	<!-- Patient Identification -->
	<div class="mb-8">
	<h4 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Identificação do Paciente</h4>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div>
	<label for="case-patient-name" class="block text-sm font-medium text-gray-700 mb-1">Nome completo</label>
	<input type="text" id="case-patient-name" name="case-patient-name" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="case-patient-mother" class="block text-sm font-medium text-gray-700 mb-1">Nome da mãe</label>
	<input type="text" id="case-patient-mother" name="case-patient-mother" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="case-patient-cpf" class="block text-sm font-medium text-gray-700 mb-1">CPF</label>
	<input type="text" id="case-patient-cpf" name="case-patient-cpf" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="case-patient-dob" class="block text-sm font-medium text-gray-700 mb-1">Data de Nascimento</label>
	<input type="date" id="case-patient-dob" name="case-patient-dob" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="case-patient-phone" class="block text-sm font-medium text-gray-700 mb-1">Telefone</label>
	<input type="text" id="case-patient-phone" name="case-patient-phone" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="case-patient-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
	<input type="email" id="case-patient-email" name="case-patient-email" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	</div>
	</div>

	<!-- Address -->
	<div class="mb-8">
	<h4 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Endereço</h4>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div class="md:col-span-2">
	<label for="case-patient-address" class="block text-sm font-medium text-gray-700 mb-1">Logradouro</label>
	<input type="text" id="case-patient-address" name="case-patient-address" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="case-patient-number" class="block text-sm font-medium text-gray-700 mb-1">Número</label>
	<input type="text" id="case-patient-number" name="case-patient-number" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="case-patient-complement" class="block text-sm font-medium text-gray-700 mb-1">Complemento</label>
	<input type="text" id="case-patient-complement" name="case-patient-complement" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="case-patient-neighborhood" class="block text-sm font-medium text-gray-700 mb-1">Bairro</label>
	<input type="text" id="case-patient-neighborhood" name="case-patient-neighborhood" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="case-patient-city" class="block text-sm font-medium text-gray-700 mb-1">Município</label>
	<input type="text" id="case-patient-city" name="case-patient-city" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	<div>
	<label for="case-patient-uf" class="block text-sm font-medium text-gray-700 mb-1">UF</label>
	<select id="case-patient-uf" name="case-patient-uf" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	<option value="">Selecione</option>
	<option value="AC">AC</option>
	<option value="AL">AL</option>
	<!-- Add all Brazilian states -->
	</select>
	</div>
	<div>
	<label for="case-patient-cep" class="block text-sm font-medium text-gray-700 mb-1">CEP</label>
	<input type="text" id="case-patient-cep" name="case-patient-cep" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	</div>
	</div>

	<!-- Clinical Data -->
	<div class="mb-8">
	<h4 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Dados Clínicos</h4>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div>
	<label for="case-gestational-age" class="block text-sm font-medium text-gray-700 mb-1">Idade Gestacional (semanas)</label>
	<input type="number" id="case-gestational-age" name="case-gestational-age" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>

	<div>
	<label for="case-prenatal" class="block text-sm font-medium text-gray-700 mb-1">Faz pré-natal?</label>
	<select id="case-prenatal" name="case-prenatal" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	<option value="">Selecione</option>
	<option value="yes">Sim</option>
	<option value="no">Não</option>
	</select>
	</div>

	<div>
	<label for="case-symptoms-date" class="block text-sm font-medium text-gray-700 mb-1">Data do início dos sintomas</label>
	<input type="date" id="case-symptoms-date" name="case-symptoms-date" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>

	<div>
	<label for="case-notification-date" class="block text-sm font-medium text-gray-700 mb-1">Data da notificação</label>
	<input type="date" id="case-notification-date" name="case-notification-date" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
	</div>
	</div>

	<div class="mt-6">
	<label class="block text-sm font-medium text-gray-700 mb-2">Sintomas apresentados</label>
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="case-fever" name="case-fever" type="checkbox" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="case-fever" class="font-medium text-gray-700">Febre</label>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="case-lymphadenopathy" name="case-lymphadenopathy" type="checkbox" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="case-lymphadenopathy" class="font-medium text-gray-700">Linfadenopatia</label>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="case-headache" name="case-headache" type="checkbox" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="case-headache" class="font-medium text-gray-700">Cefaleia</label>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="case-myalgia" name="case-myalgia" type="checkbox" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="case-myalgia" class="font-medium text-gray-700">Mialgia</label>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="case-visual-changes" name="case-visual-changes" type="checkbox" class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="case-visual-changes" class="font-medium text-gray-700">Alterações visuais</label>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="case-asymptomatic" name="case-asymptomatic" type="checkbox" class="focus
	</html>