Ma'lumot · pattern
Tarif va hisob-kitob
Tarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF). SaaS sozlamalari uçun — FoxUI obunasining özi ham şu naqşda.
Joriy tarif
Biznes Faol
11 880 000 söm/ yil
Foydalaniş
Foydalanuvçilar5 / 10
Mijozlar yozuvlari8 420 / 25 000
SMS xabarlar (oktabr)1 860 / 2 000 — 93 %
Fayl xotirasi3,2 GB / 10 GB
Tölov usuli
Uzcard, oxirgi raqamlari •••• 4417Amal qiliş muddati 09/28Asosiy
Humo, oxirgi raqamlari •••• 0932Muddati tugayapti: 11/26
Hisob-fakturalar
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | expiring Karta muddati tugayapti — «!» va çegara | — |
Anatomiya
- root
.fx-billingşart - grid
.fx-billing__gridixtiyoriy - panel
.fx-billing__panelixtiyoriy - plan
.fx-billing__planixtiyoriy - eyebrow
.fx-billing__eyebrowixtiyoriy - name
.fx-billing__nameixtiyoriy - price
.fx-billing__priceixtiyoriy - amount
.fx-billing__amountixtiyoriy - period
.fx-billing__periodixtiyoriy - meta
.fx-billing__metaixtiyoriy - actions
.fx-billing__actionsixtiyoriy - usage
.fx-billing__usageixtiyoriy - section
.fx-billing__sectionixtiyoriy - title
.fx-billing__titleixtiyoriy - method
.fx-billing__methodixtiyoriy - brand
.fx-billing__brandixtiyoriy - card
.fx-billing__cardixtiyoriy - number
.fx-billing__numberixtiyoriy - exp
.fx-billing__expixtiyoriy - add
.fx-billing__addixtiyoriy - invoices
.fx-billing__invoicesixtiyoriy
Holatlar
expiring
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Amallar, karta tugmalari va PDF havolalari böylab |
Har bölim section + aria-labelledby. Meter'lar role=meter va aria-valuetext («1 860 / 2 000 — 93 %»). Karta turi yozuvi bezak (aria-hidden), ekran öquvçi uçun sr-only matn: «Uzcard, oxirgi raqamlari 4417». Hisob-faktura havolalari aria-label bilan qaysi hujjat ekanini aytadi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- SaaS sozlamalarida obuna, limit va tölovlar sahifasi.
- Mijoz kabinetida «Mening tarifim» bölimi.
Işlatmang
- Tariflarni soliştirib tanlaş (marketing sahifasi) →
card - Xarid jarayoni — karta va manzil kiritiş →
checkout - Narxni oyma-oy yaşirib, faqat yillik summani körsatmang — «oyiga hisoblaganda» qatori işonç beradi.
- Karta raqamini töliq körsatmang — faqat oxirgi 4 raqam va muddat.
- Çegaraga yaqin limitni faqat rang bilan bildirmang — foiz va söz (93 %) yozilsin.
- «Obunani bekor qiliş»ni yaşirmang yoki asosiy tugma qilmang — ikkinçi darajali, lekin körinadigan bölsin.
npx foxui add billing
<div class="fx-billing">
<div class="fx-billing__grid">
<section class="fx-billing__panel fx-billing__plan" aria-labelledby="bl-p">
<p class="fx-billing__eyebrow">Joriy tarif</p>
<h2 class="fx-billing__name" id="bl-p">Biznes <span class="fx-badge" data-tone="success" data-marker="dot">Faol</span></h2>
<p class="fx-billing__price"><span class="fx-billing__amount">11 880 000 söm</span><span class="fx-billing__period">/ yil</span></p>
<ul class="fx-billing__meta"><li>Keyingi tölov: <b>17.10.2027</b> — avtomatik uzaytiriladi</li><li>Oyiga hisoblaganda: <b>990 000 söm</b> (2 oy tejaldi)</li></ul>
<div class="fx-billing__actions"><button class="fx-btn" type="button" data-variant="primary">Tarifni özgartiriş</button><button class="fx-btn" type="button" data-variant="ghost">Obunani bekor qiliş</button></div>
</section>
<section class="fx-billing__panel" aria-labelledby="bl-u">
<h2 class="fx-billing__title" id="bl-u">Foydalaniş</h2>
<div class="fx-billing__usage">
<div class="fx-meter" data-size="sm" style="--fx-meter-value: 50%">
<div class="fx-meter__head"><span class="fx-meter__label" id="bl-m1">Foydalanuvçilar</span><span class="fx-meter__value">5 / 10</span></div>
<div class="fx-meter__track" role="meter" aria-labelledby="bl-m1" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-valuetext="5 / 10"><div class="fx-meter__fill"></div></div>
</div>
<div class="fx-meter" data-size="sm" style="--fx-meter-value: 34%">
<div class="fx-meter__head"><span class="fx-meter__label" id="bl-m2">Mijozlar yozuvlari</span><span class="fx-meter__value">8 420 / 25 000</span></div>
<div class="fx-meter__track" role="meter" aria-labelledby="bl-m2" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100" aria-valuetext="8 420 / 25 000"><div class="fx-meter__fill"></div></div>
</div>
<div class="fx-meter" data-tone="warning" data-size="sm" style="--fx-meter-value: 93%">
<div class="fx-meter__head"><span class="fx-meter__label" id="bl-m3">SMS xabarlar (oktabr)</span><span class="fx-meter__value">1 860 / 2 000 — 93 %</span></div>
<div class="fx-meter__track" role="meter" aria-labelledby="bl-m3" aria-valuenow="93" aria-valuemin="0" aria-valuemax="100" aria-valuetext="1 860 / 2 000 — 93 %"><div class="fx-meter__fill"></div></div>
</div>
<div class="fx-meter" data-size="sm" style="--fx-meter-value: 32%">
<div class="fx-meter__head"><span class="fx-meter__label" id="bl-m4">Fayl xotirasi</span><span class="fx-meter__value">3,2 GB / 10 GB</span></div>
<div class="fx-meter__track" role="meter" aria-labelledby="bl-m4" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100" aria-valuetext="3,2 GB / 10 GB"><div class="fx-meter__fill"></div></div>
</div>
</div>
</section>
</div>
<section class="fx-billing__section" aria-labelledby="bl-c">
<h2 class="fx-billing__title" id="bl-c">Tölov usuli</h2>
<div class="fx-billing__grid">
<div class="fx-billing__method"><span class="fx-billing__brand" aria-hidden="true">UZCARD</span><span class="fx-billing__card"><span class="fx-billing__number"><span class="fx-sr-only">Uzcard, oxirgi raqamlari </span>•••• 4417</span><span class="fx-billing__exp">Amal qiliş muddati 09/28</span></span><span class="fx-badge" data-size="sm">Asosiy</span><button class="fx-btn" type="button" data-variant="ghost" data-size="sm">Özgartiriş</button></div>
<div class="fx-billing__method" data-state="expiring"><span class="fx-billing__brand" aria-hidden="true">HUMO</span><span class="fx-billing__card"><span class="fx-billing__number"><span class="fx-sr-only">Humo, oxirgi raqamlari </span>•••• 0932</span><span class="fx-billing__exp">Muddati tugayapti: 11/26</span></span><button class="fx-btn" type="button" data-variant="ghost" data-size="sm">Yangilaş</button></div>
</div>
<button class="fx-btn fx-billing__add" type="button" data-size="sm">+ Karta qöşiş</button>
</section>
<section class="fx-billing__section" aria-labelledby="bl-i">
<h2 class="fx-billing__title" id="bl-i">Hisob-fakturalar</h2>
<div class="fx-table-scroll"><table class="fx-table fx-billing__invoices">
<thead><tr><th scope="col">Sana</th><th scope="col">Raqam</th><th scope="col">Davr</th><th scope="col" data-type="num">Summa</th><th scope="col">Holat</th><th scope="col"><span class="fx-sr-only">Yuklab oliş</span></th></tr></thead>
<tbody>
<tr><td>17.10.2026</td><td><span class="fx-code-inline">HF-2026-0417</span></td><td>17.10.2026 – 16.10.2027</td><td data-type="num">11 880 000 söm</td><td data-type="nowrap"><span class="fx-status" data-tone="success">Tölangan</span></td><td><a class="fx-link" href="#" aria-label="HF-2026-0417 hisob-fakturasini PDF yuklab oliş">PDF</a></td></tr>
<tr><td>03.09.2026</td><td><span class="fx-code-inline">HF-2026-0311</span></td><td>Qöşimça 2 000 SMS</td><td data-type="num">240 000 söm</td><td data-type="nowrap"><span class="fx-status" data-tone="success">Tölangan</span></td><td><a class="fx-link" href="#" aria-label="HF-2026-0311 hisob-fakturasini PDF yuklab oliş">PDF</a></td></tr>
<tr><td>17.10.2025</td><td><span class="fx-code-inline">HF-2025-0388</span></td><td>17.10.2025 – 16.10.2026</td><td data-type="num">9 900 000 söm</td><td data-type="nowrap"><span class="fx-status" data-tone="success">Tölangan</span></td><td><a class="fx-link" href="#" aria-label="HF-2025-0388 hisob-fakturasini PDF yuklab oliş">PDF</a></td></tr>
<tr><td>17.09.2025</td><td><span class="fx-code-inline">HF-2025-0352</span></td><td>Oylik, sentabr</td><td data-type="num">990 000 söm</td><td data-type="nowrap"><span class="fx-status" data-tone="error">Qaytarilgan</span></td><td><a class="fx-link" href="#" aria-label="HF-2025-0352 hisob-fakturasini PDF yuklab oliş">PDF</a></td></tr>
</tbody>
</table></div>
</section>
</div>Tokenlar: --fx-bg-muted --fx-bg-surface --fx-border-color-default --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-control-h-md --fx-fg-warning --fx-font-size-display-sm --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-radius-badge --fx-radius-control --fx-radius-surface --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan
API kalitlariAPI kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.Audit jurnaliXavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».Ustunli röyxatHar satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar.Doska (kanban)Holat ustunlari va kartalar.GrafikGrafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.Grafik kartasiGrafikni örab turuvçi karta: sarlavha + izoh + amallar (davr segmenti, menyu), grafik, pastda legenda va manba.