mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
5c0a612127
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
42 lines
1.2 KiB
Plaintext
42 lines
1.2 KiB
Plaintext
---
|
|
import CardActions from '@ui/CardActions.astro'
|
|
import Icon from '@ui/Icon.astro'
|
|
import Badge from '@ui/Badge.astro'
|
|
import ListGroup from '@ui/ListGroup.astro'
|
|
import ListGroupItem from '@ui/ListGroupItem.astro'
|
|
import crmDashboard from '@data/crm-dashboard.json'
|
|
|
|
const churn = crmDashboard.churn_risk
|
|
---
|
|
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<Icon name="alert-triangle" class="text-red" />
|
|
<h3 class="card-title mb-0">Churn risk</h3>
|
|
</div>
|
|
<CardActions>
|
|
<Badge text={`${churn.items.length} accounts`} color="red" />
|
|
</CardActions>
|
|
</div>
|
|
|
|
<ListGroup flush>
|
|
{
|
|
churn.items.map((item) => (
|
|
<ListGroupItem>
|
|
<div class="row align-items-center g-2">
|
|
<div class="col">
|
|
<div class="fw-medium">{item.company}</div>
|
|
<div class="small text-secondary">Last contact: {item.last_contact}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<span class={`badge bg-${item.level_color}-lt`}>{item.level}</span>
|
|
</div>
|
|
<div class="col-auto fw-semibold">{item.amount}</div>
|
|
</div>
|
|
</ListGroupItem>
|
|
))
|
|
}
|
|
</ListGroup>
|
|
</div>
|