Tasarım Sistemi & Playground

Tasarım Bileşenleri (UI Library)

Proje genelinde kullanılan standart UI bileşenlerinin (Button, Input, Select, Checkbox, Radio, Card, Tabs, Alert, ConfirmModal) etkileşimli oyun alanı ve canlı form demosu.

1

1. Renk Skalası & Tasarım Sistemi (Colors & Design Tokens)

Nar WhatsApp Webhook kurumsal renk skalası, semantik durum kodları, SCSS değişkenleri ve Tailwind CSS entegrasyonu (SSOT: src/styles/_tokens.scss).

🍇 Nar Marka Paleti (Brand Scale: Rose & Crimson)

$nar-brand • --nar-brand-* • bg-brand-*
50
#fff1f2
brand-50
100
#ffe4e6
brand-100
200
#fecdd3
brand-200
300
#fda4af
brand-300
400
#fb7185
brand-400
500
#f43f5e
brand-500
600 ★
#e11d48
brand-600
700
#be123c
brand-700
800
#9f1239
brand-800
900
#881337
brand-900
950
#4c0519
brand-950

⚡ Meta Cloud API & Tech Paleti (Tech Scale: Indigo)

$nar-tech • --nar-tech-* • bg-tech-*
50
#eef2ff
tech-50
100
#e0e7ff
tech-100
200
#c7d2fe
tech-200
300
#a5b4fc
tech-300
400
#818cf8
tech-400
500
#6366f1
tech-500
600 ★
#4f46e5
tech-600
700
#4338ca
tech-700
800
#3730a3
tech-800
900
#312e81
tech-900
950
#1e1b4b
tech-950

🛡️ Semantik Durum & Güvenlik Paleti (System Status & Safety)

Başarılı / Aktif (Success)#10b981

Kuyruk işlendi, WABA mesajı teslim edildi, veritabanı sağlıklı.

bg-emerald-500 • $nar-success
Uyarı / Eşik Aşımı (Warning)#f59e0b

Debounce tamponunda bekliyor, yüksek hız sınırı yaklaşımı.

bg-amber-500 • $nar-warning
Kritik / Acil Fren (Danger)#ef4444

Harcama sigortası devrede (Circuit Breaker Tripped), kara liste engeli.

bg-rose-600 • $nar-danger
Bilgi / Telemetri (Info)#0ea5e9

Adli tutanak mühür bilgisi, WebSocket heartbeat ve sistem telemetrisi.

bg-sky-500 • $nar-info

🌑 Yüzey & Zemin Hiyerarşisi (Surface & Background Hierarchy)

Dark Kokpit Zemin
#090d16
bg-surface-body
Dark Kart Yüzeyi
#0f172a
bg-surface-card
Yükseltilmiş Kart
#1e293b
bg-surface-elevated
Açık Kart (Light)
#ffffff
bg-white • #f8fafc
💡 SCSS & Tailwind Birlikte Kullanım StandardıSSOT: _tokens.scss
1. SCSS Dosyasında Kullanım:
@use '@/styles/tokens' as *;

.my-custom-box {
  background: $surface-card;
  color: $nar-brand;
  border: 1px solid $surface-border;
}
2. Tailwind JSX Class ile Kullanım:
<div className="bg-brand-600 text-white rounded-xl p-4 shadow-md" />
<div className="bg-surface-card border border-surface-border" />

5. Çerçeve & Yuvarlatma Standartları (Border & Radius Hierarchy)

rounded-sm (4px)
Rozet & Aksiyonlar
className="rounded-sm"
rounded-md (6px)
Input & Switch Thumb
className="rounded-md"
rounded-lg (8px)
İç Kartlar & Switch Track
className="rounded-lg"
rounded-xl (12px)
Ana Kartlar & Modallar
className="rounded-xl"
rounded-full (Pill)
Rozetler & Avatarlar
className="rounded-full"
2

2. Tipografi Standartları (<Typography /> & H1-H6, P)

Uygulama genelinde tutarlı font büyüklükleri, ağırlıkları (font-weight) ve satır yükseklikleri (line-height) sağlayan tipografi hiyerarşisi

H1 - Sayfa Ana Başlığı (Page Title)

text-2xl/3xl (Extrabold)

H2 - Bölüm Başlığı (Section Header)

