کارت قانون هشدار (AlertRuleCard)

تعریف یک alert ذخیره‌شده — شرط فعال‌سازی، آستانه، شدت، کانال‌های اطلاع‌رسانی، Switch روشن/خاموش، تاریخچه‌ی فعال‌سازی

معرفی

AlertRuleCard تعریف یک قانون هشدار ذخیره‌شده را نمایش می‌دهد: «هرگاه نرخ منفی > 20٪ شود، با severity فوری از طریق ایمیل + تلگرام به تیم اعلام کن». مناسب صفحه‌ی مدیریت Alertها در پنل افکارسنجی، که کاربر می‌تواند rule را روشن/خاموش کند و تاریخچه‌ی فعال‌سازی را ببیند.

چه زمانی استفاده کنیم:

  • لیست all alerts در داشبورد ادمین
  • صفحه‌ی آلارم‌های اخیر — کارت rule + ActionTimeline
  • نمایش inline در یک Concept/Page card که از این rule notify می‌گیرد

چه زمانی استفاده نکنیم:

  • نوتیفیکیشن زنده/dismissable در صف کاربر → NotificationCenter (آیتم‌ها از نوع داده‌ی NotificationItem هستند، نه کامپوننت)
  • ایجاد rule جدید form-style → از WizardPage یا یک Form سفارشی استفاده کنید — این کارت نمایش‌گر است نه ادیتور

افزایش ناگهانی منفی

فوریفعال
شرط فعال‌سازی

هرگاه نرخ منفی بیش از 20٪ شود

آستانه:≥ 20٪
کانال‌ها:ایمیلتلگرامدرون‌برنامه‌ای
آخرین فعال‌سازی: 2 ساعت پیشتعداد فعال‌سازی: 14

زمین بازی

زمین بازی

افزایش ناگهانی منفی

فوریفعال
شرط فعال‌سازی

هرگاه نرخ منفی بیش از 20٪ شود

آستانه:≥ 20٪
کانال‌ها:ایمیلتلگرامدرون‌برنامه‌ای
آخرین فعال‌سازی: 2 ساعت پیشتعداد فعال‌سازی: 14
تنظیمات
ظاهر
حالت
محتوا
کد این نمونه به‌صورت خودکار قابل تولید نیست — برای کد آماده‌ی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.

استفاده

import { AlertRuleCard } from '@partodata/ui'

const [active, setActive] = React.useState(true)

<AlertRuleCard
  name="افزایش ناگهانی منفی"
  trigger="هرگاه نرخ منفی بیش از 20٪ شود"
  threshold="≥ 20٪"
  severity="urgent"
  channels={['email', 'telegram', 'in-app']}
  active={active}
  onActiveChange={setActive}
  lastFired="2 ساعت پیش"
  fireCount={14}
/>

channels هر یک از email | sms | telegram | in-app | webhook هستند که با آیکون Lucide مرتبط نمایش داده می‌شوند.

راهنمای استفاده

بکنید

  • trigger را به‌زبان طبیعی فارسی بنویسید (نه expression code-like) — کاربر تحلیل‌گر می‌خواند نه dev - threshold را به‌صورت فشرده پاس بدهید (≥ 20٪، > 1000 پست) — کارت جا محدود است - lastFired را با formatRelativeLocaleTime (یا فرم similar) به نسبی-زمان تبدیل کنید

نکنید

  • active=true اما همه channels خالی نگذارید — rule فعال است ولی به جایی notify نمی‌کند → state inconsistent - severity را اشتباه نگیرید: severity مربوط به اولویت آلارم است، نه شدت کلاستر/concept هدف

جدول ویژگی‌ها

Prop

Type

دسترسی‌پذیری

  • master Switch از Radix Switch زیرین می‌آید که role="switch" + aria-checked را به‌صورت خودکار ست می‌کند و با Space قابل toggle است. نام دسترس‌پذیر آن با aria-labelledby از دو تکه ساخته می‌شود: یک برچسب پنهان («فعال») به‌علاوه‌ی خودِ <h3> نام rule — پس در فهرستی از چند کارت، هر switch با نام قانون خودش اعلام می‌شود («فعال، افزایش ناگهانی منفی») و نه یک «فعال» تکراری. چون name از نوع ReactNode است، ارجاع با id تنها راه درست است.
  • آیکون‌های Bell/BellOff (وضعیت master)، channel iconها، و jp Lucide ها همگی aria-hidden="true" هستند — معنا از label و متن کنار آن‌ها منتقل می‌شود.
  • channelهای اطلاع‌رسانی به‌صورت گروهی از iconها نمایش داده می‌شوند، ولی label هر channel (email، telegram…) برای screen reader قابل دسترسی است.
  • severity به‌صورت رنگ + متن نمایش داده می‌شود، نه فقط رنگ — کاربر color-blind نیز اولویت را می‌فهمد.
  • تنها master Switch قابل focus است و تنها stop در ترتیب tab این کارت به‌شمار می‌رود؛ نام rule (یک <h3>) و آیکون‌ها (Bell/BellOff و آیکون‌های channel، همگی aria-hidden) focusable نیستند.

کامپوننت‌های مرتبط

  • نوتیفیکیشن زنده در صف کاربر → NotificationCenter (آیتم‌ها از نوع داده‌ی NotificationItem به آن داده می‌شوند)
  • جستجوی ذخیره‌شده (نه آلارم) → SavedQueryCard
  • نمایش timeline فعال‌سازی‌ها → ActionTimeline
  • severity badge standalone → SeverityBadge