<!DOCTYPE html>

<head>

<title>Visitas</title>

tailwind.config = {

theme: {

extend: {

fontFamily: { sans: ['Inter','system-ui','ui-sans-serif','Segoe UI','Roboto','Arial'] },

colors: {

base: { 900:'#0b0f14', 850:'#0f141b', 800:'#121922', 700:'#1a2330' },

brand:{ 500:'#2563eb', 400:'#3b82f6' },

ok: { 500:'#16a34a' },

warn: { 500:'#f59e0b' },

info: { 500:'#1d4ed8' }

boxShadow:{ card:'0 1px 1px rgba(0,0,0,.25), 0 12px 28px rgba(0,0,0,.35)' }

}

</script>

<style>

*{ -webkit-tap-highlight-color: transparent; }

.no-scrollbar::-webkit-scrollbar{ display:none; }

.no-scrollbar{ -ms-overflow-style: none; scrollbar-width: none; }

.glass{ background: rgba(20,24,33,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.map-stub{ background: radial-gradient(1200px 600px at 50% -10%, #1b2740 0%, #0f141b 45%, #0b0f14 100%); }

</style>

</head>

<h1 class="text-xl font-semibold tracking-tight">Visitas</h1>

</button>

</div>

Data

</button>

Cidade

</button>

Status

</button>

</div>

</header>

<div>

</div>

<div>

<label class="text-xs text-zinc-400">Cidade</label>

</div>

<div>

<label class="text-xs text-zinc-400">Cliente/Empresa</label>

</div>

<div>

<label class="text-xs text-zinc-400">Status</label>

<option>Agendado</option>

<option>Pendente</option>

<option>Concluído</option>

</select>

</div>

<div>

<label class="text-xs text-zinc-400">Endereço</label>

</div>

<div>

<label class="text-xs text-zinc-400">Objetivo da Visita</label>

</div>

<div>

<label class="text-xs text-zinc-400">Observações Internas</label>

</div>

<label class="flex items-center gap-2 text-sm text-zinc-300"><input id="f_priority" type="checkbox" class="rounded"> Prioridade</label>

<button class="px-4 py-2 rounded-xl bg-brand-500 text-white font-medium">Salvar</button>

</div>

</form>

</section>

<div class="text-xs text-brand-400">Cliente</div>

</div>

</div>

<div class="text-xs text-brand-400">Status</div>

</div>

<div class="text-xs text-brand-400">Endereço</div>

</div>

<div class="text-xs text-brand-400">Objetivo da visita</div>

</div>

<div class="text-xs text-brand-400">Observações</div>

</div>

<button id="btnEdit" class="flex-1 h-11 rounded-xl border border-white/10 bg-white/5">Editar</button>

<button id="btnFinish" class="flex-1 h-11 rounded-xl bg-brand-500 text-white">Finalizar</button>

</div>

<button id="btnBack" class="w-full h-11 rounded-xl border border-white/10 bg-white/5">Voltar</button>

</section>

</main>

<span class="text-[11px]">Formulário</span>

</button>

<span class="text-[11px]">Lista</span>

</button>

<span class="text-[11px]">Detalhes</span>

</button>

</div>

</nav>

</div>

<h3 class="text-lg font-semibold">Nova Visita</h3>

</div>

<div>

</div>

<div>

<label class="text-xs text-zinc-400">Cidade</label>

</div>

<div>

<label class="text-xs text-zinc-400">Cliente/Empresa</label>

</div>

<div>

<label class="text-xs text-zinc-400">Status</label>

<option>Agendado</option>

<option>Pendente</option>

<option>Concluído</option>

</select>

</div>

<div>

<label class="text-xs text-zinc-400">Local (Endereço)</label>

</div>

<div>

<label class="text-xs text-zinc-400">Objetivo da Visita</label>

</div>

<div>

<label class="text-xs text-zinc-400">Observações Internas</label>

</div>

<label class="flex items-center gap-2 text-sm text-zinc-300"><input id="m_priority" type="checkbox" class="rounded"> Prioridade</label>

<button class="px-4 py-2 rounded-xl bg-brand-500 text-white font-medium">Finalizar</button>

</div>

</form>

</div>

// --------- STATE / STORAGE ----------

const STORAGE_KEY = 'visitas_mobile_protov1';

const $ = (s, r=document) => r.querySelector(s);

const $$= (s, r=document) => [...r.querySelectorAll(s)];

const state = { tab:'list', selectedId:null, filters:{ date:'', city:'', status:'' } };

const sample = [

{id:uid(), name:'Lucas Oliveira', city:'Porto', date:'2024-03-20', status:'Agendado', address:'Rua das Flores, 123, Centro', goal:'Apresentar novo produto', notes:'Levar amostras', priority:false},

{id:uid(), name:'Isabela Santos', city:'Porto', date:'2024-03-20', status:'Concluído', address:'Av. Principal, 456, Bairro Novo', goal:'Reunião de acompanhamento', notes:'', priority:false},

{id:uid(), name:'Rafael Costa', city:'Valbom', date:'2024-03-21', status:'Pendente', address:'Rua da Paz, 789, Vila Verde', goal:'Negociação de contrato', notes:'', priority:true},

];

function uid(){ return 'id-'+Math.random().toString(36).slice(2,10); }

function load(){ try{ return JSON.parse(localStorage.getItem(STORAGE_KEY)||'[]'); }catch{ return []; } }

function save(v){ localStorage.setItem(STORAGE_KEY, JSON.stringify(v)); }

if(load().length===0) save(sample);

// --------- RENDER ----------

function render(){

// tabs

$$('.tab').forEach(el=>{

const active = el.getAttribute('data-tab')===state.tab;

el.classList.toggle('bg-white/5', active);

el.classList.toggle('text-brand-400', active);

el.classList.toggle('text-zinc-400', !active);

});

$('#tab-list').classList.toggle('hidden', state.tab!=='list');

$('#tab-form').classList.toggle('hidden', state.tab!=='form');

$('#tab-details').classList.toggle('hidden', state.tab!=='details');

if(state.tab==='list') renderList();

if(state.tab==='details') renderDetails();

}

function badge(status){

const map = {

'Agendado' : 'bg-info-500/15 text-info-500 border-info-500/30',

'Concluído': 'bg-ok-500/15 text-ok-500 border-ok-500/30',

'Pendente' : 'bg-warn-500/15 text-warn-500 border-warn-500/30'

};

const cls = map[status] || 'bg-white/10 text-zinc-300 border-white/10';

return `<span class="inline-block text-[13px] px-3 py-1 rounded-full border ${cls}">${status}</span>`;

}

function toBR(iso){ if(!iso) return '—'; const d = new Date(iso+'T00:00:00'); return isNaN(d)?iso:d.toLocaleDateString('pt-BR'); }

function esc(s){ return String(s).replaceAll('&','&').replaceAll('<','<').replaceAll('>','>'); }

function applyFilters(list){

const f = state.filters;

return list.filter(i=>{

if(f.date && i.date !== f.date) return false;

if(f.city && i.city.toLowerCase() !== f.city.toLowerCase()) return false;

if(f.status && i.status !== f.status) return false;

return true;

});

}

function renderList(){

const wrap = $('#tab-list');

wrap.innerHTML = '';

const items = applyFilters(load());

items.forEach(item=>{

const card = document.createElement('button');

card.className = 'w-full text-left rounded-3xl bg-base-800/70 border border-white/10 shadow-card px-5 py-4 active:scale-[.995] transition';

card.innerHTML = `

<div class="mt-0.5 text-sm text-zinc-400">${esc(item.address)}</div>

<div class="mt-4 text-xs text-zinc-400">Objetivo</div>

<div class="mt-3">${badge(item.status)}</div>

card.addEventListener('click', ()=>{ state.selectedId=item.id; state.tab='details'; render(); });

wrap.appendChild(card);

});

if(items.length===0){

wrap.innerHTML = `<div class="text-center text-zinc-400 py-8">Sem registros para o filtro atual.</div>`;

}

function renderDetails(){

const list = load();

const it = list.find(x=>x.id===state.selectedId) || list[0];

if(!it) return;

$('#d_client').textContent = it.name;

$('#d_date').textContent = toBR(it.date);

$('#d_status').innerHTML = badge(it.status);

$('#d_address').textContent = it.address || '—';

$('#d_goal').textContent = it.goal || '—';

$('#d_notes').textContent = it.notes || '—';

}

// --------- EVENTS ----------

// Tabs

$$('.tab').forEach(b=> b.addEventListener('click',()=>{ state.tab = b.getAttribute('data-tab'); render(); }));

// Quick form

$('#quickForm')?.addEventListener('submit', (e)=>{

e.preventDefault();

const list = load();

list.unshift({

id: uid(),

name: $('#f_client').value || '—',

city: $('#f_city').value || '',

date: $('#f_date').value || new Date().toISOString().slice(0,10),

status: $('#f_status').value || 'Pendente',

address: $('#f_address').value || '',

goal: $('#f_goal').value || '',

notes: $('#f_notes').value || '',

priority: $('#f_priority').checked

});

save(list);

e.target.reset();

state.tab='list'; render();

});

// Details buttons

$('#btnBack').addEventListener('click', ()=>{ state.tab='list'; render(); });

$('#btnFinish').addEventListener('click', ()=>{

const list = load();

const i = list.findIndex(x=>x.id===state.selectedId);

if(i>-1){ list[i].status='Concluído'; save(list); }

renderDetails();

});

$('#btnEdit').addEventListener('click', ()=>{

const it = load().find(x=>x.id===state.selectedId);

if(!it) return;

// Preenche modal para editar duplicando (rápido)

$('#m_client').value = it.name;

$('#m_city').value = it.city;

$('#m_date').value = it.date;

$('#m_status').value = it.status;

$('#m_address').value = it.address;

$('#m_goal').value = it.goal;

$('#m_notes').value = it.notes;

$('#m_priority').checked = !!it.priority;

$('#modal').classList.remove('hidden');

});

// Modal + / salvar

$('#btnAdd').addEventListener('click', ()=> $('#modal').classList.remove('hidden'));

$('#mClose').addEventListener('click', ()=> $('#modal').classList.add('hidden'));

$('#modalForm').addEventListener('submit', (e)=>{

e.preventDefault();

const list = load();

list.unshift({

id: uid(),

name: $('#m_client').value || '—',

city: $('#m_city').value || '',

date: $('#m_date').value || new Date().toISOString().slice(0,10),

status: $('#m_status').value || 'Pendente',

address: $('#m_address').value || '',

goal: $('#m_goal').value || '',

notes: $('#m_notes').value || '',

priority: $('#m_priority').checked

});

save(list);

$('#modal').classList.add('hidden');

state.tab='list'; render();

});

// Filtros (pílulas simples)

$('#pillDate').addEventListener('click', async ()=>{

const v = prompt('Filtrar por data (AAAA-MM-DD). Deixe vazio para limpar:', state.filters.date || '');

state.filters.date = (v||'').trim();

render();

});

$('#pillCity').addEventListener('click', async ()=>{

const v = prompt('Filtrar por cidade. Deixe vazio para limpar:', state.filters.city || '');

state.filters.city = (v||'').trim();

render();

});

$('#pillStatus').addEventListener('click', async ()=>{

const v = prompt('Status: Agendado | Pendente | Concluído. Deixe vazio para limpar:', state.filters.status || '');

const ok = ['Agendado','Pendente','Concluído',''].includes((v||'').trim());

if(ok){ state.filters.status = (v||'').trim(); render(); }

else alert('Valor inválido.');

});

// start

render();

</script>

</body>

</html>