text-xl/2xl (Bold)

H3 - Kart & Modül Başlığı (Card Title)

text-lg/xl (Bold)

H4 - Öğesi / Bileşen Başlığı (Item Title)

text-base (Semibold)
H5 - Alt Etiket Başlığı (Sub-label Header)
text-sm (Semibold)
H6 - Mikro Etiket & Üst Başlık (Caption / Micro Label)
text-xs (Bold Uppercase)

P - Paragraf Metni (Paragraph): Nar WhatsApp webhook modülünde mesajlar ve denetim logları için kullanılan standart okuma ve açıklama metni formatıdır.

text-sm (Normal Regular)
Label - Form & Girdi Etiketi (Form Input Label)
text-xs (Semibold)

Description - İkincil Kart / Form Alt Açıklama Metni (Card & Field Description)

text-xs (Muted Slate-500)
Small - Mikro Yardım Metni & Dipnot (Micro Caption / Footnote)
text-[11px] (Medium)
Code - Kod Parametresi / Degisken (Code Snippet)
font-mono text-xs
Blockquote - Alıntı Metni / Vurgu Kutusu
border-l-2 text-sm italic
import { Typography, H1, H2, H3, H4, H5, H6, Text } from '@/components/ui/Typography';

// Yöntem 1: Standart HTML Etiketleri (Küresel CSS ile Otomatik Stilli)
<h1>Sayfa Başlığı</h1>
<h2>Bölüm Başlığı</h2>
<p>Açıklama paragrafı</p>

// Yöntem 2: React Component (Bileşen) Şeklinde Kullanım
<H1>Sayfa Başlığı</H1>
<Typography variant="lead">Giriş Paragrafı</Typography>
<Typography variant="muted">İkincil açıklama</Typography>
3

3. Butonlar (Button Variants & Sizes)

Tüm buton ihtiyaçları tekil <Button /> bileşeninde birleştirilmiştir (26px ikon aksiyonları, ghost hover ve renk varyantları dahil)

Dolu (Solid / Soft) Renk Skalası

Çerçeveli (Outline) Renk Skalası

Hayalet (Ghost) Renk Skalası

Boyutlar (Sizes) & Varyant Karşılaştırması (26px Standardı)

Solid:
Outline:
Ghost:

İkon Butonları (Ghost Hover Variants — 26px x 26px)

Devre Dışı (Disabled) Buton Örnekleri

4

4. Kart Bileşeni (<Card />) & Modüler Renk Mimarisi

Tüm kapsayıcılar, paneller ve modüller için esnek müstakil <Card /> bileşeni

İnteraktif Canlı Kart Oyun Alanı & Anlık Önizleme

Girdileri değiştirin, kart anında güncellensin
Kart Parametreleri:
Canlı Kart Görünümü:LIVE PREVIEW

Canlı Önizleme Kartı

Kullanıcı girdilerine göre anlık değişen kart örneği

Buradaki metin, sol taraftaki girdiler değiştikçe anında güncellenir.

Oluşturulan JSX Kodu:
<Card color="info" interactive>
  <CardHeader>
    <CardTitle>Canlı Önizleme Kartı</CardTitle>
    <CardDescription>Kullanıcı girdilerine göre anlık değişen kart örneği</CardDescription>
  </CardHeader>
  <CardContent>
    Buradaki metin, sol taraftaki girdiler değiştikçe anında güncellenir.
  </CardContent>
</Card>

2. Varsayılan Standart Kart (<Card variant="outline" /> — Sade Stil)

Sadece Sahibidefault

Yalnızca sen ve yöneticiniz

Varsayılan sade kart yapısı. Saf beyaz zemin, ince slate çerçeve ve net tipografi.

Etkileşimli Kartinteractive

Hover ile hafif yükselme efekti

interactive prop'u ile üzerine gelindiğinde 2px yukarı yükselir ve hover:border-slate-300 kazanır.

Odaklanmış Kartfocused

Mavi odaklanma halkası (focus ring)

focused prop'u veya klavye odağı (focus-within) ile mavi halka kazanır.

Şeffaf Zeminli Karttransparent

Saydam zemin (bg-transparent)

transparent prop'u ile zemin rengi saydamlaşır.

3. Çerçeveli Renkli Kartlar (variant="outline")

