Proje: Okul.com.tr CRM · Hub: Okul.com.tr CRM — Conventions

ActionConfirmationDialog Bileşeni

src/components/common/ActionConfirmationDialog.tsx

Kullanım Amacı

Geri alınamaz veya dış sistemlere etki eden aksiyonlar (CIO, email, bildirim) için onay dialog’u. Aksiyonun sistem etkilerini gösterir, countdown ile kasıtlılık sağlar.

Temel Props

interface ActionConfirmationDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    title: string;
    description?: string;
    systemEffects: SystemEffect[];  // Liste görüntülenen etkiler
    onConfirm: () => Promise<boolean>;
    confirmButtonText?: string;
    cancelButtonText?: string;
    countdownSeconds?: number;   // default: 10
    variant?: 'approve' | 'reject' | 'warning';
    children?: React.ReactNode;  // Dialog içine ek içerik
}

SystemEffect Tipi

interface SystemEffect {
    icon?: React.ReactNode;
    text: string;
    type?: 'info' | 'warning' | 'success';
}

Kullanım Örneği

const systemEffects: SystemEffect[] = [
    { icon: <Bell />, text: "Customer.io'ya event gönderilecek", type: 'info' },
    { icon: <Mail />, text: "Kullanıcıya e-posta gönderilecek", type: 'success' }
];
 
<ActionConfirmationDialog
    open={isOpen}
    onOpenChange={setIsOpen}
    title="Yorumu Onayla"
    description="Bu işlem geri alınamaz."
    systemEffects={systemEffects}
    onConfirm={handleConfirm}
    countdownSeconds={10}
    variant="approve"
/>

Dialog Durumları

1. initial — Effects listesi gösterilir, “Devam Et” butonu
2. countdown — Geri sayım + progress bar + “Hızlandır” seçeneği
3. executing — Spinner, onConfirm() çalışıyor

Collapsible Effects

3’ten fazla effect varsa (COLLAPSE_THRESHOLD = 3), ilk 2’si gösterilir, kalanlar collapsible’a alınır.

Effect Renkleri

• type: 'info' → mavi arka plan
• type: 'warning' → sarı arka plan
• type: 'success' → yeşil arka plan
• tip yok → muted arka plan

Nerede Kullanılır

• article-comments — makale yorum onay/ret
• school-comments — okul yorum onay/ret

Related

• okul-yorumlari-modeli — approve/reject akışı
• form-pattern — Dialog’larda form kullanımı