/* =========================================================== PIPOQUE — Painel administrativo =========================================================== */ const { useState, useEffect, useRef } = React; /* ---------- Login ---------- */ function AdminLogin() { const { login, navigate } = useApp(); const toast = useToast(); const [u, setU] = useState(''); const [p, setP] = useState(''); const [show, setShow] = useState(false); const [err, setErr] = useState(false); const [busy, setBusy] = useState(false); const submit = async (e) => { e.preventDefault(); if (busy) return; setBusy(true); const ok = await login(u.trim(), p); setBusy(false); if (ok) { toast('Bem-vindo de volta! 🍿'); } else { setErr(true); toast('Usuário ou senha incorretos'); setTimeout(() => setErr(false), 500); } }; return (
Pipoque.
Painel administrativo
setU(e.target.value)} placeholder="admin" autoFocus />
setP(e.target.value)} placeholder="••••••••" style={{ paddingRight: 44 }} />

Acesso inicial · admin · troque a senha no painel.

navigate('#/')}>← Voltar à loja

); } /* ---------- Shell ---------- */ function AdminShell() { const { logout, navigate, session, orders } = useApp(); const [tab, setTab] = useState('produtos'); const novos = orders.filter((o) => o.status === 'novo').length; const nav = [ { id: 'produtos', label: 'Produtos', icon: Icon.box }, { id: 'novo', label: 'Cadastrar', icon: Icon.plus }, { id: 'pedidos', label: 'Pedidos', icon: Icon.receipt, badge: novos }, { id: 'config', label: 'Configurações', icon: Icon.gear }, { id: 'usuarios', label: 'Usuários', icon: Icon.users }, ]; return (
{tab === 'produtos' && setTab('novo')} />} {tab === 'novo' && setTab('produtos')} />} {tab === 'pedidos' && } {tab === 'config' && } {tab === 'usuarios' && }
); } /* ---------- Tela 1: lista de produtos com seleções rápidas ---------- */ function AdminProducts({ goNew }) { const { products, updateProduct, removeProduct, orders } = useApp(); const toast = useToast(); const [filter, setFilter] = useState('todos'); const [editing, setEditing] = useState(null); const list = products.filter((p) => filter === 'todos' || p.category === filter); const catName = (id) => (CATEGORIES.find((c) => c.id === id) || {}).name || id; const visCount = products.filter((p) => p.visible).length; const featCount = products.filter((p) => p.featured).length; return (

Produtos

Ative, esconda ou destaque com um toque. {products.length} produtos cadastrados.

{products.length}
Produtos
{visCount}
Visíveis na loja
{featCount}
Em destaque
{orders.length}
Pedidos recebidos
{CATEGORIES.map((c) => )}
ProdutoPreçoVisívelDestaque
{list.map((p) => (
{p.name}
{catName(p.category)}
{money(p.price)}
))}
{editing && setEditing(null)} />}
); } /* ---------- Modal de edição rápida (reusa form) ---------- */ function ProductEditModal({ product, onClose }) { return (

Editar produto

); } /* ---------- Tela 2: cadastro detalhado de produto ---------- */ function AdminProductForm({ editProduct, onDone, embedded }) { const { addProduct, updateProduct } = useApp(); const toast = useToast(); const blank = { name: '', category: 'doces', price: '', desc: '', glyph: '🍿', color: 'p1', badge: '', visible: true, featured: false, image: '' }; const [f, setF] = useState(() => editProduct ? { ...editProduct, price: String(editProduct.price) } : blank); const [imgData, setImgData] = useState(''); // foto nova (dataURL) ainda não salva const imgRef = useRef(null); const set = (k, v) => setF((s) => ({ ...s, [k]: v })); // redimensiona a foto no próprio navegador antes de enviar (mantém o arquivo leve) const onPickImage = (e) => { const file = e.target.files[0]; e.target.value = ''; if (!file) return; if (!/^image\//.test(file.type)) { toast('Selecione um arquivo de imagem 📷'); return; } const reader = new FileReader(); reader.onload = () => { const img = new Image(); img.onload = () => { const MAX = 720; // largura máx.; a proporção 16/11 do card recorta via object-fit let w = img.width, h = img.height; if (w > MAX) { h = Math.round(h * MAX / w); w = MAX; } const canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; canvas.getContext('2d').drawImage(img, 0, 0, w, h); setImgData(canvas.toDataURL('image/jpeg', 0.82)); }; img.onerror = () => toast('Não consegui ler essa imagem 😕'); img.src = reader.result; }; reader.readAsDataURL(file); }; const removePhoto = () => { setImgData(''); set('image', ''); }; const save = async () => { if (!f.name.trim()) { toast('Dê um nome ao produto'); return; } const price = parseFloat(String(f.price).replace(',', '.')) || 0; const data = { ...f, price, name: f.name.trim(), desc: f.desc.trim() }; if (imgData) data.imageData = imgData; // foto nova: o servidor grava em disco e guarda o caminho const ok = editProduct ? await updateProduct(editProduct.id, data) : await addProduct(data); if (!ok) return; setImgData(''); toast(editProduct ? 'Produto atualizado! ✅' : 'Produto cadastrado! 🍿'); onDone && onDone(); }; const photoPreview = imgData || f.image; return (
{!embedded && (

{editProduct ? 'Editar produto' : 'Cadastrar produto'}

Preencha os detalhes. A prévia atualiza em tempo real.

)}
set('name', e.target.value)} placeholder="Ex: Creme de Ninho" />
set('price', e.target.value)} placeholder="18,00" inputMode="decimal" />