WhatsApp Webhook Kartı

variant="outline" color="info"

Soft mavi zemin ve mavi çerçeveli stratejik kart.

Onaylı İşlem Kartı

variant="outline" color="success"

Soft yeşil zemin ve yeşil çerçeveli etkileşimli kart.

Kritik İlerleme Kartı

variant="outline" color="danger"

Soft kırmızı zemin ve rose çerçeveli tehlike kartı.

4. Dolu (Solid) Renkli Kartlar (variant="solid")

Mavi Dolu Kart XXX

variant="solid" color="info"

Canlı mavi zemin ve yüksek görünürlük alanı.

Dikkat Gereken Kart

variant="solid" color="warning"

Sarı zeminli ve yüksek kontrastlı canlı uyarı kart örneği.

Tehlike Kartı

variant="solid" color="danger"

Canlı kırmızı zemin ve acil uyarı alanı.

5. Yapısal Bileşenler (CardHeader, CardContent, CardFooter)

Bölüm Hedefi Oluştur

Yıllık Q3 Stratejik Dönemi

Bu kart yapısında başlık, içerik gövdesi ve aksiyon butonlarının bulunduğu alt bilgi (footer) alanı ayrıştırılmıştır.

6. Devre Dışı Kart (disabled={true})

Devre Dışı Kart

disabled=

Bu kart pasif durumdadır. Soluklaştırılmış opasite ve tıklanamaz tıklama engeli uygulanır.

Devre Dışı Mavi Kart

variant="outline" color="info" disabled

Renkli outline kartların da disabled durumu opasite ile pasifleştirilir.
4

Input & Select (Girdi & Seçim Kutu Bileşenleri)

Button bileşeni ile %100 eşleşen yükseklik breakpoint'leri (xs: 26px, sm: 28px, default: 32px, lg: 36px, xl: 40px)

Yazılan Değer: (Boş)

Yükseklik Breakpoint'leri:

Seçili Değer: STRATEGIC

Yükseklik Breakpoint'leri:

Arama kutulu, departman gruplamalı ve klavye destekli arama yapabilen gelişmiş açılır liste bileşeni.

Seçili ID: u-1

5

Checkbox & Radio (Akıllı Seçim Bileşenleri)

Dual-Mode: Hem yalın (standart) hem de kart modunda çalışabilir

Standart Checkbox (<Checkbox />)

Standart Radio (<Radio />)

BİLDİRİM & KANAL KART SEÇİCİ (<Checkbox title="..." description="..." /> Çoklu Seçim)

Checkbox Kart Seçici Kod Kullanım Örneği (Kopyalanabilir JSX):
// Akıllı Kart Modlu <Checkbox /> Kullanımı
<Checkbox
  checked={sendInApp}
  onCheckedChange={setSendInApp}
  title="Sistem Bildirimi"
  description="Bildirim merkezi & onay banner'ına düşer"
/>

GÖRÜNÜRLÜK KART SEÇİCİ (<Radio title="..." description="..." /> Tekli Seçim)

Radio Kart Seçici Kod Kullanım Örneği (Kopyalanabilir JSX):
// Akıllı Kart Modlu <Radio /> Kullanımı
<Radio
  name="visibility"
  value="company"
  checked={visibility === 'company'}
  onChange={(e) => setVisibility(e.target.value)}
  title="Kurum Geneli"
  description="Tüm çalışanlar görebilir"
/>
6

6. Rozetler & Durum Etiketleri (<Badge /> & <Pills />)

Uygulama genelinde kullanılan standart Badge varyantları ve sistem durum rozeti bileşenleri

1. Standart Çerçeveli Rozetler (<Badge variant="..." />)

Blue BadgeInfo BadgeIndigo BadgeViolet BadgeEmerald BadgeWarning BadgeRose BadgeSlate BadgeCustom Badge

2. Dolgun / Solid Rozetler (<Badge solid /> & <Badge solid pill />)

Solid BlueSolid InfoSolid IndigoSolid VioletSolid EmeraldSolid WarningSolid RoseSolid Slate3 Bildirim

3. Sistem Durum Etiketleri (System Status Pills)

