Spaces:

dalton758
/

testes

Running

App Files Files Community

testes / index.html

dalton758

Add 3 files

7ebd53b verified 11 months ago

raw

history blame contribute delete

77.3 kB

	<!DOCTYPE html>
	<html lang="pt">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Água Sonho Real - Sistema de Cobrança</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">
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#3498db',
	secondary: '#2980b9',
	danger: '#e74c3c',
	warning: '#f39c12',
	success: '#2ecc71',
	dark: '#2c3e50',
	}
	}
	}
	}
	</script>
	<style>
	.sidebar {
	transition: all 0.3s;
	}
	@media (max-width: 768px) {
	.sidebar {
	transform: translateX(-100%);
	}
	.sidebar.active {
	transform: translateX(0);
	}
	}
	.tab-content {
	display: none;
	}
	.tab-content.active {
	display: block;
	}
	.alert-pulse {
	animation: pulse 2s infinite;
	}
	@keyframes pulse {
	0% {
	box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
	}
	70% {
	box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
	}
	100% {
	box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
	}
	}
	</style>
	</head>
	<body class="bg-gray-100 font-sans">
	<div class="flex h-screen overflow-hidden">
	<!-- Sidebar -->
	<div class="sidebar bg-dark text-white w-64 fixed h-full z-10">
	<div class="p-4 flex items-center space-x-2 border-b border-gray-700">
	<i class="fas fa-tint text-2xl text-primary"></i>
	<h1 class="text-xl font-bold">Água Sonho Real</h1>
	</div>
	<nav class="p-4">
	<ul class="space-y-2">
	<li>
	<button onclick="showTab('dashboard')" class="tab-btn w-full text-left p-2 rounded hover:bg-secondary flex items-center space-x-2">
	<i class="fas fa-home"></i>
	<span>Dashboard</span>
	</button>
	</li>
	<li>
	<button onclick="showTab('billing')" class="tab-btn w-full text-left p-2 rounded hover:bg-secondary flex items-center space-x-2">
	<i class="fas fa-file-invoice-dollar"></i>
	<span>Cobrança</span>
	</button>
	</li>
	<li>
	<button onclick="showTab('customers')" class="tab-btn w-full text-left p-2 rounded hover:bg-secondary flex items-center space-x-2">
	<i class="fas fa-users"></i>
	<span>Clientes</span>
	</button>
	</li>
	<li>
	<button onclick="showTab('reports')" class="tab-btn w-full text-left p-2 rounded hover:bg-secondary flex items-center space-x-2">
	<i class="fas fa-chart-bar"></i>
	<span>Relatórios</span>
	</button>
	</li>
	<li>
	<button onclick="showTab('settings')" class="tab-btn w-full text-left p-2 rounded hover:bg-secondary flex items-center space-x-2">
	<i class="fas fa-cog"></i>
	<span>Configurações</span>
	</button>
	</li>
	</ul>
	</nav>
	<div class="absolute bottom-0 w-full p-4 border-t border-gray-700">
	<button class="w-full bg-primary hover:bg-secondary text-white p-2 rounded flex items-center justify-center space-x-2">
	<i class="fas fa-sign-out-alt"></i>
	<span>Sair</span>
	</button>
	</div>
	</div>

	<!-- Main Content -->
	<div class="flex-1 ml-0 md:ml-64 transition-all duration-300">
	<!-- Mobile Header -->
	<header class="bg-white shadow md:hidden p-4 flex items-center justify-between">
	<button id="menu-toggle" class="text-dark">
	<i class="fas fa-bars text-xl"></i>
	</button>
	<h1 class="text-xl font-bold text-dark">Água Sonho Real</h1>
	<div class="w-8"></div> <!-- Spacer -->
	</header>

	<!-- Content -->
	<main class="p-4 md:p-6">
	<!-- Dashboard Tab -->
	<div id="dashboard" class="tab-content active">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-dark">Dashboard</h2>
	<div class="text-sm text-gray-500">
	<span id="current-date"></span>
	</div>
	</div>

	<!-- Stats Cards -->
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
	<div class="bg-white p-4 rounded-lg shadow">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-500">Clientes Ativos</p>
	<h3 class="text-2xl font-bold" id="active-customers">0</h3>
	</div>
	<div class="bg-primary bg-opacity-10 p-3 rounded-full">
	<i class="fas fa-users text-primary text-xl"></i>
	</div>
	</div>
	</div>
	<div class="bg-white p-4 rounded-lg shadow">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-500">Receita Mensal</p>
	<h3 class="text-2xl font-bold" id="monthly-revenue">0 MZN</h3>
	</div>
	<div class="bg-success bg-opacity-10 p-3 rounded-full">
	<i class="fas fa-money-bill-wave text-success text-xl"></i>
	</div>
	</div>
	</div>
	<div class="bg-white p-4 rounded-lg shadow">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-500">Pagamentos Atrasados</p>
	<h3 class="text-2xl font-bold" id="late-payments">0</h3>
	</div>
	<div class="bg-danger bg-opacity-10 p-3 rounded-full">
	<i class="fas fa-exclamation-triangle text-danger text-xl"></i>
	</div>
	</div>
	</div>
	<div class="bg-white p-4 rounded-lg shadow">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-500">Consumo Médio</p>
	<h3 class="text-2xl font-bold" id="avg-consumption">0 m³</h3>
	</div>
	<div class="bg-secondary bg-opacity-10 p-3 rounded-full">
	<i class="fas fa-tint text-secondary text-xl"></i>
	</div>
	</div>
	</div>
	</div>

	<!-- Alerts -->
	<div class="mb-6">
	<h3 class="text-lg font-semibold mb-2 text-dark">Alertas de Pagamento</h3>
	<div id="alerts-container" class="space-y-2">
	<!-- Alerts will be added here dynamically -->
	</div>
	</div>

	<!-- Recent Payments -->
	<div class="bg-white rounded-lg shadow overflow-hidden">
	<div class="p-4 border-b">
	<h3 class="text-lg font-semibold text-dark">Últimos Pagamentos</h3>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nº Cliente</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Área</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
	</tr>
	</thead>
	<tbody id="recent-payments" class="bg-white divide-y divide-gray-200">
	<!-- Recent payments will be added here dynamically -->
	</tbody>
	</table>
	</div>
	</div>
	</div>

	<!-- Billing Tab -->
	<div id="billing" class="tab-content">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-dark">Cobrança</h2>
	<button onclick="showNewBillingModal()" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded flex items-center space-x-2">
	<i class="fas fa-plus"></i>
	<span>Nova Cobrança</span>
	</button>
	</div>

	<div class="bg-white rounded-lg shadow overflow-hidden mb-6">
	<div class="p-4 border-b">
	<h3 class="text-lg font-semibold text-dark">Registrar Pagamento</h3>
	</div>
	<div class="p-4">
	<form id="payment-form" class="grid grid-cols-1 md:grid-cols-3 gap-4">
	<div>
	<label for="customer-search" class="block text-sm font-medium text-gray-700 mb-1">Buscar Cliente</label>
	<div class="relative">
	<input type="text" id="customer-search" class="w-full p-2 border border-gray-300 rounded" placeholder="Nome ou Nº Cliente">
	<div id="search-results" class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded shadow-lg hidden"></div>
	</div>
	</div>
	<div>
	<label for="consumption" class="block text-sm font-medium text-gray-700 mb-1">Consumo (m³)</label>
	<input type="number" id="consumption" min="5" step="0.1" class="w-full p-2 border border-gray-300 rounded" value="5">
	</div>
	<div>
	<label for="amount" class="block text-sm font-medium text-gray-700 mb-1">Valor (MZN)</label>
	<input type="number" id="amount" class="w-full p-2 border border-gray-300 rounded" readonly>
	</div>
	<div class="md:col-span-3">
	<button type="button" onclick="calculateAmount()" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded mr-2">
	Calcular
	</button>
	<button type="button" onclick="registerPayment()" class="bg-success hover:bg-green-600 text-white px-4 py-2 rounded">
	Registrar Pagamento
	</button>
	</div>
	</form>
	</div>
	</div>

	<div class="bg-white rounded-lg shadow overflow-hidden">
	<div class="p-4 border-b flex justify-between items-center">
	<h3 class="text-lg font-semibold text-dark">Histórico de Cobranças</h3>
	<div class="flex space-x-2">
	<select id="billing-filter" class="p-2 border border-gray-300 rounded">
	<option value="all">Todos</option>
	<option value="paid">Pagas</option>
	<option value="pending">Pendentes</option>
	<option value="overdue">Atrasadas</option>
	</select>
	<input type="month" id="billing-month" class="p-2 border border-gray-300 rounded">
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nº Cliente</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Área</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Consumo</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
	</tr>
	</thead>
	<tbody id="billing-history" class="bg-white divide-y divide-gray-200">
	<!-- Billing history will be added here dynamically -->
	</tbody>
	</table>
	</div>
	</div>
	</div>

	<!-- Customers Tab -->
	<div id="customers" class="tab-content">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-dark">Clientes</h2>
	<button onclick="showNewCustomerModal()" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded flex items-center space-x-2">
	<i class="fas fa-plus"></i>
	<span>Novo Cliente</span>
	</button>
	</div>

	<div class="bg-white rounded-lg shadow overflow-hidden mb-6">
	<div class="p-4 border-b flex justify-between items-center">
	<h3 class="text-lg font-semibold text-dark">Lista de Clientes</h3>
	<div class="flex space-x-2">
	<select id="customer-area-filter" class="p-2 border border-gray-300 rounded">
	<option value="all">Todas Áreas</option>
	<option value="1">Possulane</option>
	<option value="2">Condomínios</option>
	</select>
	<input type="text" id="customer-search-main" placeholder="Buscar cliente..." class="p-2 border border-gray-300 rounded">
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nº Cliente</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Área</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contacto</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Último Pagamento</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
	</tr>
	</thead>
	<tbody id="customers-list" class="bg-white divide-y divide-gray-200">
	<!-- Customers list will be added here dynamically -->
	</tbody>
	</table>
	</div>
	</div>
	</div>

	<!-- Reports Tab -->
	<div id="reports" class="tab-content">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-dark">Relatórios</h2>
	<div class="flex space-x-2">
	<button onclick="generatePDFReport()" class="bg-danger hover:bg-red-600 text-white px-4 py-2 rounded flex items-center space-x-2">
	<i class="fas fa-file-pdf"></i>
	<span>Exportar PDF</span>
	</button>
	<button onclick="generateExcelReport()" class="bg-success hover:bg-green-600 text-white px-4 py-2 rounded flex items-center space-x-2">
	<i class="fas fa-file-excel"></i>
	<span>Exportar Excel</span>
	</button>
	</div>
	</div>

	<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
	<div class="bg-white p-4 rounded-lg shadow">
	<h3 class="text-lg font-semibold mb-4 text-dark">Filtros do Relatório</h3>
	<form id="report-filters" class="space-y-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Relatório</label>
	<select id="report-type" class="w-full p-2 border border-gray-300 rounded">
	<option value="monthly">Mensal</option>
	<option value="quarterly">Trimestral</option>
	<option value="annual">Anual</option>
	<option value="custom">Personalizado</option>
	</select>
	</div>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div>
	<label for="start-date" class="block text-sm font-medium text-gray-700 mb-1">Data Inicial</label>
	<input type="date" id="start-date" class="w-full p-2 border border-gray-300 rounded">
	</div>
	<div>
	<label for="end-date" class="block text-sm font-medium text-gray-700 mb-1">Data Final</label>
	<input type="date" id="end-date" class="w-full p-2 border border-gray-300 rounded">
	</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Área</label>
	<select id="report-area" class="w-full p-2 border border-gray-300 rounded">
	<option value="all">Todas Áreas</option>
	<option value="1">Possulane</option>
	<option value="2">Condomínios</option>
	</select>
	</div>
	<button type="button" onclick="generateReport()" class="w-full bg-primary hover:bg-secondary text-white px-4 py-2 rounded">
	Gerar Relatório
	</button>
	</form>
	</div>
	<div class="bg-white p-4 rounded-lg shadow">
	<h3 class="text-lg font-semibold mb-4 text-dark">Resumo Financeiro</h3>
	<div class="space-y-4">
	<div>
	<h4 class="font-medium text-gray-700">Receita Total</h4>
	<p class="text-2xl font-bold" id="total-revenue">0 MZN</p>
	</div>
	<div>
	<h4 class="font-medium text-gray-700">Pagamentos Pendentes</h4>
	<p class="text-2xl font-bold text-danger" id="pending-revenue">0 MZN</p>
	</div>
	<div>
	<h4 class="font-medium text-gray-700">Número de Clientes</h4>
	<div class="flex justify-between">
	<div>
	<p class="text-sm text-gray-500">Possulane</p>
	<p class="text-xl font-bold" id="possulane-customers">0</p>
	</div>
	<div>
	<p class="text-sm text-gray-500">Condomínios</p>
	<p class="text-xl font-bold" id="condominios-customers">0</p>
	</div>
	<div>
	<p class="text-sm text-gray-500">Total</p>
	<p class="text-xl font-bold" id="total-customers">0</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="bg-white rounded-lg shadow overflow-hidden">
	<div class="p-4 border-b">
	<h3 class="text-lg font-semibold text-dark">Resultados do Relatório</h3>
	</div>
	<div class="p-4">
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mês</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Receita (MZN)</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clientes Ativos</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pagamentos Atrasados</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Consumo Médio (m³)</th>
	</tr>
	</thead>
	<tbody id="report-results" class="bg-white divide-y divide-gray-200">
	<!-- Report results will be added here dynamically -->
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</div>

	<!-- Settings Tab -->
	<div id="settings" class="tab-content">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-dark">Configurações</h2>
	</div>

	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
	<div class="bg-white p-4 rounded-lg shadow lg:col-span-2">
	<h3 class="text-lg font-semibold mb-4 text-dark">Configurações de Cobrança</h3>
	<form id="billing-settings" class="space-y-4">
	<div>
	<label for="min-consumption" class="block text-sm font-medium text-gray-700 mb-1">Consumo Mínimo (m³)</label>
	<input type="number" id="min-consumption" min="1" step="1" class="w-full p-2 border border-gray-300 rounded" value="5">
	</div>
	<div>
	<label for="min-consumption-price" class="block text-sm font-medium text-gray-700 mb-1">Preço Consumo Mínimo (MZN)</label>
	<input type="number" id="min-consumption-price" min="1" step="1" class="w-full p-2 border border-gray-300 rounded" value="300">
	</div>
	<div>
	<label for="extra-consumption-price" class="block text-sm font-medium text-gray-700 mb-1">Preço por m³ adicional (MZN)</label>
	<input type="number" id="extra-consumption-price" min="1" step="1" class="w-full p-2 border border-gray-300 rounded" value="60">
	</div>
	<div>
	<label for="due-date" class="block text-sm font-medium text-gray-700 mb-1">Dia de Vencimento</label>
	<input type="number" id="due-date" min="1" max="31" class="w-full p-2 border border-gray-300 rounded" value="15">
	</div>
	<div>
	<label for="late-fee" class="block text-sm font-medium text-gray-700 mb-1">Multa por Atraso (%)</label>
	<input type="number" id="late-fee" min="0" max="100" step="0.1" class="w-full p-2 border border-gray-300 rounded" value="5">
	</div>
	<button type="button" onclick="saveBillingSettings()" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded">
	Salvar Configurações
	</button>
	</form>
	</div>

	<div class="bg-white p-4 rounded-lg shadow">
	<h3 class="text-lg font-semibold mb-4 text-dark">Configurações de Usuário</h3>
	<form id="user-settings" class="space-y-4">
	<div>
	<label for="username" class="block text-sm font-medium text-gray-700 mb-1">Nome de Usuário</label>
	<input type="text" id="username" class="w-full p-2 border border-gray-300 rounded" value="admin">
	</div>
	<div>
	<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
	<input type="email" id="email" class="w-full p-2 border border-gray-300 rounded" value="admin@aguasonhoreal.com">
	</div>
	<div>
	<label for="current-password" class="block text-sm font-medium text-gray-700 mb-1">Senha Atual</label>
	<input type="password" id="current-password" class="w-full p-2 border border-gray-300 rounded">
	</div>
	<div>
	<label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">Nova Senha</label>
	<input type="password" id="new-password" class="w-full p-2 border border-gray-300 rounded">
	</div>
	<div>
	<label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirmar Nova Senha</label>
	<input type="password" id="confirm-password" class="w-full p-2 border border-gray-300 rounded">
	</div>
	<button type="button" onclick="saveUserSettings()" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded">
	Salvar Alterações
	</button>
	</form>
	</div>
	</div>
	</div>
	</main>
	</div>
	</div>

	<!-- Modals -->
	<!-- New Customer Modal -->
	<div id="new-customer-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-white rounded-lg shadow-lg w-full max-w-md">
	<div class="p-4 border-b">
	<h3 class="text-lg font-semibold text-dark">Novo Cliente</h3>
	</div>
	<div class="p-4">
	<form id="new-customer-form" class="space-y-4">
	<div>
	<label for="customer-name" class="block text-sm font-medium text-gray-700 mb-1">Nome Completo</label>
	<input type="text" id="customer-name" class="w-full p-2 border border-gray-300 rounded" required>
	</div>
	<div>
	<label for="customer-area" class="block text-sm font-medium text-gray-700 mb-1">Área</label>
	<select id="customer-area" class="w-full p-2 border border-gray-300 rounded" required>
	<option value="1">Possulane</option>
	<option value="2">Condomínios</option>
	</select>
	</div>
	<div>
	<label for="customer-address" class="block text-sm font-medium text-gray-700 mb-1">Endereço</label>
	<input type="text" id="customer-address" class="w-full p-2 border border-gray-300 rounded" required>
	</div>
	<div>
	<label for="customer-phone" class="block text-sm font-medium text-gray-700 mb-1">Telefone</label>
	<input type="tel" id="customer-phone" class="w-full p-2 border border-gray-300 rounded" required>
	</div>
	<div>
	<label for="customer-email" class="block text-sm font-medium text-gray-700 mb-1">Email (Opcional)</label>
	<input type="email" id="customer-email" class="w-full p-2 border border-gray-300 rounded">
	</div>
	</form>
	</div>
	<div class="p-4 border-t flex justify-end space-x-2">
	<button onclick="hideModal('new-customer-modal')" class="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100">
	Cancelar
	</button>
	<button onclick="saveNewCustomer()" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded">
	Salvar Cliente
	</button>
	</div>
	</div>
	</div>

	<!-- Customer Details Modal -->
	<div id="customer-details-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-white rounded-lg shadow-lg w-full max-w-md">
	<div class="p-4 border-b flex justify-between items-center">
	<h3 class="text-lg font-semibold text-dark">Detalhes do Cliente</h3>
	<button onclick="hideModal('customer-details-modal')" class="text-gray-500 hover:text-gray-700">
	<i class="fas fa-times"></i>
	</button>
	</div>
	<div class="p-4">
	<div class="mb-4">
	<h4 class="font-bold text-lg" id="detail-customer-name"></h4>
	<p class="text-gray-600" id="detail-customer-number"></p>
	</div>
	<div class="space-y-3">
	<div>
	<p class="text-sm text-gray-500">Área</p>
	<p id="detail-customer-area"></p>
	</div>
	<div>
	<p class="text-sm text-gray-500">Endereço</p>
	<p id="detail-customer-address"></p>
	</div>
	<div>
	<p class="text-sm text-gray-500">Telefone</p>
	<p id="detail-customer-phone"></p>
	</div>
	<div>
	<p class="text-sm text-gray-500">Email</p>
	<p id="detail-customer-email"></p>
	</div>
	<div>
	<p class="text-sm text-gray-500">Data de Registro</p>
	<p id="detail-customer-register-date"></p>
	</div>
	</div>
	</div>
	<div class="p-4 border-t">
	<h4 class="font-semibold mb-2">Histórico de Pagamentos</h4>
	<div class="overflow-y-auto max-h-40">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
	<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th>
	<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
	</tr>
	</thead>
	<tbody id="customer-payment-history" class="bg-white divide-y divide-gray-200">
	<!-- Payment history will be added here dynamically -->
	</tbody>
	</table>
	</div>
	</div>
	<div class="p-4 border-t flex justify-end space-x-2">
	<button onclick="hideModal('customer-details-modal')" class="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100">
	Fechar
	</button>
	</div>
	</div>
	</div>

	<!-- New Billing Modal -->
	<div id="new-billing-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-white rounded-lg shadow-lg w-full max-w-md">
	<div class="p-4 border-b">
	<h3 class="text-lg font-semibold text-dark">Nova Cobrança</h3>
	</div>
	<div class="p-4">
	<form id="new-billing-form" class="space-y-4">
	<div>
	<label for="billing-customer" class="block text-sm font-medium text-gray-700 mb-1">Cliente</label>
	<select id="billing-customer" class="w-full p-2 border border-gray-300 rounded" required>
	<!-- Customer options will be added here dynamically -->
	</select>
	</div>
	<div>
	<label for="billing-month" class="block text-sm font-medium text-gray-700 mb-1">Mês de Referência</label>
	<input type="month" id="billing-month" class="w-full p-2 border border-gray-300 rounded" required>
	</div>
	<div>
	<label for="billing-consumption" class="block text-sm font-medium text-gray-700 mb-1">Consumo (m³)</label>
	<input type="number" id="billing-consumption" min="5" step="0.1" class="w-full p-2 border border-gray-300 rounded" value="5" required>
	</div>
	<div>
	<label for="billing-amount" class="block text-sm font-medium text-gray-700 mb-1">Valor (MZN)</label>
	<input type="number" id="billing-amount" class="w-full p-2 border border-gray-300 rounded" readonly>
	</div>
	<div>
	<label for="billing-due-date" class="block text-sm font-medium text-gray-700 mb-1">Data de Vencimento</label>
	<input type="date" id="billing-due-date" class="w-full p-2 border border-gray-300 rounded" required>
	</div>
	</form>
	</div>
	<div class="p-4 border-t flex justify-end space-x-2">
	<button onclick="hideModal('new-billing-modal')" class="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100">
	Cancelar
	</button>
	<button onclick="saveNewBilling()" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded">
	Salvar Cobrança
	</button>
	</div>
	</div>
	</div>

	<!-- Payment Receipt Modal -->
	<div id="payment-receipt-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-white rounded-lg shadow-lg w-full max-w-md">
	<div class="p-4 border-b flex justify-between items-center">
	<h3 class="text-lg font-semibold text-dark">Recibo de Pagamento</h3>
	<button onclick="hideModal('payment-receipt-modal')" class="text-gray-500 hover:text-gray-700">
	<i class="fas fa-times"></i>
	</button>
	</div>
	<div class="p-4">
	<div class="text-center mb-4">
	<h2 class="text-xl font-bold">Água Sonho Real</h2>
	<p class="text-sm text-gray-600">Sistema de Cobrança</p>
	</div>
	<div class="border-b pb-4 mb-4">
	<div class="flex justify-between mb-2">
	<span class="font-semibold">Nº Recibo:</span>
	<span id="receipt-number"></span>
	</div>
	<div class="flex justify-between mb-2">
	<span class="font-semibold">Data:</span>
	<span id="receipt-date"></span>
	</div>
	<div class="flex justify-between">
	<span class="font-semibold">Cliente:</span>
	<span id="receipt-customer"></span>
	</div>
	</div>
	<div class="mb-4">
	<table class="w-full">
	<thead>
	<tr class="border-b">
	<th class="text-left py-2">Descrição</th>
	<th class="text-right py-2">Valor</th>
	</tr>
	</thead>
	<tbody>
	<tr class="border-b">
	<td class="py-2">Consumo de Água</td>
	<td class="text-right py-2" id="receipt-water-amount"></td>
	</tr>
	<tr class="border-b">
	<td class="py-2">Multa por Atraso</td>
	<td class="text-right py-2" id="receipt-late-fee"></td>
	</tr>
	<tr class="font-bold">
	<td class="py-2">Total</td>
	<td class="text-right py-2" id="receipt-total"></td>
	</tr>
	</tbody>
	</table>
	</div>
	<div class="text-center text-sm text-gray-500">
	<p>Obrigado pelo seu pagamento!</p>
	<p>Para dúvidas, contacte: +258 84 123 4567</p>
	</div>
	</div>
	<div class="p-4 border-t flex justify-end space-x-2">
	<button onclick="printReceipt()" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded flex items-center space-x-2">
	<i class="fas fa-print"></i>
	<span>Imprimir</span>
	</button>
	<button onclick="hideModal('payment-receipt-modal')" class="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100">
	Fechar
	</button>
	</div>
	</div>
	</div>

	<!-- Confirmation Modal -->
	<div id="confirmation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-white rounded-lg shadow-lg w-full max-w-md">
	<div class="p-4 border-b">
	<h3 class="text-lg font-semibold text-dark" id="confirmation-title"></h3>
	</div>
	<div class="p-4">
	<p id="confirmation-message"></p>
	</div>
	<div class="p-4 border-t flex justify-end space-x-2">
	<button onclick="hideModal('confirmation-modal')" class="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100">
	Cancelar
	</button>
	<button onclick="confirmAction()" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded" id="confirm-button">
	Confirmar
	</button>
	</div>
	</div>
	</div>

	<script>
	// Sample data for demonstration
	let customers = [
	{ id: 1, number: '1-001', name: 'João Matola', area: '1', areaName: 'Possulane', address: 'Av. Marginal, 123', phone: '841234567', email: 'joao@email.com', registrationDate: '2023-01-15', status: 'active' },
	{ id: 2, number: '1-002', name: 'Maria Nhantumbo', area: '1', areaName: 'Possulane', address: 'Rua da Escola, 45', phone: '842345678', email: 'maria@email.com', registrationDate: '2023-02-10', status: 'active' },
	{ id: 3, number: '2-001', name: 'Condomínio Flor do Mar', area: '2', areaName: 'Condomínios', address: 'Av. da Praia, 300', phone: '843456789', email: 'flordomar@email.com', registrationDate: '2023-01-05', status: 'active' },
	{ id: 4, number: '2-002', name: 'Condomínio Vista Linda', area: '2', areaName: 'Condomínios', address: 'Rua dos Coqueiros, 12', phone: '844567890', email: 'vistalinda@email.com', registrationDate: '2023-03-20', status: 'active' },
	];

	let bills = [
	{ id: 1, customerId: 1, customerNumber: '1-001', customerName: 'João Matola', area: '1', areaName: 'Possulane', consumption: 5, amount: 300, date: '2023-06-15', dueDate: '2023-07-15', paymentDate: '2023-07-10', status: 'paid', lateFee: 0 },
	{ id: 2, customerId: 2, customerNumber: '1-002', customerName: 'Maria Nhantumbo', area: '1', areaName: 'Possulane', consumption: 7, amount: 420, date: '2023-06-15', dueDate: '2023-07-15', paymentDate: '2023-07-18', status: 'paid', lateFee: 21 },
	{ id: 3, customerId: 3, customerNumber: '2-001', customerName: 'Condomínio Flor do Mar', area: '2', areaName: 'Condomínios', consumption: 15, amount: 900, date: '2023-06-15', dueDate: '2023-07-15', paymentDate: null, status: 'overdue', lateFee: 45 },
	{ id: 4, customerId: 4, customerNumber: '2-002', customerName: 'Condomínio Vista Linda', area: '2', areaName: 'Condomínios', consumption: 8, amount: 480, date: '2023-06-15', dueDate: '2023-07-15', paymentDate: null, status: 'pending', lateFee: 0 },
	{ id: 5, customerId: 1, customerNumber: '1-001', customerName: 'João Matola', area: '1', areaName: 'Possulane', consumption: 6, amount: 360, date: '2023-05-15', dueDate: '2023-06-15', paymentDate: '2023-06-12', status: 'paid', lateFee: 0 },
	{ id: 6, customerId: 2, customerNumber: '1-002', customerName: 'Maria Nhantumbo', area: '1', areaName: 'Possulane', consumption: 5, amount: 300, date: '2023-05-15', dueDate: '2023-06-15', paymentDate: '2023-06-20', status: 'paid', lateFee: 15 },
	{ id: 7, customerId: 3, customerNumber: '2-001', customerName: 'Condomínio Flor do Mar', area: '2', areaName: 'Condomínios', consumption: 12, amount: 720, date: '2023-05-15', dueDate: '2023-06-15', paymentDate: '2023-06-10', status: 'paid', lateFee: 0 },
	{ id: 8, customerId: 4, customerNumber: '2-002', customerName: 'Condomínio Vista Linda', area: '2', areaName: 'Condomínios', consumption: 7, amount: 420, date: '2023-05-15', dueDate: '2023-06-15', paymentDate: '2023-06-14', status: 'paid', lateFee: 0 },
	{ id: 9, customerId: 1, customerNumber: '1-001', customerName: 'João Matola', area: '1', areaName: 'Possulane', consumption: 5, amount: 300, date: '2023-04-15', dueDate: '2023-05-15', paymentDate: '2023-05-10', status: 'paid', lateFee: 0 },
	{ id: 10, customerId: 2, customerNumber: '1-002', customerName: 'Maria Nhantumbo', area: '1', areaName: 'Possulane', consumption: 9, amount: 540, date: '2023-04-15', dueDate: '2023-05-15', paymentDate: '2023-05-18', status: 'paid', lateFee: 27 },
	];

	let settings = {
	minConsumption: 5,
	minConsumptionPrice: 300,
	extraConsumptionPrice: 60,
	dueDate: 15,
	lateFee: 5
	};

	// Current action and data for confirmation modal
	let currentAction = null;
	let currentActionData = null;

	// Initialize the application
	document.addEventListener('DOMContentLoaded', function() {
	// Set current date
	const now = new Date();
	document.getElementById('current-date').textContent = now.toLocaleDateString('pt-PT', {
	weekday: 'long',
	year: 'numeric',
	month: 'long',
	day: 'numeric'
	});

	// Initialize dashboard
	updateDashboard();
	loadRecentPayments();
	loadAlerts();

	// Initialize billing tab
	calculateAmount();
	loadBillingHistory();

	// Initialize customers tab
	loadCustomersList();

	// Initialize reports tab
	updateReportSummary();

	// Initialize settings tab
	loadSettings();

	// Mobile menu toggle
	document.getElementById('menu-toggle').addEventListener('click', function() {
	document.querySelector('.sidebar').classList.toggle('active');
	});

	// Customer search functionality
	document.getElementById('customer-search').addEventListener('input', function() {
	searchCustomers(this.value);
	});

	// Customer search in customers tab
	document.getElementById('customer-search-main').addEventListener('input', function() {
	filterCustomers();
	});

	// Billing filter
	document.getElementById('billing-filter').addEventListener('change', function() {
	loadBillingHistory();
	});

	// Billing month filter
	document.getElementById('billing-month').addEventListener('change', function() {
	loadBillingHistory();
	});

	// Customer area filter
	document.getElementById('customer-area-filter').addEventListener('change', function() {
	filterCustomers();
	});
	});

	// Tab navigation
	function showTab(tabId) {
	document.querySelectorAll('.tab-content').forEach(tab => {
	tab.classList.remove('active');
	});
	document.getElementById(tabId).classList.add('active');

	// Close mobile menu if open
	document.querySelector('.sidebar').classList.remove('active');
	}

	// Modal functions
	function showModal(modalId) {
	document.getElementById(modalId).classList.remove('hidden');
	}

	function hideModal(modalId) {
	document.getElementById(modalId).classList.add('hidden');
	}

	function showNewCustomerModal() {
	document.getElementById('customer-name').value = '';
	document.getElementById('customer-area').value = '1';
	document.getElementById('customer-address').value = '';
	document.getElementById('customer-phone').value = '';
	document.getElementById('customer-email').value = '';
	showModal('new-customer-modal');
	}

	function showNewBillingModal() {
	const billingCustomerSelect = document.getElementById('billing-customer');
	billingCustomerSelect.innerHTML = '';

	customers.forEach(customer => {
	const option = document.createElement('option');
	option.value = customer.id;
	option.textContent = `${customer.number} - ${customer.name}`;
	billingCustomerSelect.appendChild(option);
	});

	const now = new Date();
	const currentMonth = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0');
	document.getElementById('billing-month').value = currentMonth;
	document.getElementById('billing-consumption').value = '5';
	document.getElementById('billing-amount').value = '300';

	// Set due date to the 15th of next month
	const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
	const dueDate = new Date(nextMonth.getFullYear(), nextMonth.getMonth(), settings.dueDate);
	document.getElementById('billing-due-date').value = dueDate.toISOString().split('T')[0];

	showModal('new-billing-modal');
	}

	function showCustomerDetails(customerId) {
	const customer = customers.find(c => c.id == customerId);
	if (!customer) return;

	document.getElementById('detail-customer-name').textContent = customer.name;
	document.getElementById('detail-customer-number').textContent = `Nº Cliente: ${customer.number}`;
	document.getElementById('detail-customer-area').textContent = customer.areaName;
	document.getElementById('detail-customer-address').textContent = customer.address;
	document.getElementById('detail-customer-phone').textContent = customer.phone;
	document.getElementById('detail-customer-email').textContent = customer.email \|\| 'N/A';
	document.getElementById('detail-customer-register-date').textContent = new Date(customer.registrationDate).toLocaleDateString('pt-PT');

	// Load payment history
	const paymentHistory = bills.filter(bill => bill.customerId == customerId)
	.sort((a, b) => new Date(b.date) - new Date(a.date));

	const paymentHistoryTable = document.getElementById('customer-payment-history');
	paymentHistoryTable.innerHTML = '';

	paymentHistory.forEach(bill => {
	const row = document.createElement('tr');

	const dateCell = document.createElement('td');
	dateCell.className = 'px-2 py-1 whitespace-nowrap';
	dateCell.textContent = new Date(bill.date).toLocaleDateString('pt-PT');

	const amountCell = document.createElement('td');
	amountCell.className = 'px-2 py-1 whitespace-nowrap';
	amountCell.textContent = `${bill.amount} MZN`;

	const statusCell = document.createElement('td');
	statusCell.className = 'px-2 py-1 whitespace-nowrap';

	const statusBadge = document.createElement('span');
	statusBadge.className = 'px-2 py-1 text-xs rounded-full';

	if (bill.status === 'paid') {
	statusBadge.classList.add('bg-green-100', 'text-green-800');
	statusBadge.textContent = 'Pago';
	} else if (bill.status === 'overdue') {
	statusBadge.classList.add('bg-red-100', 'text-red-800');
	statusBadge.textContent = 'Atrasado';
	} else {
	statusBadge.classList.add('bg-yellow-100', 'text-yellow-800');
	statusBadge.textContent = 'Pendente';
	}

	statusCell.appendChild(statusBadge);
	row.appendChild(dateCell);
	row.appendChild(amountCell);
	row.appendChild(statusCell);

	paymentHistoryTable.appendChild(row);
	});

	showModal('customer-details-modal');
	}

	function showConfirmationModal(title, message, action, data = null) {
	document.getElementById('confirmation-title').textContent = title;
	document.getElementById('confirmation-message').textContent = message;
	currentAction = action;
	currentActionData = data;
	showModal('confirmation-modal');
	}

	function confirmAction() {
	if (currentAction === 'deleteCustomer') {
	deleteCustomer(currentActionData);
	} else if (currentAction === 'deleteBill') {
	deleteBill(currentActionData);
	}
	hideModal('confirmation-modal');
	}

	// Dashboard functions
	function updateDashboard() {
	// Active customers
	document.getElementById('active-customers').textContent = customers.length;

	// Monthly revenue (last month)
	const now = new Date();
	const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
	const lastMonthStr = lastMonth.getFullYear() + '-' + String(lastMonth.getMonth() + 1).padStart(2, '0');

	const lastMonthBills = bills.filter(bill => {
	const billDate = new Date(bill.date);
	const billMonth = billDate.getFullYear() + '-' + String(billDate.getMonth() + 1).padStart(2, '0');
	return billMonth === lastMonthStr && bill.status === 'paid';
	});

	const monthlyRevenue = lastMonthBills.reduce((sum, bill) => sum + bill.amount + bill.lateFee, 0);
	document.getElementById('monthly-revenue').textContent = `${monthlyRevenue} MZN`;

	// Late payments
	const overdueBills = bills.filter(bill => bill.status === 'overdue');
	document.getElementById('late-payments').textContent = overdueBills.length;

	// Average consumption
	const consumptions = bills.map(bill => bill.consumption);
	const avgConsumption = consumptions.length > 0 ?
	(consumptions.reduce((sum, val) => sum + val, 0) / consumptions.length).toFixed(1) : 0;
	document.getElementById('avg-consumption').textContent = `${avgConsumption} m³`;
	}

	function loadRecentPayments() {
	const recentPaymentsTable = document.getElementById('recent-payments');
	recentPaymentsTable.innerHTML = '';

	// Get last 5 paid bills, sorted by payment date (newest first)
	const paidBills = bills.filter(bill => bill.status === 'paid')
	.sort((a, b) => new Date(b.paymentDate) - new Date(a.paymentDate))
	.slice(0, 5);

	paidBills.forEach(bill => {
	const row = document.createElement('tr');

	const customerCell = document.createElement('td');
	customerCell.className = 'px-6 py-4 whitespace-nowrap';
	customerCell.textContent = bill.customerName;

	const numberCell = document.createElement('td');
	numberCell.className = 'px-6 py-4 whitespace-nowrap';
	numberCell.textContent = bill.customerNumber;

	const areaCell = document.createElement('td');
	areaCell.className = 'px-6 py-4 whitespace-nowrap';
	areaCell.textContent = bill.areaName;

	const amountCell = document.createElement('td');
	amountCell.className = 'px-6 py-4 whitespace-nowrap';
	amountCell.textContent = `${bill.amount + bill.lateFee} MZN`;

	const dateCell = document.createElement('td');
	dateCell.className = 'px-6 py-4 whitespace-nowrap';
	dateCell.textContent = new Date(bill.paymentDate).toLocaleDateString('pt-PT');

	const statusCell = document.createElement('td');
	statusCell.className = 'px-6 py-4 whitespace-nowrap';

	const statusBadge = document.createElement('span');
	statusBadge.className = 'px-2 py-1 text-xs rounded-full bg-green-100 text-green-800';
	statusBadge.textContent = 'Pago';

	statusCell.appendChild(statusBadge);
	row.appendChild(customerCell);
	row.appendChild(numberCell);
	row.appendChild(areaCell);
	row.appendChild(amountCell);
	row.appendChild(dateCell);
	row.appendChild(statusCell);

	recentPaymentsTable.appendChild(row);
	});
	}

	function loadAlerts() {
	const alertsContainer = document.getElementById('alerts-container');
	alertsContainer.innerHTML = '';

	// Get customers with overdue bills (2+ months)
	const now = new Date();
	const twoMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 2, 1);

	const overdueBills = bills.filter(bill => {
	if (bill.status !== 'overdue') return false;

	const dueDate = new Date(bill.dueDate);
	return dueDate < twoMonthsAgo;
	});

	// Group by customer
	const overdueCustomers = {};
	overdueBills.forEach(bill => {
	if (!overdueCustomers[bill.customerId]) {
	overdueCustomers[bill.customerId] = {
	customer: customers.find(c => c.id === bill.customerId),
	bills: []
	};
	}
	overdueCustomers[bill.customerId].bills.push(bill);
	});

	// Create alerts
	Object.values(overdueCustomers).forEach(customerData => {
	const totalDebt = customerData.bills.reduce((sum, bill) => sum + bill.amount + bill.lateFee, 0);
	const monthsOverdue = customerData.bills.length;

	const alert = document.createElement('div');
	alert.className = 'p-3 rounded bg-red-50 border border-red-200 flex justify-between items-center alert-pulse';

	const alertContent = document.createElement('div');

	const alertTitle = document.createElement('h4');
	alertTitle.className = 'font-semibold text-red-800';
	alertTitle.textContent = `${customerData.customer.name} (${customerData.customer.number})`;

	const alertMessage = document.createElement('p');
	alertMessage.className = 'text-sm text-red-600';
	alertMessage.textContent = `Dívida de ${totalDebt} MZN (${monthsOverdue} ${monthsOverdue === 1 ? 'mês' : 'meses'} atrasado)`;

	alertContent.appendChild(alertTitle);
	alertContent.appendChild(alertMessage);

	const alertButton = document.createElement('button');
	alertButton.className = 'px-3 py-1 bg-red-100 hover:bg-red-200 text-red-800 rounded text-sm';
	alertButton.textContent = 'Ver Detalhes';
	alertButton.onclick = () => showCustomerDetails(customerData.customer.id);

	alert.appendChild(alertContent);
	alert.appendChild(alertButton);

	alertsContainer.appendChild(alert);
	});

	// If no alerts, show message
	if (alertsContainer.children.length === 0) {
	const noAlerts = document.createElement('div');
	noAlerts.className = 'p-3 rounded bg-blue-50 border border-blue-200 text-blue-800';
	noAlerts.textContent = 'Nenhum alerta de pagamento atrasado.';
	alertsContainer.appendChild(noAlerts);
	}
	}

	// Billing functions
	function calculateAmount() {
	const consumption = parseFloat(document.getElementById('consumption').value) \|\| 5;
	const minConsumption = settings.minConsumption;
	const minPrice = settings.minConsumptionPrice;
	const extraPrice = settings.extraConsumptionPrice;

	let amount = minPrice;
	if (consumption > minConsumption) {
	amount += (consumption - minConsumption) * extraPrice;
	}

	document.getElementById('amount').value = amount.toFixed(2);
	}

	function registerPayment() {
	const customerSearch = document.getElementById('customer-search').value.trim();
	const consumption = parseFloat(document.getElementById('consumption').value) \|\| 5;
	const amount = parseFloat(document.getElementById('amount').value) \|\| 300;

	if (!customerSearch) {
	alert('Por favor, selecione um cliente.');
	return;
	}

	// In a real app, this would save to a database
	// For demo, we'll just show a receipt

	// Find customer (simplified for demo)
	const customer = customers.find(c =>
	c.name.toLowerCase().includes(customerSearch.toLowerCase()) \|\|
	c.number.toLowerCase().includes(customerSearch.toLowerCase())
	);

	if (!customer) {
	alert('Cliente não encontrado.');
	return;
	}

	// Generate receipt
	document.getElementById('receipt-number').textContent = `REC-${Date.now().toString().slice(-6)}`;
	document.getElementById('receipt-date').textContent = new Date().toLocaleDateString('pt-PT');
	document.getElementById('receipt-customer').textContent = `${customer.number} - ${customer.name}`;
	document.getElementById('receipt-water-amount').textContent = `${amount} MZN`;
	document.getElementById('receipt-late-fee').textContent = '0 MZN'; // No late fee for immediate payment
	document.getElementById('receipt-total').textContent = `${amount} MZN`;

	showModal('payment-receipt-modal');

	// Clear form
	document.getElementById('customer-search').value = '';
	document.getElementById('consumption').value = '5';
	document.getElementById('amount').value = '300';

	// Add to bills (for demo)
	const now = new Date();
	const currentMonth = new Date(now.getFullYear(), now.getMonth(), 1);
	const dueDate = new Date(now.getFullYear(), now.getMonth(), settings.dueDate);

	const newBill = {
	id: bills.length + 1,
	customerId: customer.id,
	customerNumber: customer.number,
	customerName: customer.name,
	area: customer.area,
	areaName: customer.areaName,
	consumption: consumption,
	amount: amount,
	date: currentMonth.toISOString().split('T')[0],
	dueDate: dueDate.toISOString().split('T')[0],
	paymentDate: now.toISOString().split('T')[0],
	status: 'paid',
	lateFee: 0
	};

	bills.push(newBill);

	// Update dashboard
	updateDashboard();
	loadRecentPayments();
	loadAlerts();
	loadBillingHistory();
	}

	function searchCustomers(query) {
	const resultsContainer = document.getElementById('search-results');
	resultsContainer.innerHTML = '';

	if (query.length < 2) {
	resultsContainer.classList.add('hidden');
	return;
	}

	const filteredCustomers = customers.filter(customer =>
	customer.name.toLowerCase().includes(query.toLowerCase()) \|\|
	customer.number.toLowerCase().includes(query.toLowerCase())
	);

	if (filteredCustomers.length === 0) {
	const noResults = document.createElement('div');
	noResults.className = 'p-2 text-sm text-gray-500';
	noResults.textContent = 'Nenhum cliente encontrado';
	resultsContainer.appendChild(noResults);
	} else {
	filteredCustomers.forEach(customer => {
	const resultItem = document.createElement('div');
	resultItem.className = 'p-2 hover:bg-gray-100 cursor-pointer';
	resultItem.textContent = `${customer.number} - ${customer.name}`;
	resultItem.onclick = () => {
	document.getElementById('customer-search').value = `${customer.number} - ${customer.name}`;
	resultsContainer.classList.add('hidden');
	};
	resultsContainer.appendChild(resultItem);
	});
	}

	resultsContainer.classList.remove('hidden');
	}

	function loadBillingHistory() {
	const billingHistoryTable = document.getElementById('billing-history');
	billingHistoryTable.innerHTML = '';

	const filter = document.getElementById('billing-filter').value;
	const monthFilter = document.getElementById('billing-month').value;

	let filteredBills = [...bills];

	// Apply status filter
	if (filter === 'paid') {
	filteredBills = filteredBills.filter(bill => bill.status === 'paid');
	} else if (filter === 'pending') {
	filteredBills = filteredBills.filter(bill => bill.status === 'pending');
	} else if (filter === 'overdue') {
	filteredBills = filteredBills.filter(bill => bill.status === 'overdue');
	}

	// Apply month filter
	if (monthFilter) {
	filteredBills = filteredBills.filter(bill => {
	const billDate = new Date(bill.date);
	const billMonth = billDate.getFullYear() + '-' + String(billDate.getMonth() + 1).padStart(2, '0');
	return billMonth === monthFilter;
	});
	}

	// Sort by date (newest first)
	filteredBills.sort((a, b) => new Date(b.date) - new Date(a.date));

	filteredBills.forEach(bill => {
	const row = document.createElement('tr');

	const numberCell = document.createElement('td');
	numberCell.className = 'px-6 py-4 whitespace-nowrap';
	numberCell.textContent = bill.customerNumber;

	const customerCell = document.createElement('td');
	customerCell.className = 'px-6 py-4 whitespace-nowrap';
	customerCell.textContent = bill.customerName;

	const areaCell = document.createElement('td');
	areaCell.className = 'px-6 py-4 whitespace-nowrap';
	areaCell.textContent = bill.areaName;

	const consumptionCell = document.createElement('td');
	consumptionCell.className = 'px-6 py-4 whitespace-nowrap';
	consumptionCell.textContent = `${bill.consumption} m³`;

	const amountCell = document.createElement('td');
	amountCell.className = 'px-6 py-4 whitespace-nowrap';
	amountCell.textContent = `${bill.amount + bill.lateFee} MZN`;

	const dateCell = document.createElement('td');
	dateCell.className = 'px-6 py-4 whitespace-nowrap';
	dateCell.textContent = new Date(bill.date).toLocaleDateString('pt-PT');

	const statusCell = document.createElement('td');
	statusCell.className = 'px-6 py-4 whitespace-nowrap';

	const statusBadge = document.createElement('span');
	statusBadge.className = 'px-2 py-1 text-xs rounded-full';

	if (bill.status === 'paid') {
	statusBadge.classList.add('bg-green-100', 'text-green-800');
	statusBadge.textContent = 'Pago';
	} else if (bill.status === 'overdue') {
	statusBadge.classList.add('bg-red-100', 'text-red-800');
	statusBadge.textContent = 'Atrasado';
	} else {
	statusBadge.classList.add('bg-yellow-100', 'text-yellow-800');
	statusBadge.textContent = 'Pendente';
	}

	statusCell.appendChild(statusBadge);

	const actionsCell = document.createElement('td');
	actionsCell.className = 'px-6 py-4 whitespace-nowrap text-right text-sm font-medium';

	const viewButton = document.createElement('button');
	viewButton.className = 'text-primary hover:text-secondary mr-2';
	viewButton.innerHTML = '<i class="fas fa-eye"></i>';
	viewButton.title = 'Ver Detalhes';
	viewButton.onclick = () => viewBillDetails(bill.id);

	const editButton = document.createElement('button');
	editButton.className = 'text-yellow-600 hover:text-yellow-800 mr-2';
	editButton.innerHTML = '<i class="fas fa-edit"></i>';
	editButton.title = 'Editar';
	editButton.onclick = () => editBill(bill.id);

	const deleteButton = document.createElement('button');
	deleteButton.className = 'text-red-600 hover:text-red-800';
	deleteButton.innerHTML = '<i class="fas fa-trash"></i>';
	deleteButton.title = 'Eliminar';
	deleteButton.onclick = () => confirmDeleteBill(bill.id);

	actionsCell.appendChild(viewButton);
	actionsCell.appendChild(editButton);
	actionsCell.appendChild(deleteButton);

	row.appendChild(numberCell);
	row.appendChild(customerCell);
	row.appendChild(areaCell);
	row.appendChild(consumptionCell);
	row.appendChild(amountCell);
	row.appendChild(dateCell);
	row.appendChild(statusCell);
	row.appendChild(actionsCell);

	billingHistoryTable.appendChild(row);
	});

	// If no bills, show message
	if (filteredBills.length === 0) {
	const emptyRow = document.createElement('tr');
	const emptyCell = document.createElement('td');
	emptyCell.colSpan = 8;
	emptyCell.className = 'px-6 py-4 text-center text-gray-500';
	emptyCell.textContent = 'Nenhuma cobrança encontrada';
	emptyRow.appendChild(emptyCell);
	billingHistoryTable.appendChild(emptyRow);
	}
	}

	function viewBillDetails(billId) {
	const bill = bills.find(b => b.id == billId);
	if (!bill) return;

	// Generate receipt
	document.getElementById('receipt-number').textContent = `REC-${bill.id.toString().padStart(6, '0')}`;
	document.getElementById('receipt-date').textContent = bill.paymentDate ?
	new Date(bill.paymentDate).toLocaleDateString('pt-PT') :
	new Date().toLocaleDateString('pt-PT');

	const customer = customers.find(c => c.id == bill.customerId);
	document.getElementById('receipt-customer').textContent = customer ?
	`${customer.number} - ${customer
	</html>