<Caption value={period.label} /> </Col> <Spacer /> {status === "ok" ? ( <Badge label="OK" color="success" /> ) : ( <Badge label="Alerta" color="danger" /> )} </Row> <Divider /> <Row gap={4} align="stretch"> <Col gap={0}> <Caption value="Saldo" /> <Title value={summary.balance} size="md" /> </Col> <Col gap={0}> <Caption value="Ingresos" /> <Title value={summary.income} size="md" /> </Col> <Col gap={0}> <Caption value="Gastos" /> <Title value={summary.expenses} size="md" /> </Col> <Col gap={0}> <Caption value="Ahorro" /> <Title value={summary.savingsRate} size="md" /> </Col> </Row> <Divider /> <Col gap={2}> {topCategories.map((item) => ( <Row key={item.id} gap={3} align="center"> <Box width={4} height={4} radius="full" background={item.color} /> <Text value={item.name} size="sm" /> <Spacer /> <Text value={item.amount} size="sm" color="secondary" /> </Row> ))} </Col> <Row> <Button label="Ver detalles" variant="outline" onClickAction={{ type: "finanzas.ver" }} /> <Button label="Agregar" iconStart="plus" onClickAction={{ type: "finanzas.agregar" }} /> </Row> </Card> <script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>