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

معرفی

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

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

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

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

• نوتیفیکیشن زنده/dismissable در صف کاربر → NotificationItem در NotificationCenter
• ایجاد rule جدید form-style → از JobWizard یا یک Form سفارشی استفاده کنید — این کارت نمایش‌گر است نه ادیتور

زمین بازی

استفاده

import { AlertRuleCard } from '@parto-system-design/ui'

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

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

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

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

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

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

• master Switch از Radix Switch زیرین می‌آید که role="switch" + aria-checked را به‌صورت خودکار ست می‌کند و با Space قابل toggle است؛ aria-label به آن پاس داده می‌شود.
• آیکون‌های Bell/BellOff (وضعیت master)، channel iconها، و jp Lucide ها همگی aria-hidden="true" هستند — معنا از label و متن کنار آن‌ها منتقل می‌شود.
• channelهای اطلاع‌رسانی به‌صورت گروهی از iconها نمایش داده می‌شوند، ولی label هر channel (email، telegram…) برای screen reader قابل دسترسی است.
• severity به‌صورت رنگ + متن نمایش داده می‌شود، نه فقط رنگ — کاربر color-blind نیز اولویت را می‌فهمد.
• ترتیب tab: نام rule → switch master → سایر iconها — switch محوری‌ترین action و اولین stop tab بعد از header است.

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

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