// Home + Detalhe da fatura screens (entry path to the Agente de Contas). function ScrollArea({ children, pad = 0, bg = "#fff" }) { return (
{children}
); } // White outline pill button used on the blue hero. function HeroBtn({ children, onClick }) { return ( ); } // ── 01 Home — 100% fiel ao Figma (node 1:13840) ─────────────────── const NAVY = "rgb(0,46,70)"; const GRAY_TXT = "rgb(105,105,105)"; const RING = "rgb(49,82,239)"; const FF = "'Hanken Grotesk', system-ui"; // Header / nav icon set, transcribed to match the file's Icon set. const NIc = { timT: ( ), libras: ( ), contrast: ( ), menu: ( ), chevDownW: ( ), gridApps: (c) => ( ), fatura: (c) => ( ), recarga: (c) => ( ), bag: (c) => ( ), }; function AppIcon({ src, label, ring = RING, fallback, live }) { return (
{src ? {label} :
{fallback.t}
}
{live && LIVE}
{label}
); } // Menu - BottomMenu (Items=5): 70px, hairline top, equal items, active blue. function BottomMenu({ active = "Plano", onContas, onPlano }) { const items = [ { t: "Plano", icon: NIc.gridApps, onClick: onPlano }, { t: "Contas", icon: NIc.fatura, badge: "2", onClick: onContas }, { t: "Recarga", icon: NIc.recarga }, { t: "Loja", icon: NIc.bag }, ]; return (
{items.map((it, i) => { const on = it.t === active; const c = on ? TIM.blue : GRAY_TXT; return (
{it.icon(c)} {it.badge && {it.badge}} {it.t}
); })}
); } function HomeScreen({ onVerDetalhes, onContas }) { return (
{/* Header - Mobile (blue, retracted) */}
{/* main row: control bars · phone pill · menu */}
{/* TIM logo */} TIM {/* phone pill */}
21 99999-1234
{/* menu + red notification dot */}
{/* Blue hero */}
Olá Thaís 😃
Disponibilizamos sua conta Maio 2025 com valor de R$ 135,78.
Pagar via Pix Ver detalhes
{[0,1,2].map(i => )}
{/* White sheet (radius 14) */}
{/* app row */}
{/* Total de internet consumida */}
Total de internet consumida
62%
62GB consumidosde 100GB
{/* Seu saldo */}
Seu saldo
{NIc.gridApps("#000")}
Plano
TIM Black Renova em
02/06
{/* Extrato detalhado */}
Extrato detalhado{Ic.chevR("#000", 22)}
); } // ── Contas header (blue, retracted — no accessibility bar) ──────── function NavyHeader() { return (
{/* main row: control-bars · phone pill · menu */}
TIM
21 99999-1234 {NIc.chevDownW}
{NIc.menu}
); } // Flag - Flag: radius 8, 2/8 padding, icon + 12px/500 label. function Flag({ variant }) { const cfg = variant === "atraso" ? { bg: "rgb(251,204,212)", fg: "rgb(235,0,40)", label: "Em atraso", icon: } : { bg: "rgb(254,245,224)", fg: "#000", label: "A vencer", icon: Ic.clock("rgb(250,185,50)", 16) }; return ( {cfg.icon}{cfg.label} ); } // A single fatura row: month/value, due date, flag, and the two buttons. function FaturaRow({ month, value, due, flag, onDetalhe }) { return (
{month} {value}
{due}
); } // ── 02 Contas — 100% fiel ao Figma (node 1:13957) ───────────────── function ContasScreen({ onDetalhe, onPlano }) { return (
{/* title */}
Você tem 1 fatura em aberto
{/* 8px divider */}
{/* Gerenciamento de conta */}
Gerenciamento de conta
Histórico de
contas} icon={ } /> Configura-
ção de conta} icon={ } />
); } // Management card (Card - FAQ White Small): 104×w, radius 24, 1px ring. function MgmtCard({ icon, label }) { return ( ); } // ── Detalhe da fatura — 100% fiel ao Figma (node 1:13740) ───────── // Service icons, 24×24, transcribed to match the file's Icon set. const DIc = { openFinance: (c) => ( ), pix: (c) => ( ), share: (c) => ( ), chat: (c) => ( ), fileChecked: (c) => ( ), download: (c) => ( ), }; // Card - FAQ (Type=White, Size=Small): 104×106, radius 24, 1px ring, // padding 16, icon 24 top / label 12·500 bottom, space-between. function PayCard({ icon, label, highlight, badge, onClick }) { return ( ); } function DetailScreen({ onClose, onDiscordo }) { return (
{/* App Bar - Default (Middle=Text): 72px titled bar below the status area */}
Detalhe da fatura
{/* amount block — 40px vertical padding, gap 24 */}
Maio 2025 R$ 135,78 {/* Flag - Flag (Color=Yellow, Icon=True) */} {Ic.clock("rgb(250,185,50)", 16)} A vencer Vence em 05/05/2025
{/* Button - Pill (Type=Contained, Color=Blue, Size=Large): radius 12 */}
{/* gray section rgb(240,241,242) */}
{/* Opções de pagamento — 8px hairline frame, padding 32/24/8 */}
Opções de pagamento
Pix no
seu banco} /> Enviar
Código Pix} />
Outros serviços
); } Object.assign(window, { ScrollArea, HomeScreen, ContasScreen, DetailScreen });