elevenlabs-webhook-nodejs 1.0.0

package/web/src/pages/AppointmentValidationNew.tsx

@@ -0,0 +1,1005 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import * as XLSX from 'xlsx';
+import api from '@/lib/api';
+import { PageHeader } from '@/components/page-header';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Badge } from '@/components/ui/badge';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { Checkbox } from '@/components/ui/checkbox';
+import { toast } from 'sonner';
+import {
+  Loader2Icon, UploadIcon, ArrowLeftIcon, ArrowRightIcon, CheckIcon,
+  AlertTriangleIcon, FileSpreadsheetIcon, XIcon, CopyIcon, EyeIcon,
+  CheckCircle2Icon, XCircleIcon, InfoIcon, ClipboardPasteIcon,
+} from 'lucide-react';
+
+type FieldKey = 'patient_name' | 'patient_phone' | 'appointment_date' | 'appointment_time' | 'doctor_name' | 'department' | 'notes' | 'external_id';
+
+interface FieldDef {
+  key: FieldKey;
+  label: string;
+  required: boolean;
+  hint: string;
+  validate?: (v: string) => boolean;
+}
+
+interface RowValidation {
+  rowIndex: number;
+  errors: string[];
+  warnings: string[];
+}
+
+// ─── Field Definitions ──────────────────────────────────────
+
+const ALL_FIELDS: FieldDef[] = [
+  { key: 'patient_name', label: 'Hasta Adi', required: true, hint: 'Ad Soyad', validate: v => v.length >= 2 },
+  { key: 'patient_phone', label: 'Telefon', required: true, hint: '+905xx veya 05xx', validate: v => v.replace(/[^+\d]/g, '').length >= 10 },
+  { key: 'appointment_date', label: 'Randevu Tarihi', required: true, hint: 'YYYY-MM-DD veya GG.AA.YYYY', validate: v => /\d/.test(v) },
+  { key: 'appointment_time', label: 'Randevu Saati', required: true, hint: 'HH:MM', validate: v => /\d/.test(v) },
+  { key: 'doctor_name', label: 'Doktor', required: false, hint: 'Dr. Ad Soyad' },
+  { key: 'department', label: 'Bolum', required: false, hint: 'Poliklinik / Birim' },
+  { key: 'notes', label: 'Not', required: false, hint: 'Ek bilgi' },
+  { key: 'external_id', label: 'Harici ID', required: false, hint: 'Randevu no / HBS kodu' },
+];
+
+const REQUIRED_FIELDS = ALL_FIELDS.filter(f => f.required);
+const OPTIONAL_FIELDS = ALL_FIELDS.filter(f => !f.required);
+
+// ─── Auto-detect patterns (partial + fuzzy) ─────────────────
+
+const AUTO_PATTERNS: { pattern: RegExp; field: FieldKey }[] = [
+  { pattern: /^(hasta\s*a[dı]|ad\s*soyad|patient\s*name|isim|name|ad[ıi]?\s*soyad[ıi]?)$/i, field: 'patient_name' },
+  { pattern: /(telefon|phone|tel|numara|gsm|cep|mobil|mobile)/i, field: 'patient_phone' },
+  { pattern: /(randevu\s*tarih|appointment\s*date|tarih|date|gun)/i, field: 'appointment_date' },
+  { pattern: /(randevu\s*saat|appointment\s*time|saat|time|zaman)/i, field: 'appointment_time' },
+  { pattern: /(doktor|doctor|dr\b|hekim|uzman)/i, field: 'doctor_name' },
+  { pattern: /(bol[uü]m|department|birim|poliklinik|klinik|servis)/i, field: 'department' },
+  { pattern: /^(not|notes?|a[cç][ıi]klama|bilgi|memo|yorum)$/i, field: 'notes' },
+  { pattern: /(randevu.*(no|id|kod)|appointment.*(id|no|code)|harici.*id|external.*id|hbs|protokol|id)/i, field: 'external_id' },
+];
+
+function autoDetectMapping(headers: string[]): Partial<Record<FieldKey, string>> {
+  const result: Partial<Record<FieldKey, string>> = {};
+  const used = new Set<string>();
+
+  for (const { pattern, field } of AUTO_PATTERNS) {
+    if (result[field]) continue;
+    const match = headers.find(h => pattern.test(h.trim()) && !used.has(h));
+    if (match) {
+      result[field] = match;
+      used.add(match);
+    }
+  }
+  return result;
+}
+
+// ─── Excel date/time normalization ──────────────────────────
+
+function normalizeDate(raw: string): string {
+  if (!raw) return '';
+  // Already YYYY-MM-DD
+  if (/^\d{4}-\d{2}-\d{2}$/.test(raw)) return raw;
+
+  // DD.MM.YYYY or DD/MM/YYYY
+  const dmy = raw.match(/^(\d{1,2})[./](\d{1,2})[./](\d{4})$/);
+  if (dmy) return `${dmy[3]}-${dmy[2].padStart(2, '0')}-${dmy[1].padStart(2, '0')}`;
+
+  // MM/DD/YYYY (US format)
+  const mdy = raw.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+  if (mdy) {
+    const m = parseInt(mdy[1]), d = parseInt(mdy[2]);
+    if (m > 12) return `${mdy[3]}-${String(d).padStart(2, '0')}-${String(m).padStart(2, '0')}`;
+    return `${mdy[3]}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+  }
+
+  // Excel serial number (e.g. 45366)
+  const serial = parseFloat(raw);
+  if (!isNaN(serial) && serial > 30000 && serial < 100000) {
+    const d = XLSX.SSF.parse_date_code(serial);
+    if (d) return `${d.y}-${String(d.m).padStart(2, '0')}-${String(d.d).padStart(2, '0')}`;
+  }
+
+  return raw;
+}
+
+function normalizeTime(raw: string): string {
+  if (!raw) return '';
+  // Already HH:MM or HH:MM:SS
+  if (/^\d{1,2}:\d{2}(:\d{2})?$/.test(raw)) return raw.substring(0, 5);
+
+  // Excel serial fraction (0.0–1.0 = 00:00–24:00)
+  const frac = parseFloat(raw);
+  if (!isNaN(frac) && frac >= 0 && frac < 1) {
+    const totalMins = Math.round(frac * 24 * 60);
+    const h = Math.floor(totalMins / 60);
+    const m = totalMins % 60;
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+  }
+
+  // "10.30" → "10:30"
+  const dotTime = raw.match(/^(\d{1,2})\.(\d{2})$/);
+  if (dotTime) return `${dotTime[1].padStart(2, '0')}:${dotTime[2]}`;
+
+  return raw;
+}
+
+function normalizePhone(raw: string): string {
+  if (!raw) return '';
+  let cleaned = raw.replace(/[\s\-().]/g, '');
+  // Turkish local number starting with 0
+  if (/^0[5]\d{9}$/.test(cleaned)) cleaned = '+9' + cleaned;
+  // 10-digit Turkish number without prefix
+  else if (/^5\d{9}$/.test(cleaned)) cleaned = '+90' + cleaned;
+  // Already has +
+  else if (!cleaned.startsWith('+') && cleaned.length >= 10) cleaned = '+' + cleaned;
+  return cleaned;
+}
+
+// ─── Component ──────────────────────────────────────────────
+
+export default function AppointmentValidationNew() {
+  const navigate = useNavigate();
+  const [step, setStep] = useState(1);
+  const dropRef = useRef<HTMLDivElement>(null);
+  const [dragOver, setDragOver] = useState(false);
+  const [inputMode, setInputMode] = useState<'file' | 'paste'>('file');
+  const [pasteText, setPasteText] = useState('');
+
+  // Step 1 state
+  const [callDate, setCallDate] = useState(new Date().toISOString().split('T')[0]);
+  const [callStartTime, setCallStartTime] = useState('09:00');
+  const [callEndTime, setCallEndTime] = useState('18:00');
+  const [maxRetries, setMaxRetries] = useState(2);
+  const [fileName, setFileName] = useState('');
+  const [fileSize, setFileSize] = useState(0);
+  const [sheetNames, setSheetNames] = useState<string[]>([]);
+  const [selectedSheet, setSelectedSheet] = useState('');
+  const [workbook, setWorkbook] = useState<XLSX.WorkBook | null>(null);
+  const [columns, setColumns] = useState<string[]>([]);
+  const [rows, setRows] = useState<string[][]>([]);
+  const [batchName, setBatchName] = useState('');
+
+  // Step 2 state
+  const [mapping, setMapping] = useState<Partial<Record<FieldKey, string>>>({});
+  const [previewColumn, setPreviewColumn] = useState<string | null>(null);
+  const [skipEmptyRows, setSkipEmptyRows] = useState(true);
+
+  // Step 3 state
+  const [submitting, setSubmitting] = useState(false);
+
+  // ─── File Parsing ───────────────────────────────────────────
+
+  function parseFile(file: File) {
+    setFileName(file.name);
+    setFileSize(file.size);
+    const reader = new FileReader();
+    reader.onload = (evt) => {
+      try {
+        const data = new Uint8Array(evt.target?.result as ArrayBuffer);
+        const wb = XLSX.read(data, { type: 'array', cellDates: false, raw: true });
+        setWorkbook(wb);
+        setSheetNames(wb.SheetNames);
+
+        // Auto-select first sheet
+        loadSheet(wb, wb.SheetNames[0]);
+
+        if (!batchName) {
+          const datePart = new Date().toLocaleDateString('tr-TR', { day: 'numeric', month: 'long', year: 'numeric' });
+          setBatchName(`Randevu Onay - ${datePart}`);
+        }
+      } catch {
+        toast.error('Dosya okunamadi. Gecerli bir CSV veya Excel dosyasi secin.');
+      }
+    };
+    reader.readAsArrayBuffer(file);
+  }
+
+  function loadSheet(wb: XLSX.WorkBook, sheetName: string) {
+    setSelectedSheet(sheetName);
+    const ws = wb.Sheets[sheetName];
+    const jsonData = XLSX.utils.sheet_to_json<string[]>(ws, { header: 1, defval: '', raw: true });
+
+    if (jsonData.length < 2) {
+      toast.error('Sayfada yeterli veri yok (en az 1 baslik + 1 veri satiri gerekli)');
+      setColumns([]);
+      setRows([]);
+      return;
+    }
+
+    const headers = jsonData[0].map(h => String(h).trim()).filter(Boolean);
+    const dataRows = jsonData.slice(1)
+      .map(row => headers.map((_, ci) => String(row[ci] ?? '').trim()))
+      .filter(row => row.some(cell => cell !== ''));
+
+    setColumns(headers);
+    setRows(dataRows);
+    setMapping(autoDetectMapping(headers));
+
+    toast.success(`"${sheetName}" sayfasindan ${dataRows.length} satir yuklendi`);
+  }
+
+  // ─── Drag & Drop ───────────────────────────────────────────
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    const file = e.dataTransfer.files?.[0];
+    if (!file) return;
+    const ext = file.name.split('.').pop()?.toLowerCase();
+    if (!['csv', 'xlsx', 'xls'].includes(ext || '')) {
+      toast.error('Sadece CSV, XLSX, XLS dosyalari desteklenir');
+      return;
+    }
+    parseFile(file);
+  }, [batchName]);
+
+  const handleFileInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) parseFile(file);
+  }, [batchName]);
+
+  function clearFile() {
+    setFileName('');
+    setFileSize(0);
+    setWorkbook(null);
+    setSheetNames([]);
+    setSelectedSheet('');
+    setColumns([]);
+    setRows([]);
+    setMapping({});
+    setPasteText('');
+  }
+
+  function parseCsvText(text: string) {
+    const lines = text.split(/\r?\n/).map(l => l.trim()).filter(Boolean);
+    if (lines.length < 2) {
+      toast.error('En az 1 baslik + 1 veri satiri gerekli');
+      return;
+    }
+
+    // Detect delimiter: tab, semicolon, or comma
+    const firstLine = lines[0];
+    const delimiter = firstLine.includes('\t') ? '\t' : firstLine.includes(';') ? ';' : ',';
+
+    const headers = firstLine.split(delimiter).map(h => h.replace(/^"|"$/g, '').trim()).filter(Boolean);
+    const dataRows = lines.slice(1)
+      .map(line => {
+        const cells = line.split(delimiter).map(c => c.replace(/^"|"$/g, '').trim());
+        return headers.map((_, ci) => cells[ci] || '');
+      })
+      .filter(row => row.some(cell => cell !== ''));
+
+    if (dataRows.length === 0) {
+      toast.error('Veri satiri bulunamadi');
+      return;
+    }
+
+    setColumns(headers);
+    setRows(dataRows);
+    setMapping(autoDetectMapping(headers));
+    setFileName('Yapistirilan veri');
+    setFileSize(text.length);
+    setSheetNames([]);
+    setWorkbook(null);
+
+    if (!batchName) {
+      const datePart = new Date().toLocaleDateString('tr-TR', { day: 'numeric', month: 'long', year: 'numeric' });
+      setBatchName(`Randevu Onay - ${datePart}`);
+    }
+
+    toast.success(`${dataRows.length} satir yuklendi`);
+  }
+
+  // ─── Column Mapping Helpers ────────────────────────────────
+
+  function updateMapping(field: FieldKey, column: string) {
+    setMapping(prev => ({ ...prev, [field]: column === '__none__' ? undefined : column }));
+  }
+
+  function getMappedValue(row: string[], field: FieldKey): string {
+    const col = mapping[field];
+    if (!col) return '';
+    const idx = columns.indexOf(col);
+    return idx >= 0 ? (row[idx] || '') : '';
+  }
+
+  function getColumnSamples(col: string): string[] {
+    const idx = columns.indexOf(col);
+    if (idx < 0) return [];
+    return rows.slice(0, 8).map(r => r[idx]).filter(Boolean);
+  }
+
+  // Which columns are already assigned to another field
+  const assignedColumns = useMemo(() => {
+    const set = new Set<string>();
+    Object.values(mapping).forEach(v => { if (v) set.add(v); });
+    return set;
+  }, [mapping]);
+
+  // ─── Validation ────────────────────────────────────────────
+
+  const validatedRows = useMemo<RowValidation[]>(() => {
+    if (!mapping.patient_name || !mapping.patient_phone || !mapping.appointment_date || !mapping.appointment_time) return [];
+
+    return rows.map((row, i) => {
+      const errors: string[] = [];
+      const warnings: string[] = [];
+
+      const name = getMappedValue(row, 'patient_name');
+      const phone = getMappedValue(row, 'patient_phone');
+      const date = getMappedValue(row, 'appointment_date');
+      const time = getMappedValue(row, 'appointment_time');
+
+      if (!name) errors.push('Hasta adi bos');
+      if (!phone) errors.push('Telefon bos');
+      else if (normalizePhone(phone).replace(/[^+\d]/g, '').length < 10) warnings.push('Telefon gecersiz');
+      if (!date) errors.push('Tarih bos');
+      if (!time) errors.push('Saat bos');
+
+      return { rowIndex: i, errors, warnings };
+    });
+  }, [rows, mapping, columns]);
+
+  const errorCount = validatedRows.filter(r => r.errors.length > 0).length;
+  const warningCount = validatedRows.filter(r => r.warnings.length > 0 && r.errors.length === 0).length;
+  const validCount = validatedRows.filter(r => r.errors.length === 0).length;
+
+  // Duplicate phone detection
+  const duplicatePhones = useMemo(() => {
+    if (!mapping.patient_phone) return 0;
+    const phones = rows.map(r => {
+      const raw = getMappedValue(r, 'patient_phone');
+      return normalizePhone(raw);
+    }).filter(Boolean);
+    return phones.length - new Set(phones).size;
+  }, [rows, mapping, columns]);
+
+  // Effective rows (skip rows with errors if enabled)
+  const effectiveRows = useMemo(() => {
+    if (!skipEmptyRows) return rows;
+    return rows.filter((_, i) => {
+      const v = validatedRows[i];
+      return !v || v.errors.length === 0;
+    });
+  }, [rows, validatedRows, skipEmptyRows]);
+
+  const missingRequired = REQUIRED_FIELDS.filter(f => !mapping[f.key]);
+  const canGoStep2 = columns.length > 0 && rows.length > 0 && !!batchName && !!callDate;
+  const canGoStep3 = missingRequired.length === 0;
+
+  // ─── Build Entries ─────────────────────────────────────────
+
+  function buildEntries() {
+    return effectiveRows.map((row, i) => {
+      const rawData: Record<string, string> = {};
+      columns.forEach((col, ci) => { rawData[col] = row[ci] || ''; });
+
+      return {
+        row_index: i + 1,
+        external_id: getMappedValue(row, 'external_id'),
+        patient_name: getMappedValue(row, 'patient_name'),
+        patient_phone: normalizePhone(getMappedValue(row, 'patient_phone')),
+        appointment_date: normalizeDate(getMappedValue(row, 'appointment_date')),
+        appointment_time: normalizeTime(getMappedValue(row, 'appointment_time')),
+        doctor_name: getMappedValue(row, 'doctor_name'),
+        department: getMappedValue(row, 'department'),
+        notes: getMappedValue(row, 'notes'),
+        raw_data: rawData,
+      };
+    });
+  }
+
+  async function handleCreate() {
+    setSubmitting(true);
+    try {
+      const entries = buildEntries();
+      const { data } = await api.post('/appointment-validation', {
+        name: batchName,
+        call_schedule: {
+          call_date: callDate,
+          call_start_time: callStartTime,
+          call_end_time: callEndTime,
+          max_concurrent: 3,
+          max_retries: maxRetries,
+          retry_delay_minutes: 30,
+        },
+        column_mapping: {
+          patient_name: mapping.patient_name || '',
+          patient_phone: mapping.patient_phone || '',
+          appointment_date: mapping.appointment_date || '',
+          appointment_time: mapping.appointment_time || '',
+          doctor_name: mapping.doctor_name || undefined,
+          department: mapping.department || undefined,
+          notes: mapping.notes || undefined,
+          external_id: mapping.external_id || undefined,
+        },
+        entries,
+      });
+      toast.success('Kampanya olusturuldu');
+      navigate(`/appointment-validation/${data.batch._id}`);
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Olusturulamadi');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  // ─── Render ────────────────────────────────────────────────
+
+  return (
+    <div className="p-4 sm:p-6 space-y-6 max-w-5xl">
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="sm" onClick={() => navigate('/appointment-validation')}>
+          <ArrowLeftIcon className="size-4" />
+        </Button>
+        <PageHeader title="Yeni Randevu Onay Kampanyasi" />
+      </div>
+
+      {/* Step Indicators */}
+      <div className="flex items-center gap-2">
+        {[
+          { n: 1, label: 'Dosya & Ayarlar' },
+          { n: 2, label: 'Kolon Esleme' },
+          { n: 3, label: 'Onay & Olustur' },
+        ].map(({ n, label }) => (
+          <div key={n} className="flex items-center gap-2">
+            <button
+              onClick={() => { if (n < step) setStep(n); }}
+              disabled={n > step}
+              className={`size-8 rounded-full flex items-center justify-center text-sm font-medium transition-colors ${
+                n === step ? 'bg-primary text-primary-foreground' :
+                n < step ? 'bg-primary/20 text-primary cursor-pointer hover:bg-primary/30' :
+                'bg-muted text-muted-foreground'
+              }`}
+            >
+              {n < step ? <CheckIcon className="size-4" /> : n}
+            </button>
+            {n < 3 && <div className={`w-8 sm:w-16 h-0.5 ${n < step ? 'bg-primary/40' : 'bg-muted'}`} />}
+            <span className={`text-xs hidden sm:inline ${n === step ? 'text-foreground font-medium' : 'text-muted-foreground'}`}>
+              {label}
+            </span>
+            {n < 3 && <div className="w-2" />}
+          </div>
+        ))}
+      </div>
+
+      {/* ═══════════════ Step 1: File Upload ═══════════════ */}
+      {step === 1 && (
+        <div className="space-y-5">
+          <Card>
+            <CardHeader className="pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-base">Veri Yukle</CardTitle>
+                {!columns.length && (
+                  <div className="flex rounded-md border overflow-hidden">
+                    <button
+                      onClick={() => setInputMode('file')}
+                      className={`px-3 py-1.5 text-xs font-medium transition-colors flex items-center gap-1.5 ${
+                        inputMode === 'file' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+                      }`}
+                    >
+                      <FileSpreadsheetIcon className="size-3.5" /> Dosya
+                    </button>
+                    <button
+                      onClick={() => setInputMode('paste')}
+                      className={`px-3 py-1.5 text-xs font-medium transition-colors flex items-center gap-1.5 border-l ${
+                        inputMode === 'paste' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+                      }`}
+                    >
+                      <ClipboardPasteIcon className="size-3.5" /> Yapistir
+                    </button>
+                  </div>
+                )}
+              </div>
+            </CardHeader>
+            <CardContent>
+              {!fileName && inputMode === 'file' ? (
+                /* Drop zone */
+                <div
+                  ref={dropRef}
+                  onDragOver={e => { e.preventDefault(); setDragOver(true); }}
+                  onDragLeave={() => setDragOver(false)}
+                  onDrop={handleDrop}
+                  className={`border-2 border-dashed rounded-lg p-10 text-center transition-colors ${
+                    dragOver ? 'border-primary bg-primary/5' : 'border-muted-foreground/25 hover:border-primary/50'
+                  }`}
+                >
+                  <UploadIcon className={`size-10 mx-auto mb-3 ${dragOver ? 'text-primary' : 'text-muted-foreground/50'}`} />
+                  <p className="text-sm text-muted-foreground mb-1">
+                    Dosyanizi buraya suruleyip birakin
+                  </p>
+                  <p className="text-xs text-muted-foreground mb-3">veya</p>
+                  <label className="cursor-pointer">
+                    <Button variant="outline" size="sm" asChild>
+                      <span>
+                        <FileSpreadsheetIcon className="size-4 mr-2" />
+                        Dosya Sec
+                      </span>
+                    </Button>
+                    <input type="file" accept=".csv,.xlsx,.xls" onChange={handleFileInput} className="hidden" />
+                  </label>
+                  <p className="text-[11px] text-muted-foreground/60 mt-3">
+                    Desteklenen formatlar: CSV, XLSX, XLS
+                  </p>
+                </div>
+              ) : !fileName && inputMode === 'paste' ? (
+                /* Paste area */
+                <div className="space-y-3">
+                  <Textarea
+                    value={pasteText}
+                    onChange={e => setPasteText(e.target.value)}
+                    placeholder={"Hasta Adi,Telefon,Randevu Tarihi,Randevu Saati,Doktor,Bolum\nAhmet Yilmaz,05551234567,15.03.2026,10:30,Dr. Mehmet,Ortopedi"}
+                    rows={8}
+                    className="font-mono text-xs"
+                  />
+                  <div className="flex items-center justify-between">
+                    <p className="text-[11px] text-muted-foreground">
+                      Ilk satir baslik, sonraki satirlar veri. Ayirac: virgul, noktali virgul veya tab.
+                    </p>
+                    <Button
+                      size="sm"
+                      onClick={() => parseCsvText(pasteText)}
+                      disabled={!pasteText.trim()}
+                    >
+                      <ClipboardPasteIcon className="size-4 mr-2" /> Verileri Yukle
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                /* File loaded */
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
+                    <FileSpreadsheetIcon className="size-8 text-green-600 shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium truncate">{fileName}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {(fileSize / 1024).toFixed(1)} KB &middot; {rows.length} satir &middot; {columns.length} kolon
+                      </p>
+                    </div>
+                    <Button variant="ghost" size="sm" onClick={clearFile}>
+                      <XIcon className="size-4" />
+                    </Button>
+                  </div>
+
+                  {/* Sheet picker (multi-sheet Excel) */}
+                  {sheetNames.length > 1 && (
+                    <div className="space-y-2">
+                      <Label>Sayfa Secimi</Label>
+                      <div className="flex flex-wrap gap-2">
+                        {sheetNames.map(name => (
+                          <Button
+                            key={name}
+                            variant={selectedSheet === name ? 'default' : 'outline'}
+                            size="sm"
+                            onClick={() => workbook && loadSheet(workbook, name)}
+                          >
+                            {name}
+                          </Button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Data preview */}
+                  {columns.length > 0 && (
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <Label>Veri Onizleme</Label>
+                        <span className="text-xs text-muted-foreground">ilk 5 / {rows.length} satir</span>
+                      </div>
+                      <div className="border rounded-md overflow-x-auto max-h-[280px]">
+                        <table className="w-full text-xs">
+                          <thead className="bg-muted/50 sticky top-0">
+                            <tr>
+                              <th className="text-center p-2 font-medium text-muted-foreground w-8">#</th>
+                              {columns.map((col, i) => (
+                                <th key={i} className="text-left p-2 font-medium whitespace-nowrap">{col}</th>
+                              ))}
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {rows.slice(0, 5).map((row, ri) => (
+                              <tr key={ri} className="border-t hover:bg-muted/30">
+                                <td className="text-center p-2 text-muted-foreground">{ri + 1}</td>
+                                {columns.map((_, ci) => (
+                                  <td key={ci} className="p-2 whitespace-nowrap max-w-[200px] truncate">{row[ci]}</td>
+                                ))}
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Batch settings — only show after file loaded */}
+          {columns.length > 0 && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-base">Kampanya Ayarlari</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="space-y-2 sm:col-span-2">
+                    <Label>Kampanya Adi *</Label>
+                    <Input value={batchName} onChange={e => setBatchName(e.target.value)} placeholder="Randevu Onay - Mart 2026" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Arama Tarihi *</Label>
+                    <Input type="date" value={callDate} onChange={e => setCallDate(e.target.value)} />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Tekrar Deneme</Label>
+                    <Select value={String(maxRetries)} onValueChange={v => setMaxRetries(Number(v))}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="0">Tekrar yok</SelectItem>
+                        <SelectItem value="1">1 tekrar</SelectItem>
+                        <SelectItem value="2">2 tekrar</SelectItem>
+                        <SelectItem value="3">3 tekrar</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Baslangic Saati</Label>
+                    <Input type="time" value={callStartTime} onChange={e => setCallStartTime(e.target.value)} />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Bitis Saati</Label>
+                    <Input type="time" value={callEndTime} onChange={e => setCallEndTime(e.target.value)} />
+                  </div>
+                </div>
+                <p className="text-[11px] text-muted-foreground">
+                  Aramalar belirtilen tarih ve saat araliginda yapilir. Cevapsiz/basarisiz aramalar otomatik tekrar denenir. Agent ve telefon numarasi admin panelinden yapilandirilir.
+                </p>
+              </CardContent>
+            </Card>
+          )}
+
+          <div className="flex justify-end">
+            <Button onClick={() => setStep(2)} disabled={!canGoStep2} size="lg">
+              Kolon Esleme <ArrowRightIcon className="size-4 ml-2" />
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* ═══════════════ Step 2: Column Mapping ═══════════════ */}
+      {step === 2 && (
+        <div className="space-y-5">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Kolon Esleme</CardTitle>
+              <p className="text-sm text-muted-foreground">
+                Dosyadaki her kolonu ilgili alana esleyin. Otomatik esleme yapildi, kontrol edip gerekirse degistirin.
+              </p>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Mapping rows */}
+              <div className="space-y-1">
+                {ALL_FIELDS.map(field => {
+                  const selectedCol = mapping[field.key];
+                  const samples = selectedCol ? getColumnSamples(selectedCol) : [];
+                  const isAssigned = !!selectedCol;
+
+                  return (
+                    <div key={field.key} className="group">
+                      <div className="flex items-center gap-3 py-2">
+                        {/* Field label */}
+                        <div className="w-40 shrink-0">
+                          <div className="flex items-center gap-1.5">
+                            {isAssigned ? (
+                              <CheckCircle2Icon className="size-4 text-green-500 shrink-0" />
+                            ) : field.required ? (
+                              <XCircleIcon className="size-4 text-red-400 shrink-0" />
+                            ) : (
+                              <div className="size-4 rounded-full border-2 border-muted-foreground/30 shrink-0" />
+                            )}
+                            <span className="text-sm font-medium">{field.label}</span>
+                            {field.required && <span className="text-red-500 text-xs">*</span>}
+                          </div>
+                          <p className="text-[11px] text-muted-foreground ml-5.5 pl-[22px]">{field.hint}</p>
+                        </div>
+
+                        {/* Arrow */}
+                        <ArrowRightIcon className="size-4 text-muted-foreground/40 shrink-0" />
+
+                        {/* Column select */}
+                        <div className="flex-1 max-w-sm">
+                          <Select value={selectedCol || '__none__'} onValueChange={v => updateMapping(field.key, v)}>
+                            <SelectTrigger className={isAssigned ? 'border-green-200 bg-green-50/50' : field.required ? 'border-red-200' : ''}>
+                              <SelectValue placeholder="Kolon secin" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="__none__">{field.required ? '-- Secilmedi --' : '-- Yok --'}</SelectItem>
+                              {columns.map(col => {
+                                const isUsed = assignedColumns.has(col) && mapping[field.key] !== col;
+                                const colSamples = getColumnSamples(col);
+                                return (
+                                  <SelectItem key={col} value={col} disabled={isUsed}>
+                                    <div className="flex items-center gap-2">
+                                      <span className={isUsed ? 'text-muted-foreground line-through' : ''}>{col}</span>
+                                      {colSamples.length > 0 && (
+                                        <span className="text-[10px] text-muted-foreground truncate max-w-[150px]">
+                                          ({colSamples[0]}{colSamples.length > 1 ? `, ${colSamples[1]}` : ''})
+                                        </span>
+                                      )}
+                                    </div>
+                                  </SelectItem>
+                                );
+                              })}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* Sample preview button */}
+                        {isAssigned && (
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="px-2"
+                            onClick={() => setPreviewColumn(previewColumn === selectedCol ? null : selectedCol!)}
+                          >
+                            <EyeIcon className="size-3.5" />
+                          </Button>
+                        )}
+                      </div>
+
+                      {/* Inline sample preview */}
+                      {previewColumn === selectedCol && selectedCol && (
+                        <div className="ml-[180px] mb-2 p-2 rounded bg-muted/50 text-xs space-y-0.5">
+                          <p className="font-medium text-muted-foreground mb-1">"{selectedCol}" ornekleri:</p>
+                          {samples.slice(0, 6).map((s, i) => (
+                            <div key={i} className="font-mono">{s}</div>
+                          ))}
+                        </div>
+                      )}
+
+                      {field.key !== 'notes' && <Separator className="opacity-50" />}
+                    </div>
+                  );
+                })}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Validation summary + mapped preview */}
+          {canGoStep3 && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-base">Eslenmis Veri Onizleme</CardTitle>
+                <div className="flex flex-wrap gap-3 mt-2">
+                  <Badge variant="default" className="text-xs gap-1">
+                    <CheckCircle2Icon className="size-3" /> {validCount} gecerli
+                  </Badge>
+                  {warningCount > 0 && (
+                    <Badge variant="secondary" className="text-xs gap-1 text-yellow-700">
+                      <AlertTriangleIcon className="size-3" /> {warningCount} uyari
+                    </Badge>
+                  )}
+                  {errorCount > 0 && (
+                    <Badge variant="destructive" className="text-xs gap-1">
+                      <XCircleIcon className="size-3" /> {errorCount} hata
+                    </Badge>
+                  )}
+                  {duplicatePhones > 0 && (
+                    <Badge variant="secondary" className="text-xs gap-1">
+                      <CopyIcon className="size-3" /> {duplicatePhones} tekrar telefon
+                    </Badge>
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="border rounded-md overflow-x-auto max-h-[320px]">
+                  <table className="w-full text-xs">
+                    <thead className="bg-muted/50 sticky top-0">
+                      <tr>
+                        <th className="text-center p-2 font-medium w-8">#</th>
+                        <th className="text-left p-2 font-medium">Hasta</th>
+                        <th className="text-left p-2 font-medium">Telefon</th>
+                        <th className="text-left p-2 font-medium">Tarih</th>
+                        <th className="text-left p-2 font-medium">Saat</th>
+                        {mapping.doctor_name && <th className="text-left p-2 font-medium">Doktor</th>}
+                        {mapping.department && <th className="text-left p-2 font-medium">Bolum</th>}
+                        <th className="text-center p-2 font-medium w-16">Durum</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {rows.slice(0, 20).map((row, ri) => {
+                        const v = validatedRows[ri];
+                        const hasError = v?.errors.length > 0;
+                        const hasWarning = v?.warnings.length > 0;
+                        const rawPhone = getMappedValue(row, 'patient_phone');
+                        const rawDate = getMappedValue(row, 'appointment_date');
+                        const rawTime = getMappedValue(row, 'appointment_time');
+
+                        return (
+                          <tr key={ri} className={`border-t ${hasError ? 'bg-red-50/50' : hasWarning ? 'bg-yellow-50/50' : 'hover:bg-muted/30'}`}>
+                            <td className="text-center p-2 text-muted-foreground">{ri + 1}</td>
+                            <td className="p-2">{getMappedValue(row, 'patient_name')}</td>
+                            <td className="p-2 font-mono">
+                              <span>{rawPhone}</span>
+                              {rawPhone && normalizePhone(rawPhone) !== rawPhone && (
+                                <span className="text-muted-foreground ml-1">&rarr; {normalizePhone(rawPhone)}</span>
+                              )}
+                            </td>
+                            <td className="p-2">
+                              <span>{rawDate}</span>
+                              {rawDate && normalizeDate(rawDate) !== rawDate && (
+                                <span className="text-muted-foreground ml-1">&rarr; {normalizeDate(rawDate)}</span>
+                              )}
+                            </td>
+                            <td className="p-2">
+                              <span>{rawTime}</span>
+                              {rawTime && normalizeTime(rawTime) !== rawTime && (
+                                <span className="text-muted-foreground ml-1">&rarr; {normalizeTime(rawTime)}</span>
+                              )}
+                            </td>
+                            {mapping.doctor_name && <td className="p-2">{getMappedValue(row, 'doctor_name')}</td>}
+                            {mapping.department && <td className="p-2">{getMappedValue(row, 'department')}</td>}
+                            <td className="text-center p-2">
+                              {hasError ? (
+                                <span className="text-red-500" title={v.errors.join(', ')}>
+                                  <XCircleIcon className="size-4 inline" />
+                                </span>
+                              ) : hasWarning ? (
+                                <span className="text-yellow-600" title={v.warnings.join(', ')}>
+                                  <AlertTriangleIcon className="size-4 inline" />
+                                </span>
+                              ) : (
+                                <CheckCircle2Icon className="size-4 inline text-green-500" />
+                              )}
+                            </td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+                {rows.length > 20 && (
+                  <p className="text-xs text-muted-foreground mt-2 text-center">
+                    ve {rows.length - 20} satir daha...
+                  </p>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          <div className="flex justify-between">
+            <Button variant="outline" onClick={() => setStep(1)}>
+              <ArrowLeftIcon className="size-4 mr-2" /> Geri
+            </Button>
+            <Button onClick={() => setStep(3)} disabled={!canGoStep3} size="lg">
+              Onay <ArrowRightIcon className="size-4 ml-2" />
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* ═══════════════ Step 3: Review & Create ═══════════════ */}
+      {step === 3 && (
+        <div className="space-y-5">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Kampanya Ozeti</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-5">
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                <SummaryItem label="Kampanya" value={batchName} />
+                <SummaryItem label="Arama Tarihi" value={callDate} />
+                <SummaryItem label="Saat Araligi" value={`${callStartTime} - ${callEndTime}`} />
+                <SummaryItem label="Tekrar" value={maxRetries === 0 ? 'Yok' : `${maxRetries} kez`} />
+              </div>
+
+              <Separator />
+
+              {/* Column mapping */}
+              <div>
+                <h3 className="text-sm font-medium mb-2">Kolon Esleme</h3>
+                <div className="flex flex-wrap gap-2">
+                  {ALL_FIELDS.filter(f => mapping[f.key]).map(f => (
+                    <Badge key={f.key} variant="secondary" className="text-xs gap-1">
+                      {f.label} &larr; <span className="font-mono">{mapping[f.key]}</span>
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+
+              <Separator />
+
+              {/* Stats */}
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                <div className="text-center p-3 rounded-lg bg-muted/50">
+                  <div className="text-2xl font-bold">{effectiveRows.length}</div>
+                  <div className="text-xs text-muted-foreground">Aranacak</div>
+                </div>
+                <div className="text-center p-3 rounded-lg bg-green-50">
+                  <div className="text-2xl font-bold text-green-600">{validCount}</div>
+                  <div className="text-xs text-muted-foreground">Gecerli Satir</div>
+                </div>
+                {errorCount > 0 && (
+                  <div className="text-center p-3 rounded-lg bg-red-50">
+                    <div className="text-2xl font-bold text-red-600">{errorCount}</div>
+                    <div className="text-xs text-muted-foreground">Hatali (atlanacak)</div>
+                  </div>
+                )}
+                {duplicatePhones > 0 && (
+                  <div className="text-center p-3 rounded-lg bg-yellow-50">
+                    <div className="text-2xl font-bold text-yellow-600">{duplicatePhones}</div>
+                    <div className="text-xs text-muted-foreground">Tekrar Telefon</div>
+                  </div>
+                )}
+              </div>
+
+              {/* Skip empty rows toggle */}
+              {errorCount > 0 && (
+                <div className="flex items-center gap-2 p-3 rounded-md bg-yellow-50 border border-yellow-200">
+                  <Checkbox
+                    id="skipEmpty"
+                    checked={skipEmptyRows}
+                    onCheckedChange={v => setSkipEmptyRows(!!v)}
+                  />
+                  <label htmlFor="skipEmpty" className="text-sm text-yellow-800 cursor-pointer">
+                    Hatali satirlari atla ({errorCount} satir eksik veri iceriyor)
+                  </label>
+                </div>
+              )}
+
+              {/* Warnings */}
+              {warningCount > 0 && (
+                <div className="flex items-center gap-2 p-3 rounded-md bg-yellow-50 border border-yellow-200 text-yellow-800 text-sm">
+                  <AlertTriangleIcon className="size-4 shrink-0" />
+                  {warningCount} satirdaki telefon numarasi gecersiz gorunuyor.
+                </div>
+              )}
+
+              {duplicatePhones > 0 && (
+                <div className="flex items-center gap-2 p-3 rounded-md border text-sm text-muted-foreground">
+                  <InfoIcon className="size-4 shrink-0" />
+                  {duplicatePhones} tekrar eden telefon numarasi var. Ayni hastanin birden fazla randevusu olabilir.
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <div className="flex justify-between">
+            <Button variant="outline" onClick={() => setStep(2)}>
+              <ArrowLeftIcon className="size-4 mr-2" /> Geri
+            </Button>
+            <Button onClick={handleCreate} disabled={submitting || effectiveRows.length === 0} size="lg">
+              {submitting && <Loader2Icon className="size-4 mr-2 animate-spin" />}
+              {effectiveRows.length} Randevu ile Kampanya Olustur
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SummaryItem({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <div>
+      <p className="text-xs text-muted-foreground">{label}</p>
+      <p className={`text-sm font-medium truncate ${mono ? 'font-mono text-xs' : ''}`}>{value}</p>
+    </div>
+  );
+}