StatusPill:ACTIVECLOSED
ObjectiveTypePill:STRATEGICINDIVIDUALDEPARTMENT
HealthPill:ON_TRACKBEHINDAT_RISK
AlignmentStatusPill:APPROVEDPENDINGREJECTED
Sayaç/Pill Rozetleri:1 Talep3 Bekleyen12 Aktif5 Reddedilen
import { Badge } from '@/components/ui/Badge';
import { StatusPill, ObjectiveTypePill, HealthPill } from '@/components/ui/StatusPills';

// Standart Rozetler
<Badge variant="primary">Blue Badge</Badge>

// Sayaç & Kapsül (Pill) Rozeti (pill prop ile)
<Badge variant="primary" pill>1 Talep</Badge>

// System Domain Pills
<StatusPill status="ACTIVE" />
<ObjectiveTypePill type="STRATEGIC" />
<HealthPill health="ON_TRACK" />
7

7. Örnek Form & Canlı Önizleme (Full Form Demo)

Tüm bileşenlerin (Button, Input, Select, Checkbox, Radio) bir arada kullanıldığı canlı form örneği

8

8. Sekmeler (Tabs)

Pills (Hap/Segmented), Underline (Çizgili) ve Button (Buton) stil seçenekleriyle dinamik içerik değişimi

1. Kapsül Modu (variant="pills" — Varsayılan Segmented)

Tüm Mesaj Paneli

Webhook üzerinden akan tüm gelen ve giden WhatsApp mesajları burada listelenir.

2. Çizgili Alt Çizge Modu (variant="underline")

Genel bakış sayfasında sistem durumu, RAM ve canlı metrikler görüntülenir.

3. Buton Grubu Modu (variant="button")

2026 Yılı 1. Çeyrek Dönem Hedefleri

4. Modern Navigasyon Modu (variant="nav" veya variant="primary-pills")

Schedule & Takvim Paneli

Primary mavi aktif durum, kurumsal standart rounded-sm köşe radiusu ve sağ badge desteği.

Tabs Kullanım Örneği (Kopyalanabilir JSX):
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/Tabs';
import { Badge } from '@/components/ui/Badge';

{/* Standart Kapsül Modu */}
<Tabs defaultValue="all" variant="pills">
  <TabsList>
    <TabsTrigger value="all">Tüm Mesajlar</TabsTrigger>
    <TabsTrigger value="individual">Bireysel</TabsTrigger>
  </TabsList>
</Tabs>

{/* Modern Navigasyon & Badge Desteği */}
<Tabs defaultValue="schedule" variant="nav">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="tasks" badge={3}>Tasks</TabsTrigger>
    <TabsTrigger value="schedule" badge={<Badge size="xs" variant="warning">Canlı</Badge>}>Schedule</TabsTrigger>
    <TabsTrigger value="objectives" icon={<Target size={14} />} badge={5}>Hedeflerim</TabsTrigger>
  </TabsList>
</Tabs>
9

9. Satıriçi Bildirim Panoları (<Alert />)

Uygulama genelinde standartlaştırılmış inline (satıriçi) durum, bilgilendirme ve kritik uyarı panoları

Alert Kullanım Örneği (Kopyalanabilir JSX):
import { Alert } from '@/components/ui/Alert';

// Bilgi Panosu (Blue)
<Alert
  variant="primary"
  title="Bilgilendirme Panosu"
  description="KR ağırlığı opsiyoneldir. Boş bırakırsanız ağırlıksız eşit dağılım kabul edilir."
/>

// Kritik İhlal Uyarısı (Rose)
<Alert
  variant="danger"
  title="Kritik İhlal"
  description="Ağırlıklar toplamı %100'ü geçemez."
/>
11

11. Modallar & İletişim Pencereleri (<Modal /> & <ConfirmModal />)

Formlar, ayarlar, zengin içerikler için standart genel Modal bileşeni ve kritik işlem onayları için ConfirmModal

1. Standart Genel Modal (<Modal />)

Portal tabanlı, Esc ve arka plan tıklama dinlemeli, responsive boyutlandırma (sm, md, lg, xl, 2xl, 5xl, full).

Portal (z-[999])
Farklı Boyut ve Varyantlarda Canlı Modal Önizlemesi:
Modal Kullanım Örneği (Kopyalanabilir JSX):
import { Modal } from '@/components/ui/Modal';
import { Button } from '@/components/ui/Button';

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Yeni Hedef Oluştur"
  subtitle="Dönemsel stratejik veya bireysel hedef tanımı yapın"
  size="xl" // 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '5xl' | 'full'
  footer={
    <>
      <Button variant="outline" size="sm" onClick={() => setIsOpen(false)}>
        İptal
      </Button>
      <Button variant="primary" size="sm" onClick={handleSave}>
        Kaydet
      </Button>
    </>
  }
>
  <div className="space-y-4">
    {/* Form Alanları */}
  </div>
</Modal>

2. Onay ve Uyarı Modal Kutusu (<ConfirmModal />)

Kullanıcı eylemlerini doğrulama (silme, bağlantı koparma) ve tek butonlu uyarı/hata diyalogları.

Hızlı Teyit / Alert
Canlı Etkileşimli ConfirmModal Test Butonları:
ConfirmModal Kullanım Örneği (Kopyalanabilir JSX):
import { ConfirmModal, type ConfirmModalData } from '@/components/ui/ConfirmModal';

const [confirmModalData, setConfirmModalData] = useState<ConfirmModalData | null>(null);

// 1. Tek Butonlu İhlal/Uyarı Diyaloğu (Single Button Alert)
setConfirmModalData({
  title: 'Ağırlık Sınırı Aşıldı',
  message: "Bir hedefe ait KR ağırlıklarının toplamı %100'ü geçemez.",
  variant: 'danger',
  hideCancel: true,
  confirmText: 'Tamam',
});

// 2. İki Butonlu Silme/Onay Diyaloğu (Two Button Confirm)
setConfirmModalData({
  title: 'Kilit Sonucu Sil',
  message: 'Bu kilit sonucu silmek istediğinize emin misiniz?',
  variant: 'danger',
  confirmText: 'Evet, Sil',
  cancelText: 'Vazgeç',
  onConfirm: async () => {
    await deleteKeyResult(id);
  },
});

// JSX Çıktısı (Sayfa En Altında Tek Bir Kez Render Edilir)
<ConfirmModal
  isOpen={Boolean(confirmModalData)}
  data={confirmModalData}
/>
12

12. Anlık Bildirim Mesajları (Sonner Toast)

Giriş ekranında, form kayıtlarında ve hızlı eylemlerde canlı bildirim sunan toast bildirim sistemi

Canlı Bildirim Test Butonları:
Sonner Toast Kullanım Örneği (Kopyalanabilir JSX):
import { toast, Toaster } from 'sonner';

// Sayfada Toaster konteynırı:
<Toaster position="top-center" richColors />

// Tetikleme Kodları:
toast.success('Giriş başarılı! Yönlendiriliyorsunuz…');
toast.error('Geçersiz kimlik bilgileri!');
toast.info('Finans Müdürü bilgileri otomatik dolduruldu');
13

13. İkon Kütüphanesi & Standartlar (lucide-react)

v0.400+ (Vektörel & Crisp)

Projemizde ham emoji kullanımı KESİNLİKLE YASAKTIR. Tüm ikonlar lucide-react kütüphanesinden tip-güvenli (type-safe) ve renkli SVG olarak kullanılır.

Standart Import Kullanımı:
import { Target, Zap, Eye, CheckCircle, AlertTriangle, Sparkles, Plus, Trash2, Edit2, RotateCcw, Link as LinkIcon, Inbox } from 'lucide-react';
1. Webhook & İletişim İkonları
Target (Hedef/Objective)
<Target />
Zap (İlerlemeyi Besler)
<Zap className="fill-yellow-400" />
Eye (İzleme Modu)
<Eye />
Sparkles (Yapay Zeka / AI)
<Sparkles />
Link (Hizalama Bağımlılığı)
<LinkIcon />
2. Durum & Bildirim İkonları
CheckCircle (Tamamlandı)
<CheckCircle />
AlertTriangle (Limit İhlali / Risk)
<AlertTriangle />
Inbox (Gelen Kutusu / Onay)
<Inbox />
Shield (Güvenlik / Rol)
<Shield />
3. Aksiyon & Yönetim İkonları
Plus (Yeni Ekle)
<Plus />
Edit2 (Düzenle)
<Edit2 />
Trash2 (Sil)
<Trash2 />
RotateCcw (Yeniden Gönder)
<RotateCcw />
14

