Ma'lumot · pattern

Integratsiyalar katalogi

Ilovaning «Integratsiyalar» sahifasi (4.189): sarlavha va «N ta ulangan» hisobi, qidiruv, toifa chip'lari (Hammasi, Ulanganlar, Tölov, Yetkaziş, Xabar, Buxgalteriya) va kartalar töri. Har karta: logo (harf + pastel fon yoki rasm), nom, toifa, qisqa izoh, holat (fx-status — nuqta + söz) va amallar. Holatlar data-state: connected (Ulangan → «Uziş», «Sozlaş»), disconnected (Ulanmagan → «Ulaş»), pending (Ulanmoqda…, tugma band), error (Xato + sababi → «Qayta ulaş»). Xulq (data-fx-integrations): filtr va qidiruv (ʻ va katta-kiçik harfsiz), ulaşda bekor qilinadigan «fx-integrations-connect» hodisasi {id, done(ok, xato)} — ilova OAuth oynasini oçib natijani done() bilan qaytaradi; uziş fxConfirm bilan tasdiqlanadi («fx-integrations-disconnect»). Natijalar jonli hududda aytiladi. data-layout: grid (standart) yoki list.

beta0.29.0 dan.fx-integrationsCSS + JS

Integratsiyalar

«Ipak Yöli Savdo» dökonini tölov, yetkaziş va xabar xizmatlariga ulang.

2 ta ulangan

Click
Tölov

Karta va Click hamyon orqali onlayn tölov. Pul ertasi kuni hisobingizga tuşadi.

Ulangan
Sozlaş
Payme
Tölov

Payme orqali tölov va avtomatik çek. Obuna tölovlari uçun ham.

Ulanmagan
Telegram bot
Xabar

Yangi buyurtma va arizalar haqida guruhga darhol xabar.

Ulangan
Sozlaş
Eskiz SMS
Xabar

Buyurtma holati va tasdiq kodlarini SMS orqali yuboriş.

Xato: token eskirgan
Yandex Yetkaziş
Yetkaziş

Toşkent böylab kuryer çaqiriş va yetkaziş narxini hisoblaş.

Ulanmagan

Variantlar

Atribut	Qiymatlar	Standart
`data-state`	`connected` `disconnected` `pending` `error`	`disconnected`
`data-layout`	`grid` `list` ixçam qatorlar	`grid`
`data-color`	`yellow` `pink` `blue` `coral` `green` `purple`	`none`

Anatomiya

root.fx-integrationsşart
head.fx-integrations__headixtiyoriy
title.fx-integrations__titleixtiyoriy
text.fx-integrations__textixtiyoriy
count.fx-integrations__countixtiyoriy
toolbar.fx-integrations__toolbarixtiyoriy
filters (fx-chip).fx-integrations__filtersixtiyoriy
list.fx-integrations__listşart
item.fx-integrations__itemşart
logo.fx-integrations__logoixtiyoriy
info.fx-integrations__infoixtiyoriy
name (h3).fx-integrations__nameşart
category.fx-integrations__categoryixtiyoriy
desc.fx-integrations__descixtiyoriy
footer.fx-integrations__footerixtiyoriy
status (fx-status).fx-integrations__statusixtiyoriy
actions.fx-integrations__actionsixtiyoriy
empty.fx-integrations__emptyixtiyoriy

Holatlar

connectedpendingerrorfiltered out

Klaviatura va kiriş

Tugma	Amal
`Tab`	Qidiruv → toifa chip'lari → har kartaning amallari
`Enter, Space`	Chip — toifani tanlaydi; tugma — ulaydi / uzadi
`Esc (tasdiq oynasida)`	Uzişni bekor qiladi

Kartalar — röyxat, har biri h3 nomli. Toifa chip'lari aria-pressed tugmalar, qidiruv <input type="search" aria-label>. Amal tugmasi aria-label'da xizmat nomi bor («Ulaş: Payme»); ulanayotganda disabled + aria-busy. Filtr, ulaş va uziş natijasi aria-live hududida aytiladi; uziş tasdiq oynasidan keyin fokus tugmaga qaytadi. Logo bezak (aria-hidden), nom matnda.

Kod

AI uçun: qaçon işlatiladi

Işlating

Ilova sozlamalaridagi «Integratsiyalar» / «Ilovalar» sahifasi.
Onboarding'da kerakli xizmatlarni ulaş qadami.

Işlatmang

API kalitlarini boşqariş → apikeys
Oddiy yoqiş/öçiriş sozlamalari röyxati → settings
Holatni faqat rang bilan körsatmang — «Ulangan / Ulanmagan / Xato» sözi doim tursin.
Uzişni tasdiqsiz bajarmang — ma'lumot almaşinuvi töxtaydi.
Xato holatida sababini yaşirmang («token eskirgan», «ruxsat bekor qilingan») va «Qayta ulaş»ni bering.

npx foxui add integrations

