# FikoYT Finans - Usage Examples

Complete examples showing how to use all services and directives together.

## Example 1: Voice-Controlled Expense Entry with Celebration

```typescript
import { Component, inject, effect, signal } from '@angular/core';
import { AnimatedNumberDirective } from './finans/directives';
import { SesKomutService, KutlamaService, FinansService } from './finans/servisler';

@Component({
  selector: 'app-voice-expense',
  standalone: true,
  imports: [AnimatedNumberDirective],
  template: `
    <div class="voice-input-card">
      <h2>Sesli Kayıt Ekle</h2>

      <div class="balance-display">
        <p>Güncel Bakiye</p>
        <h1
          [animatedNumber]="bakiye()"
          [animatedDuration]="800"
          [animatedPrefix]="'₺'"
          [animatedDecimals]="2">
        </h1>
      </div>

      <button
        class="voice-button"
        (click)="sesKayitBaslat()"
        [disabled]="!sesServis.destekleniyor() || sesServis.dinleniyor()">
        @if (sesServis.dinleniyor()) {
          <span>🎤 Dinleniyor...</span>
        } @else {
          <span>🎙️ Sesle Ekle</span>
        }
      </button>

      @if (sesServis.sonMetin()) {
        <div class="recognized-text">
          <p><strong>Tanınan Metin:</strong></p>
          <p>"{{ sesServis.sonMetin() }}"</p>
        </div>
      }

      @if (sesServis.hata()) {
        <div class="error-message">
          {{ sesServis.hata() }}
        </div>
      }

      <div class="examples">
        <p><strong>Örnek Komutlar:</strong></p>
        <ul>
          <li>"100 lira market harcaması ekle"</li>
          <li>"2500 lira maaş gelir ekle"</li>
          <li>"bakiyem ne"</li>
        </ul>
      </div>
    </div>
  `,
  styles: [`
    .voice-input-card {
      max-width: 500px;
      margin: 20px auto;
      padding: 24px;
      border-radius: 12px;
      background: white;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .balance-display {
      text-align: center;
      margin: 24px 0;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 8px;
      color: white;
    }

    .balance-display h1 {
      margin: 8px 0 0 0;
      font-size: 48px;
      font-weight: bold;
    }

    .voice-button {
      width: 100%;
      padding: 16px;
      font-size: 18px;
      border: none;
      border-radius: 8px;
      background: #52c41a;
      color: white;
      cursor: pointer;
      transition: all 0.3s;
    }

    .voice-button:hover:not(:disabled) {
      background: #73d13d;
      transform: translateY(-2px);
    }

    .voice-button:disabled {
      background: #d9d9d9;
      cursor: not-allowed;
    }

    .recognized-text {
      margin-top: 16px;
      padding: 12px;
      background: #e6f7ff;
      border-left: 3px solid #1890ff;
      border-radius: 4px;
    }

    .error-message {
      margin-top: 16px;
      padding: 12px;
      background: #fff1f0;
      border-left: 3px solid #ff4d4f;
      border-radius: 4px;
      color: #ff4d4f;
    }

    .examples {
      margin-top: 24px;
      padding: 16px;
      background: #f5f5f5;
      border-radius: 8px;
    }

    .examples ul {
      margin: 8px 0 0 0;
      padding-left: 20px;
    }
  `]
})
export class VoiceExpenseComponent {
  sesServis = inject(SesKomutService);
  kutlamaServis = inject(KutlamaService);
  finansServis = inject(FinansService);

  bakiye = signal(5000);

  constructor() {
    // Listen for voice commands
    effect(() => {
      const metin = this.sesServis.sonMetin();
      if (!metin) return;

      const komut = this.sesServis.metniAyristir(metin);
      if (!komut) {
        console.error('Komut anlaşılamadı');
        return;
      }

      this.komutIsle(komut);
    });
  }

  sesKayitBaslat() {
    this.sesServis.dinlemeyeBasla();
  }

  async komutIsle(komut: any) {
    if (komut.tip === 'kayit-ekle') {
      // Add expense/income record
      const yeniKayit = {
        tarih: new Date().toISOString(),
        tip: komut.kayitTipi,
        tutar: komut.tutar,
        kategori: komut.kategoriAd,
        aciklama: `Sesli komut ile eklendi: ${this.sesServis.sonMetin()}`
      };

      // Update balance
      if (komut.kayitTipi === 'GELIR') {
        this.bakiye.update(b => b + komut.tutar);
        this.kutlamaServis.tasarrufBasarisi();
      } else {
        this.bakiye.update(b => b - komut.tutar);
      }

      console.log('Yeni kayıt eklendi:', yeniKayit);

      // Celebrate first record
      const mevcutKayitlar = 0; // Get from finansServis
      if (mevcutKayitlar === 0) {
        this.kutlamaServis.ilkKayit();
      }
    } else if (komut.tip === 'sorgula') {
      // Handle query commands
      if (komut.komut === 'bakiye-sorgula') {
        // Show balance (already displayed)
        console.log('Güncel bakiye:', this.bakiye());
      }
    }
  }
}
```

---

## Example 2: Currency Converter Dashboard

```typescript
import { Component, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AnimatedNumberDirective } from './finans/directives';
import { DovizKuruService } from './finans/servisler';
import { DecimalPipe, DatePipe } from '@angular/common';

@Component({
  selector: 'app-currency-dashboard',
  standalone: true,
  imports: [FormsModule, AnimatedNumberDirective, DecimalPipe, DatePipe],
  template: `
    <div class="currency-dashboard">
      <h2>Döviz Kuru Dönüştürücü</h2>

      @if (dovizServis.yukleniyor()) {
        <div class="loading">Kurlar yükleniyor...</div>
      }

      <div class="exchange-rates">
        <h3>Güncel Kurlar</h3>
        <p class="update-time">
          Son güncelleme: {{ dovizServis.sonGuncelleme() | date:'short':'tr' }}
        </p>

        <div class="rates-grid">
          @for (doviz of dovizServis.dovizKodlari(); track doviz) {
            @if (doviz !== 'TRY') {
              <div class="rate-card">
                <span class="currency-code">{{ doviz }}</span>
                <span
                  class="rate-value"
                  [animatedNumber]="dovizServis.kurGetir(doviz) || 0"
                  [animatedDuration]="600"
                  [animatedPrefix]="'₺'"
                  [animatedDecimals]="2">
                </span>
              </div>
            }
          }
        </div>

        <button (click)="dovizServis.kurlariGuncelle()" class="refresh-btn">
          🔄 Kurları Yenile
        </button>
      </div>

      <div class="converter">
        <h3>Döviz Çevirici</h3>

        <div class="converter-form">
          <div class="input-group">
            <label>Tutar:</label>
            <input
              type="number"
              [(ngModel)]="cevirilecekTutar"
              (ngModelChange)="cevir()"
              placeholder="0.00">
          </div>

          <div class="input-group">
            <label>Kaynak:</label>
            <select [(ngModel)]="kaynakDoviz" (ngModelChange)="cevir()">
              @for (doviz of dovizServis.dovizKodlari(); track doviz) {
                <option [value]="doviz">{{ doviz }}</option>
              }
            </select>
          </div>

          <div class="input-group">
            <label>Hedef:</label>
            <select [(ngModel)]="hedefDoviz" (ngModelChange)="cevir()">
              @for (doviz of dovizServis.dovizKodlari(); track doviz) {
                <option [value]="doviz">{{ doviz }}</option>
              }
            </select>
          </div>
        </div>

        <div class="result">
          <p>Sonuç:</p>
          <h1
            [animatedNumber]="sonuc()"
            [animatedDuration]="400"
            [animatedDecimals]="2">
          </h1>
          <p class="result-currency">{{ hedefDoviz }}</p>
        </div>
      </div>

      @if (dovizServis.hata()) {
        <div class="error">{{ dovizServis.hata() }}</div>
      }
    </div>
  `,
  styles: [`
    .currency-dashboard {
      max-width: 900px;
      margin: 20px auto;
      padding: 24px;
    }

    .exchange-rates {
      background: white;
      padding: 24px;
      border-radius: 12px;
      margin-bottom: 24px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .rates-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 16px;
      margin: 16px 0;
    }

    .rate-card {
      display: flex;
      flex-direction: column;
      padding: 16px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 8px;
      color: white;
      text-align: center;
    }

    .currency-code {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .rate-value {
      font-size: 24px;
    }

    .converter {
      background: white;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .converter-form {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }

    .input-group {
      display: flex;
      flex-direction: column;
    }

    .input-group label {
      margin-bottom: 8px;
      font-weight: 500;
    }

    .input-group input,
    .input-group select {
      padding: 12px;
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      font-size: 16px;
    }

    .result {
      text-align: center;
      padding: 24px;
      background: #f0f2f5;
      border-radius: 8px;
    }

    .result h1 {
      font-size: 48px;
      margin: 8px 0;
      color: #52c41a;
    }

    .refresh-btn {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 6px;
      background: #1890ff;
      color: white;
      cursor: pointer;
      margin-top: 16px;
    }

    .loading, .error {
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 16px;
      text-align: center;
    }

    .loading {
      background: #e6f7ff;
      color: #1890ff;
    }

    .error {
      background: #fff1f0;
      color: #ff4d4f;
    }
  `]
})
export class CurrencyDashboardComponent {
  dovizServis = inject(DovizKuruService);

  cevirilecekTutar = 100;
  kaynakDoviz = 'USD';
  hedefDoviz = 'TRY';
  sonuc = signal(0);

  ngOnInit() {
    this.cevir();
  }

  cevir() {
    const cevrilen = this.dovizServis.donustur(
      this.cevirilecekTutar,
      this.kaynakDoviz,
      this.hedefDoviz
    );
    this.sonuc.set(cevrilen);
  }
}
```

---

## Example 3: Receipt Scanner with Auto-Entry

```typescript
import { Component, inject, signal } from '@angular/core';
import { CurrencyPipe, DatePipe } from '@angular/common';
import { FisTaramaService, KutlamaService } from './finans/servisler';

@Component({
  selector: 'app-receipt-scanner',
  standalone: true,
  imports: [CurrencyPipe, DatePipe],
  template: `
    <div class="scanner-container">
      <h2>📸 Fiş Tarayıcı</h2>

      <div class="action-buttons">
        <button class="camera-btn" (click)="kameradanTara()">
          📷 Kamera ile Tara
        </button>

        <label class="file-btn">
          📁 Dosya Seç
          <input
            type="file"
            accept="image/*"
            (change)="dosyadanTara($event)"
            style="display: none;">
        </label>
      </div>

      @if (taramaServis.taraniyor()) {
        <div class="scanning-progress">
          <div class="progress-bar">
            <div
              class="progress-fill"
              [style.width.%]="taramaServis.ilerleme()">
            </div>
          </div>
          <p>Taranıyor... %{{ taramaServis.ilerleme() }}</p>
        </div>
      }

      @if (taramaServis.sonuc(); as sonuc) {
        <div class="result-card">
          <h3>✅ Tarama Tamamlandı</h3>

          <div class="result-details">
            @if (sonuc.magazaAdi) {
              <div class="detail-item">
                <span class="label">Mağaza:</span>
                <span class="value">{{ sonuc.magazaAdi }}</span>
              </div>
            }

            @if (sonuc.tutar !== null) {
              <div class="detail-item highlight">
                <span class="label">Tutar:</span>
                <span class="value">{{ sonuc.tutar | currency:'TRY':'symbol':'1.2-2' }}</span>
              </div>
            }

            @if (sonuc.tarih) {
              <div class="detail-item">
                <span class="label">Tarih:</span>
                <span class="value">{{ sonuc.tarih }}</span>
              </div>
            }
          </div>

          <details class="ocr-text">
            <summary>Tam Metin</summary>
            <pre>{{ sonuc.metin }}</pre>
          </details>

          <button
            class="add-expense-btn"
            (click)="kayitEkle(sonuc)"
            [disabled]="sonuc.tutar === null">
            ✚ Gider Olarak Ekle
          </button>
        </div>
      }

      @if (taramaServis.hata()) {
        <div class="error-message">
          ⚠️ {{ taramaServis.hata() }}
        </div>
      }

      @if (eklenenKayit()) {
        <div class="success-message">
          ✓ Kayıt başarıyla eklendi!
        </div>
      }
    </div>
  `,
  styles: [`
    .scanner-container {
      max-width: 600px;
      margin: 20px auto;
      padding: 24px;
    }

    .action-buttons {
      display: flex;
      gap: 16px;
      margin: 24px 0;
    }

    .camera-btn, .file-btn {
      flex: 1;
      padding: 16px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;
      text-align: center;
    }

    .camera-btn {
      background: #1890ff;
      color: white;
    }

    .file-btn {
      background: #52c41a;
      color: white;
      display: block;
    }

    .camera-btn:hover {
      background: #40a9ff;
      transform: translateY(-2px);
    }

    .file-btn:hover {
      background: #73d13d;
      transform: translateY(-2px);
    }

    .scanning-progress {
      margin: 24px 0;
      text-align: center;
    }

    .progress-bar {
      width: 100%;
      height: 8px;
      background: #f0f0f0;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #1890ff, #52c41a);
      transition: width 0.3s;
    }

    .result-card {
      background: white;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin: 24px 0;
    }

    .result-details {
      margin: 16px 0;
    }

    .detail-item {
      display: flex;
      justify-content: space-between;
      padding: 12px;
      border-bottom: 1px solid #f0f0f0;
    }

    .detail-item.highlight {
      background: #f6ffed;
      border-left: 3px solid #52c41a;
    }

    .label {
      font-weight: 500;
      color: #8c8c8c;
    }

    .value {
      font-weight: 600;
      color: #262626;
    }

    .ocr-text {
      margin: 16px 0;
      padding: 12px;
      background: #fafafa;
      border-radius: 6px;
    }

    .ocr-text pre {
      margin-top: 8px;
      white-space: pre-wrap;
      font-size: 12px;
      color: #595959;
    }

    .add-expense-btn {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: 8px;
      background: #52c41a;
      color: white;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
    }

    .add-expense-btn:hover:not(:disabled) {
      background: #73d13d;
      transform: translateY(-2px);
    }

    .add-expense-btn:disabled {
      background: #d9d9d9;
      cursor: not-allowed;
    }

    .error-message {
      padding: 16px;
      background: #fff1f0;
      border-left: 3px solid #ff4d4f;
      border-radius: 6px;
      color: #ff4d4f;
      margin: 16px 0;
    }

    .success-message {
      padding: 16px;
      background: #f6ffed;
      border-left: 3px solid #52c41a;
      border-radius: 6px;
      color: #52c41a;
      margin: 16px 0;
      animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  `]
})
export class ReceiptScannerComponent {
  taramaServis = inject(FisTaramaService);
  kutlamaServis = inject(KutlamaService);

  eklenenKayit = signal(false);

  async kameradanTara() {
    try {
      this.eklenenKayit.set(false);
      const imageDataUrl = await this.taramaServis.kameradanYakala();
      await this.taramaServis.fisTara(imageDataUrl);
    } catch (error: any) {
      console.error('Kamera hatası:', error);
    }
  }

  async dosyadanTara(event: Event) {
    this.eklenenKayit.set(false);
    const input = event.target as HTMLInputElement;
    const file = input.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = async (e) => {
      const imageDataUrl = e.target?.result as string;
      await this.taramaServis.fisTara(imageDataUrl);
    };
    reader.readAsDataURL(file);

    // Reset input
    input.value = '';
  }

  kayitEkle(sonuc: any) {
    // Add expense record to database
    const yeniKayit = {
      tarih: sonuc.tarih || new Date().toISOString(),
      tip: 'GIDER',
      tutar: sonuc.tutar,
      kategori: 'market', // Could be auto-detected from magazaAdi
      aciklama: sonuc.magazaAdi ? `Fiş: ${sonuc.magazaAdi}` : 'Fiş taraması',
      fisMetni: sonuc.metin
    };

    console.log('Kayıt eklendi:', yeniKayit);

    // Show success
    this.eklenenKayit.set(true);

    // Celebrate
    setTimeout(() => {
      this.kutlamaServis.tasarrufBasarisi();
    }, 300);

    // Clear after 3 seconds
    setTimeout(() => {
      this.eklenenKayit.set(false);
    }, 3000);
  }
}
```

---

## Example 4: Complete Finance Dashboard

Combines all services into a comprehensive dashboard:

```typescript
import { Component, inject, signal, effect } from '@angular/core';
import { AnimatedNumberDirective } from './finans/directives';
import {
  SesKomutService,
  KutlamaService,
  DovizKuruService,
  FisTaramaService
} from './finans/servisler';

@Component({
  selector: 'app-complete-dashboard',
  standalone: true,
  imports: [AnimatedNumberDirective],
  template: `
    <div class="dashboard">
      <!-- Header with balance -->
      <header class="dashboard-header">
        <h1>FikoYT Finans</h1>
        <div class="balance-widget">
          <span
            [animatedNumber]="bakiye()"
            [animatedDuration]="800"
            [animatedPrefix]="'₺'"
            [animatedDecimals]="2">
          </span>
        </div>
      </header>

      <!-- Quick actions -->
      <div class="quick-actions">
        <button (click)="sesKayit()" [disabled]="!sesServis.destekleniyor()">
          🎤 Sesli Ekle
        </button>
        <button (click)="fisTara()">
          📷 Fiş Tara
        </button>
        <button (click)="kutlamaGoster()">
          🎉 Kutla
        </button>
      </div>

      <!-- Exchange rates ticker -->
      <div class="exchange-ticker">
        @for (doviz of ['USD', 'EUR', 'GBP']; track doviz) {
          <div class="ticker-item">
            <span class="ticker-label">{{ doviz }}:</span>
            <span
              [animatedNumber]="dovizServis.kurGetir(doviz) || 0"
              [animatedDecimals]="2"
              [animatedPrefix]="'₺'">
            </span>
          </div>
        }
      </div>

      <!-- Status messages -->
      @if (mesaj()) {
        <div class="status-message">{{ mesaj() }}</div>
      }
    </div>
  `
})
export class CompleteDashboardComponent {
  sesServis = inject(SesKomutService);
  kutlamaServis = inject(KutlamaService);
  dovizServis = inject(DovizKuruService);
  taramaServis = inject(FisTaramaService);

  bakiye = signal(10000);
  mesaj = signal('');

  constructor() {
    // Auto-update currency rates every 5 minutes
    setInterval(() => {
      this.dovizServis.kurlariGuncelle();
    }, 5 * 60 * 1000);
  }

  sesKayit() {
    this.sesServis.dinlemeyeBasla();
  }

  async fisTara() {
    try {
      const dataUrl = await this.taramaServis.kameradanYakala();
      await this.taramaServis.fisTara(dataUrl);
      this.mesaj.set('Fiş taraması tamamlandı!');
    } catch (error) {
      this.mesaj.set('Fiş tarama hatası');
    }
  }

  kutlamaGoster() {
    this.kutlamaServis.netDegerRekor();
  }
}
```

---

## Notes

- All examples use Angular 20 standalone components
- Uses `inject()` pattern instead of constructor injection
- Signals used throughout (no Observables)
- TypeScript configured with `strict: false`
- All services auto-inject with `providedIn: 'root'`