14. Veri Tablosu Bileşeni (DataTable)

Arama, sıralama, pagination, aksiyon butonları ve özelleştirilebilir sütun mimarisine sahip genel veri tablosu bileşeni

Örnek Personel Listesi

Sistemdeki kayıtlı birim yöneticileri ve uzmanlar

Personel Adı
Departman
Durum
KR Sayısı
Ahmet Gündüz
Kurum Başkanı
Kurum BaşkanlığıACTIVE4 KR
Fırat Demir
BT Müdürü
Bilgi TeknolojileriACTIVE6 KR
Mehmet Uygar
Yazılım Uzmanı
Yazılım GeliştirmeACTIVE3 KR
Zeynep Kurt
Süreç Uzmanı
Kalite ve SüreçDRAFT2 KR
Elif Şahin
İnfra Uzmanı
Sistem ve AğCLOSED5 KR
·1-5 / Toplam 5 kayıt (Sayfa 1/1)
15

15. Portal Tooltip (Body Embed)

Overflow-x-auto, overflow-hidden veya kart z-index sınırlarına takılmaksızın doğrudan document.body katmanına Portal olarak bind edilen yüksek performanslı Tooltip bileşeni.

Aşağıdaki rozetlerin üzerine gelerek Body Portal Tooltip balonunun overflow engellerini nasıl aştığını test edebilirsiniz:
3 Alt Hedef (Hover Me)
⚡ 2 Bağlı Birim
16

16. Switch & Segmented Control (İkili / Çoklu Pill Toggle)

İki veya daha fazla seçenekli filtrelerde kullanılan toggle bileşenleri. Standart kutu (variant='default') ve Oval kapsül (variant='pill' - Bütçe Durumu stili) varyantları mevcuttur.

Default Boyut (32px) — variant="primary"

Oval Kapsül Varyantı — variant="pill" (Bütçe Durumu Stili)

Çoklu Seçenekli Kapsül — <SegmentedControl /> (Bütçe Kartı Tam Varyantı)

Seçili Değer: asim

Small Boyut (26px) — Input & Button xs ile uyumlu

Input & Switch Yan Yana (26px hizalama)

17

17. Form Elemanları Boyut Standartları (Design System SSOT)

Tüm Button, Input, Select, Switch ve SegmentedControl bileşenlerinin bağlı olduğu merkezi UI_SIZE_CONFIGS (src/config/uiSizes.ts) boyut haritası ve canlı hizalama örnekleri.

size="xs"26px (Compact / Sub-row)
size="sm"28px (Small / Table Action)
size="default"32px (Standard / Form Default)
size="lg"36px (Large / Header Action)
size="xl"40px (Extra Large / Hero Form)
18

18. Dropdown Menü (Açılır Menü)

Global kullanıma uygun, bildirimler veya kullanıcı ayarları için kullanılabilen portal tabanlı dropdown bileşeni.

Bu bileşen, içindeki children kısmını absolute pozisyonlanmış bir kutu olarak Portal (document.body) içerisinde render eder. Sağ veya sol hizalama destekler. Esc ile veya dışarı tıklanınca kapanır.

19

19. Sihirbaz & Stepper (Wizard)

Çok adımlı formlar, görüşme süreçleri ve iş akışları için standart, duyarlı ve adımlar arası ayırıcı (divider) çizgili stepper bileşeni.

Canlı İnteraktif Önizleme

Aktif Adım: Adım 1

1. Adım içeriği: Gündem maddeleri listesi ve soru seçimi.

Kullanım Örneği

import { Wizard, WizardStep, WizardDivider } from '@/components/ui/Wizard';

const [currentStep, setCurrentStep] = useState(1);

<Wizard value={currentStep} onValueChange={setCurrentStep}>
  <WizardStep
    step={1}
    title="Gündem"
    description="Bugün ne konuşacağız?"
  />
  <WizardDivider />
  <WizardStep
    step={2}
    title="Aksiyonlar"
    description="Ne Kararlaştıracağız?"
    disabled={!isStep1Completed}
    disabledTitle="Önce 1. adımı tamamlayın"
  />
  <WizardDivider />
  <WizardStep
    step={3}
    title="Notlar"
    description="Görüşme Tutanak Özeti"
    disabled={!isStep1Completed}
  />
</Wizard>