<section class="fx-integrations" data-fx-integrations aria-labelledby="in-t">
  <header class="fx-integrations__head"><div><h2 class="fx-integrations__title" id="in-t">Integratsiyalar</h2><p class="fx-integrations__text">«Ipak Yöli Savdo» dökonini tölov, yetkaziş va xabar xizmatlariga ulang.</p></div><span class="fx-integrations__count" data-integrations-count>2 ta ulangan</span></header>
  <div class="fx-integrations__toolbar">
    <label class="fx-search" data-size="sm"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="9" cy="9" r="5.5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="m13.5 13.5 3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg><input class="fx-search__input" type="search" placeholder="Integratsiya qidiriş" aria-label="Integratsiya qidiriş" data-integrations-search></label>
    <ul class="fx-integrations__filters" aria-label="Toifa">
      <li><button class="fx-chip" type="button" aria-pressed="true" data-integrations-filter="all">Hammasi</button></li>
      <li><button class="fx-chip" type="button" aria-pressed="false" data-integrations-filter="connected">Ulanganlar</button></li>
      <li><button class="fx-chip" type="button" aria-pressed="false" data-integrations-filter="tolov">Tölov</button></li>
      <li><button class="fx-chip" type="button" aria-pressed="false" data-integrations-filter="yetkazish">Yetkaziş</button></li>
      <li><button class="fx-chip" type="button" aria-pressed="false" data-integrations-filter="xabar">Xabar</button></li>
    </ul>
  </div>
  <ul class="fx-integrations__list">
    <li class="fx-integrations__item" data-id="click" data-category="tolov" data-state="connected">
      <span class="fx-integrations__logo" data-color="blue" aria-hidden="true">C</span>
      <div class="fx-integrations__info"><h3 class="fx-integrations__name">Click</h3><span class="fx-integrations__category">Tölov</span></div>
      <p class="fx-integrations__desc">Karta va Click hamyon orqali onlayn tölov. Pul ertasi kuni hisobingizga tuşadi.</p>
      <div class="fx-integrations__footer"><span class="fx-status fx-integrations__status" data-tone="success">Ulangan</span><div class="fx-integrations__actions"><a class="fx-btn" data-variant="ghost" data-size="sm" href="#">Sozlaş</a><button class="fx-btn" type="button" data-size="sm" data-variant="secondary" data-integrations="toggle">Uziş</button></div></div>
    </li>
    <li class="fx-integrations__item" data-id="payme" data-category="tolov" data-state="disconnected">
      <span class="fx-integrations__logo" data-color="green" aria-hidden="true">P</span>
      <div class="fx-integrations__info"><h3 class="fx-integrations__name">Payme</h3><span class="fx-integrations__category">Tölov</span></div>
      <p class="fx-integrations__desc">Payme orqali tölov va avtomatik çek. Obuna tölovlari uçun ham.</p>
      <div class="fx-integrations__footer"><span class="fx-status fx-integrations__status" data-tone="neutral">Ulanmagan</span><div class="fx-integrations__actions"><button class="fx-btn" type="button" data-size="sm" data-variant="primary" data-integrations="toggle">Ulaş</button></div></div>
    </li>
    <li class="fx-integrations__item" data-id="telegram" data-category="xabar" data-state="connected">
      <span class="fx-integrations__logo" data-color="purple" aria-hidden="true">T</span>
      <div class="fx-integrations__info"><h3 class="fx-integrations__name">Telegram bot</h3><span class="fx-integrations__category">Xabar</span></div>
      <p class="fx-integrations__desc">Yangi buyurtma va arizalar haqida guruhga darhol xabar.</p>
      <div class="fx-integrations__footer"><span class="fx-status fx-integrations__status" data-tone="success">Ulangan</span><div class="fx-integrations__actions"><a class="fx-btn" data-variant="ghost" data-size="sm" href="#">Sozlaş</a><button class="fx-btn" type="button" data-size="sm" data-variant="secondary" data-integrations="toggle">Uziş</button></div></div>
    </li>
    <li class="fx-integrations__item" data-id="eskiz" data-category="xabar" data-state="error" data-error="token eskirgan">
      <span class="fx-integrations__logo" data-color="yellow" aria-hidden="true">E</span>
      <div class="fx-integrations__info"><h3 class="fx-integrations__name">Eskiz SMS</h3><span class="fx-integrations__category">Xabar</span></div>
      <p class="fx-integrations__desc">Buyurtma holati va tasdiq kodlarini SMS orqali yuboriş.</p>
      <div class="fx-integrations__footer"><span class="fx-status fx-integrations__status" data-tone="error">Xato: token eskirgan</span><div class="fx-integrations__actions"><button class="fx-btn" type="button" data-size="sm" data-variant="primary" data-integrations="toggle">Qayta ulaş</button></div></div>
    </li>
    <li class="fx-integrations__item" data-id="yandex" data-category="yetkazish" data-state="disconnected">
      <span class="fx-integrations__logo" data-color="coral" aria-hidden="true">Y</span>
      <div class="fx-integrations__info"><h3 class="fx-integrations__name">Yandex Yetkaziş</h3><span class="fx-integrations__category">Yetkaziş</span></div>
      <p class="fx-integrations__desc">Toşkent böylab kuryer çaqiriş va yetkaziş narxini hisoblaş.</p>
      <div class="fx-integrations__footer"><span class="fx-status fx-integrations__status" data-tone="neutral">Ulanmagan</span><div class="fx-integrations__actions"><button class="fx-btn" type="button" data-size="sm" data-variant="primary" data-integrations="toggle">Ulaş</button></div></div>
    </li>
  </ul>
  <div class="fx-integrations__empty" hidden><strong>Heç narsa topilmadi</strong><span>Kerakli xizmat yöqmi? <a href="#">Integratsiya sörang</a> — bir haftada körib çiqamiz.</span></div>
</section>

Tokenlar: --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-error --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-ease-standard --fx-fg-success --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-semibold --fx-motion-base --fx-motion-fast --fx-radius-control --fx-radius-surface --fx-shadow-sm --fx-size-avatar-lg --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-text-on-category --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.Tarif va hisob-kitobTarif 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).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.

Integratsiyalar katalogi

Integratsiyalar

Click

Payme

Telegram bot

Eskiz SMS

Yandex Yetkaziş

Variantlar

Anatomiya

Holatlar

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik