{"id":8,"date":"2026-11-02T12:13:52","date_gmt":"2026-11-02T12:13:52","guid":{"rendered":"https:\/\/shafakha.com\/?page_id=8"},"modified":"2026-11-02T13:25:44","modified_gmt":"2026-11-02T13:25:44","slug":"8-2","status":"publish","type":"page","link":"https:\/\/shafakha.com\/index.php\/8-2\/","title":{"rendered":"turkiyetripsha"},"content":{"rendered":"\n<script data-wp-block-html=\"js\">\nimport React, { useState, useEffect, useMemo } from 'react';\nimport {\n  Calendar,\n  Clock,\n  MapPin,\n  CheckCircle2,\n  Circle,\n  AlertTriangle,\n  Plane,\n  Briefcase,\n  DollarSign,\n  FileText,\n  Phone,\n  Plus,\n  Trash2,\n  Edit2,\n  Copy,\n  ChevronDown,\n  ChevronUp,\n  Download,\n  Upload,\n  RefreshCw,\n  ExternalLink,\n  ShieldAlert,\n  Baby,\n  Eye,\n  EyeOff,\n  Search,\n  Filter,\n  Check,\n  X,\n  Luggage,\n  HeartHandshake\n} from 'lucide-react';\n\n\/\/ --- INITIAL SEED DATA WITH SCHEMA VERSION ---\nconst APP_STORAGE_KEY = 'KAZ_TURKIYE_TRIP_2026_DATA_V1';\nconst SCHEMA_VERSION = '1.0.0';\n\nconst initialSeedData = {\n  version: SCHEMA_VERSION,\n  tripSettings: {\n    tripName: 'KAZ FAMILY \u2022 T\u00dcRKIYE TRIP 2026',\n    departureIso: '2026-11-04T01:25:00+08:00', \/\/ 4 Nov 2026 01:25 MYT\n    travelers: [\n      { id: 't1', name: 'Ayah (Dewasa)', role: 'Adult', baggage: '25kg Check-in \/ 7kg Cabin (Disahkan)' },\n      { id: 't2', name: 'Ibu (Dewasa)', role: 'Adult', baggage: 'Belum disahkan' },\n      { id: 't3', name: 'Anak (~1 Tahun)', role: 'Toddler', baggage: 'Belum disahkan' }\n    ],\n    tryToMyrRate: 0.13, \/\/ 1 TRY = ~0.13 MYR (Manual editable default)\n    budgetLimitMyr: 8000\n  },\n  flights: [\n    {\n      id: 'f1',\n      airline: 'Emirates',\n      flightNumber: 'EK343',\n      date: '2026-11-04',\n      origin: 'KUL (Kuala Lumpur T1)',\n      destination: 'DXB (Dubai T3)',\n      departureTime: '01:25',\n      arrivalTime: '04:45',\n      timezoneNote: 'Waktu Tempatan KUL \/ DXB',\n      classType: 'Economy Saver',\n      bookingRef: 'EK-MY-CONFIRMED',\n      baggageAdult: '25 kg (Disahkan)',\n      baggageOthers: 'Belum disahkan',\n      infantTicket: 'Belum disahkan',\n      seatNumbers: 'Pilihan Semasa Check-in',\n      status: 'Akan Datang',\n      airportType: 'International'\n    },\n    {\n      id: 'f2',\n      airline: 'Emirates',\n      flightNumber: 'EK123',\n      date: '2026-11-04',\n      origin: 'DXB (Dubai T3)',\n      destination: 'IST (Istanbul Airport - European side)',\n      departureTime: '10:15',\n      arrivalTime: '14:25',\n      timezoneNote: 'Waktu Tempatan DXB \/ IST',\n      classType: 'Economy Saver',\n      bookingRef: 'EK-MY-CONFIRMED',\n      baggageAdult: '25 kg (Disahkan)',\n      baggageOthers: 'Belum disahkan',\n      infantTicket: 'Belum disahkan',\n      seatNumbers: 'Pilihan Semasa Check-in',\n      status: 'Akan Datang',\n      airportType: 'International'\n    },\n    {\n      id: 'f3',\n      airline: 'Pegasus Airlines',\n      flightNumber: 'PC2736',\n      date: '2026-11-05',\n      origin: 'SAW (Sabiha G\u00f6k\u00e7en - Asian side)',\n      destination: 'ASR (Kayseri Erkilet Airport)',\n      departureTime: '14:20',\n      arrivalTime: '15:35',\n      timezoneNote: 'Waktu Tempatan T\u00fcrkiye',\n      classType: 'Domestic Economy',\n      bookingRef: 'PGS-DOM-PENDING',\n      baggageAdult: 'Menunggu Pengesahan',\n      baggageOthers: 'Belum disahkan',\n      infantTicket: 'Belum disahkan',\n      seatNumbers: 'Belum ditetapkan',\n      status: 'Akan Datang',\n      airportType: 'Domestic-SAW'\n    },\n    {\n      id: 'f4',\n      airline: 'Pegasus Airlines',\n      flightNumber: 'PC2737',\n      date: '2026-11-07',\n      origin: 'ASR (Kayseri Erkilet Airport)',\n      destination: 'SAW (Sabiha G\u00f6k\u00e7en - Asian side)',\n      departureTime: '16:20',\n      arrivalTime: '17:50',\n      timezoneNote: 'Waktu Tempatan T\u00fcrkiye',\n      classType: 'Domestic Economy',\n      bookingRef: 'PGS-DOM-PENDING',\n      baggageAdult: 'Menunggu Pengesahan',\n      baggageOthers: 'Belum disahkan',\n      infantTicket: 'Belum disahkan',\n      seatNumbers: 'Belum ditetapkan',\n      status: 'Akan Datang',\n      airportType: 'Domestic-SAW'\n    },\n    {\n      id: 'f5',\n      airline: 'Emirates',\n      flightNumber: 'EK122',\n      date: '2026-11-10',\n      origin: 'IST (Istanbul Airport - European side)',\n      destination: 'DXB (Dubai T3)',\n      departureTime: '20:05',\n      arrivalTime: '01:20 (+1d)',\n      timezoneNote: 'Waktu Tempatan IST \/ DXB',\n      classType: 'Economy Saver',\n      bookingRef: 'EK-MY-CONFIRMED',\n      baggageAdult: '25 kg (Disahkan)',\n      baggageOthers: 'Belum disahkan',\n      infantTicket: 'Belum disahkan',\n      seatNumbers: 'Pilihan Semasa Check-in',\n      status: 'Akan Datang',\n      airportType: 'International'\n    },\n    {\n      id: 'f6',\n      airline: 'Emirates',\n      flightNumber: 'EK346',\n      date: '2026-11-11',\n      origin: 'DXB (Dubai T3)',\n      destination: 'KUL (Kuala Lumpur T1)',\n      departureTime: '03:40',\n      arrivalTime: '14:45',\n      timezoneNote: 'Waktu Tempatan DXB \/ KUL',\n      classType: 'Economy Saver',\n      bookingRef: 'EK-MY-CONFIRMED',\n      baggageAdult: '25 kg (Disahkan)',\n      baggageOthers: 'Belum disahkan',\n      infantTicket: 'Belum disahkan',\n      seatNumbers: 'Pilihan Semasa Check-in',\n      status: 'Akan Datang',\n      airportType: 'International'\n    }\n  ],\n  itinerary: [\n    {\n      id: 'it-1',\n      dayNumber: 1,\n      date: '2026-11-03',\n      city: 'Kuala Lumpur',\n      time: '21:25',\n      title: 'Daftar Masuk KLIA Terminal 1',\n      location: 'Kuala Lumpur International Airport Terminal 1',\n      notes: 'Buka kaunter Emirates EK343. Pastikan stroller anak didaftarkan di gate atau check-in.',\n      cost: 0,\n      currency: 'MYR',\n      status: 'Akan Datang',\n      bookingRef: 'EK343',\n      packageStatus: 'Dikecualikan (Tiket Antarabangsa Sendiri)'\n    },\n    {\n      id: 'it-2',\n      dayNumber: 2,\n      date: '2026-11-04',\n      city: 'Istanbul',\n      time: '14:25',\n      title: 'Tiba di Lapangan Terbang Istanbul (IST) &amp; Pemindahan Peribadi',\n      location: 'Istanbul Airport (IST), Tayakad\u0131n, Arnavutk\u00f6y',\n      notes: 'Pemandu swasta sedia menunggu di balai ketibaan dengan papan tanda Kaz Family. Hotel check-in dan rehat.',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'PVT-TRANSFER-IST',\n      packageStatus: 'Termasuk dalam Pakej'\n    },\n    {\n      id: 'it-3',\n      dayNumber: 3,\n      date: '2026-11-05',\n      city: 'Istanbul -&gt; Cappadocia',\n      time: '10:20',\n      title: 'Bertolak ke Lapangan Terbang SAW untuk Penerbangan Cappadocia',\n      location: 'Sabiha G\u00f6k\u00e7en International Airport (SAW)',\n      notes: 'Penerbangan Pegasus PC2736 ke Kayseri (14:20 - 15:35). Tiba di Cappadocia, daftar masuk hotel gua. Pilihan petang: ATV atau menunggang kuda.',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'PC2736',\n      packageStatus: 'Termasuk dalam Pakej'\n    },\n    {\n      id: 'it-4',\n      dayNumber: 4,\n      date: '2026-11-06',\n      city: 'Cappadocia',\n      time: '05:30',\n      title: 'Sunrise Belon Udara Panas (Pilihan) &amp; Lawatan Sehari Cappadocia',\n      location: 'G\u00f6reme Open Air Museum &amp; Uchisar Castle',\n      notes: 'PERINGATAN BAYI: Bayi 1 tahun dilarang naik belon! Seorang ibu bapa perlu bergilir menjaga bayi. Pakej lawatan termasuk makan tengah hari di Avanos, Pasabaglari &amp; Devrent Valley.',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'CAPPA-DAY-TOUR',\n      packageStatus: 'Termasuk dalam Pakej (Belon Dikecualikan)'\n    },\n    {\n      id: 'it-5',\n      dayNumber: 5,\n      date: '2026-11-07',\n      city: 'Cappadocia -&gt; Istanbul',\n      time: '12:20',\n      title: 'Sarapan, Masa Bebas &amp; Penerbangan Pulang ke Istanbul',\n      location: 'Kayseri Erkilet Airport (ASR)',\n      notes: 'Penerbangan Pegasus PC2737 ke Sabiha G\u00f6k\u00e7en (SAW) 16:20 - 17:50. Pemindahan peribadi ke hotel Istanbul.',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'PC2737',\n      packageStatus: 'Termasuk dalam Pakej'\n    },\n    {\n      id: 'it-6',\n      dayNumber: 6,\n      date: '2026-11-08',\n      city: 'Istanbul',\n      time: '09:00',\n      title: 'Pelayaran Bosphorus, Pierre Loti, Menara Galata &amp; Ortak\u00f6y',\n      location: 'Bosphorus Strait, Ey\u00fcp Sultan, Galata Tower',\n      notes: 'Tiket bot Bosphorus ke \u00dcsk\u00fcdar termasuk dalam pakej. Lawatan ke Masjid Ey\u00fcp Sultan, Pierre Loti Hill dengan kereta kabel, jalan santai di Istiklal Street dan rasa Kumpir di Ortak\u00f6y.',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'BOSPHORUS-DAY',\n      packageStatus: 'Termasuk dalam Pakej'\n    },\n    {\n      id: 'it-7',\n      dayNumber: 7,\n      date: '2026-11-09',\n      city: 'Istanbul',\n      time: '09:30',\n      title: 'Warisan Klasik Sultanahmet &amp; Membeli-belah Bazaar',\n      location: 'Hagia Sophia, Blue Mosque, Topkapi Palace, Grand Bazaar',\n      notes: 'Pemandu pelancong tempatan akan memimpin lawatan. Menziarahi Hagia Sophia, Blue Mosque, Hippodrome, Topkapi Palace, Grand Bazaar &amp; Spice Bazaar.',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'SULTANAHMET-DAY',\n      packageStatus: 'Termasuk dalam Pakej'\n    },\n    {\n      id: 'it-8',\n      dayNumber: 8,\n      date: '2026-11-10',\n      city: 'Istanbul -&gt; Dubai',\n      time: '15:05',\n      title: 'Kemas Beg, Masa Bebas &amp; Pemindahan ke Lapangan Terbang IST',\n      location: 'Istanbul Airport (IST)',\n      notes: 'Daftar keluar hotel. Pemindahan ke IST untuk Emirates EK122 (berlepas 20:05). Transit Dubai pada jam 01:20 (11 Nov).',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'EK122',\n      packageStatus: 'Termasuk dalam Pakej (Pemindahan Sahaja)'\n    },\n    {\n      id: 'it-9',\n      dayNumber: 9,\n      date: '2026-11-11',\n      city: 'Dubai -&gt; Kuala Lumpur',\n      time: '03:40',\n      title: 'Penerbangan Sambungan EK346 Tiba di Kuala Lumpur',\n      location: 'Kuala Lumpur International Airport T1',\n      notes: 'Tiba di KLIA jam 14:45. Ambil bagasi dan pulang ke rumah dengan selamat.',\n      cost: 0,\n      currency: 'MYR',\n      status: 'Akan Datang',\n      bookingRef: 'EK346',\n      packageStatus: 'Dikecualikan (Tiket Antarabangsa Sendiri)'\n    }\n  ],\n  checklist: [\n    { id: 'c1', title: 'Perbaharui &amp; Sahkan Sah Laku Pasport (&gt;6 Bulan)', category: 'Dokumen', priority: 'Tinggi', assignedTo: 'Ayah', deadline: '2026-09-30', done: true, notes: 'Pastikan pasport Ayah, Ibu dan Anak sah sekurang-kurangnya sehingga Mei 2027' },\n    { id: 'c2', title: 'Sahkan Tiket Antarabangsa Isteri &amp; Anak', category: 'Tiket &amp; Tempahan', priority: 'Kritikal', assignedTo: 'Ayah', deadline: '2026-10-15', done: false, notes: 'Kini hanya tiket seorang dewasa disahkan dalam rekod asal.' },\n    { id: 'c3', title: 'Tempahan Tiket Bayi &amp; Bagasi Pegasus Airlines', category: 'Penerbangan Domestik', priority: 'Kritikal', assignedTo: 'Ayah', deadline: '2026-10-15', done: false, notes: 'Sahkan PC2736 &amp; PC2737 untuk elaun beg dan tempat duduk bayi' },\n    { id: 'c4', title: 'Insurans Perjalanan Keluarga Termasuk Perlindungan Bayi', category: 'Insurans', priority: 'Tinggi', assignedTo: 'Ibu', deadline: '2026-10-20', done: false, notes: 'Perlindungan pembatalan penerbangan dan perubatan luar negara' },\n    { id: 'c5', title: 'Salinan Fizikal &amp; Digital Sijil Lahir Anak', category: 'Dokumen', priority: 'Tinggi', assignedTo: 'Ibu', deadline: '2026-10-25', done: false, notes: 'Wajib dibawa bersama pasport anak untuk pemeriksaan imigresen' },\n    { id: 'c6', title: 'Pengesahan Baucar Hotel di Istanbul &amp; Cappadocia', category: 'Tiket &amp; Tempahan', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-10-28', done: true, notes: 'Termasuk sarapan harian dan penginapan bilik keluarga' },\n    { id: 'c7', title: 'Pengesahan Pengangkutan Lapangan Terbang Peribadi', category: 'Pengangkutan', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-10-28', done: true, notes: 'Pastikan saiz kenderaan memuatkan 3 bagasi besar dan stroller' },\n    { id: 'c8', title: 'Minta Kerusi Keselamatan Bayi (Car Seat) untuk Kenderaan Tour', category: 'Bayi &amp; Keselamatan', priority: 'Kritikal', assignedTo: 'Ibu', deadline: '2026-10-25', done: false, notes: 'Undang-undang T\u00fcrkiye dan keselamatan anak semasa perjalanan jauh' },\n    { id: 'c9', title: 'Daftar Masuk Dalam Talian Emirates (48 Jam Sebelum)', category: 'Penerbangan', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-11-02', done: false, notes: 'Pilih kerusi bassinet jika masih tersedia' },\n    { id: 'c10', title: 'Pengaktifan Kad Luar Negara (Wise\/Maybank\/CIMB) &amp; Tukaran TRY', category: 'Kewangan', priority: 'Tinggi', assignedTo: 'Ayah', deadline: '2026-10-30', done: false, notes: 'Aktifkan transaksi antarabangsa dan sediakan sedikit mata wang tunai Euro\/TRY' },\n    { id: 'c11', title: 'Beli eSIM T\u00fcrkiye (cth. Airalo\/Maya Mobile)', category: 'Komunikasi', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-10-31', done: false, notes: 'Aktifkan sebelum mendarat di Istanbul' },\n    { id: 'c12', title: 'Muat Turun Peta Luar Talian Google Maps &amp; Google Translate (Turki)', category: 'Aplikasi', priority: 'Sederhana', assignedTo: 'Ibu', deadline: '2026-11-01', done: false, notes: 'Peta luar talian Istanbul dan wilayah G\u00f6reme' },\n    { id: 'c13', title: 'Ubat-ubatan Asas Kanak-kanak &amp; Dewasa', category: 'Kesihatan', priority: 'Kritikal', assignedTo: 'Ibu', deadline: '2026-10-28', done: false, notes: 'Ubat demam, selsema bayi, syringe ubat, koyok, minyak angin &amp; first aid kit' },\n    { id: 'c14', title: 'Pakaian Musim Sejuk\/Gugur Bersesuaian Suhu Cappadocia (5\u00b0C - 14\u00b0C)', category: 'Pakaian', priority: 'Tinggi', assignedTo: 'Ibu', deadline: '2026-10-29', done: false, notes: 'Thermal inner, windbreaker, fleece jacket, sarung tangan' },\n    { id: 'c15', title: 'Bekalan Makanan Bayi, Susu Formula &amp; Botol', category: 'Bayi &amp; Keselamatan', priority: 'Kritikal', assignedTo: 'Ibu', deadline: '2026-10-30', done: false, notes: 'Pouch puri makanan, biskut bayi, sabun pencuci botol travel size' },\n    { id: 'c16', title: 'Keselamatan Rumah: Tutup Gas, Paip Utama &amp; Pasang Pemasa Lampu', category: 'Rumah', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-11-03', done: false, notes: 'Maklumkan kepada jiran terdekat atau polis rondaan' },\n    { id: 'c17', title: 'Timbang Beg &amp; Pastikan Had Berat 25kg \/ 7kg Dipatuhi', category: 'Bagasi', priority: 'Tinggi', assignedTo: 'Ayah', deadline: '2026-11-03', done: false, notes: 'Gunakan penimbang digital bagasi sebelum bertolak ke KLIA' }\n  ],\n  packing: [\n    \/\/ AYAH\n    { id: 'p1', traveler: 'AYAH', item: 'Jaket Kalis Angin \/ Puffer Jacket', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Suhu sejuk waktu pagi' },\n    { id: 'p2', traveler: 'AYAH', item: 'Thermal Inner Heattech (Baju &amp; Seluar)', bag: 'Check-in Bag', qty: 3, packed: false, notes: 'Penting untuk Cappadocia' },\n    { id: 'p3', traveler: 'AYAH', item: 'Kemeja \/ T-shirt Lengan Panjang', bag: 'Check-in Bag', qty: 5, packed: false, notes: 'Kapas selesa' },\n    { id: 'p4', traveler: 'AYAH', item: 'Seluar Panjang Tahan Lasak \/ Jeans', bag: 'Check-in Bag', qty: 3, packed: false, notes: 'Untuk aktiviti jalan jauh' },\n    { id: 'p5', traveler: 'AYAH', item: 'Pakaian Dalam &amp; Stoking Tebal', bag: 'Check-in Bag', qty: 7, packed: false, notes: 'Stoking bulu biri-biri\/tebal' },\n    { id: 'p6', traveler: 'AYAH', item: 'Kasut Berjalan Selesa (Sneakers berlapik)', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Jalan berturap batu di Sultanahmet' },\n    { id: 'p7', traveler: 'AYAH', item: 'Peralatan Mandi &amp; Pencukur Travel', bag: 'Check-in Bag', qty: 1, packed: false, notes: 'Bawah 100ml jika kabin' },\n    { id: 'p8', traveler: 'AYAH', item: 'Powerbank, Pengecas &amp; Universal Plug Type C\/F', bag: 'Cabin Bag', qty: 2, packed: false, notes: 'Palam standard T\u00fcrkiye 2-pin' },\n    { id: 'p9', traveler: 'AYAH', item: 'Pasport Asal &amp; Dompet Perjalanan', bag: 'Cabin Bag', qty: 1, packed: true, notes: 'Sentiasa bawa bersama' },\n\n    \/\/ IBU\n    { id: 'p10', traveler: 'IBU', item: 'Warm Jacket \/ Long Wool Coat', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Bawa atas kapal terbang' },\n    { id: 'p11', traveler: 'IBU', item: 'Thermal Inner Heattech', bag: 'Check-in Bag', qty: 3, packed: false, notes: 'Lapisan asas cuaca sejuk' },\n    { id: 'p12', traveler: 'IBU', item: 'Baju Kurung \/ Blouse Labuh &amp; Seluar Selesa', bag: 'Check-in Bag', qty: 6, packed: false, notes: 'Sopan untuk lawatan masjid' },\n    { id: 'p13', traveler: 'IBU', item: 'Tudung Mudah Bentuk \/ Instant Shawl &amp; Inner', bag: 'Check-in Bag', qty: 6, packed: false, notes: 'Warna padan pemandangan' },\n    { id: 'p14', traveler: 'IBU', item: 'Stoking Tebal &amp; Sarung Tangan', bag: 'Check-in Bag', qty: 6, packed: false, notes: 'Pagi sejuk di bukit G\u00f6reme' },\n    { id: 'p15', traveler: 'IBU', item: 'Kasut Berjalan Kalis Air &amp; Selesa', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Penting untuk berjalan di bazaar' },\n    { id: 'p16', traveler: 'IBU', item: 'Set Penjagaan Kulit, Lip Balm &amp; Pelembap', bag: 'Check-in Bag', qty: 1, packed: false, notes: 'Udara T\u00fcrkiye kering ketika musim gugur' },\n    { id: 'p17', traveler: 'IBU', item: 'Pasport Asal Ibu', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Simpan bersama dokumen keluarga' },\n\n    \/\/ ANAK (Toddler ~1 yr)\n    { id: 'p18', traveler: 'ANAK', item: 'Pampers \/ Diapers (Saiz Toddler)', bag: 'Check-in Bag', qty: 35, packed: false, notes: 'Sedia lebihan untuk tempoh 9 hari' },\n    { id: 'p19', traveler: 'ANAK', item: 'Tisu Basah (Wet Wipes Bebas Alkohol)', bag: 'Baby Bag', qty: 4, packed: false, notes: 'Pek besar dan pek kecil poket' },\n    { id: 'p20', traveler: 'ANAK', item: 'Pelapik Menukar Lampin (Changing Mat Padat)', bag: 'Baby Bag', qty: 2, packed: false, notes: 'Untuk penukaran lampin di tandas awam' },\n    { id: 'p21', traveler: 'ANAK', item: 'Pakaian Lengkap Harian Bayi', bag: 'Check-in Bag', qty: 10, packed: false, notes: 'Campuran romper dan baju berlengan' },\n    { id: 'p22', traveler: 'ANAK', item: 'Baju Thermal Dalaman Bayi', bag: 'Check-in Bag', qty: 4, packed: false, notes: 'Lapisan penting waktu malam &amp; pagi' },\n    { id: 'p23', traveler: 'ANAK', item: 'Jaket Tebal Bayi Bersudip (Hooded Puffer)', bag: 'Baby Bag', qty: 1, packed: false, notes: 'Kalis angin' },\n    { id: 'p24', traveler: 'ANAK', item: 'Stoking Tebal, Kasut Bayi, Sarung Tangan &amp; Beanie', bag: 'Baby Bag', qty: 4, packed: false, notes: 'Elak kehilangan haba badan' },\n    { id: 'p25', traveler: 'ANAK', item: 'Selimut Bayi Lembut (Travel Blanket)', bag: 'Baby Bag', qty: 1, packed: false, notes: 'Untuk kegunaan semasa di stroller\/kapal terbang' },\n    { id: 'p26', traveler: 'ANAK', item: 'Susu Formula \/ Pek Bekalan Susu', bag: 'Baby Bag', qty: 2, packed: false, notes: 'Bekalan yang mencukupi untuk perjalanan' },\n    { id: 'p27', traveler: 'ANAK', item: 'Botol Susu &amp; Berus Pencuci Mini', bag: 'Baby Bag', qty: 3, packed: false, notes: 'Termasuk termos air panas kecil' },\n    { id: 'p28', traveler: 'ANAK', item: 'Pouch Puri Makanan Bayi &amp; Biskut Halus', bag: 'Baby Bag', qty: 10, packed: false, notes: 'Mudah suap semasa berjalan' },\n    { id: 'p29', traveler: 'ANAK', item: 'Kain Lap \/ Bib Makan Silikon', bag: 'Baby Bag', qty: 3, packed: false, notes: 'Mudah dibilas' },\n    { id: 'p30', traveler: 'ANAK', item: 'Kit Ubat Bayi (Paracetamol Kanak-kanak, Syringe, Termometer)', bag: 'Baby Bag', qty: 1, packed: false, notes: 'Pemeriksaan suhu badan pantas' },\n    { id: 'p31', traveler: 'ANAK', item: 'Stroller Ringan Lipat Kabin (Cabin-size Approved)', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Bawa terus ke pintu masuk pesawat' },\n    { id: 'p32', traveler: 'ANAK', item: 'Baby Carrier Ergonomik (Gendongan)', bag: 'Baby Bag', qty: 1, packed: false, notes: 'Sangat berguna di kawasan gua Cappadocia' },\n    { id: 'p33', traveler: 'ANAK', item: 'Mainan Kegemaran, Teether &amp; Bantal Peluk Tidur', bag: 'Baby Bag', qty: 2, packed: false, notes: 'Menenangkan anak ketika penerbangan malam' },\n    { id: 'p34', traveler: 'ANAK', item: 'Set Pakaian Ganti Segera Bayi &amp; Ibu Bapa', bag: 'Baby Bag', qty: 2, packed: false, notes: 'Jika berlaku tumpahan atau susu muntah di pesawat' }\n  ],\n  expenses: [], \/\/ Blank initially as requested: Never invent paid expenses\n  documents: {\n    insurancePolicyNumber: 'AIG-TRAVEL-MY-2026-PENDING',\n    insuranceProvider: 'Menunggu Pengesahan Pembelian',\n    insurancePhone: '+60 3 2118 0188',\n    fatherPassport: {\n      number: 'A58992144',\n      expiry: '2028-08-14',\n      status: 'Sah &amp; Disahkan'\n    },\n    motherPassport: {\n      number: 'A61092301',\n      expiry: '2027-11-20',\n      status: 'Perlu Pengesahan Akhir'\n    },\n    toddlerPassport: {\n      number: 'A70912440',\n      expiry: '2029-03-05',\n      status: 'Perlu Pengesahan Salinan Sijil Lahir'\n    },\n    visaRequirements: 'Warganegara Malaysia tidak memerlukan visa pelancong untuk tinggal sehingga 90 hari di T\u00fcrkiye.',\n    notesVerified: false\n  },\n  notesAndContacts: {\n    emergencyNumber: '112 (Panggilan Kecemasan Kebangsaan T\u00fcrkiye)',\n    malaysiaEmbassyAnkara: {\n      name: 'Kedutaan Besar Malaysia di Ankara',\n      address: 'Koza Sokak No. 56, G.O.P. 06700 Cankaya, Ankara, T\u00fcrkiye',\n      phone: '+90 312 446 3547 \/ 3548',\n      dutyOfficer: '+90 534 975 0198'\n    },\n    istanbulConsulate: {\n      name: 'Konsulat Jeneral Malaysia di Istanbul',\n      address: 'Esentepe Mah. Ali Kaya Sok. Polat Plaza B Blok No:1\/1 Sisli, Istanbul',\n      phone: '+90 212 963 8122'\n    },\n    hotelIstanbul: {\n      name: 'Hotel Istanbul Old City Heritage',\n      address: 'Sultanahmet, Fatih, Istanbul',\n      phone: '+90 212 518 9000',\n      checkIn: '4 Nov 2026 (15:00)',\n      checkOut: '5 Nov 2026 &amp; 7-10 Nov 2026'\n    },\n    hotelCappadocia: {\n      name: 'Cappadocia Cave Suites Hotel',\n      address: 'G\u00f6reme, Nev\u015fehir, Cappadocia',\n      phone: '+90 384 271 2800',\n      checkIn: '5 Nov 2026',\n      checkOut: '7 Nov 2026'\n    },\n    generalNotes: 'Pakej Pelancongan Merangkumi: Sarapan harian, satu makan tengah hari di Cappadocia, pemandu pelancong berlesen, tiket pelayaran Bosphorus, pemindahan peribadi lapangan terbang, tiket domestik Pegasus, dan tipping pemandu.\\n\\nPakej Tidak Termasuk: Tiket penerbangan antarabangsa Emirates, insurans perjalanan persendirian, makan tengah hari\/malam selebihnya, perbelanjaan peribadi dan aktiviti pilihan belon udara panas.'\n  }\n};\n\nexport default function App() {\n  \/\/ --- STATE WITH LOCAL STORAGE PERSISTENCE ---\n  const [data, setData] = useState(() =&gt; {\n    try {\n      const saved = localStorage.getItem(APP_STORAGE_KEY);\n      if (saved) {\n        const parsed = JSON.parse(saved);\n        if (parsed &amp;&amp; parsed.version === SCHEMA_VERSION) {\n          return parsed;\n        }\n      }\n    } catch (e) {\n      console.error('Failed to load local storage data:', e);\n    }\n    return initialSeedData;\n  });\n\n  \/\/ Navigation tab state\n  const [activeTab, setActiveTab] = useState('dashboard');\n  const [toastMessage, setToastMessage] = useState(null);\n  const [showSensitiveDocs, setShowSensitiveDocs] = useState(false);\n\n  \/\/ Autosave on data change\n  useEffect(() =&gt; {\n    try {\n      localStorage.setItem(APP_STORAGE_KEY, JSON.stringify(data));\n    } catch (e) {\n      console.error('Failed to autosave to local storage:', e);\n    }\n  }, [data]);\n\n  \/\/ Toast Helper\n  const showToast = (msg) =&gt; {\n    setToastMessage(msg);\n    setTimeout(() =&gt; setToastMessage(null), 3000);\n  };\n\n  \/\/ --- COUNTDOWN CALCULATION ---\n  \/\/ Target: 4 Nov 2026 01:25 Asia\/Kuala_Lumpur\n  const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0, isPast: false });\n\n  useEffect(() =&gt; {\n    const targetTime = new Date('2026-11-04T01:25:00+08:00').getTime();\n\n    const updateTimer = () =&gt; {\n      const now = new Date().getTime();\n      const difference = targetTime - now;\n\n      if (difference &lt;= 0) {\n        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0, isPast: true });\n      } else {\n        const days = Math.floor(difference \/ (1000 * 60 * 60 * 24));\n        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\n        const minutes = Math.floor((difference % (1000 * 60 * 60)) \/ (1000 * 60));\n        const seconds = Math.floor((difference % (1000 * 60)) \/ 1000);\n        setTimeLeft({ days, hours, minutes, seconds, isPast: false });\n      }\n    };\n\n    updateTimer();\n    const interval = setInterval(updateTimer, 1000);\n    return () =&gt; clearInterval(interval);\n  }, []);\n\n  \/\/ --- DERIVED METRICS ---\n  const taskStats = useMemo(() =&gt; {\n    const total = data.checklist.length;\n    const completed = data.checklist.filter(c =&gt; c.done).length;\n    const incomplete = total - completed;\n    const percentage = total &gt; 0 ? Math.round((completed \/ total) * 100) : 0;\n    const criticalPending = data.checklist.filter(c =&gt; !c.done &amp;&amp; (c.priority === 'Kritikal' || c.priority === 'Tinggi'));\n    return { total, completed, incomplete, percentage, criticalPending };\n  }, [data.checklist]);\n\n  const packingStats = useMemo(() =&gt; {\n    const totalItems = data.packing.length;\n    const packedItems = data.packing.filter(p =&gt; p.packed).length;\n    const overallPercentage = totalItems &gt; 0 ? Math.round((packedItems \/ totalItems) * 100) : 0;\n\n    const byPerson = ['AYAH', 'IBU', 'ANAK'].reduce((acc, p) =&gt; {\n      const items = data.packing.filter(item =&gt; item.traveler === p);\n      const packed = items.filter(item =&gt; item.packed).length;\n      acc[p] = {\n        total: items.length,\n        packed,\n        pct: items.length &gt; 0 ? Math.round((packed \/ items.length) * 100) : 0\n      };\n      return acc;\n    }, {});\n\n    const byBag = ['Check-in Bag', 'Cabin Bag', 'Baby Bag'].reduce((acc, b) =&gt; {\n      const items = data.packing.filter(item =&gt; item.bag === b);\n      const packed = items.filter(item =&gt; item.packed).length;\n      acc[b] = {\n        total: items.length,\n        packed,\n        pct: items.length &gt; 0 ? Math.round((packed \/ items.length) * 100) : 0\n      };\n      return acc;\n    }, {});\n\n    return { totalItems, packedItems, overallPercentage, byPerson, byBag };\n  }, [data.packing]);\n\n  const expenseStats = useMemo(() =&gt; {\n    const rate = Number(data.tripSettings.tryToMyrRate) || 0.13;\n    let totalMyr = 0;\n    let totalTry = 0;\n\n    data.expenses.forEach(exp =&gt; {\n      const amt = Number(exp.amount) || 0;\n      if (exp.currency === 'TRY') {\n        totalTry += amt;\n        totalMyr += amt * rate;\n      } else {\n        totalMyr += amt;\n      }\n    });\n\n    const budgetLimit = Number(data.tripSettings.budgetLimitMyr) || 8000;\n    const remainingMyr = budgetLimit - totalMyr;\n    const percentUsed = budgetLimit &gt; 0 ? Math.min(100, Math.round((totalMyr \/ budgetLimit) * 100)) : 0;\n\n    \/\/ By category\n    const byCategory = {};\n    data.expenses.forEach(exp =&gt; {\n      const cat = exp.category || 'Lain-lain';\n      const costInMyr = exp.currency === 'TRY' ? (Number(exp.amount) * rate) : Number(exp.amount);\n      byCategory[cat] = (byCategory[cat] || 0) + costInMyr;\n    });\n\n    return { totalMyr, totalTry, budgetLimit, remainingMyr, percentUsed, byCategory };\n  }, [data.expenses, data.tripSettings.tryToMyrRate, data.tripSettings.budgetLimitMyr]);\n\n  \/\/ Overall Preparation Index: Weighted average of checklist (60%) and packing (40%)\n  const overallPrep = Math.round((taskStats.percentage * 0.6) + (packingStats.overallPercentage * 0.4));\n\n  \/\/ --- ACTIONS &amp; CRUD HANDLERS ---\n  const handleResetData = () =&gt; {\n    \/\/ Custom confirm dialog replacement\n    const confirmed = window.confirm('Adakah anda pasti mahu set semula semua data ke tetapan asal? Tindakan ini tidak boleh diundur.');\n    if (confirmed) {\n      setData(initialSeedData);\n      localStorage.setItem(APP_STORAGE_KEY, JSON.stringify(initialSeedData));\n      showToast('Data perjalanan telah diset semula ke asal.');\n    }\n  };\n\n  const handleExportJson = () =&gt; {\n    const jsonStr = JSON.stringify(data, null, 2);\n    const blob = new Blob([jsonStr], { type: 'application\/json' });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = `kaz_family_turkiye_2026_backup_${new Date().toISOString().slice(0, 10)}.json`;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n    URL.revokeObjectURL(url);\n    showToast('Salinan data JSON berjaya dieksport.');\n  };\n\n  const handleImportJson = (event) =&gt; {\n    const file = event.target.files?.[0];\n    if (!file) return;\n\n    const reader = new FileReader();\n    reader.onload = (e) =&gt; {\n      try {\n        const imported = JSON.parse(e.target.result);\n        if (imported &amp;&amp; imported.tripSettings &amp;&amp; imported.itinerary &amp;&amp; imported.checklist &amp;&amp; imported.packing) {\n          setData(imported);\n          showToast('Data sandaran berjaya diimport dan dimuat semula.');\n        } else {\n          showToast('Ralat: Fail JSON tidak sepadan dengan struktur jadual perjalanan.');\n        }\n      } catch (err) {\n        showToast('Ralat memproses fail JSON. Sila periksa fail.');\n      }\n    };\n    reader.readAsText(file);\n    \/\/ Reset input\n    event.target.value = null;\n  };\n\n  const handlePrintPdf = () =&gt; {\n    window.print();\n  };\n\n  \/\/ --- TAB RENDERERS ---\n\n  \/\/ 1. DASHBOARD TAB\n  const renderDashboard = () =&gt; (\n    <div classname=\"space-y-6\">\n      {\/* Hero Card with Countdown *\/}\n      <div classname=\"bg-gradient-to-br from-emerald-800 to-teal-900 text-white rounded-3xl p-6 md:p-8 shadow-xl relative overflow-hidden\">\n        <div classname=\"absolute -right-10 -bottom-10 w-48 h-48 bg-white\/5 rounded-full pointer-events-none blur-2xl\"><\/div>\n        <div classname=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-white\/10 pb-4\">\n          <div>\n            <span classname=\"inline-block px-3 py-1 bg-emerald-700\/60 rounded-full text-xs font-semibold uppercase tracking-wider text-emerald-200 mb-2\">\n              Percutian Keluarga 2026\n            <\/span>\n            <h1 classname=\"text-2xl md:text-3xl font-extrabold tracking-tight\">KAZ FAMILY \u2022 T\u00dcRKIYE<\/h1>\n            <p classname=\"text-emerald-100 text-sm mt-1 flex items-center gap-2\">\n              <mappin classname=\"w-4 h-4 text-emerald-300\"> Istanbul &amp; Cappadocia \u2022 3\u201311 November 2026\n            <\/mappin><\/p>\n          <\/div>\n          <div classname=\"text-left md:text-right\">\n            <span classname=\"text-xs text-emerald-200\">Ahli Keluarga<\/span>\n            <p classname=\"font-semibold text-sm\">2 Dewasa &amp; 1 Anak (~1 Tahun)<\/p>\n          <\/div>\n        <\/div>\n\n        {\/* Departure Countdown *\/}\n        <div classname=\"mt-6\">\n          <p classname=\"text-xs uppercase font-medium text-emerald-300 tracking-wider mb-2\">\n            Hitung Detik Menuju Pelepasan (4 Nov 2026, 01:25 MYT KLIA EK343):\n          <\/p>\n          {timeLeft.isPast ? (\n            <div classname=\"bg-white\/10 rounded-2xl p-4 text-center\">\n              <p classname=\"text-lg font-bold\">Penerbangan telah berlepas atau sedang berlangsung! Selamat bercuti.<\/p>\n            <\/div>\n          ) : (\n            <div classname=\"grid grid-cols-4 gap-2 md:gap-4 text-center\">\n              <div classname=\"bg-black\/20 backdrop-blur-sm rounded-2xl p-3 border border-white\/10\">\n                <span classname=\"text-2xl md:text-4xl font-extrabold block text-white\">{timeLeft.days}<\/span>\n                <span classname=\"text-[10px] md:text-xs text-emerald-200 uppercase font-semibold\">Hari<\/span>\n              <\/div>\n              <div classname=\"bg-black\/20 backdrop-blur-sm rounded-2xl p-3 border border-white\/10\">\n                <span classname=\"text-2xl md:text-4xl font-extrabold block text-white\">{timeLeft.hours}<\/span>\n                <span classname=\"text-[10px] md:text-xs text-emerald-200 uppercase font-semibold\">Jam<\/span>\n              <\/div>\n              <div classname=\"bg-black\/20 backdrop-blur-sm rounded-2xl p-3 border border-white\/10\">\n                <span classname=\"text-2xl md:text-4xl font-extrabold block text-white\">{timeLeft.minutes}<\/span>\n                <span classname=\"text-[10px] md:text-xs text-emerald-200 uppercase font-semibold\">Minit<\/span>\n              <\/div>\n              <div classname=\"bg-black\/20 backdrop-blur-sm rounded-2xl p-3 border border-white\/10\">\n                <span classname=\"text-2xl md:text-4xl font-extrabold block text-white\">{timeLeft.seconds}<\/span>\n                <span classname=\"text-[10px] md:text-xs text-emerald-200 uppercase font-semibold\">Saat<\/span>\n              <\/div>\n            <\/div>\n          )}\n        <\/div>\n      <\/div>\n\n      {\/* Preparation Snapshot Cards *\/}\n      <div classname=\"grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4\">\n        <div classname=\"bg-white rounded-2xl p-4 shadow-sm border border-stone-200 flex flex-col justify-between\">\n          <div classname=\"flex items-center justify-between text-stone-500 mb-2\">\n            <span classname=\"text-xs font-semibold\">Status Persiapan<\/span>\n            <checkcircle2 classname=\"w-4 h-4 text-emerald-600\">\n          <\/checkcircle2><\/div>\n          <div classname=\"text-2xl font-bold text-stone-800\">{overallPrep}%<\/div>\n          <div classname=\"w-full bg-stone-100 rounded-full h-2 mt-2 overflow-hidden\">\n            <div classname=\"bg-emerald-600 h-2 rounded-full transition-all duration-500\" style=\"{{\" width:=\"\" `${overallprep}%`=\"\" }}=\"\"><\/div>\n          <\/div>\n          <span classname=\"text-[10px] text-stone-500 mt-1\">Gabungan Checklist &amp; Beg<\/span>\n        <\/div>\n\n        <div classname=\"bg-white rounded-2xl p-4 shadow-sm border border-stone-200 flex flex-col justify-between\">\n          <div classname=\"flex items-center justify-between text-stone-500 mb-2\">\n            <span classname=\"text-xs font-semibold\">Tugasan Siap<\/span>\n            <filetext classname=\"w-4 h-4 text-blue-600\">\n          <\/filetext><\/div>\n          <div classname=\"text-2xl font-bold text-stone-800\">\n            {taskStats.completed} <span classname=\"text-sm font-normal text-stone-400\">\/ {taskStats.total}<\/span>\n          <\/div>\n          <div classname=\"w-full bg-stone-100 rounded-full h-2 mt-2 overflow-hidden\">\n            <div classname=\"bg-blue-600 h-2 rounded-full transition-all duration-500\" style=\"{{\" width:=\"\" `${taskstats.percentage}%`=\"\" }}=\"\"><\/div>\n          <\/div>\n          <span classname=\"text-[10px] text-stone-500 mt-1\">{taskStats.incomplete} tugasan belum selesai<\/span>\n        <\/div>\n\n        <div classname=\"bg-white rounded-2xl p-4 shadow-sm border border-stone-200 flex flex-col justify-between\">\n          <div classname=\"flex items-center justify-between text-stone-500 mb-2\">\n            <span classname=\"text-xs font-semibold\">Barang Dibungkus<\/span>\n            <luggage classname=\"w-4 h-4 text-amber-600\">\n          <\/luggage><\/div>\n          <div classname=\"text-2xl font-bold text-stone-800\">\n            {packingStats.packedItems} <span classname=\"text-sm font-normal text-stone-400\">\/ {packingStats.totalItems}<\/span>\n          <\/div>\n          <div classname=\"w-full bg-stone-100 rounded-full h-2 mt-2 overflow-hidden\">\n            <div classname=\"bg-amber-600 h-2 rounded-full transition-all duration-500\" style=\"{{\" width:=\"\" `${packingstats.overallpercentage}%`=\"\" }}=\"\"><\/div>\n          <\/div>\n          <span classname=\"text-[10px] text-stone-500 mt-1\">Kemajuan keseluruhan beg<\/span>\n        <\/div>\n\n        <div classname=\"bg-white rounded-2xl p-4 shadow-sm border border-stone-200 flex flex-col justify-between\">\n          <div classname=\"flex items-center justify-between text-stone-500 mb-2\">\n            <span classname=\"text-xs font-semibold\">Belanja Semasa<\/span>\n            <dollarsign classname=\"w-4 h-4 text-emerald-600\">\n          <\/dollarsign><\/div>\n          <div classname=\"text-2xl font-bold text-stone-800\">\n            RM {expenseStats.totalMyr.toFixed(0)}\n          <\/div>\n          <div classname=\"w-full bg-stone-100 rounded-full h-2 mt-2 overflow-hidden\">\n            <div classname=\"bg-teal-600 h-2 rounded-full transition-all duration-500\" style=\"{{\" width:=\"\" `${expensestats.percentused}%`=\"\" }}=\"\"><\/div>\n          <\/div>\n          <span classname=\"text-[10px] text-stone-500 mt-1\">Baki: RM {expenseStats.remainingMyr.toFixed(0)}<\/span>\n        <\/div>\n      <\/div>\n\n      {\/* Critical Baby Essentials Warning Card *\/}\n      <div classname=\"bg-amber-50 border-2 border-amber-200 rounded-3xl p-5 md:p-6 shadow-sm\">\n        <div classname=\"flex items-start gap-3\">\n          <div classname=\"p-2.5 bg-amber-100 text-amber-800 rounded-2xl\">\n            <baby classname=\"w-6 h-6\">\n          <\/baby><\/div>\n          <div classname=\"flex-1\">\n            <div classname=\"flex items-center justify-between\">\n              <h2 classname=\"text-base font-bold text-amber-950\">Perhatian Khas Bayi (~1 Tahun)<\/h2>\n              <span classname=\"px-2.5 py-0.5 text-xs font-semibold bg-amber-200 text-amber-900 rounded-full\">Kritikal<\/span>\n            <\/div>\n            <p classname=\"text-xs md:text-sm text-amber-800 mt-1 leading-relaxed\">\n              <strong>Peringatan Utama:<\/strong> Kanak-kanak \/ bayi 1 tahun dilarang keras menaiki aktiviti belon udara panas Cappadocia atas faktor keselamatan undang-undang penerbangan awam Turki. Salah seorang ibu bapa perlu bersiap sedia bergilir menjaga anak di hotel atau kawasan bawah.\n            <\/p>\n            <div classname=\"grid grid-cols-1 sm:grid-cols-2 gap-2 mt-3 pt-3 border-t border-amber-200\/60 text-xs text-amber-900\">\n              <div classname=\"flex items-center gap-2\">\n                <span classname=\"w-2 h-2 rounded-full bg-amber-500\"><\/span>\n                <span>Kerusi Keselamatan Kereta (Car Seat): <strong>Perlu sahkan dengan ejen kenderaan tour<\/strong><\/span>\n              <\/div>\n              <div classname=\"flex items-center gap-2\">\n                <span classname=\"w-2 h-2 rounded-full bg-amber-500\"><\/span>\n                <span>Tiket Bayi Pegasus &amp; Emirates: <strong>Status belum disahkan dalam sistem<\/strong><\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      {\/* Outstanding Critical Checklist *\/}\n      <div classname=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\">\n        <div classname=\"flex items-center justify-between mb-4\">\n          <div>\n            <h2 classname=\"text-base font-bold text-stone-800\">Tugasan Kritikal Menunggu Tindakan<\/h2>\n            <p classname=\"text-xs text-stone-500\">Selesaikan perkara penting ini secepat mungkin<\/p>\n          <\/div>\n          <button onclick=\"{()\" ==\"\"> setActiveTab('checklist')}\n            className=\"text-xs font-semibold text-emerald-700 hover:text-emerald-800 bg-emerald-50 px-3 py-1.5 rounded-xl transition\"\n          &gt;\n            Lihat Semua ({taskStats.total})\n          <\/button>\n        <\/div>\n\n        {taskStats.criticalPending.length === 0 ? (\n          <div classname=\"text-center py-6 text-stone-400 text-sm\">\n            <checkcircle2 classname=\"w-8 h-8 mx-auto text-emerald-500 mb-2\">\n            Hebat! Semua tugasan berkeutamaan kritikal &amp; tinggi telah diselesaikan.\n          <\/checkcircle2><\/div>\n        ) : (\n          <div classname=\"space-y-2\">\n            {taskStats.criticalPending.slice(0, 4).map(item =&gt; (\n              <div key=\"{item.id}\" classname=\"flex items-center justify-between p-3 rounded-2xl bg-stone-50 border border-stone-200 hover:bg-stone-100 transition cursor-pointer\" onclick=\"{()\" ==\"\"> {\n                  const updated = data.checklist.map(t =&gt; t.id === item.id ? { ...t, done: !t.done } : t);\n                  setData({ ...data, checklist: updated });\n                  showToast(item.done ? 'Tugasan ditandakan belum siap' : 'Tugasan diselesaikan!');\n                }}\n              &gt;\n                <div classname=\"flex items-center gap-3\">\n                  <div classname=\"{item.done\" ?=\"\" \"text-emerald-600\"=\"\" :=\"\" \"text-stone-400\"}=\"\">\n                    {item.done ? <checkcircle2 classname=\"w-5 h-5\"> : <circle classname=\"w-5 h-5\">}\n                  <\/circle><\/checkcircle2><\/div>\n                  <div>\n                    <span classname=\"text-xs md:text-sm font-semibold text-stone-800 block\">{item.title}<\/span>\n                    <span classname=\"text-[11px] text-stone-500\">Tindakan: {item.assignedTo} \u2022 Tarikh: {item.deadline || 'Tiada'}<\/span>\n                  <\/div>\n                <\/div>\n                <span classname=\"text-[10px] font-bold px-2 py-0.5 rounded-full bg-red-100 text-red-700 whitespace-nowrap\">\n                  {item.priority}\n                <\/span>\n              <\/div>\n            ))}\n          <\/div>\n        )}\n      <\/div>\n\n      {\/* Next Upcoming Flights \/ Key Activities *\/}\n      <div classname=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\">\n        <div classname=\"flex items-center justify-between mb-4\">\n          <div>\n            <h2 classname=\"text-base font-bold text-stone-800\">Jadual Penerbangan Utama<\/h2>\n            <p classname=\"text-xs text-stone-500\">Perhatikan perbezaan lapangan terbang IST (Eropah) dan SAW (Asia)<\/p>\n          <\/div>\n          <button onclick=\"{()\" ==\"\"> setActiveTab('flights')}\n            className=\"text-xs font-semibold text-emerald-700 hover:text-emerald-800 bg-emerald-50 px-3 py-1.5 rounded-xl transition\"\n          &gt;\n            Semua Penerbangan\n          <\/button>\n        <\/div>\n\n        <div classname=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\n          {data.flights.slice(0, 4).map(fl =&gt; (\n            <div key=\"{fl.id}\" classname=\"p-4 rounded-2xl border border-stone-200 bg-stone-50\/70 hover:bg-white transition shadow-sm\">\n              <div classname=\"flex justify-between items-start\">\n                <span classname=\"{`px-2.5\" py-0.5=\"\" rounded-full=\"\" text-[10px]=\"\" font-bold=\"\" uppercase=\"\" tracking-wider=\"\" ${=\"\" fl.airporttype=\"==\" 'domestic-saw'=\"\" ?=\"\" 'bg-amber-100=\"\" text-amber-800=\"\" border=\"\" border-amber-300'=\"\" :=\"\" 'bg-blue-100=\"\" text-blue-800'=\"\" }`}=\"\">\n                  {fl.airline} \u2022 {fl.flightNumber}\n                <\/span>\n                <span classname=\"text-xs font-semibold text-stone-600\">{fl.date}<\/span>\n              <\/div>\n              <div classname=\"mt-3 flex items-center justify-between\">\n                <div>\n                  <div classname=\"text-lg font-black text-stone-800\">{fl.departureTime}<\/div>\n                  <div classname=\"text-xs font-medium text-stone-500\">{fl.origin}<\/div>\n                <\/div>\n                <div classname=\"flex flex-col items-center px-2\">\n                  <plane classname=\"w-4 h-4 text-stone-400 rotate-90 my-0.5\">\n                  <span classname=\"text-[10px] text-stone-400\">{fl.classType}<\/span>\n                <\/plane><\/div>\n                <div classname=\"text-right\">\n                  <div classname=\"text-lg font-black text-stone-800\">{fl.arrivalTime}<\/div>\n                  <div classname=\"text-xs font-medium text-stone-500\">{fl.destination}<\/div>\n                <\/div>\n              <\/div>\n              <div classname=\"mt-2 pt-2 border-t border-stone-200\/70 flex justify-between items-center text-[11px] text-stone-500\">\n                <span>Bagasi Dewasa: {fl.baggageAdult}<\/span>\n                <span classname=\"text-amber-700 font-medium\">Bayi: {fl.infantTicket}<\/span>\n              <\/div>\n            <\/div>\n          ))}\n        <\/div>\n      <\/div>\n    <\/div>\n  );\n\n  \/\/ 2. JADUAL PERJALANAN (ITINERARY)\n  const [selectedDayFilter, setSelectedDayFilter] = useState('ALL');\n  const [editingItinerary, setEditingItinerary] = useState(null);\n  const [newItineraryItem, setNewItineraryItem] = useState({\n    dayNumber: 1,\n    date: '2026-11-03',\n    city: 'Istanbul',\n    time: '12:00',\n    title: '',\n    location: '',\n    notes: '',\n    cost: 0,\n    currency: 'TRY',\n    status: 'Akan Datang',\n    bookingRef: '',\n    packageStatus: 'Termasuk dalam Pakej'\n  });\n  const [showAddItineraryModal, setShowAddItineraryModal] = useState(false);\n\n  const filteredItinerary = useMemo(() =&gt; {\n    if (selectedDayFilter === 'ALL') return data.itinerary;\n    return data.itinerary.filter(it =&gt; it.dayNumber.toString() === selectedDayFilter);\n  }, [data.itinerary, selectedDayFilter]);\n\n  const moveItinerary = (index, direction) =&gt; {\n    const newItems = [...data.itinerary];\n    const targetIndex = direction === 'up' ? index - 1 : index + 1;\n    if (targetIndex &lt; 0 || targetIndex &gt;= newItems.length) return;\n    const temp = newItems[index];\n    newItems[index] = newItems[targetIndex];\n    newItems[targetIndex] = temp;\n    setData({ ...data, itinerary: newItems });\n    showToast('Susunan aktiviti berjaya diubah');\n  };\n\n  const deleteItineraryItem = (id) =&gt; {\n    if (window.confirm('Hapus aktiviti ini dari jadual perjalanan?')) {\n      const updated = data.itinerary.filter(it =&gt; it.id !== id);\n      setData({ ...data, itinerary: updated });\n      showToast('Aktiviti dihapuskan.');\n    }\n  };\n\n  const saveItineraryItem = (item) =&gt; {\n    const updated = data.itinerary.map(it =&gt; it.id === item.id ? item : it);\n    setData({ ...data, itinerary: updated });\n    setEditingItinerary(null);\n    showToast('Perubahan jadual disimpan.');\n  };\n\n  const addItineraryItem = (e) =&gt; {\n    e.preventDefault();\n    if (!newItineraryItem.title.trim()) return;\n    const newItem = {\n      ...newItineraryItem,\n      id: 'it-' + Date.now(),\n      cost: Number(newItineraryItem.cost) || 0\n    };\n    setData({ ...data, itinerary: [...data.itinerary, newItem] });\n    setShowAddItineraryModal(false);\n    setNewItineraryItem({\n      dayNumber: 1,\n      date: '2026-11-03',\n      city: 'Istanbul',\n      time: '12:00',\n      title: '',\n      location: '',\n      notes: '',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: '',\n      packageStatus: 'Termasuk dalam Pakej'\n    });\n    showToast('Aktiviti baharu ditambah!');\n  };\n\n  const renderItinerary = () =&gt; (\n    <div classname=\"space-y-6\">\n      {\/* Top Header &amp; Day Filters *\/}\n      <div classname=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\">\n        <div classname=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3\">\n          <div>\n            <h2 classname=\"text-xl font-bold text-stone-800\">Jadual Perjalanan Harian (3\u201311 Nov 2026)<\/h2>\n            <p classname=\"text-xs text-stone-500\">Pengurusan penuh aktiviti di Istanbul dan Cappadocia<\/p>\n          <\/div>\n          <button onclick=\"{()\" ==\"\"> setShowAddItineraryModal(true)}\n            className=\"flex items-center gap-2 bg-emerald-700 hover:bg-emerald-800 text-white px-4 py-2 rounded-2xl text-xs font-semibold shadow-sm transition\"\n          &gt;\n            <plus classname=\"w-4 h-4\"> Tambah Aktiviti\n          <\/plus><\/button>\n        <\/div>\n\n        {\/* Day Pills Filter *\/}\n        <div classname=\"flex gap-2 overflow-x-auto pb-1 mt-4 scrollbar-none\">\n          <button onclick=\"{()\" ==\"\"> setSelectedDayFilter('ALL')}\n            className={`px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap transition ${\n              selectedDayFilter === 'ALL'\n                ? 'bg-stone-900 text-white shadow-sm'\n                : 'bg-stone-100 text-stone-600 hover:bg-stone-200'\n            }`}\n          &gt;\n            Semua Hari (9 Hari)\n          <\/button>\n          {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(day =&gt; (\n            <button key=\"{day}\" onclick=\"{()\" ==\"\"> setSelectedDayFilter(day.toString())}\n              className={`px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap transition ${\n                selectedDayFilter === day.toString()\n                  ? 'bg-emerald-800 text-white shadow-sm'\n                  : 'bg-stone-100 text-stone-600 hover:bg-stone-200'\n              }`}\n            &gt;\n              Hari {day} ({day === 1 ? '3 Nov' : `${day + 2} Nov`})\n            <\/button>\n          ))}\n        <\/div>\n      <\/div>\n\n      {\/* Package Inclusions Indicator Card *\/}\n      <div classname=\"bg-stone-50 border border-stone-200 rounded-2xl p-4 text-xs text-stone-700\">\n        <span classname=\"font-bold text-stone-800 block mb-1\">Status Pakej Perjalanan:<\/span>\n        <div classname=\"flex flex-wrap gap-2 text-[11px]\">\n          <span classname=\"px-2.5 py-1 rounded-lg bg-emerald-100 text-emerald-800 font-medium\">\u2713 Termasuk dalam Pakej (Hotel, Sarapan, Tour, Tiket Bosphorus, Pemandu)<\/span>\n          <span classname=\"px-2.5 py-1 rounded-lg bg-rose-100 text-rose-800 font-medium\">\u2717 Dikecualikan (Tiket Emirates Antarabangsa, Belon Udara Panas, Makan Malam)<\/span>\n          <span classname=\"px-2.5 py-1 rounded-lg bg-amber-100 text-amber-800 font-medium\">\u23f3 Menunggu Pengesahan (Kerusi Bayi, Tiket Domestik Anak)<\/span>\n        <\/div>\n      <\/div>\n\n      {\/* Itinerary Timeline List *\/}\n      <div classname=\"space-y-4\">\n        {filteredItinerary.map((item, index) =&gt; {\n          const isEditing = editingItinerary?.id === item.id;\n          const googleMapsUrl = `https:\/\/www.google.com\/maps\/search\/?api=1&amp;query=${encodeURIComponent(item.location || item.title)}`;\n\n          if (isEditing) {\n            return (\n              <div key=\"{item.id}\" classname=\"bg-white p-5 rounded-3xl border-2 border-emerald-500 shadow-md space-y-3\">\n                <div classname=\"flex justify-between items-center pb-2 border-b border-stone-100\">\n                  <span classname=\"font-bold text-sm text-stone-800\">Kemaskini Aktiviti<\/span>\n                  <button onclick=\"{()\" ==\"\"> setEditingItinerary(null)} className=\"text-stone-400 hover:text-stone-600\"&gt;\n                    <x classname=\"w-5 h-5\">\n                  <\/x><\/button>\n                <\/div>\n                <div classname=\"grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs\">\n                  <div>\n                    <label classname=\"font-semibold text-stone-600 block mb-1\">Tajuk Aktiviti<\/label>\n                    <input type=\"text\" classname=\"w-full border border-stone-300 rounded-xl p-2\" value=\"{editingItinerary.title}\" onchange=\"{(e)\" ==\"\"> setEditingItinerary({ ...editingItinerary, title: e.target.value })}\n                    \/&gt;\n                  <\/div>\n                  <div>\n                    <label classname=\"font-semibold text-stone-600 block mb-1\">Masa<\/label>\n                    <input type=\"text\" classname=\"w-full border border-stone-300 rounded-xl p-2\" value=\"{editingItinerary.time}\" onchange=\"{(e)\" ==\"\"> setEditingItinerary({ ...editingItinerary, time: e.target.value })}\n                    \/&gt;\n                  <\/div>\n                  <div>\n                    <label classname=\"font-semibold text-stone-600 block mb-1\">Status<\/label>\n                    <select classname=\"w-full border border-stone-300 rounded-xl p-2\" value=\"{editingItinerary.status}\" onchange=\"{(e)\" ==\"\"> setEditingItinerary({ ...editingItinerary, status: e.target.value })}\n                    &gt;\n                      <option value=\"Belum Mula\">Belum Mula<\/option>\n                      <option value=\"Akan Datang\">Akan Datang<\/option>\n                      <option value=\"Selesai\">Selesai<\/option>\n                      <option value=\"Dibatalkan\">Dibatalkan<\/option>\n                    <\/select>\n                  <\/div>\n                <\/div>\n\n                <div classname=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs\">\n                  <div>\n                    <label classname=\"font-semibold text-stone-600 block mb-1\">Lokasi<\/label>\n                    <input type=\"text\" classname=\"w-full border border-stone-300 rounded-xl p-2\" value=\"{editingItinerary.location}\" onchange=\"{(e)\" ==\"\"> setEditingItinerary({ ...editingItinerary, location: e.target.value })}\n                    \/&gt;\n                  <\/div>\n                  <div>\n                    <label classname=\"font-semibold text-stone-600 block mb-1\">Status Pakej<\/label>\n                    <input type=\"text\" classname=\"w-full border border-stone-300 rounded-xl p-2\" value=\"{editingItinerary.packageStatus}\" onchange=\"{(e)\" ==\"\"> setEditingItinerary({ ...editingItinerary, packageStatus: e.target.value })}\n                    \/&gt;\n                  <\/div>\n                <\/div>\n\n                <div>\n                  <label classname=\"font-semibold text-stone-600 block mb-1 text-xs\">Nota &amp; Maklumat Tambahan<\/label>\n                  <textarea rows=\"{2}\" classname=\"w-full border border-stone-300 rounded-xl p-2 text-xs\" value=\"{editingItinerary.notes}\" onchange=\"{(e)\" ==\"\"> setEditingItinerary({ ...editingItinerary, notes: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n\n                &lt;div className=\"flex justify-end gap-2 pt-2\"&gt;\n                  &lt;button\n                    onClick={() =&gt; setEditingItinerary(null)}\n                    className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-stone-100 text-stone-600 hover:bg-stone-200\"\n                  &gt;\n                    Batal\n                  &lt;\/button&gt;\n                  &lt;button\n                    onClick={() =&gt; saveItineraryItem(editingItinerary)}\n                    className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-700 text-white hover:bg-emerald-800\"\n                  &gt;\n                    Simpan Perubahan\n                  &lt;\/button&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            );\n          }\n\n          return (\n            &lt;div\n              key={item.id}\n              className={`bg-white rounded-3xl p-5 border transition shadow-sm ${\n                item.status === 'Selesai' ? 'border-emerald-200 bg-emerald-50\/20' : 'border-stone-200'\n              }`}\n            &gt;\n              &lt;div className=\"flex flex-col sm:flex-row justify-between items-start gap-3\"&gt;\n                &lt;div className=\"flex items-start gap-3 flex-1\"&gt;\n                  &lt;div className=\"flex flex-col items-center\"&gt;\n                    &lt;span className=\"w-8 h-8 rounded-2xl bg-stone-100 text-stone-800 font-bold text-xs flex items-center justify-center\"&gt;\n                      H{item.dayNumber}\n                    &lt;\/span&gt;\n                    &lt;span className=\"text-[10px] text-stone-400 mt-1 font-mono\"&gt;{item.time}&lt;\/span&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div className=\"flex-1\"&gt;\n                    &lt;div className=\"flex flex-wrap items-center gap-2\"&gt;\n                      &lt;h3 className=\"font-bold text-sm md:text-base text-stone-900\"&gt;{item.title}&lt;\/h3&gt;\n                      &lt;span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${\n                        item.status === 'Selesai'\n                          ? 'bg-emerald-100 text-emerald-800'\n                          : item.status === 'Dibatalkan'\n                          ? 'bg-rose-100 text-rose-800'\n                          : 'bg-stone-100 text-stone-700'\n                      }`}&gt;\n                        {item.status}\n                      &lt;\/span&gt;\n                    &lt;\/div&gt;\n\n                    &lt;div className=\"flex items-center gap-1.5 text-xs text-stone-500 mt-1\"&gt;\n                      &lt;MapPin className=\"w-3.5 h-3.5 text-rose-500 flex-shrink-0\" \/&gt;\n                      &lt;span&gt;{item.location}&lt;\/span&gt;\n                      &lt;a\n                        href={googleMapsUrl}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"inline-flex items-center gap-1 text-[11px] text-emerald-700 hover:text-emerald-900 font-semibold ml-2 underline\"\n                      &gt;\n                        Buka Google Maps &lt;ExternalLink className=\"w-2.5 h-2.5\" \/&gt;\n                      &lt;\/a&gt;\n                    &lt;\/div&gt;\n\n                    {item.notes &amp;&amp; (\n                      &lt;p className=\"text-xs text-stone-600 mt-2 bg-stone-50 p-2.5 rounded-xl border border-stone-100\"&gt;\n                        {item.notes}\n                      &lt;\/p&gt;\n                    )}\n\n                    &lt;div className=\"flex flex-wrap items-center gap-2 mt-3 pt-2 border-t border-stone-100 text-[11px]\"&gt;\n                      &lt;span className=\"text-stone-500\"&gt;Tarikh: &lt;strong&gt;{item.date}&lt;\/strong&gt;&lt;\/span&gt;\n                      &lt;span className=\"text-stone-400\"&gt;\u2022&lt;\/span&gt;\n                      &lt;span className=\"text-stone-500\"&gt;Bandar: &lt;strong&gt;{item.city}&lt;\/strong&gt;&lt;\/span&gt;\n                      &lt;span className=\"text-stone-400\"&gt;\u2022&lt;\/span&gt;\n                      &lt;span className=\"font-medium text-emerald-700\"&gt;{item.packageStatus}&lt;\/span&gt;\n                      {item.bookingRef &amp;&amp; (\n                        &lt;&gt;\n                          &lt;span className=\"text-stone-400\"&gt;\u2022&lt;\/span&gt;\n                          &lt;span className=\"font-mono text-stone-500\"&gt;Ref: {item.bookingRef}&lt;\/span&gt;\n                        &lt;\/&gt;\n                      )}\n                    &lt;\/div&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                {\/* Up\/Down reorder, Edit and Delete controls *\/}\n                &lt;div className=\"flex items-center gap-1 self-end sm:self-start\"&gt;\n                  &lt;button\n                    onClick={() =&gt; moveItinerary(index, 'up')}\n                    disabled={index === 0}\n                    className=\"p-1.5 rounded-xl hover:bg-stone-100 text-stone-500 disabled:opacity-30\"\n                    title=\"Naik ke atas\"\n                  &gt;\n                    &lt;ChevronUp className=\"w-4 h-4\" \/&gt;\n                  &lt;\/button&gt;\n                  &lt;button\n                    onClick={() =&gt; moveItinerary(index, 'down')}\n                    disabled={index === data.itinerary.length - 1}\n                    className=\"p-1.5 rounded-xl hover:bg-stone-100 text-stone-500 disabled:opacity-30\"\n                    title=\"Turun ke bawah\"\n                  &gt;\n                    &lt;ChevronDown className=\"w-4 h-4\" \/&gt;\n                  &lt;\/button&gt;\n                  &lt;button\n                    onClick={() =&gt; setEditingItinerary(item)}\n                    className=\"p-1.5 rounded-xl hover:bg-stone-100 text-stone-600\"\n                    title=\"Edit aktiviti\"\n                  &gt;\n                    &lt;Edit2 className=\"w-4 h-4\" \/&gt;\n                  &lt;\/button&gt;\n                  &lt;button\n                    onClick={() =&gt; deleteItineraryItem(item.id)}\n                    className=\"p-1.5 rounded-xl hover:bg-rose-50 text-rose-500\"\n                    title=\"Hapus aktiviti\"\n                  &gt;\n                    &lt;Trash2 className=\"w-4 h-4\" \/&gt;\n                  &lt;\/button&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          );\n        })}\n      &lt;\/div&gt;\n\n      {\/* Modal Add Itinerary *\/}\n      {showAddItineraryModal &amp;&amp; (\n        &lt;div className=\"fixed inset-0 bg-black\/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\"&gt;\n          &lt;div className=\"bg-white rounded-3xl p-6 max-w-lg w-full shadow-2xl max-h-[90vh] overflow-y-auto\"&gt;\n            &lt;div className=\"flex justify-between items-center pb-3 border-b border-stone-200\"&gt;\n              &lt;h3 className=\"font-bold text-base text-stone-800\"&gt;Tambah Aktiviti Baru&lt;\/h3&gt;\n              &lt;button onClick={() =&gt; setShowAddItineraryModal(false)} className=\"text-stone-400 hover:text-stone-600\"&gt;\n                &lt;X className=\"w-5 h-5\" \/&gt;\n              &lt;\/button&gt;\n            &lt;\/div&gt;\n\n            &lt;form onSubmit={addItineraryItem} className=\"space-y-3 mt-4 text-xs\"&gt;\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Hari Ke- (1 - 9)&lt;\/label&gt;\n                  &lt;input\n                    type=\"number\"\n                    min=\"1\"\n                    max=\"9\"\n                    required\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newItineraryItem.dayNumber}\n                    onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, dayNumber: Number(e.target.value) })}\n                  \/&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Masa (cth: 14:30)&lt;\/label&gt;\n                  &lt;input\n                    type=\"text\"\n                    required\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newItineraryItem.time}\n                    onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, time: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Tajuk Aktiviti&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  required\n                  placeholder=\"cth: Lawatan Masjid Sultan Ahmed\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newItineraryItem.title}\n                  onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, title: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Bandar&lt;\/label&gt;\n                  &lt;input\n                    type=\"text\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newItineraryItem.city}\n                    onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, city: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Tarikh&lt;\/label&gt;\n                  &lt;input\n                    type=\"date\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newItineraryItem.date}\n                    onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, date: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Lokasi \/ Landmark (untuk Google Maps)&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  placeholder=\"cth: Sultanahmet Square, Istanbul\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newItineraryItem.location}\n                  onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, location: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Status Pakej&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  placeholder=\"cth: Termasuk dalam Pakej \/ Bayaran Sendiri\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newItineraryItem.packageStatus}\n                  onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, packageStatus: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Nota Tambahan&lt;\/label&gt;\n                &lt;textarea\n                  rows={2}\n                  placeholder=\"Peringatan stroller, tiket, kasut bertutup...\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newItineraryItem.notes}\n                  onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, notes: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"flex justify-end gap-2 pt-3 border-t border-stone-200\"&gt;\n                &lt;button\n                  type=\"button\"\n                  onClick={() =&gt; setShowAddItineraryModal(false)}\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-stone-100 text-stone-600 hover:bg-stone-200\"\n                &gt;\n                  Batal\n                &lt;\/button&gt;\n                &lt;button\n                  type=\"submit\"\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-700 text-white hover:bg-emerald-800\"\n                &gt;\n                  Tambah Sekarang\n                &lt;\/button&gt;\n              &lt;\/div&gt;\n            &lt;\/form&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      )}\n    &lt;\/div&gt;\n  );\n\n  \/\/ 3. CHECKLIST PERSIAPAN\n  const [checklistFilter, setChecklistFilter] = useState('ALL'); \/\/ ALL, INCOMPLETE, COMPLETE, URGENT\n  const [categoryFilter, setCategoryFilter] = useState('ALL');\n  const [searchChecklist, setSearchChecklist] = useState('');\n  const [showAddChecklistModal, setShowAddChecklistModal] = useState(false);\n  const [newChecklistItem, setNewChecklistItem] = useState({\n    title: '',\n    category: 'Dokumen',\n    priority: 'Sederhana',\n    assignedTo: 'Ayah',\n    deadline: '',\n    notes: '',\n    done: false\n  });\n\n  const checklistCategories = useMemo(() =&gt; {\n    const cats = new Set(data.checklist.map(c =&gt; c.category));\n    return ['ALL', ...Array.from(cats)];\n  }, [data.checklist]);\n\n  const filteredChecklist = useMemo(() =&gt; {\n    return data.checklist.filter(item =&gt; {\n      \/\/ Status filter\n      if (checklistFilter === 'INCOMPLETE' &amp;&amp; item.done) return false;\n      if (checklistFilter === 'COMPLETE' &amp;&amp; !item.done) return false;\n      if (checklistFilter === 'URGENT' &amp;&amp; (item.priority !== 'Kritikal' &amp;&amp; item.priority !== 'Tinggi')) return false;\n\n      \/\/ Category filter\n      if (categoryFilter !== 'ALL' &amp;&amp; item.category !== categoryFilter) return false;\n\n      \/\/ Search term\n      if (searchChecklist.trim()) {\n        const query = searchChecklist.toLowerCase();\n        const matchTitle = item.title.toLowerCase().includes(query);\n        const matchNotes = item.notes?.toLowerCase().includes(query);\n        const matchPerson = item.assignedTo?.toLowerCase().includes(query);\n        if (!matchTitle &amp;&amp; !matchNotes &amp;&amp; !matchPerson) return false;\n      }\n      return true;\n    });\n  }, [data.checklist, checklistFilter, categoryFilter, searchChecklist]);\n\n  const toggleChecklistItem = (id) =&gt; {\n    const updated = data.checklist.map(item =&gt; item.id === id ? { ...item, done: !item.done } : item);\n    setData({ ...data, checklist: updated });\n  };\n\n  const deleteChecklistItem = (id) =&gt; {\n    const updated = data.checklist.filter(item =&gt; item.id !== id);\n    setData({ ...data, checklist: updated });\n    showToast('Tugasan checklist dihapuskan.');\n  };\n\n  const addChecklistItem = (e) =&gt; {\n    e.preventDefault();\n    if (!newChecklistItem.title.trim()) return;\n    const item = {\n      ...newChecklistItem,\n      id: 'c-' + Date.now()\n    };\n    setData({ ...data, checklist: [item, ...data.checklist] });\n    setShowAddChecklistModal(false);\n    setNewChecklistItem({\n      title: '',\n      category: 'Dokumen',\n      priority: 'Sederhana',\n      assignedTo: 'Ayah',\n      deadline: '',\n      notes: '',\n      done: false\n    });\n    showToast('Tugasan baharu berjaya disimpan!');\n  };\n\n  const renderChecklist = () =&gt; (\n    &lt;div className=\"space-y-6\"&gt;\n      {\/* Overview and Add Header *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\"&gt;\n        &lt;div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3\"&gt;\n          &lt;div&gt;\n            &lt;h2 className=\"text-xl font-bold text-stone-800\"&gt;Checklist Persiapan Pra-Perjalanan&lt;\/h2&gt;\n            &lt;p className=\"text-xs text-stone-500\"&gt;\n              {taskStats.completed} daripada {taskStats.total} tugasan diselesaikan ({taskStats.percentage}%)\n            &lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;button\n            onClick={() =&gt; setShowAddChecklistModal(true)}\n            className=\"flex items-center gap-2 bg-emerald-700 hover:bg-emerald-800 text-white px-4 py-2 rounded-2xl text-xs font-semibold shadow-sm transition\"\n          &gt;\n            &lt;Plus className=\"w-4 h-4\" \/&gt; Tambah Tugasan\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n\n        {\/* Progress Bar *\/}\n        &lt;div className=\"w-full bg-stone-100 rounded-full h-3 mt-4 overflow-hidden\"&gt;\n          &lt;div\n            className=\"bg-emerald-600 h-3 rounded-full transition-all duration-500\"\n            style={{ width: `${taskStats.percentage}%` }}\n          &gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n\n        {\/* Filter Controls *\/}\n        &lt;div className=\"flex flex-col sm:flex-row gap-3 mt-4 pt-4 border-t border-stone-100\"&gt;\n          &lt;div className=\"relative flex-1\"&gt;\n            &lt;Search className=\"w-4 h-4 absolute left-3 top-3 text-stone-400\" \/&gt;\n            &lt;input\n              type=\"text\"\n              placeholder=\"Cari tugasan, penama, atau nota...\"\n              className=\"w-full pl-9 pr-3 py-2 bg-stone-50 border border-stone-200 rounded-xl text-xs\"\n              value={searchChecklist}\n              onChange={(e) =&gt; setSearchChecklist(e.target.value)}\n            \/&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"flex gap-2 overflow-x-auto pb-1\"&gt;\n            &lt;select\n              className=\"bg-stone-50 border border-stone-200 rounded-xl px-3 py-2 text-xs font-medium text-stone-700\"\n              value={checklistFilter}\n              onChange={(e) =&gt; setChecklistFilter(e.target.value)}\n            &gt;\n              &lt;option value=\"ALL\"&gt;Semua Status&lt;\/option&gt;\n              &lt;option value=\"INCOMPLETE\"&gt;Belum Siap Sahaja&lt;\/option&gt;\n              &lt;option value=\"COMPLETE\"&gt;Sudah Siap Sahaja&lt;\/option&gt;\n              &lt;option value=\"URGENT\"&gt;Kritikal &amp; Tinggi&lt;\/option&gt;\n            &lt;\/select&gt;\n\n            &lt;select\n              className=\"bg-stone-50 border border-stone-200 rounded-xl px-3 py-2 text-xs font-medium text-stone-700\"\n              value={categoryFilter}\n              onChange={(e) =&gt; setCategoryFilter(e.target.value)}\n            &gt;\n              &lt;option value=\"ALL\"&gt;Semua Kategori&lt;\/option&gt;\n              {checklistCategories.filter(c =&gt; c !== 'ALL').map(cat =&gt; (\n                &lt;option key={cat} value={cat}&gt;{cat}&lt;\/option&gt;\n              ))}\n            &lt;\/select&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Checklist Task Cards *\/}\n      &lt;div className=\"space-y-2.5\"&gt;\n        {filteredChecklist.length === 0 ? (\n          &lt;div className=\"bg-white rounded-3xl p-8 text-center text-stone-400 border border-stone-200\"&gt;\n            Tiada tugasan ditemui mengikut tapisan semasa.\n          &lt;\/div&gt;\n        ) : (\n          filteredChecklist.map(item =&gt; (\n            &lt;div\n              key={item.id}\n              className={`bg-white rounded-2xl p-4 border transition shadow-sm flex items-start justify-between gap-3 ${\n                item.done ? 'border-emerald-200 bg-emerald-50\/15' : 'border-stone-200'\n              }`}\n            &gt;\n              &lt;div\n                className=\"flex items-start gap-3 flex-1 cursor-pointer\"\n                onClick={() =&gt; toggleChecklistItem(item.id)}\n              &gt;\n                &lt;div className={`mt-0.5 ${item.done ? 'text-emerald-600' : 'text-stone-300 hover:text-stone-500'}`}&gt;\n                  {item.done ? &lt;CheckCircle2 className=\"w-5 h-5\" \/&gt; : &lt;Circle className=\"w-5 h-5\" \/&gt;}\n                &lt;\/div&gt;\n                &lt;div className=\"flex-1\"&gt;\n                  &lt;div className=\"flex flex-wrap items-center gap-2\"&gt;\n                    &lt;span className={`text-xs md:text-sm font-semibold ${item.done ? 'line-through text-stone-400' : 'text-stone-800'}`}&gt;\n                      {item.title}\n                    &lt;\/span&gt;\n                    &lt;span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${\n                      item.priority === 'Kritikal'\n                        ? 'bg-red-100 text-red-700'\n                        : item.priority === 'Tinggi'\n                        ? 'bg-amber-100 text-amber-700'\n                        : 'bg-stone-100 text-stone-600'\n                    }`}&gt;\n                      {item.priority}\n                    &lt;\/span&gt;\n                  &lt;\/div&gt;\n\n                  {item.notes &amp;&amp; (\n                    &lt;p className=\"text-xs text-stone-500 mt-1\"&gt;{item.notes}&lt;\/p&gt;\n                  )}\n\n                  &lt;div className=\"flex flex-wrap items-center gap-2 text-[11px] text-stone-400 mt-2\"&gt;\n                    &lt;span className=\"font-medium text-stone-600\"&gt;Kategori: {item.category}&lt;\/span&gt;\n                    &lt;span&gt;\u2022&lt;\/span&gt;\n                    &lt;span&gt;Tanggungjawab: &lt;strong&gt;{item.assignedTo}&lt;\/strong&gt;&lt;\/span&gt;\n                    {item.deadline &amp;&amp; (\n                      &lt;&gt;\n                        &lt;span&gt;\u2022&lt;\/span&gt;\n                        &lt;span&gt;Tarikh Akhir: &lt;strong&gt;{item.deadline}&lt;\/strong&gt;&lt;\/span&gt;\n                      &lt;\/&gt;\n                    )}\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;button\n                onClick={() =&gt; deleteChecklistItem(item.id)}\n                className=\"p-1.5 text-stone-400 hover:text-rose-500 hover:bg-rose-50 rounded-xl transition\"\n                title=\"Hapus tugasan\"\n              &gt;\n                &lt;Trash2 className=\"w-4 h-4\" \/&gt;\n              &lt;\/button&gt;\n            &lt;\/div&gt;\n          ))\n        )}\n      &lt;\/div&gt;\n\n      {\/* Add Checklist Modal *\/}\n      {showAddChecklistModal &amp;&amp; (\n        &lt;div className=\"fixed inset-0 bg-black\/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\"&gt;\n          &lt;div className=\"bg-white rounded-3xl p-6 max-w-md w-full shadow-2xl\"&gt;\n            &lt;div className=\"flex justify-between items-center pb-3 border-b border-stone-200\"&gt;\n              &lt;h3 className=\"font-bold text-base text-stone-800\"&gt;Tambah Tugasan Baharu&lt;\/h3&gt;\n              &lt;button onClick={() =&gt; setShowAddChecklistModal(false)} className=\"text-stone-400 hover:text-stone-600\"&gt;\n                &lt;X className=\"w-5 h-5\" \/&gt;\n              &lt;\/button&gt;\n            &lt;\/div&gt;\n\n            &lt;form onSubmit={addChecklistItem} className=\"space-y-3 mt-4 text-xs\"&gt;\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Tajuk Tugasan&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  required\n                  placeholder=\"cth: Pengesahan Tiket Bayi Pegasus\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newChecklistItem.title}\n                  onChange={(e) =&gt; setNewChecklistItem({ ...newChecklistItem, title: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Kategori&lt;\/label&gt;\n                  &lt;input\n                    type=\"text\"\n                    required\n                    placeholder=\"cth: Dokumen, Bayi, Kesihatan\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newChecklistItem.category}\n                    onChange={(e) =&gt; setNewChecklistItem({ ...newChecklistItem, category: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Keutamaan&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newChecklistItem.priority}\n                    onChange={(e) =&gt; setNewChecklistItem({ ...newChecklistItem, priority: e.target.value })}\n                  &gt;\n                    &lt;option value=\"Rendah\"&gt;Rendah&lt;\/option&gt;\n                    &lt;option value=\"Sederhana\"&gt;Sederhana&lt;\/option&gt;\n                    &lt;option value=\"Tinggi\"&gt;Tinggi&lt;\/option&gt;\n                    &lt;option value=\"Kritikal\"&gt;Kritikal&lt;\/option&gt;\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Ahli Keluarga&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newChecklistItem.assignedTo}\n                    onChange={(e) =&gt; setNewChecklistItem({ ...newChecklistItem, assignedTo: e.target.value })}\n                  &gt;\n                    &lt;option value=\"Ayah\"&gt;Ayah&lt;\/option&gt;\n                    &lt;option value=\"Ibu\"&gt;Ibu&lt;\/option&gt;\n                    &lt;option value=\"Kedua-dua\"&gt;Kedua-dua (Ayah &amp; Ibu)&lt;\/option&gt;\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Tarikh Akhir (Pilihan)&lt;\/label&gt;\n                  &lt;input\n                    type=\"date\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newChecklistItem.deadline}\n                    onChange={(e) =&gt; setNewChecklistItem({ ...newChecklistItem, deadline: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Nota Tambahan&lt;\/label&gt;\n                &lt;textarea\n                  rows={2}\n                  placeholder=\"Catatan sokongan atau syarat penting...\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newChecklistItem.notes}\n                  onChange={(e) =&gt; setNewChecklistItem({ ...newChecklistItem, notes: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"flex justify-end gap-2 pt-3 border-t border-stone-200\"&gt;\n                &lt;button\n                  type=\"button\"\n                  onClick={() =&gt; setShowAddChecklistModal(false)}\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-stone-100 text-stone-600 hover:bg-stone-200\"\n                &gt;\n                  Batal\n                &lt;\/button&gt;\n                &lt;button\n                  type=\"submit\"\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-700 text-white hover:bg-emerald-800\"\n                &gt;\n                  Simpan Tugasan\n                &lt;\/button&gt;\n              &lt;\/div&gt;\n            &lt;\/form&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      )}\n    &lt;\/div&gt;\n  );\n\n  \/\/ 4. PACKING LIST\n  const [activeTravelerFilter, setActiveTravelerFilter] = useState('ALL'); \/\/ ALL, AYAH, IBU, ANAK\n  const [activeBagFilter, setActiveBagFilter] = useState('ALL'); \/\/ ALL, Check-in Bag, Cabin Bag, Baby Bag\n  const [showAddPackingModal, setShowAddPackingModal] = useState(false);\n  const [newPackingItem, setNewPackingItem] = useState({\n    traveler: 'AYAH',\n    item: '',\n    bag: 'Cabin Bag',\n    qty: 1,\n    notes: '',\n    packed: false\n  });\n\n  const filteredPacking = useMemo(() =&gt; {\n    return data.packing.filter(item =&gt; {\n      if (activeTravelerFilter !== 'ALL' &amp;&amp; item.traveler !== activeTravelerFilter) return false;\n      if (activeBagFilter !== 'ALL' &amp;&amp; item.bag !== activeBagFilter) return false;\n      return true;\n    });\n  }, [data.packing, activeTravelerFilter, activeBagFilter]);\n\n  const togglePackingItem = (id) =&gt; {\n    const updated = data.packing.map(item =&gt; item.id === id ? { ...item, packed: !item.packed } : item);\n    setData({ ...data, packing: updated });\n  };\n\n  const updateItemQty = (id, delta) =&gt; {\n    const updated = data.packing.map(item =&gt; {\n      if (item.id === id) {\n        const newQty = Math.max(1, (item.qty || 1) + delta);\n        return { ...item, qty: newQty };\n      }\n      return item;\n    });\n    setData({ ...data, packing: updated });\n  };\n\n  const duplicatePackingItem = (item) =&gt; {\n    const duplicated = {\n      ...item,\n      id: 'p-' + Date.now(),\n      item: `${item.item} (Salinan)`\n    };\n    setData({ ...data, packing: [...data.packing, duplicated] });\n    showToast('Barang berjaya diduplikasi.');\n  };\n\n  const deletePackingItem = (id) =&gt; {\n    const updated = data.packing.filter(item =&gt; item.id !== id);\n    setData({ ...data, packing: updated });\n    showToast('Barang dibuang dari senarai beg.');\n  };\n\n  const addPackingItem = (e) =&gt; {\n    e.preventDefault();\n    if (!newPackingItem.item.trim()) return;\n    const item = {\n      ...newPackingItem,\n      id: 'p-' + Date.now(),\n      qty: Number(newPackingItem.qty) || 1\n    };\n    setData({ ...data, packing: [...data.packing, item] });\n    setShowAddPackingModal(false);\n    setNewPackingItem({\n      traveler: 'AYAH',\n      item: '',\n      bag: 'Cabin Bag',\n      qty: 1,\n      notes: '',\n      packed: false\n    });\n    showToast('Barang baharu ditambah ke senarai bungkusan.');\n  };\n\n  const renderPacking = () =&gt; (\n    &lt;div className=\"space-y-6\"&gt;\n      {\/* Header and Summary Cards *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\"&gt;\n        &lt;div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3\"&gt;\n          &lt;div&gt;\n            &lt;h2 className=\"text-xl font-bold text-stone-800\"&gt;Senarai Bungkusan Bagasi (Packing List)&lt;\/h2&gt;\n            &lt;p className=\"text-xs text-stone-500\"&gt;\n              {packingStats.packedItems} daripada {packingStats.totalItems} barang siap dibungkus ({packingStats.overallPercentage}%)\n            &lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;button\n            onClick={() =&gt; setShowAddPackingModal(true)}\n            className=\"flex items-center gap-2 bg-emerald-700 hover:bg-emerald-800 text-white px-4 py-2 rounded-2xl text-xs font-semibold shadow-sm transition\"\n          &gt;\n            &lt;Plus className=\"w-4 h-4\" \/&gt; Tambah Barang\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n\n        {\/* Progress Breakdown by Person *\/}\n        &lt;div className=\"grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-stone-100\"&gt;\n          &lt;div className=\"bg-stone-50 p-3 rounded-2xl border border-stone-200 text-center\"&gt;\n            &lt;span className=\"text-xs font-bold text-stone-700 block\"&gt;AYAH&lt;\/span&gt;\n            &lt;span className=\"text-lg font-black text-emerald-800\"&gt;{packingStats.byPerson.AYAH.pct}%&lt;\/span&gt;\n            &lt;span className=\"text-[10px] text-stone-500 block\"&gt;{packingStats.byPerson.AYAH.packed}\/{packingStats.byPerson.AYAH.total} barang&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;div className=\"bg-stone-50 p-3 rounded-2xl border border-stone-200 text-center\"&gt;\n            &lt;span className=\"text-xs font-bold text-stone-700 block\"&gt;IBU&lt;\/span&gt;\n            &lt;span className=\"text-lg font-black text-emerald-800\"&gt;{packingStats.byPerson.IBU.pct}%&lt;\/span&gt;\n            &lt;span className=\"text-[10px] text-stone-500 block\"&gt;{packingStats.byPerson.IBU.packed}\/{packingStats.byPerson.IBU.total} barang&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;div className=\"bg-stone-50 p-3 rounded-2xl border border-stone-200 text-center\"&gt;\n            &lt;span className=\"text-xs font-bold text-stone-700 block\"&gt;ANAK&lt;\/span&gt;\n            &lt;span className=\"text-lg font-black text-amber-700\"&gt;{packingStats.byPerson.ANAK.pct}%&lt;\/span&gt;\n            &lt;span className=\"text-[10px] text-stone-500 block\"&gt;{packingStats.byPerson.ANAK.packed}\/{packingStats.byPerson.ANAK.total} barang&lt;\/span&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        {\/* Filter Pills *\/}\n        &lt;div className=\"flex flex-col sm:flex-row gap-2 mt-4\"&gt;\n          &lt;div className=\"flex gap-1.5 overflow-x-auto pb-1 flex-1\"&gt;\n            {['ALL', 'AYAH', 'IBU', 'ANAK'].map(tr =&gt; (\n              &lt;button\n                key={tr}\n                onClick={() =&gt; setActiveTravelerFilter(tr)}\n                className={`px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap transition ${\n                  activeTravelerFilter === tr\n                    ? 'bg-stone-900 text-white'\n                    : 'bg-stone-100 text-stone-600 hover:bg-stone-200'\n                }`}\n              &gt;\n                {tr === 'ALL' ? 'Semua Ahli' : tr}\n              &lt;\/button&gt;\n            ))}\n          &lt;\/div&gt;\n\n          &lt;div className=\"flex gap-1.5 overflow-x-auto pb-1\"&gt;\n            {['ALL', 'Check-in Bag', 'Cabin Bag', 'Baby Bag'].map(b =&gt; (\n              &lt;button\n                key={b}\n                onClick={() =&gt; setActiveBagFilter(b)}\n                className={`px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap transition ${\n                  activeBagFilter === b\n                    ? 'bg-emerald-800 text-white'\n                    : 'bg-stone-100 text-stone-600 hover:bg-stone-200'\n                }`}\n              &gt;\n                {b === 'ALL' ? 'Semua Beg' : b}\n              &lt;\/button&gt;\n            ))}\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Item List *\/}\n      &lt;div className=\"space-y-2\"&gt;\n        {filteredPacking.length === 0 ? (\n          &lt;div className=\"bg-white rounded-3xl p-8 text-center text-stone-400 border border-stone-200\"&gt;\n            Tiada barang ditemui untuk tapisan ini.\n          &lt;\/div&gt;\n        ) : (\n          filteredPacking.map(item =&gt; (\n            &lt;div\n              key={item.id}\n              className={`bg-white rounded-2xl p-3.5 border transition shadow-sm flex items-center justify-between gap-3 ${\n                item.packed ? 'border-emerald-200 bg-emerald-50\/15' : 'border-stone-200'\n              }`}\n            &gt;\n              &lt;div\n                className=\"flex items-start gap-3 flex-1 cursor-pointer\"\n                onClick={() =&gt; togglePackingItem(item.id)}\n              &gt;\n                &lt;div className={`mt-0.5 ${item.packed ? 'text-emerald-600' : 'text-stone-300 hover:text-stone-500'}`}&gt;\n                  {item.packed ? &lt;CheckCircle2 className=\"w-5 h-5\" \/&gt; : &lt;Circle className=\"w-5 h-5\" \/&gt;}\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;div className=\"flex flex-wrap items-center gap-2\"&gt;\n                    &lt;span className={`text-xs md:text-sm font-semibold ${item.packed ? 'line-through text-stone-400' : 'text-stone-800'}`}&gt;\n                      {item.item}\n                    &lt;\/span&gt;\n                    &lt;span className=\"text-[10px] font-bold px-2 py-0.5 rounded-full bg-stone-100 text-stone-600\"&gt;\n                      Kuantiti: {item.qty}\n                    &lt;\/span&gt;\n                  &lt;\/div&gt;\n                  {item.notes &amp;&amp; &lt;p className=\"text-xs text-stone-500 mt-0.5\"&gt;{item.notes}&lt;\/p&gt;}\n                  &lt;div className=\"flex items-center gap-2 text-[11px] text-stone-400 mt-1\"&gt;\n                    &lt;span className=\"font-semibold text-emerald-700\"&gt;{item.traveler}&lt;\/span&gt;\n                    &lt;span&gt;\u2022&lt;\/span&gt;\n                    &lt;span className=\"text-stone-600\"&gt;{item.bag}&lt;\/span&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              {\/* Action Buttons: Qty, Duplicate, Delete *\/}\n              &lt;div className=\"flex items-center gap-1.5\"&gt;\n                &lt;div className=\"flex items-center border border-stone-200 rounded-xl bg-stone-50\"&gt;\n                  &lt;button\n                    onClick={() =&gt; updateItemQty(item.id, -1)}\n                    className=\"px-2 py-1 text-xs text-stone-600 hover:bg-stone-200 rounded-l-xl\"\n                    title=\"Kurangkan\"\n                  &gt;\n                    -\n                  &lt;\/button&gt;\n                  &lt;span className=\"px-2 text-xs font-bold text-stone-700\"&gt;{item.qty}&lt;\/span&gt;\n                  &lt;button\n                    onClick={() =&gt; updateItemQty(item.id, 1)}\n                    className=\"px-2 py-1 text-xs text-stone-600 hover:bg-stone-200 rounded-r-xl\"\n                    title=\"Tambah\"\n                  &gt;\n                    +\n                  &lt;\/button&gt;\n                &lt;\/div&gt;\n                &lt;button\n                  onClick={() =&gt; duplicatePackingItem(item)}\n                  className=\"p-1.5 text-stone-400 hover:text-stone-600 rounded-xl hover:bg-stone-100\"\n                  title=\"Salin barang\"\n                &gt;\n                  &lt;Copy className=\"w-4 h-4\" \/&gt;\n                &lt;\/button&gt;\n                &lt;button\n                  onClick={() =&gt; deletePackingItem(item.id)}\n                  className=\"p-1.5 text-stone-400 hover:text-rose-500 rounded-xl hover:bg-rose-50\"\n                  title=\"Hapus barang\"\n                &gt;\n                  &lt;Trash2 className=\"w-4 h-4\" \/&gt;\n                &lt;\/button&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          ))\n        )}\n      &lt;\/div&gt;\n\n      {\/* Add Packing Modal *\/}\n      {showAddPackingModal &amp;&amp; (\n        &lt;div className=\"fixed inset-0 bg-black\/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\"&gt;\n          &lt;div className=\"bg-white rounded-3xl p-6 max-w-md w-full shadow-2xl\"&gt;\n            &lt;div className=\"flex justify-between items-center pb-3 border-b border-stone-200\"&gt;\n              &lt;h3 className=\"font-bold text-base text-stone-800\"&gt;Tambah Barang Ke Bagasi&lt;\/h3&gt;\n              &lt;button onClick={() =&gt; setShowAddPackingModal(false)} className=\"text-stone-400 hover:text-stone-600\"&gt;\n                &lt;X className=\"w-5 h-5\" \/&gt;\n              &lt;\/button&gt;\n            &lt;\/div&gt;\n\n            &lt;form onSubmit={addPackingItem} className=\"space-y-3 mt-4 text-xs\"&gt;\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Nama Barang&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  required\n                  placeholder=\"cth: Sarung Tangan Wol Bayi\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newPackingItem.item}\n                  onChange={(e) =&gt; setNewPackingItem({ ...newPackingItem, item: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Milik Siapa?&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newPackingItem.traveler}\n                    onChange={(e) =&gt; setNewPackingItem({ ...newPackingItem, traveler: e.target.value })}\n                  &gt;\n                    &lt;option value=\"AYAH\"&gt;AYAH&lt;\/option&gt;\n                    &lt;option value=\"IBU\"&gt;IBU&lt;\/option&gt;\n                    &lt;option value=\"ANAK\"&gt;ANAK&lt;\/option&gt;\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Kategori Beg&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newPackingItem.bag}\n                    onChange={(e) =&gt; setNewPackingItem({ ...newPackingItem, bag: e.target.value })}\n                  &gt;\n                    &lt;option value=\"Cabin Bag\"&gt;Cabin Bag&lt;\/option&gt;\n                    &lt;option value=\"Check-in Bag\"&gt;Check-in Bag&lt;\/option&gt;\n                    &lt;option value=\"Baby Bag\"&gt;Baby Bag (Diaper Bag)&lt;\/option&gt;\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Kuantiti&lt;\/label&gt;\n                  &lt;input\n                    type=\"number\"\n                    min=\"1\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newPackingItem.qty}\n                    onChange={(e) =&gt; setNewPackingItem({ ...newPackingItem, qty: Number(e.target.value) })}\n                  \/&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Catatan&lt;\/label&gt;\n                  &lt;input\n                    type=\"text\"\n                    placeholder=\"cth: Kalis angin \/ mudah dicapai\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newPackingItem.notes}\n                    onChange={(e) =&gt; setNewPackingItem({ ...newPackingItem, notes: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"flex justify-end gap-2 pt-3 border-t border-stone-200\"&gt;\n                &lt;button\n                  type=\"button\"\n                  onClick={() =&gt; setShowAddPackingModal(false)}\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-stone-100 text-stone-600 hover:bg-stone-200\"\n                &gt;\n                  Batal\n                &lt;\/button&gt;\n                &lt;button\n                  type=\"submit\"\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-700 text-white hover:bg-emerald-800\"\n                &gt;\n                  Simpan Barang\n                &lt;\/button&gt;\n              &lt;\/div&gt;\n            &lt;\/form&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      )}\n    &lt;\/div&gt;\n  );\n\n  \/\/ 5. BAJET &amp; PERBELANJAAN (BUDGET &amp; EXPENSES)\n  const [showAddExpenseModal, setShowAddExpenseModal] = useState(false);\n  const [newExpense, setNewExpense] = useState({\n    date: new Date().toISOString().slice(0, 10),\n    description: '',\n    category: 'Makanan &amp; Minuman',\n    amount: '',\n    currency: 'TRY',\n    paymentMethod: 'Kad Wise \/ Kad Debit',\n    traveler: 'Bersama',\n    notes: ''\n  });\n\n  const expenseCategories = [\n    'Makanan &amp; Minuman',\n    'Membeli-belah &amp; Cenderahati',\n    'Tarikan &amp; Tiket Lawatan',\n    'Aktiviti Belon Udara Panas (Pilihan)',\n    'Pengangkutan Tambahan &amp; Teksi',\n    'Keperluan &amp; Makanan Bayi',\n    'Kecemasan &amp; Perubatan',\n    'Lain-lain \/ Tipping'\n  ];\n\n  const addExpense = (e) =&gt; {\n    e.preventDefault();\n    if (!newExpense.description.trim() || !newExpense.amount) return;\n\n    const exp = {\n      ...newExpense,\n      id: 'exp-' + Date.now(),\n      amount: Number(newExpense.amount) || 0\n    };\n\n    setData({ ...data, expenses: [exp, ...data.expenses] });\n    setShowAddExpenseModal(false);\n    setNewExpense({\n      date: new Date().toISOString().slice(0, 10),\n      description: '',\n      category: 'Makanan &amp; Minuman',\n      amount: '',\n      currency: 'TRY',\n      paymentMethod: 'Kad Wise \/ Kad Debit',\n      traveler: 'Bersama',\n      notes: ''\n    });\n    showToast('Perbelanjaan baharu direkodkan.');\n  };\n\n  const deleteExpense = (id) =&gt; {\n    const updated = data.expenses.filter(e =&gt; e.id !== id);\n    setData({ ...data, expenses: updated });\n    showToast('Rekod perbelanjaan dihapuskan.');\n  };\n\n  const updateExchangeRate = (val) =&gt; {\n    const rate = Number(val) || 0;\n    setData({\n      ...data,\n      tripSettings: { ...data.tripSettings, tryToMyrRate: rate }\n    });\n  };\n\n  const updateBudgetLimit = (val) =&gt; {\n    const limit = Number(val) || 0;\n    setData({\n      ...data,\n      tripSettings: { ...data.tripSettings, budgetLimitMyr: limit }\n    });\n  };\n\n  const renderBudget = () =&gt; (\n    &lt;div className=\"space-y-6\"&gt;\n      {\/* Budget Summary Card with Manual Rate *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\"&gt;\n        &lt;div className=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4 pb-4 border-b border-stone-100\"&gt;\n          &lt;div&gt;\n            &lt;h2 className=\"text-xl font-bold text-stone-800\"&gt;Kalkulator &amp; Penjejak Bajet&lt;\/h2&gt;\n            &lt;p className=\"text-xs text-stone-500\"&gt;Mata wang dwipilihan: Ringgit Malaysia (MYR) dan Turkish Lira (TRY)&lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;button\n            onClick={() =&gt; setShowAddExpenseModal(true)}\n            className=\"flex items-center gap-2 bg-emerald-700 hover:bg-emerald-800 text-white px-4 py-2 rounded-2xl text-xs font-semibold shadow-sm transition\"\n          &gt;\n            &lt;Plus className=\"w-4 h-4\" \/&gt; Rekod Belanja Baru\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n\n        {\/* Currency Rate &amp; Budget Settings *\/}\n        &lt;div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 bg-stone-50 p-4 rounded-2xl border border-stone-200\"&gt;\n          &lt;div&gt;\n            &lt;label className=\"text-xs font-semibold text-stone-600 block mb-1\"&gt;\n              Kadar Tukaran (Kadar manual): 1 TRY = ? MYR\n            &lt;\/label&gt;\n            &lt;div className=\"flex items-center gap-2\"&gt;\n              &lt;span className=\"text-xs text-stone-400 font-mono\"&gt;RM&lt;\/span&gt;\n              &lt;input\n                type=\"number\"\n                step=\"0.001\"\n                className=\"w-full bg-white border border-stone-300 rounded-xl px-3 py-1.5 text-xs font-bold text-stone-800\"\n                value={data.tripSettings.tryToMyrRate}\n                onChange={(e) =&gt; updateExchangeRate(e.target.value)}\n              \/&gt;\n            &lt;\/div&gt;\n            &lt;span className=\"text-[10px] text-stone-400 mt-1 block\"&gt;Tukar kadar manual ini mengikut caj kad bank\/Wise anda&lt;\/span&gt;\n          &lt;\/div&gt;\n\n          &lt;div&gt;\n            &lt;label className=\"text-xs font-semibold text-stone-600 block mb-1\"&gt;\n              Had Sasaran Bajet Perbelanjaan (MYR)\n            &lt;\/label&gt;\n            &lt;div className=\"flex items-center gap-2\"&gt;\n              &lt;span className=\"text-xs text-stone-400 font-mono\"&gt;RM&lt;\/span&gt;\n              &lt;input\n                type=\"number\"\n                step=\"100\"\n                className=\"w-full bg-white border border-stone-300 rounded-xl px-3 py-1.5 text-xs font-bold text-stone-800\"\n                value={data.tripSettings.budgetLimitMyr}\n                onChange={(e) =&gt; updateBudgetLimit(e.target.value)}\n              \/&gt;\n            &lt;\/div&gt;\n            &lt;span className=\"text-[10px] text-stone-400 mt-1 block\"&gt;Tidak termasuk pakej asal yang telah dibayar&lt;\/span&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        {\/* Budget Numbers *\/}\n        &lt;div className=\"grid grid-cols-1 sm:grid-cols-3 gap-3 mt-4 text-center\"&gt;\n          &lt;div className=\"bg-stone-50 p-3.5 rounded-2xl border border-stone-200\"&gt;\n            &lt;span className=\"text-xs text-stone-500 font-medium block\"&gt;Jumlah Dibelanjakan&lt;\/span&gt;\n            &lt;span className=\"text-xl font-extrabold text-stone-900 block mt-1\"&gt;\n              RM {expenseStats.totalMyr.toFixed(2)}\n            &lt;\/span&gt;\n            &lt;span className=\"text-[11px] text-stone-500\"&gt;\n              \u2248 \u20ba{expenseStats.totalTry.toFixed(2)} TRY\n            &lt;\/span&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"bg-stone-50 p-3.5 rounded-2xl border border-stone-200\"&gt;\n            &lt;span className=\"text-xs text-stone-500 font-medium block\"&gt;Sasaran Bajet&lt;\/span&gt;\n            &lt;span className=\"text-xl font-extrabold text-stone-800 block mt-1\"&gt;\n              RM {expenseStats.budgetLimit.toFixed(2)}\n            &lt;\/span&gt;\n            &lt;span className=\"text-[11px] text-stone-500\"&gt;{expenseStats.percentUsed}% digunakan&lt;\/span&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"bg-stone-50 p-3.5 rounded-2xl border border-stone-200\"&gt;\n            &lt;span className=\"text-xs text-stone-500 font-medium block\"&gt;Baki Bajet&lt;\/span&gt;\n            &lt;span className={`text-xl font-extrabold block mt-1 ${\n              expenseStats.remainingMyr &gt;= 0 ? 'text-emerald-700' : 'text-rose-600'\n            }`}&gt;\n              RM {expenseStats.remainingMyr.toFixed(2)}\n            &lt;\/span&gt;\n            &lt;span className=\"text-[11px] text-stone-500\"&gt;\n              {expenseStats.remainingMyr &gt;= 0 ? 'Dalam kawalan' : 'Melebihi sasaran bajet'}\n            &lt;\/span&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        {\/* Category Breakdown Progress Bars *\/}\n        &lt;div className=\"mt-5 pt-4 border-t border-stone-100\"&gt;\n          &lt;h3 className=\"text-xs font-bold text-stone-700 uppercase tracking-wider mb-3\"&gt;Pecahan Mengikut Kategori (MYR)&lt;\/h3&gt;\n          {Object.keys(expenseStats.byCategory).length === 0 ? (\n            &lt;p className=\"text-xs text-stone-400 italic\"&gt;Belum ada sebarang transaksi direkodkan. Tekan 'Rekod Belanja Baru' untuk mula.&lt;\/p&gt;\n          ) : (\n            &lt;div className=\"space-y-2\"&gt;\n              {Object.entries(expenseStats.byCategory).map(([cat, amount]) =&gt; {\n                const pct = expenseStats.totalMyr &gt; 0 ? Math.round((amount \/ expenseStats.totalMyr) * 100) : 0;\n                return (\n                  &lt;div key={cat} className=\"space-y-1\"&gt;\n                    &lt;div className=\"flex justify-between text-xs\"&gt;\n                      &lt;span className=\"text-stone-700 font-medium\"&gt;{cat}&lt;\/span&gt;\n                      &lt;span className=\"font-bold text-stone-900\"&gt;RM {amount.toFixed(2)} ({pct}%)&lt;\/span&gt;\n                    &lt;\/div&gt;\n                    &lt;div className=\"w-full bg-stone-100 rounded-full h-1.5 overflow-hidden\"&gt;\n                      &lt;div className=\"bg-emerald-600 h-1.5 rounded-full\" style={{ width: `${pct}%` }}&gt;&lt;\/div&gt;\n                    &lt;\/div&gt;\n                  &lt;\/div&gt;\n                );\n              })}\n            &lt;\/div&gt;\n          )}\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Transaction Records Table *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\"&gt;\n        &lt;h3 className=\"text-base font-bold text-stone-800 mb-3\"&gt;Senarai Transaksi Sebenar&lt;\/h3&gt;\n        {data.expenses.length === 0 ? (\n          &lt;div className=\"text-center py-10 text-stone-400 text-xs\"&gt;\n            &lt;DollarSign className=\"w-8 h-8 mx-auto text-stone-300 mb-2\" \/&gt;\n            Tiada rekod bayaran direka. Anda boleh merekodkan perbelanjaan sebenar sebelum atau semasa di T\u00fcrkiye.\n          &lt;\/div&gt;\n        ) : (\n          &lt;div className=\"space-y-2.5\"&gt;\n            {data.expenses.map(exp =&gt; (\n              &lt;div key={exp.id} className=\"p-3.5 rounded-2xl bg-stone-50 border border-stone-200 flex justify-between items-center gap-3\"&gt;\n                &lt;div className=\"flex-1\"&gt;\n                  &lt;div className=\"flex items-center gap-2\"&gt;\n                    &lt;span className=\"text-xs md:text-sm font-bold text-stone-900\"&gt;{exp.description}&lt;\/span&gt;\n                    &lt;span className=\"text-[10px] font-semibold px-2 py-0.5 rounded-full bg-stone-200 text-stone-700\"&gt;\n                      {exp.category}\n                    &lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;div className=\"flex flex-wrap items-center gap-2 text-[11px] text-stone-500 mt-1\"&gt;\n                    &lt;span&gt;{exp.date}&lt;\/span&gt;\n                    &lt;span&gt;\u2022&lt;\/span&gt;\n                    &lt;span&gt;Kaedah: {exp.paymentMethod}&lt;\/span&gt;\n                    {exp.notes &amp;&amp; (\n                      &lt;&gt;\n                        &lt;span&gt;\u2022&lt;\/span&gt;\n                        &lt;span&gt;{exp.notes}&lt;\/span&gt;\n                      &lt;\/&gt;\n                    )}\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                &lt;div className=\"text-right flex items-center gap-3\"&gt;\n                  &lt;div&gt;\n                    &lt;span className=\"text-sm md:text-base font-extrabold text-stone-900 block\"&gt;\n                      {exp.currency === 'TRY' ? `\u20ba${exp.amount.toFixed(2)}` : `RM ${exp.amount.toFixed(2)}`}\n                    &lt;\/span&gt;\n                    {exp.currency === 'TRY' &amp;&amp; (\n                      &lt;span className=\"text-[10px] text-stone-400 block\"&gt;\n                        \u2248 RM {(exp.amount * Number(data.tripSettings.tryToMyrRate || 0.13)).toFixed(2)}\n                      &lt;\/span&gt;\n                    )}\n                  &lt;\/div&gt;\n\n                  &lt;button\n                    onClick={() =&gt; deleteExpense(exp.id)}\n                    className=\"p-1.5 text-stone-400 hover:text-rose-500 rounded-xl hover:bg-rose-50\"\n                    title=\"Hapus rekod\"\n                  &gt;\n                    &lt;Trash2 className=\"w-4 h-4\" \/&gt;\n                  &lt;\/button&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            ))}\n          &lt;\/div&gt;\n        )}\n      &lt;\/div&gt;\n\n      {\/* Add Expense Modal *\/}\n      {showAddExpenseModal &amp;&amp; (\n        &lt;div className=\"fixed inset-0 bg-black\/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\"&gt;\n          &lt;div className=\"bg-white rounded-3xl p-6 max-w-md w-full shadow-2xl\"&gt;\n            &lt;div className=\"flex justify-between items-center pb-3 border-b border-stone-200\"&gt;\n              &lt;h3 className=\"font-bold text-base text-stone-800\"&gt;Rekod Perbelanjaan Baru&lt;\/h3&gt;\n              &lt;button onClick={() =&gt; setShowAddExpenseModal(false)} className=\"text-stone-400 hover:text-stone-600\"&gt;\n                &lt;X className=\"w-5 h-5\" \/&gt;\n              &lt;\/button&gt;\n            &lt;\/div&gt;\n\n            &lt;form onSubmit={addExpense} className=\"space-y-3 mt-4 text-xs\"&gt;\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Keterangan \/ Kedai&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  required\n                  placeholder=\"cth: Makan malam Kumpir di Ortak\u00f6y\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newExpense.description}\n                  onChange={(e) =&gt; setNewExpense({ ...newExpense, description: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Jumlah&lt;\/label&gt;\n                  &lt;input\n                    type=\"number\"\n                    step=\"0.01\"\n                    required\n                    placeholder=\"0.00\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newExpense.amount}\n                    onChange={(e) =&gt; setNewExpense({ ...newExpense, amount: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Mata Wang&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newExpense.currency}\n                    onChange={(e) =&gt; setNewExpense({ ...newExpense, currency: e.target.value })}\n                  &gt;\n                    &lt;option value=\"TRY\"&gt;TRY (Turkish Lira \u20ba)&lt;\/option&gt;\n                    &lt;option value=\"MYR\"&gt;MYR (Ringgit Malaysia)&lt;\/option&gt;\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Kategori&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newExpense.category}\n                    onChange={(e) =&gt; setNewExpense({ ...newExpense, category: e.target.value })}\n                  &gt;\n                    {expenseCategories.map(c =&gt; (\n                      &lt;option key={c} value={c}&gt;{c}&lt;\/option&gt;\n                    ))}\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Kaedah Bayaran&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newExpense.paymentMethod}\n                    onChange={(e) =&gt; setNewExpense({ ...newExpense, paymentMethod: e.target.value })}\n                  &gt;\n                    &lt;option value=\"Kad Wise\"&gt;Kad Wise&lt;\/option&gt;\n                    &lt;option value=\"Kad Debit \/ Kredit\"&gt;Kad Debit \/ Kredit&lt;\/option&gt;\n                    &lt;option value=\"Tunai (TRY)\"&gt;Tunai (TRY)&lt;\/option&gt;\n                    &lt;option value=\"Tunai (EUR)\"&gt;Tunai (EUR)&lt;\/option&gt;\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Tarikh&lt;\/label&gt;\n                &lt;input\n                  type=\"date\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newExpense.date}\n                  onChange={(e) =&gt; setNewExpense({ ...newExpense, date: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Nota Tambahan&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  placeholder=\"cth: Resit disimpan dalam beg sandang\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newExpense.notes}\n                  onChange={(e) =&gt; setNewExpense({ ...newExpense, notes: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"flex justify-end gap-2 pt-3 border-t border-stone-200\"&gt;\n                &lt;button\n                  type=\"button\"\n                  onClick={() =&gt; setShowAddExpenseModal(false)}\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-stone-100 text-stone-600 hover:bg-stone-200\"\n                &gt;\n                  Batal\n                &lt;\/button&gt;\n                &lt;button\n                  type=\"submit\"\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-700 text-white hover:bg-emerald-800\"\n                &gt;\n                  Simpan Transaksi\n                &lt;\/button&gt;\n              &lt;\/div&gt;\n            &lt;\/form&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      )}\n    &lt;\/div&gt;\n  );\n\n  \/\/ 6. DOKUMEN &amp; PENERBANGAN\n  const [editingFlight, setEditingFlight] = useState(null);\n\n  const saveFlightChanges = (flight) =&gt; {\n    const updated = data.flights.map(f =&gt; f.id === flight.id ? flight : f);\n    setData({ ...data, flights: updated });\n    setEditingFlight(null);\n    showToast('Maklumat penerbangan dikemaskini.');\n  };\n\n  const renderDocuments = () =&gt; (\n    &lt;div className=\"space-y-6\"&gt;\n      {\/* Flight Management Section *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\"&gt;\n        &lt;div className=\"flex justify-between items-center mb-4\"&gt;\n          &lt;div&gt;\n            &lt;h2 className=\"text-xl font-bold text-stone-800\"&gt;Tiket Penerbangan &amp; Tempahan&lt;\/h2&gt;\n            &lt;p className=\"text-xs text-stone-500\"&gt;\n              Antarabangsa (Emirates) &amp; Domestik (Pegasus). Pastikan elaun bagasi disahkan.\n            &lt;\/p&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        &lt;div className=\"space-y-4\"&gt;\n          {data.flights.map(flight =&gt; {\n            const isEditing = editingFlight?.id === flight.id;\n\n            if (isEditing) {\n              return (\n                &lt;div key={flight.id} className=\"p-4 rounded-3xl border-2 border-emerald-600 bg-stone-50 space-y-3 text-xs\"&gt;\n                  &lt;div className=\"flex justify-between items-center font-bold text-stone-800\"&gt;\n                    &lt;span&gt;Edit Penerbangan: {flight.airline} {flight.flightNumber}&lt;\/span&gt;\n                    &lt;button onClick={() =&gt; setEditingFlight(null)} className=\"text-stone-400 hover:text-stone-600\"&gt;\n                      &lt;X className=\"w-4 h-4\" \/&gt;\n                    &lt;\/button&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\"&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Tarikh&lt;\/label&gt;\n                      &lt;input\n                        type=\"date\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.date}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, date: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Masa Pelepasan&lt;\/label&gt;\n                      &lt;input\n                        type=\"text\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.departureTime}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, departureTime: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Masa Ketibaan&lt;\/label&gt;\n                      &lt;input\n                        type=\"text\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.arrivalTime}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, arrivalTime: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div className=\"grid grid-cols-1 sm:grid-cols-2 gap-2\"&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Nombor Kerusi&lt;\/label&gt;\n                      &lt;input\n                        type=\"text\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.seatNumbers}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, seatNumbers: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Rujukan Tempahan (PNR)&lt;\/label&gt;\n                      &lt;input\n                        type=\"text\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.bookingRef}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, bookingRef: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div className=\"grid grid-cols-1 sm:grid-cols-2 gap-2\"&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Elaun Bagasi Dewasa&lt;\/label&gt;\n                      &lt;input\n                        type=\"text\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.baggageAdult}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, baggageAdult: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Status Tiket Bayi&lt;\/label&gt;\n                      &lt;input\n                        type=\"text\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.infantTicket}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, infantTicket: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div className=\"flex justify-end gap-2 pt-2\"&gt;\n                    &lt;button\n                      onClick={() =&gt; setEditingFlight(null)}\n                      className=\"px-3 py-1.5 rounded-xl bg-stone-200 text-stone-700 font-semibold\"\n                    &gt;\n                      Batal\n                    &lt;\/button&gt;\n                    &lt;button\n                      onClick={() =&gt; saveFlightChanges(editingFlight)}\n                      className=\"px-3 py-1.5 rounded-xl bg-emerald-700 text-white font-semibold\"\n                    &gt;\n                      Simpan Kemaskini\n                    &lt;\/button&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n              );\n            }\n\n            return (\n              &lt;div\n                key={flight.id}\n                className={`p-4 rounded-3xl border transition shadow-sm bg-white ${\n                  flight.airportType === 'Domestic-SAW' ? 'border-amber-200 bg-amber-50\/20' : 'border-stone-200'\n                }`}\n              &gt;\n                &lt;div className=\"flex flex-col sm:flex-row justify-between items-start gap-2\"&gt;\n                  &lt;div className=\"flex items-center gap-2\"&gt;\n                    &lt;span className={`px-2.5 py-0.5 rounded-full text-xs font-bold uppercase ${\n                      flight.airline === 'Emirates' ? 'bg-red-100 text-red-800' : 'bg-amber-100 text-amber-900'\n                    }`}&gt;\n                      {flight.airline} {flight.flightNumber}\n                    &lt;\/span&gt;\n                    &lt;span className=\"text-xs text-stone-500 font-mono\"&gt;Ref: {flight.bookingRef}&lt;\/span&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div className=\"flex items-center gap-2\"&gt;\n                    &lt;span className=\"text-xs font-semibold text-stone-700\"&gt;{flight.date}&lt;\/span&gt;\n                    &lt;button\n                      onClick={() =&gt; setEditingFlight(flight)}\n                      className=\"p-1 text-stone-400 hover:text-stone-600 rounded-lg\"\n                      title=\"Edit maklumat penerbangan\"\n                    &gt;\n                      &lt;Edit2 className=\"w-3.5 h-3.5\" \/&gt;\n                    &lt;\/button&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                {\/* Route visualization *\/}\n                &lt;div className=\"grid grid-cols-3 items-center text-center my-3 py-2 bg-stone-50 rounded-2xl border border-stone-100\"&gt;\n                  &lt;div className=\"text-left pl-3\"&gt;\n                    &lt;span className=\"text-base md:text-lg font-black text-stone-800 block\"&gt;{flight.departureTime}&lt;\/span&gt;\n                    &lt;span className=\"text-xs font-semibold text-stone-600 block\"&gt;{flight.origin}&lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;div className=\"flex flex-col items-center\"&gt;\n                    &lt;Plane className=\"w-4 h-4 text-emerald-700\" \/&gt;\n                    &lt;span className=\"text-[10px] text-stone-400 mt-1\"&gt;{flight.classType}&lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;div className=\"text-right pr-3\"&gt;\n                    &lt;span className=\"text-base md:text-lg font-black text-stone-800 block\"&gt;{flight.arrivalTime}&lt;\/span&gt;\n                    &lt;span className=\"text-xs font-semibold text-stone-600 block\"&gt;{flight.destination}&lt;\/span&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                &lt;div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2 text-[11px] text-stone-600 mt-2 pt-2 border-t border-stone-100\"&gt;\n                  &lt;div&gt;\n                    &lt;span className=\"text-stone-400 block\"&gt;Bagasi Dewasa:&lt;\/span&gt;\n                    &lt;strong className=\"text-stone-800\"&gt;{flight.baggageAdult}&lt;\/strong&gt;\n                  &lt;\/div&gt;\n                  &lt;div&gt;\n                    &lt;span className=\"text-stone-400 block\"&gt;Bagasi Lain-lain:&lt;\/span&gt;\n                    &lt;span className={flight.baggageOthers === 'Belum disahkan' ? 'text-amber-700 font-bold' : 'text-stone-800'}&gt;\n                      {flight.baggageOthers}\n                    &lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;div&gt;\n                    &lt;span className=\"text-stone-400 block\"&gt;Tiket &amp; Kerusi Bayi:&lt;\/span&gt;\n                    &lt;span className={flight.infantTicket === 'Belum disahkan' ? 'text-rose-600 font-bold' : 'text-stone-800'}&gt;\n                      {flight.infantTicket}\n                    &lt;\/span&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            );\n          })}\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Sensitive Documents &amp; Passport Metadata *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\"&gt;\n        &lt;div className=\"flex justify-between items-center mb-3\"&gt;\n          &lt;div&gt;\n            &lt;h2 className=\"text-lg font-bold text-stone-800\"&gt;Metadata Pasport &amp; Perlindungan Insurans&lt;\/h2&gt;\n            &lt;p className=\"text-xs text-stone-500\"&gt;Maklumat sulit disembunyikan secara lalai untuk keselamatan privasi.&lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;button\n            onClick={() =&gt; setShowSensitiveDocs(!showSensitiveDocs)}\n            className=\"flex items-center gap-1.5 px-3 py-1.5 rounded-xl border border-stone-200 text-xs font-semibold text-stone-700 hover:bg-stone-50\"\n          &gt;\n            {showSensitiveDocs ? &lt;EyeOff className=\"w-4 h-4\" \/&gt; : &lt;Eye className=\"w-4 h-4\" \/&gt;}\n            {showSensitiveDocs ? 'Sembunyi' : 'Papar Nombor'}\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n\n        &lt;div className=\"space-y-3 mt-4\"&gt;\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200\"&gt;\n            &lt;span className=\"text-xs font-bold text-stone-800 block mb-2\"&gt;1. Pasport Ayah (Dewasa 1)&lt;\/span&gt;\n            &lt;div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs\"&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Nombor Pasport:&lt;\/span&gt;\n                &lt;span className=\"font-mono font-bold text-stone-800\"&gt;\n                  {showSensitiveDocs ? data.documents.fatherPassport.number : '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022'}\n                &lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Tarikh Luput:&lt;\/span&gt;\n                &lt;span className=\"font-medium text-stone-800\"&gt;{data.documents.fatherPassport.expiry}&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Status:&lt;\/span&gt;\n                &lt;span className=\"text-emerald-700 font-bold\"&gt;{data.documents.fatherPassport.status}&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200\"&gt;\n            &lt;span className=\"text-xs font-bold text-stone-800 block mb-2\"&gt;2. Pasport Ibu (Dewasa 2)&lt;\/span&gt;\n            &lt;div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs\"&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Nombor Pasport:&lt;\/span&gt;\n                &lt;span className=\"font-mono font-bold text-stone-800\"&gt;\n                  {showSensitiveDocs ? data.documents.motherPassport.number : '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022'}\n                &lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Tarikh Luput:&lt;\/span&gt;\n                &lt;span className=\"font-medium text-stone-800\"&gt;{data.documents.motherPassport.expiry}&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Status:&lt;\/span&gt;\n                &lt;span className=\"text-amber-700 font-bold\"&gt;{data.documents.motherPassport.status}&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200\"&gt;\n            &lt;span className=\"text-xs font-bold text-stone-800 block mb-2\"&gt;3. Pasport &amp; Dokumen Anak (~1 Tahun)&lt;\/span&gt;\n            &lt;div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs\"&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Nombor Pasport:&lt;\/span&gt;\n                &lt;span className=\"font-mono font-bold text-stone-800\"&gt;\n                  {showSensitiveDocs ? data.documents.toddlerPassport.number : '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022'}\n                &lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Tarikh Luput:&lt;\/span&gt;\n                &lt;span className=\"font-medium text-stone-800\"&gt;{data.documents.toddlerPassport.expiry}&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Status:&lt;\/span&gt;\n                &lt;span className=\"text-amber-700 font-bold\"&gt;{data.documents.toddlerPassport.status}&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200 text-xs\"&gt;\n            &lt;span className=\"font-bold text-stone-800 block mb-1\"&gt;Insurans Perjalanan Keluarga&lt;\/span&gt;\n            &lt;div className=\"flex flex-wrap items-center justify-between gap-2\"&gt;\n              &lt;div&gt;\n                &lt;p className=\"text-stone-600\"&gt;Polisi: &lt;strong className=\"font-mono\"&gt;{data.documents.insurancePolicyNumber}&lt;\/strong&gt;&lt;\/p&gt;\n                &lt;p className=\"text-stone-500\"&gt;Status Pembekal: {data.documents.insuranceProvider}&lt;\/p&gt;\n              &lt;\/div&gt;\n              &lt;div className=\"text-right\"&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Talian Kecemasan 24\/7:&lt;\/span&gt;\n                &lt;span className=\"font-mono font-bold text-stone-800\"&gt;{data.documents.insurancePhone}&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n\n  \/\/ 7. NOTA &amp; KECEMASAN (NOTES &amp; CONTACTS)\n  const [generalNotesText, setGeneralNotesText] = useState(data.notesAndContacts.generalNotes);\n\n  const saveGeneralNotes = () =&gt; {\n    setData({\n      ...data,\n      notesAndContacts: { ...data.notesAndContacts, generalNotes: generalNotesText }\n    });\n    showToast('Nota harian berjaya disimpan!');\n  };\n\n  const renderNotesAndEmergency = () =&gt; (\n    &lt;div className=\"space-y-6\"&gt;\n      {\/* Emergency T\u00fcrkiye Quick Call Box *\/}\n      &lt;div className=\"bg-red-50 border-2 border-red-200 rounded-3xl p-5 md:p-6 shadow-sm\"&gt;\n        &lt;div className=\"flex items-center gap-3\"&gt;\n          &lt;div className=\"p-3 bg-red-600 text-white rounded-2xl\"&gt;\n            &lt;Phone className=\"w-6 h-6 animate-pulse\" \/&gt;\n          &lt;\/div&gt;\n          &lt;div&gt;\n            &lt;h2 className=\"text-lg font-black text-red-950\"&gt;NOMBOR KECEMASAN T\u00dcRKIYE: 112&lt;\/h2&gt;\n            &lt;p className=\"text-xs text-red-800\"&gt;\n              Satu nombor berpusat untuk Polis, Ambulans, dan Bomba di seluruh T\u00fcrkiye (Bebas tol).\n            &lt;\/p&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Diplomatic &amp; Consular Contacts *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\"&gt;\n        &lt;h3 className=\"text-base font-bold text-stone-800 mb-4\"&gt;Perwakilan Diplomatik Malaysia di T\u00fcrkiye&lt;\/h3&gt;\n        &lt;div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs\"&gt;\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-1.5\"&gt;\n            &lt;span className=\"font-bold text-stone-900 block\"&gt;{data.notesAndContacts.istanbulConsulate.name}&lt;\/span&gt;\n            &lt;p className=\"text-stone-600\"&gt;{data.notesAndContacts.istanbulConsulate.address}&lt;\/p&gt;\n            &lt;p className=\"text-stone-800 font-mono font-bold pt-1\"&gt;\n              Tel: &lt;a href={`tel:${data.notesAndContacts.istanbulConsulate.phone}`} className=\"text-emerald-700 underline\"&gt;{data.notesAndContacts.istanbulConsulate.phone}&lt;\/a&gt;\n            &lt;\/p&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-1.5\"&gt;\n            &lt;span className=\"font-bold text-stone-900 block\"&gt;{data.notesAndContacts.malaysiaEmbassyAnkara.name}&lt;\/span&gt;\n            &lt;p className=\"text-stone-600\"&gt;{data.notesAndContacts.malaysiaEmbassyAnkara.address}&lt;\/p&gt;\n            &lt;p className=\"text-stone-800 font-mono font-bold pt-1\"&gt;\n              Tel: &lt;a href={`tel:${data.notesAndContacts.malaysiaEmbassyAnkara.phone}`} className=\"text-emerald-700 underline\"&gt;{data.notesAndContacts.malaysiaEmbassyAnkara.phone}&lt;\/a&gt;\n            &lt;\/p&gt;\n            &lt;p className=\"text-stone-600 font-mono\"&gt;Pegawai Bertugas: {data.notesAndContacts.malaysiaEmbassyAnkara.dutyOfficer}&lt;\/p&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Hotel &amp; Lodging Contacts *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\"&gt;\n        &lt;h3 className=\"text-base font-bold text-stone-800 mb-4\"&gt;Penginapan &amp; Hotel&lt;\/h3&gt;\n        &lt;div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs\"&gt;\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-1\"&gt;\n            &lt;span className=\"font-bold text-stone-900 block\"&gt;{data.notesAndContacts.hotelIstanbul.name}&lt;\/span&gt;\n            &lt;p className=\"text-stone-500\"&gt;{data.notesAndContacts.hotelIstanbul.address}&lt;\/p&gt;\n            &lt;p className=\"text-stone-700\"&gt;Daftar Masuk: {data.notesAndContacts.hotelIstanbul.checkIn}&lt;\/p&gt;\n            &lt;p className=\"font-mono font-bold text-emerald-800\"&gt;Tel: {data.notesAndContacts.hotelIstanbul.phone}&lt;\/p&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-1\"&gt;\n            &lt;span className=\"font-bold text-stone-900 block\"&gt;{data.notesAndContacts.hotelCappadocia.name}&lt;\/span&gt;\n            &lt;p className=\"text-stone-500\"&gt;{data.notesAndContacts.hotelCappadocia.address}&lt;\/p&gt;\n            &lt;p className=\"text-stone-700\"&gt;Daftar Masuk: {data.notesAndContacts.hotelCappadocia.checkIn}&lt;\/p&gt;\n            &lt;p className=\"font-mono font-bold text-emerald-800\"&gt;Tel: {data.notesAndContacts.hotelCappadocia.phone}&lt;\/p&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Editable General Notes *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\"&gt;\n        &lt;div className=\"flex justify-between items-center mb-3\"&gt;\n          &lt;h3 className=\"text-base font-bold text-stone-800\"&gt;Nota Perjalanan &amp; Peringatan Harian&lt;\/h3&gt;\n          &lt;button\n            onClick={saveGeneralNotes}\n            className=\"px-3.5 py-1.5 bg-emerald-700 hover:bg-emerald-800 text-white rounded-xl text-xs font-semibold shadow-sm transition\"\n          &gt;\n            Simpan Nota\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n        &lt;textarea\n          rows={6}\n          className=\"w-full border border-stone-200 rounded-2xl p-3 text-xs leading-relaxed text-stone-700 focus:outline-emerald-600\"\n          value={generalNotesText}\n          onChange={(e) =&gt; setGeneralNotesText(e.target.value)}\n        \/&gt;\n      &lt;\/div&gt;\n\n      {\/* Data Backup &amp; Restore Center *\/}\n      &lt;div className=\"bg-stone-900 text-white rounded-3xl p-5 md:p-6 shadow-lg\"&gt;\n        &lt;h3 className=\"text-base font-bold mb-1\"&gt;Pengurusan Sandaran Data (Data Persistence)&lt;\/h3&gt;\n        &lt;p className=\"text-xs text-stone-400 mb-4 leading-relaxed\"&gt;\n          Semua perubahan disimpan serta-merta ke dalam pelayar (localStorage). Gunakan fungsi eksport untuk membuat salinan fail JSON atau mencetak dokumen perjalanan.\n        &lt;\/p&gt;\n\n        &lt;div className=\"flex flex-wrap gap-2.5\"&gt;\n          &lt;button\n            onClick={handleExportJson}\n            className=\"flex items-center gap-1.5 px-4 py-2 bg-emerald-700 hover:bg-emerald-600 text-white rounded-xl text-xs font-semibold transition\"\n          &gt;\n            &lt;Download className=\"w-4 h-4\" \/&gt; Eksport Salinan JSON\n          &lt;\/button&gt;\n\n          &lt;label className=\"flex items-center gap-1.5 px-4 py-2 bg-stone-700 hover:bg-stone-600 text-white rounded-xl text-xs font-semibold cursor-pointer transition\"&gt;\n            &lt;Upload className=\"w-4 h-4\" \/&gt; Import Salinan JSON\n            &lt;input type=\"file\" accept=\".json\" onChange={handleImportJson} className=\"hidden\" \/&gt;\n          &lt;\/label&gt;\n\n          &lt;button\n            onClick={handlePrintPdf}\n            className=\"flex items-center gap-1.5 px-4 py-2 bg-stone-800 hover:bg-stone-700 text-stone-200 rounded-xl text-xs font-semibold border border-stone-700 transition\"\n          &gt;\n            &lt;FileText className=\"w-4 h-4\" \/&gt; Cetak \/ Simpan PDF\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={handleResetData}\n            className=\"flex items-center gap-1.5 px-4 py-2 bg-rose-900\/60 hover:bg-rose-900 text-rose-200 rounded-xl text-xs font-semibold border border-rose-800 transition ml-auto\"\n          &gt;\n            &lt;RefreshCw className=\"w-4 h-4\" \/&gt; Set Semula Data\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n\n  return (\n    &lt;div className=\"min-h-screen bg-[#FBF9F5] text-stone-800 font-sans pb-24 md:pb-12\"&gt;\n      {\/* Toast Notification *\/}\n      {toastMessage &amp;&amp; (\n        &lt;div className=\"fixed top-5 left-1\/2 -translate-x-1\/2 z-50 bg-stone-900 text-white text-xs font-semibold px-4 py-2.5 rounded-full shadow-2xl flex items-center gap-2 animate-bounce\"&gt;\n          &lt;Check className=\"w-4 h-4 text-emerald-400\" \/&gt;\n          &lt;span&gt;{toastMessage}&lt;\/span&gt;\n        &lt;\/div&gt;\n      )}\n\n      {\/* Top Navbar *\/}\n      &lt;header className=\"sticky top-0 z-40 bg-white\/90 backdrop-blur-md border-b border-stone-200\"&gt;\n        &lt;div className=\"max-w-5xl mx-auto px-4 h-16 flex items-center justify-between\"&gt;\n          &lt;div className=\"flex items-center gap-2.5\"&gt;\n            &lt;div className=\"w-9 h-9 rounded-2xl bg-emerald-800 text-white flex items-center justify-center font-black text-sm shadow-sm\"&gt;\n              TR\n            &lt;\/div&gt;\n            &lt;div&gt;\n              &lt;span className=\"font-extrabold text-sm md:text-base tracking-tight text-stone-900 block leading-tight\"&gt;\n                KAZ FAMILY\n              &lt;\/span&gt;\n              &lt;span className=\"text-[10px] text-emerald-800 font-semibold tracking-wider uppercase block\"&gt;\n                T\u00fcrkiye 2026\n              &lt;\/span&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n\n          {\/* Desktop Navigation Links *\/}\n          &lt;nav className=\"hidden md:flex items-center gap-1 text-xs font-semibold text-stone-600\"&gt;\n            {[\n              { id: 'dashboard', label: 'Dashboard' },\n              { id: 'itinerary', label: 'Jadual Perjalanan' },\n              { id: 'checklist', label: 'Checklist' },\n              { id: 'packing', label: 'Packing List' },\n              { id: 'budget', label: 'Bajet' },\n              { id: 'flights', label: 'Penerbangan' },\n              { id: 'notes', label: 'Nota &amp; Kecemasan' }\n            ].map(tab =&gt; (\n              &lt;button\n                key={tab.id}\n                onClick={() =&gt; setActiveTab(tab.id)}\n                className={`px-3 py-1.5 rounded-xl transition ${\n                  activeTab === tab.id\n                    ? 'bg-emerald-800 text-white'\n                    : 'hover:bg-stone-100 text-stone-700'\n                }`}\n              &gt;\n                {tab.label}\n              &lt;\/button&gt;\n            ))}\n          &lt;\/nav&gt;\n\n          &lt;div className=\"flex items-center gap-2\"&gt;\n            &lt;button\n              onClick={handlePrintPdf}\n              className=\"hidden sm:flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-xl border border-stone-200 hover:bg-stone-100 text-stone-700\"\n              title=\"Cetak jadual\"\n            &gt;\n              &lt;Download className=\"w-3.5 h-3.5\" \/&gt; PDF\n            &lt;\/button&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/header&gt;\n\n      {\/* Main App Content Container *\/}\n      &lt;main className=\"max-w-5xl mx-auto px-4 pt-6\"&gt;\n        {activeTab === 'dashboard' &amp;&amp; renderDashboard()}\n        {activeTab === 'itinerary' &amp;&amp; renderItinerary()}\n        {activeTab === 'checklist' &amp;&amp; renderChecklist()}\n        {activeTab === 'packing' &amp;&amp; renderPacking()}\n        {activeTab === 'budget' &amp;&amp; renderBudget()}\n        {activeTab === 'flights' &amp;&amp; renderDocuments()}\n        {activeTab === 'notes' &amp;&amp; renderNotesAndEmergency()}\n      &lt;\/main&gt;\n\n      {\/* Sticky Bottom Navigation for Mobile Devices *\/}\n      &lt;nav className=\"md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white\/95 backdrop-blur-lg border-t border-stone-200 px-2 py-1.5\"&gt;\n        &lt;div className=\"grid grid-cols-7 gap-0.5 text-center\"&gt;\n          &lt;button\n            onClick={() =&gt; setActiveTab('dashboard')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'dashboard' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;Calendar className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Utama&lt;\/span&gt;\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={() =&gt; setActiveTab('itinerary')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'itinerary' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;Clock className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Jadual&lt;\/span&gt;\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={() =&gt; setActiveTab('checklist')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'checklist' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;CheckCircle2 className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Checklist&lt;\/span&gt;\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={() =&gt; setActiveTab('packing')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'packing' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;Luggage className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Beg&lt;\/span&gt;\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={() =&gt; setActiveTab('budget')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'budget' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;DollarSign className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Bajet&lt;\/span&gt;\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={() =&gt; setActiveTab('flights')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'flights' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;Plane className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Tiket&lt;\/span&gt;\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={() =&gt; setActiveTab('notes')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'notes' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;FileText className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Nota&lt;\/span&gt;\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/nav&gt;\n    &lt;\/div&gt;\n  );\n}<\/textarea><\/div><\/div><\/div><\/div>\n<\/script>\n\n\n\n<script data-wp-block-html=\"js\">\nimport React, { useState, useEffect, useMemo } from 'react';\nimport {\n  Calendar,\n  Clock,\n  MapPin,\n  CheckCircle2,\n  Circle,\n  AlertTriangle,\n  Plane,\n  Briefcase,\n  DollarSign,\n  FileText,\n  Phone,\n  Plus,\n  Trash2,\n  Edit2,\n  Copy,\n  ChevronDown,\n  ChevronUp,\n  Download,\n  Upload,\n  RefreshCw,\n  ExternalLink,\n  ShieldAlert,\n  Baby,\n  Eye,\n  EyeOff,\n  Search,\n  Filter,\n  Check,\n  X,\n  Luggage,\n  HeartHandshake\n} from 'lucide-react';\n\n\/\/ --- INITIAL SEED DATA WITH SCHEMA VERSION ---\nconst APP_STORAGE_KEY = 'KAZ_TURKIYE_TRIP_2026_DATA_V1';\nconst SCHEMA_VERSION = '1.0.0';\n\nconst initialSeedData = {\n  version: SCHEMA_VERSION,\n  tripSettings: {\n    tripName: 'KAZ FAMILY \u2022 T\u00dcRKIYE TRIP 2026',\n    departureIso: '2026-11-04T01:25:00+08:00', \/\/ 4 Nov 2026 01:25 MYT\n    travelers: [\n      { id: 't1', name: 'Ayah (Dewasa)', role: 'Adult', baggage: '25kg Check-in \/ 7kg Cabin (Disahkan)' },\n      { id: 't2', name: 'Ibu (Dewasa)', role: 'Adult', baggage: 'Belum disahkan' },\n      { id: 't3', name: 'Anak (~1 Tahun)', role: 'Toddler', baggage: 'Belum disahkan' }\n    ],\n    tryToMyrRate: 0.13, \/\/ 1 TRY = ~0.13 MYR (Manual editable default)\n    budgetLimitMyr: 8000\n  },\n  flights: [\n    {\n      id: 'f1',\n      airline: 'Emirates',\n      flightNumber: 'EK343',\n      date: '2026-11-04',\n      origin: 'KUL (Kuala Lumpur T1)',\n      destination: 'DXB (Dubai T3)',\n      departureTime: '01:25',\n      arrivalTime: '04:45',\n      timezoneNote: 'Waktu Tempatan KUL \/ DXB',\n      classType: 'Economy Saver',\n      bookingRef: 'EK-MY-CONFIRMED',\n      baggageAdult: '25 kg (Disahkan)',\n      baggageOthers: 'Belum disahkan',\n      infantTicket: 'Belum disahkan',\n      seatNumbers: 'Pilihan Semasa Check-in',\n      status: 'Akan Datang',\n      airportType: 'International'\n    },\n    {\n      id: 'f2',\n      airline: 'Emirates',\n      flightNumber: 'EK123',\n      date: '2026-11-04',\n      origin: 'DXB (Dubai T3)',\n      destination: 'IST (Istanbul Airport - European side)',\n      departureTime: '10:15',\n      arrivalTime: '14:25',\n      timezoneNote: 'Waktu Tempatan DXB \/ IST',\n      classType: 'Economy Saver',\n      bookingRef: 'EK-MY-CONFIRMED',\n      baggageAdult: '25 kg (Disahkan)',\n      baggageOthers: 'Belum disahkan',\n      infantTicket: 'Belum disahkan',\n      seatNumbers: 'Pilihan Semasa Check-in',\n      status: 'Akan Datang',\n      airportType: 'International'\n    },\n    {\n      id: 'f3',\n      airline: 'Pegasus Airlines',\n      flightNumber: 'PC2736',\n      date: '2026-11-05',\n      origin: 'SAW (Sabiha G\u00f6k\u00e7en - Asian side)',\n      destination: 'ASR (Kayseri Erkilet Airport)',\n      departureTime: '14:20',\n      arrivalTime: '15:35',\n      timezoneNote: 'Waktu Tempatan T\u00fcrkiye',\n      classType: 'Domestic Economy',\n      bookingRef: 'PGS-DOM-PENDING',\n      baggageAdult: 'Menunggu Pengesahan',\n      baggageOthers: 'Belum disahkan',\n      infantTicket: 'Belum disahkan',\n      seatNumbers: 'Belum ditetapkan',\n      status: 'Akan Datang',\n      airportType: 'Domestic-SAW'\n    },\n    {\n      id: 'f4',\n      airline: 'Pegasus Airlines',\n      flightNumber: 'PC2737',\n      date: '2026-11-07',\n      origin: 'ASR (Kayseri Erkilet Airport)',\n      destination: 'SAW (Sabiha G\u00f6k\u00e7en - Asian side)',\n      departureTime: '16:20',\n      arrivalTime: '17:50',\n      timezoneNote: 'Waktu Tempatan T\u00fcrkiye',\n      classType: 'Domestic Economy',\n      bookingRef: 'PGS-DOM-PENDING',\n      baggageAdult: 'Menunggu Pengesahan',\n      baggageOthers: 'Belum disahkan',\n      infantTicket: 'Belum disahkan',\n      seatNumbers: 'Belum ditetapkan',\n      status: 'Akan Datang',\n      airportType: 'Domestic-SAW'\n    },\n    {\n      id: 'f5',\n      airline: 'Emirates',\n      flightNumber: 'EK122',\n      date: '2026-11-10',\n      origin: 'IST (Istanbul Airport - European side)',\n      destination: 'DXB (Dubai T3)',\n      departureTime: '20:05',\n      arrivalTime: '01:20 (+1d)',\n      timezoneNote: 'Waktu Tempatan IST \/ DXB',\n      classType: 'Economy Saver',\n      bookingRef: 'EK-MY-CONFIRMED',\n      baggageAdult: '25 kg (Disahkan)',\n      baggageOthers: 'Belum disahkan',\n      infantTicket: 'Belum disahkan',\n      seatNumbers: 'Pilihan Semasa Check-in',\n      status: 'Akan Datang',\n      airportType: 'International'\n    },\n    {\n      id: 'f6',\n      airline: 'Emirates',\n      flightNumber: 'EK346',\n      date: '2026-11-11',\n      origin: 'DXB (Dubai T3)',\n      destination: 'KUL (Kuala Lumpur T1)',\n      departureTime: '03:40',\n      arrivalTime: '14:45',\n      timezoneNote: 'Waktu Tempatan DXB \/ KUL',\n      classType: 'Economy Saver',\n      bookingRef: 'EK-MY-CONFIRMED',\n      baggageAdult: '25 kg (Disahkan)',\n      baggageOthers: 'Belum disahkan',\n      infantTicket: 'Belum disahkan',\n      seatNumbers: 'Pilihan Semasa Check-in',\n      status: 'Akan Datang',\n      airportType: 'International'\n    }\n  ],\n  itinerary: [\n    {\n      id: 'it-1',\n      dayNumber: 1,\n      date: '2026-11-03',\n      city: 'Kuala Lumpur',\n      time: '21:25',\n      title: 'Daftar Masuk KLIA Terminal 1',\n      location: 'Kuala Lumpur International Airport Terminal 1',\n      notes: 'Buka kaunter Emirates EK343. Pastikan stroller anak didaftarkan di gate atau check-in.',\n      cost: 0,\n      currency: 'MYR',\n      status: 'Akan Datang',\n      bookingRef: 'EK343',\n      packageStatus: 'Dikecualikan (Tiket Antarabangsa Sendiri)'\n    },\n    {\n      id: 'it-2',\n      dayNumber: 2,\n      date: '2026-11-04',\n      city: 'Istanbul',\n      time: '14:25',\n      title: 'Tiba di Lapangan Terbang Istanbul (IST) &amp; Pemindahan Peribadi',\n      location: 'Istanbul Airport (IST), Tayakad\u0131n, Arnavutk\u00f6y',\n      notes: 'Pemandu swasta sedia menunggu di balai ketibaan dengan papan tanda Kaz Family. Hotel check-in dan rehat.',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'PVT-TRANSFER-IST',\n      packageStatus: 'Termasuk dalam Pakej'\n    },\n    {\n      id: 'it-3',\n      dayNumber: 3,\n      date: '2026-11-05',\n      city: 'Istanbul -&gt; Cappadocia',\n      time: '10:20',\n      title: 'Bertolak ke Lapangan Terbang SAW untuk Penerbangan Cappadocia',\n      location: 'Sabiha G\u00f6k\u00e7en International Airport (SAW)',\n      notes: 'Penerbangan Pegasus PC2736 ke Kayseri (14:20 - 15:35). Tiba di Cappadocia, daftar masuk hotel gua. Pilihan petang: ATV atau menunggang kuda.',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'PC2736',\n      packageStatus: 'Termasuk dalam Pakej'\n    },\n    {\n      id: 'it-4',\n      dayNumber: 4,\n      date: '2026-11-06',\n      city: 'Cappadocia',\n      time: '05:30',\n      title: 'Sunrise Belon Udara Panas (Pilihan) &amp; Lawatan Sehari Cappadocia',\n      location: 'G\u00f6reme Open Air Museum &amp; Uchisar Castle',\n      notes: 'PERINGATAN BAYI: Bayi 1 tahun dilarang naik belon! Seorang ibu bapa perlu bergilir menjaga bayi. Pakej lawatan termasuk makan tengah hari di Avanos, Pasabaglari &amp; Devrent Valley.',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'CAPPA-DAY-TOUR',\n      packageStatus: 'Termasuk dalam Pakej (Belon Dikecualikan)'\n    },\n    {\n      id: 'it-5',\n      dayNumber: 5,\n      date: '2026-11-07',\n      city: 'Cappadocia -&gt; Istanbul',\n      time: '12:20',\n      title: 'Sarapan, Masa Bebas &amp; Penerbangan Pulang ke Istanbul',\n      location: 'Kayseri Erkilet Airport (ASR)',\n      notes: 'Penerbangan Pegasus PC2737 ke Sabiha G\u00f6k\u00e7en (SAW) 16:20 - 17:50. Pemindahan peribadi ke hotel Istanbul.',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'PC2737',\n      packageStatus: 'Termasuk dalam Pakej'\n    },\n    {\n      id: 'it-6',\n      dayNumber: 6,\n      date: '2026-11-08',\n      city: 'Istanbul',\n      time: '09:00',\n      title: 'Pelayaran Bosphorus, Pierre Loti, Menara Galata &amp; Ortak\u00f6y',\n      location: 'Bosphorus Strait, Ey\u00fcp Sultan, Galata Tower',\n      notes: 'Tiket bot Bosphorus ke \u00dcsk\u00fcdar termasuk dalam pakej. Lawatan ke Masjid Ey\u00fcp Sultan, Pierre Loti Hill dengan kereta kabel, jalan santai di Istiklal Street dan rasa Kumpir di Ortak\u00f6y.',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'BOSPHORUS-DAY',\n      packageStatus: 'Termasuk dalam Pakej'\n    },\n    {\n      id: 'it-7',\n      dayNumber: 7,\n      date: '2026-11-09',\n      city: 'Istanbul',\n      time: '09:30',\n      title: 'Warisan Klasik Sultanahmet &amp; Membeli-belah Bazaar',\n      location: 'Hagia Sophia, Blue Mosque, Topkapi Palace, Grand Bazaar',\n      notes: 'Pemandu pelancong tempatan akan memimpin lawatan. Menziarahi Hagia Sophia, Blue Mosque, Hippodrome, Topkapi Palace, Grand Bazaar &amp; Spice Bazaar.',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'SULTANAHMET-DAY',\n      packageStatus: 'Termasuk dalam Pakej'\n    },\n    {\n      id: 'it-8',\n      dayNumber: 8,\n      date: '2026-11-10',\n      city: 'Istanbul -&gt; Dubai',\n      time: '15:05',\n      title: 'Kemas Beg, Masa Bebas &amp; Pemindahan ke Lapangan Terbang IST',\n      location: 'Istanbul Airport (IST)',\n      notes: 'Daftar keluar hotel. Pemindahan ke IST untuk Emirates EK122 (berlepas 20:05). Transit Dubai pada jam 01:20 (11 Nov).',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: 'EK122',\n      packageStatus: 'Termasuk dalam Pakej (Pemindahan Sahaja)'\n    },\n    {\n      id: 'it-9',\n      dayNumber: 9,\n      date: '2026-11-11',\n      city: 'Dubai -&gt; Kuala Lumpur',\n      time: '03:40',\n      title: 'Penerbangan Sambungan EK346 Tiba di Kuala Lumpur',\n      location: 'Kuala Lumpur International Airport T1',\n      notes: 'Tiba di KLIA jam 14:45. Ambil bagasi dan pulang ke rumah dengan selamat.',\n      cost: 0,\n      currency: 'MYR',\n      status: 'Akan Datang',\n      bookingRef: 'EK346',\n      packageStatus: 'Dikecualikan (Tiket Antarabangsa Sendiri)'\n    }\n  ],\n  checklist: [\n    { id: 'c1', title: 'Perbaharui &amp; Sahkan Sah Laku Pasport (&gt;6 Bulan)', category: 'Dokumen', priority: 'Tinggi', assignedTo: 'Ayah', deadline: '2026-09-30', done: true, notes: 'Pastikan pasport Ayah, Ibu dan Anak sah sekurang-kurangnya sehingga Mei 2027' },\n    { id: 'c2', title: 'Sahkan Tiket Antarabangsa Isteri &amp; Anak', category: 'Tiket &amp; Tempahan', priority: 'Kritikal', assignedTo: 'Ayah', deadline: '2026-10-15', done: false, notes: 'Kini hanya tiket seorang dewasa disahkan dalam rekod asal.' },\n    { id: 'c3', title: 'Tempahan Tiket Bayi &amp; Bagasi Pegasus Airlines', category: 'Penerbangan Domestik', priority: 'Kritikal', assignedTo: 'Ayah', deadline: '2026-10-15', done: false, notes: 'Sahkan PC2736 &amp; PC2737 untuk elaun beg dan tempat duduk bayi' },\n    { id: 'c4', title: 'Insurans Perjalanan Keluarga Termasuk Perlindungan Bayi', category: 'Insurans', priority: 'Tinggi', assignedTo: 'Ibu', deadline: '2026-10-20', done: false, notes: 'Perlindungan pembatalan penerbangan dan perubatan luar negara' },\n    { id: 'c5', title: 'Salinan Fizikal &amp; Digital Sijil Lahir Anak', category: 'Dokumen', priority: 'Tinggi', assignedTo: 'Ibu', deadline: '2026-10-25', done: false, notes: 'Wajib dibawa bersama pasport anak untuk pemeriksaan imigresen' },\n    { id: 'c6', title: 'Pengesahan Baucar Hotel di Istanbul &amp; Cappadocia', category: 'Tiket &amp; Tempahan', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-10-28', done: true, notes: 'Termasuk sarapan harian dan penginapan bilik keluarga' },\n    { id: 'c7', title: 'Pengesahan Pengangkutan Lapangan Terbang Peribadi', category: 'Pengangkutan', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-10-28', done: true, notes: 'Pastikan saiz kenderaan memuatkan 3 bagasi besar dan stroller' },\n    { id: 'c8', title: 'Minta Kerusi Keselamatan Bayi (Car Seat) untuk Kenderaan Tour', category: 'Bayi &amp; Keselamatan', priority: 'Kritikal', assignedTo: 'Ibu', deadline: '2026-10-25', done: false, notes: 'Undang-undang T\u00fcrkiye dan keselamatan anak semasa perjalanan jauh' },\n    { id: 'c9', title: 'Daftar Masuk Dalam Talian Emirates (48 Jam Sebelum)', category: 'Penerbangan', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-11-02', done: false, notes: 'Pilih kerusi bassinet jika masih tersedia' },\n    { id: 'c10', title: 'Pengaktifan Kad Luar Negara (Wise\/Maybank\/CIMB) &amp; Tukaran TRY', category: 'Kewangan', priority: 'Tinggi', assignedTo: 'Ayah', deadline: '2026-10-30', done: false, notes: 'Aktifkan transaksi antarabangsa dan sediakan sedikit mata wang tunai Euro\/TRY' },\n    { id: 'c11', title: 'Beli eSIM T\u00fcrkiye (cth. Airalo\/Maya Mobile)', category: 'Komunikasi', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-10-31', done: false, notes: 'Aktifkan sebelum mendarat di Istanbul' },\n    { id: 'c12', title: 'Muat Turun Peta Luar Talian Google Maps &amp; Google Translate (Turki)', category: 'Aplikasi', priority: 'Sederhana', assignedTo: 'Ibu', deadline: '2026-11-01', done: false, notes: 'Peta luar talian Istanbul dan wilayah G\u00f6reme' },\n    { id: 'c13', title: 'Ubat-ubatan Asas Kanak-kanak &amp; Dewasa', category: 'Kesihatan', priority: 'Kritikal', assignedTo: 'Ibu', deadline: '2026-10-28', done: false, notes: 'Ubat demam, selsema bayi, syringe ubat, koyok, minyak angin &amp; first aid kit' },\n    { id: 'c14', title: 'Pakaian Musim Sejuk\/Gugur Bersesuaian Suhu Cappadocia (5\u00b0C - 14\u00b0C)', category: 'Pakaian', priority: 'Tinggi', assignedTo: 'Ibu', deadline: '2026-10-29', done: false, notes: 'Thermal inner, windbreaker, fleece jacket, sarung tangan' },\n    { id: 'c15', title: 'Bekalan Makanan Bayi, Susu Formula &amp; Botol', category: 'Bayi &amp; Keselamatan', priority: 'Kritikal', assignedTo: 'Ibu', deadline: '2026-10-30', done: false, notes: 'Pouch puri makanan, biskut bayi, sabun pencuci botol travel size' },\n    { id: 'c16', title: 'Keselamatan Rumah: Tutup Gas, Paip Utama &amp; Pasang Pemasa Lampu', category: 'Rumah', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-11-03', done: false, notes: 'Maklumkan kepada jiran terdekat atau polis rondaan' },\n    { id: 'c17', title: 'Timbang Beg &amp; Pastikan Had Berat 25kg \/ 7kg Dipatuhi', category: 'Bagasi', priority: 'Tinggi', assignedTo: 'Ayah', deadline: '2026-11-03', done: false, notes: 'Gunakan penimbang digital bagasi sebelum bertolak ke KLIA' }\n  ],\n  packing: [\n    \/\/ AYAH\n    { id: 'p1', traveler: 'AYAH', item: 'Jaket Kalis Angin \/ Puffer Jacket', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Suhu sejuk waktu pagi' },\n    { id: 'p2', traveler: 'AYAH', item: 'Thermal Inner Heattech (Baju &amp; Seluar)', bag: 'Check-in Bag', qty: 3, packed: false, notes: 'Penting untuk Cappadocia' },\n    { id: 'p3', traveler: 'AYAH', item: 'Kemeja \/ T-shirt Lengan Panjang', bag: 'Check-in Bag', qty: 5, packed: false, notes: 'Kapas selesa' },\n    { id: 'p4', traveler: 'AYAH', item: 'Seluar Panjang Tahan Lasak \/ Jeans', bag: 'Check-in Bag', qty: 3, packed: false, notes: 'Untuk aktiviti jalan jauh' },\n    { id: 'p5', traveler: 'AYAH', item: 'Pakaian Dalam &amp; Stoking Tebal', bag: 'Check-in Bag', qty: 7, packed: false, notes: 'Stoking bulu biri-biri\/tebal' },\n    { id: 'p6', traveler: 'AYAH', item: 'Kasut Berjalan Selesa (Sneakers berlapik)', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Jalan berturap batu di Sultanahmet' },\n    { id: 'p7', traveler: 'AYAH', item: 'Peralatan Mandi &amp; Pencukur Travel', bag: 'Check-in Bag', qty: 1, packed: false, notes: 'Bawah 100ml jika kabin' },\n    { id: 'p8', traveler: 'AYAH', item: 'Powerbank, Pengecas &amp; Universal Plug Type C\/F', bag: 'Cabin Bag', qty: 2, packed: false, notes: 'Palam standard T\u00fcrkiye 2-pin' },\n    { id: 'p9', traveler: 'AYAH', item: 'Pasport Asal &amp; Dompet Perjalanan', bag: 'Cabin Bag', qty: 1, packed: true, notes: 'Sentiasa bawa bersama' },\n\n    \/\/ IBU\n    { id: 'p10', traveler: 'IBU', item: 'Warm Jacket \/ Long Wool Coat', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Bawa atas kapal terbang' },\n    { id: 'p11', traveler: 'IBU', item: 'Thermal Inner Heattech', bag: 'Check-in Bag', qty: 3, packed: false, notes: 'Lapisan asas cuaca sejuk' },\n    { id: 'p12', traveler: 'IBU', item: 'Baju Kurung \/ Blouse Labuh &amp; Seluar Selesa', bag: 'Check-in Bag', qty: 6, packed: false, notes: 'Sopan untuk lawatan masjid' },\n    { id: 'p13', traveler: 'IBU', item: 'Tudung Mudah Bentuk \/ Instant Shawl &amp; Inner', bag: 'Check-in Bag', qty: 6, packed: false, notes: 'Warna padan pemandangan' },\n    { id: 'p14', traveler: 'IBU', item: 'Stoking Tebal &amp; Sarung Tangan', bag: 'Check-in Bag', qty: 6, packed: false, notes: 'Pagi sejuk di bukit G\u00f6reme' },\n    { id: 'p15', traveler: 'IBU', item: 'Kasut Berjalan Kalis Air &amp; Selesa', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Penting untuk berjalan di bazaar' },\n    { id: 'p16', traveler: 'IBU', item: 'Set Penjagaan Kulit, Lip Balm &amp; Pelembap', bag: 'Check-in Bag', qty: 1, packed: false, notes: 'Udara T\u00fcrkiye kering ketika musim gugur' },\n    { id: 'p17', traveler: 'IBU', item: 'Pasport Asal Ibu', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Simpan bersama dokumen keluarga' },\n\n    \/\/ ANAK (Toddler ~1 yr)\n    { id: 'p18', traveler: 'ANAK', item: 'Pampers \/ Diapers (Saiz Toddler)', bag: 'Check-in Bag', qty: 35, packed: false, notes: 'Sedia lebihan untuk tempoh 9 hari' },\n    { id: 'p19', traveler: 'ANAK', item: 'Tisu Basah (Wet Wipes Bebas Alkohol)', bag: 'Baby Bag', qty: 4, packed: false, notes: 'Pek besar dan pek kecil poket' },\n    { id: 'p20', traveler: 'ANAK', item: 'Pelapik Menukar Lampin (Changing Mat Padat)', bag: 'Baby Bag', qty: 2, packed: false, notes: 'Untuk penukaran lampin di tandas awam' },\n    { id: 'p21', traveler: 'ANAK', item: 'Pakaian Lengkap Harian Bayi', bag: 'Check-in Bag', qty: 10, packed: false, notes: 'Campuran romper dan baju berlengan' },\n    { id: 'p22', traveler: 'ANAK', item: 'Baju Thermal Dalaman Bayi', bag: 'Check-in Bag', qty: 4, packed: false, notes: 'Lapisan penting waktu malam &amp; pagi' },\n    { id: 'p23', traveler: 'ANAK', item: 'Jaket Tebal Bayi Bersudip (Hooded Puffer)', bag: 'Baby Bag', qty: 1, packed: false, notes: 'Kalis angin' },\n    { id: 'p24', traveler: 'ANAK', item: 'Stoking Tebal, Kasut Bayi, Sarung Tangan &amp; Beanie', bag: 'Baby Bag', qty: 4, packed: false, notes: 'Elak kehilangan haba badan' },\n    { id: 'p25', traveler: 'ANAK', item: 'Selimut Bayi Lembut (Travel Blanket)', bag: 'Baby Bag', qty: 1, packed: false, notes: 'Untuk kegunaan semasa di stroller\/kapal terbang' },\n    { id: 'p26', traveler: 'ANAK', item: 'Susu Formula \/ Pek Bekalan Susu', bag: 'Baby Bag', qty: 2, packed: false, notes: 'Bekalan yang mencukupi untuk perjalanan' },\n    { id: 'p27', traveler: 'ANAK', item: 'Botol Susu &amp; Berus Pencuci Mini', bag: 'Baby Bag', qty: 3, packed: false, notes: 'Termasuk termos air panas kecil' },\n    { id: 'p28', traveler: 'ANAK', item: 'Pouch Puri Makanan Bayi &amp; Biskut Halus', bag: 'Baby Bag', qty: 10, packed: false, notes: 'Mudah suap semasa berjalan' },\n    { id: 'p29', traveler: 'ANAK', item: 'Kain Lap \/ Bib Makan Silikon', bag: 'Baby Bag', qty: 3, packed: false, notes: 'Mudah dibilas' },\n    { id: 'p30', traveler: 'ANAK', item: 'Kit Ubat Bayi (Paracetamol Kanak-kanak, Syringe, Termometer)', bag: 'Baby Bag', qty: 1, packed: false, notes: 'Pemeriksaan suhu badan pantas' },\n    { id: 'p31', traveler: 'ANAK', item: 'Stroller Ringan Lipat Kabin (Cabin-size Approved)', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Bawa terus ke pintu masuk pesawat' },\n    { id: 'p32', traveler: 'ANAK', item: 'Baby Carrier Ergonomik (Gendongan)', bag: 'Baby Bag', qty: 1, packed: false, notes: 'Sangat berguna di kawasan gua Cappadocia' },\n    { id: 'p33', traveler: 'ANAK', item: 'Mainan Kegemaran, Teether &amp; Bantal Peluk Tidur', bag: 'Baby Bag', qty: 2, packed: false, notes: 'Menenangkan anak ketika penerbangan malam' },\n    { id: 'p34', traveler: 'ANAK', item: 'Set Pakaian Ganti Segera Bayi &amp; Ibu Bapa', bag: 'Baby Bag', qty: 2, packed: false, notes: 'Jika berlaku tumpahan atau susu muntah di pesawat' }\n  ],\n  expenses: [], \/\/ Blank initially as requested: Never invent paid expenses\n  documents: {\n    insurancePolicyNumber: 'AIG-TRAVEL-MY-2026-PENDING',\n    insuranceProvider: 'Menunggu Pengesahan Pembelian',\n    insurancePhone: '+60 3 2118 0188',\n    fatherPassport: {\n      number: 'A58992144',\n      expiry: '2028-08-14',\n      status: 'Sah &amp; Disahkan'\n    },\n    motherPassport: {\n      number: 'A61092301',\n      expiry: '2027-11-20',\n      status: 'Perlu Pengesahan Akhir'\n    },\n    toddlerPassport: {\n      number: 'A70912440',\n      expiry: '2029-03-05',\n      status: 'Perlu Pengesahan Salinan Sijil Lahir'\n    },\n    visaRequirements: 'Warganegara Malaysia tidak memerlukan visa pelancong untuk tinggal sehingga 90 hari di T\u00fcrkiye.',\n    notesVerified: false\n  },\n  notesAndContacts: {\n    emergencyNumber: '112 (Panggilan Kecemasan Kebangsaan T\u00fcrkiye)',\n    malaysiaEmbassyAnkara: {\n      name: 'Kedutaan Besar Malaysia di Ankara',\n      address: 'Koza Sokak No. 56, G.O.P. 06700 Cankaya, Ankara, T\u00fcrkiye',\n      phone: '+90 312 446 3547 \/ 3548',\n      dutyOfficer: '+90 534 975 0198'\n    },\n    istanbulConsulate: {\n      name: 'Konsulat Jeneral Malaysia di Istanbul',\n      address: 'Esentepe Mah. Ali Kaya Sok. Polat Plaza B Blok No:1\/1 Sisli, Istanbul',\n      phone: '+90 212 963 8122'\n    },\n    hotelIstanbul: {\n      name: 'Hotel Istanbul Old City Heritage',\n      address: 'Sultanahmet, Fatih, Istanbul',\n      phone: '+90 212 518 9000',\n      checkIn: '4 Nov 2026 (15:00)',\n      checkOut: '5 Nov 2026 &amp; 7-10 Nov 2026'\n    },\n    hotelCappadocia: {\n      name: 'Cappadocia Cave Suites Hotel',\n      address: 'G\u00f6reme, Nev\u015fehir, Cappadocia',\n      phone: '+90 384 271 2800',\n      checkIn: '5 Nov 2026',\n      checkOut: '7 Nov 2026'\n    },\n    generalNotes: 'Pakej Pelancongan Merangkumi: Sarapan harian, satu makan tengah hari di Cappadocia, pemandu pelancong berlesen, tiket pelayaran Bosphorus, pemindahan peribadi lapangan terbang, tiket domestik Pegasus, dan tipping pemandu.\\n\\nPakej Tidak Termasuk: Tiket penerbangan antarabangsa Emirates, insurans perjalanan persendirian, makan tengah hari\/malam selebihnya, perbelanjaan peribadi dan aktiviti pilihan belon udara panas.'\n  }\n};\n\nexport default function App() {\n  \/\/ --- STATE WITH LOCAL STORAGE PERSISTENCE ---\n  const [data, setData] = useState(() =&gt; {\n    try {\n      const saved = localStorage.getItem(APP_STORAGE_KEY);\n      if (saved) {\n        const parsed = JSON.parse(saved);\n        if (parsed &amp;&amp; parsed.version === SCHEMA_VERSION) {\n          return parsed;\n        }\n      }\n    } catch (e) {\n      console.error('Failed to load local storage data:', e);\n    }\n    return initialSeedData;\n  });\n\n  \/\/ Navigation tab state\n  const [activeTab, setActiveTab] = useState('dashboard');\n  const [toastMessage, setToastMessage] = useState(null);\n  const [showSensitiveDocs, setShowSensitiveDocs] = useState(false);\n\n  \/\/ Autosave on data change\n  useEffect(() =&gt; {\n    try {\n      localStorage.setItem(APP_STORAGE_KEY, JSON.stringify(data));\n    } catch (e) {\n      console.error('Failed to autosave to local storage:', e);\n    }\n  }, [data]);\n\n  \/\/ Toast Helper\n  const showToast = (msg) =&gt; {\n    setToastMessage(msg);\n    setTimeout(() =&gt; setToastMessage(null), 3000);\n  };\n\n  \/\/ --- COUNTDOWN CALCULATION ---\n  \/\/ Target: 4 Nov 2026 01:25 Asia\/Kuala_Lumpur\n  const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0, isPast: false });\n\n  useEffect(() =&gt; {\n    const targetTime = new Date('2026-11-04T01:25:00+08:00').getTime();\n\n    const updateTimer = () =&gt; {\n      const now = new Date().getTime();\n      const difference = targetTime - now;\n\n      if (difference &lt;= 0) {\n        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0, isPast: true });\n      } else {\n        const days = Math.floor(difference \/ (1000 * 60 * 60 * 24));\n        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\n        const minutes = Math.floor((difference % (1000 * 60 * 60)) \/ (1000 * 60));\n        const seconds = Math.floor((difference % (1000 * 60)) \/ 1000);\n        setTimeLeft({ days, hours, minutes, seconds, isPast: false });\n      }\n    };\n\n    updateTimer();\n    const interval = setInterval(updateTimer, 1000);\n    return () =&gt; clearInterval(interval);\n  }, []);\n\n  \/\/ --- DERIVED METRICS ---\n  const taskStats = useMemo(() =&gt; {\n    const total = data.checklist.length;\n    const completed = data.checklist.filter(c =&gt; c.done).length;\n    const incomplete = total - completed;\n    const percentage = total &gt; 0 ? Math.round((completed \/ total) * 100) : 0;\n    const criticalPending = data.checklist.filter(c =&gt; !c.done &amp;&amp; (c.priority === 'Kritikal' || c.priority === 'Tinggi'));\n    return { total, completed, incomplete, percentage, criticalPending };\n  }, [data.checklist]);\n\n  const packingStats = useMemo(() =&gt; {\n    const totalItems = data.packing.length;\n    const packedItems = data.packing.filter(p =&gt; p.packed).length;\n    const overallPercentage = totalItems &gt; 0 ? Math.round((packedItems \/ totalItems) * 100) : 0;\n\n    const byPerson = ['AYAH', 'IBU', 'ANAK'].reduce((acc, p) =&gt; {\n      const items = data.packing.filter(item =&gt; item.traveler === p);\n      const packed = items.filter(item =&gt; item.packed).length;\n      acc[p] = {\n        total: items.length,\n        packed,\n        pct: items.length &gt; 0 ? Math.round((packed \/ items.length) * 100) : 0\n      };\n      return acc;\n    }, {});\n\n    const byBag = ['Check-in Bag', 'Cabin Bag', 'Baby Bag'].reduce((acc, b) =&gt; {\n      const items = data.packing.filter(item =&gt; item.bag === b);\n      const packed = items.filter(item =&gt; item.packed).length;\n      acc[b] = {\n        total: items.length,\n        packed,\n        pct: items.length &gt; 0 ? Math.round((packed \/ items.length) * 100) : 0\n      };\n      return acc;\n    }, {});\n\n    return { totalItems, packedItems, overallPercentage, byPerson, byBag };\n  }, [data.packing]);\n\n  const expenseStats = useMemo(() =&gt; {\n    const rate = Number(data.tripSettings.tryToMyrRate) || 0.13;\n    let totalMyr = 0;\n    let totalTry = 0;\n\n    data.expenses.forEach(exp =&gt; {\n      const amt = Number(exp.amount) || 0;\n      if (exp.currency === 'TRY') {\n        totalTry += amt;\n        totalMyr += amt * rate;\n      } else {\n        totalMyr += amt;\n      }\n    });\n\n    const budgetLimit = Number(data.tripSettings.budgetLimitMyr) || 8000;\n    const remainingMyr = budgetLimit - totalMyr;\n    const percentUsed = budgetLimit &gt; 0 ? Math.min(100, Math.round((totalMyr \/ budgetLimit) * 100)) : 0;\n\n    \/\/ By category\n    const byCategory = {};\n    data.expenses.forEach(exp =&gt; {\n      const cat = exp.category || 'Lain-lain';\n      const costInMyr = exp.currency === 'TRY' ? (Number(exp.amount) * rate) : Number(exp.amount);\n      byCategory[cat] = (byCategory[cat] || 0) + costInMyr;\n    });\n\n    return { totalMyr, totalTry, budgetLimit, remainingMyr, percentUsed, byCategory };\n  }, [data.expenses, data.tripSettings.tryToMyrRate, data.tripSettings.budgetLimitMyr]);\n\n  \/\/ Overall Preparation Index: Weighted average of checklist (60%) and packing (40%)\n  const overallPrep = Math.round((taskStats.percentage * 0.6) + (packingStats.overallPercentage * 0.4));\n\n  \/\/ --- ACTIONS &amp; CRUD HANDLERS ---\n  const handleResetData = () =&gt; {\n    \/\/ Custom confirm dialog replacement\n    const confirmed = window.confirm('Adakah anda pasti mahu set semula semua data ke tetapan asal? Tindakan ini tidak boleh diundur.');\n    if (confirmed) {\n      setData(initialSeedData);\n      localStorage.setItem(APP_STORAGE_KEY, JSON.stringify(initialSeedData));\n      showToast('Data perjalanan telah diset semula ke asal.');\n    }\n  };\n\n  const handleExportJson = () =&gt; {\n    const jsonStr = JSON.stringify(data, null, 2);\n    const blob = new Blob([jsonStr], { type: 'application\/json' });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = `kaz_family_turkiye_2026_backup_${new Date().toISOString().slice(0, 10)}.json`;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n    URL.revokeObjectURL(url);\n    showToast('Salinan data JSON berjaya dieksport.');\n  };\n\n  const handleImportJson = (event) =&gt; {\n    const file = event.target.files?.[0];\n    if (!file) return;\n\n    const reader = new FileReader();\n    reader.onload = (e) =&gt; {\n      try {\n        const imported = JSON.parse(e.target.result);\n        if (imported &amp;&amp; imported.tripSettings &amp;&amp; imported.itinerary &amp;&amp; imported.checklist &amp;&amp; imported.packing) {\n          setData(imported);\n          showToast('Data sandaran berjaya diimport dan dimuat semula.');\n        } else {\n          showToast('Ralat: Fail JSON tidak sepadan dengan struktur jadual perjalanan.');\n        }\n      } catch (err) {\n        showToast('Ralat memproses fail JSON. Sila periksa fail.');\n      }\n    };\n    reader.readAsText(file);\n    \/\/ Reset input\n    event.target.value = null;\n  };\n\n  const handlePrintPdf = () =&gt; {\n    window.print();\n  };\n\n  \/\/ --- TAB RENDERERS ---\n\n  \/\/ 1. DASHBOARD TAB\n  const renderDashboard = () =&gt; (\n    <div classname=\"space-y-6\">\n      {\/* Hero Card with Countdown *\/}\n      <div classname=\"bg-gradient-to-br from-emerald-800 to-teal-900 text-white rounded-3xl p-6 md:p-8 shadow-xl relative overflow-hidden\">\n        <div classname=\"absolute -right-10 -bottom-10 w-48 h-48 bg-white\/5 rounded-full pointer-events-none blur-2xl\"><\/div>\n        <div classname=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-white\/10 pb-4\">\n          <div>\n            <span classname=\"inline-block px-3 py-1 bg-emerald-700\/60 rounded-full text-xs font-semibold uppercase tracking-wider text-emerald-200 mb-2\">\n              Percutian Keluarga 2026\n            <\/span>\n            <h1 classname=\"text-2xl md:text-3xl font-extrabold tracking-tight\">KAZ FAMILY \u2022 T\u00dcRKIYE<\/h1>\n            <p classname=\"text-emerald-100 text-sm mt-1 flex items-center gap-2\">\n              <mappin classname=\"w-4 h-4 text-emerald-300\"> Istanbul &amp; Cappadocia \u2022 3\u201311 November 2026\n            <\/mappin><\/p>\n          <\/div>\n          <div classname=\"text-left md:text-right\">\n            <span classname=\"text-xs text-emerald-200\">Ahli Keluarga<\/span>\n            <p classname=\"font-semibold text-sm\">2 Dewasa &amp; 1 Anak (~1 Tahun)<\/p>\n          <\/div>\n        <\/div>\n\n        {\/* Departure Countdown *\/}\n        <div classname=\"mt-6\">\n          <p classname=\"text-xs uppercase font-medium text-emerald-300 tracking-wider mb-2\">\n            Hitung Detik Menuju Pelepasan (4 Nov 2026, 01:25 MYT KLIA EK343):\n          <\/p>\n          {timeLeft.isPast ? (\n            <div classname=\"bg-white\/10 rounded-2xl p-4 text-center\">\n              <p classname=\"text-lg font-bold\">Penerbangan telah berlepas atau sedang berlangsung! Selamat bercuti.<\/p>\n            <\/div>\n          ) : (\n            <div classname=\"grid grid-cols-4 gap-2 md:gap-4 text-center\">\n              <div classname=\"bg-black\/20 backdrop-blur-sm rounded-2xl p-3 border border-white\/10\">\n                <span classname=\"text-2xl md:text-4xl font-extrabold block text-white\">{timeLeft.days}<\/span>\n                <span classname=\"text-[10px] md:text-xs text-emerald-200 uppercase font-semibold\">Hari<\/span>\n              <\/div>\n              <div classname=\"bg-black\/20 backdrop-blur-sm rounded-2xl p-3 border border-white\/10\">\n                <span classname=\"text-2xl md:text-4xl font-extrabold block text-white\">{timeLeft.hours}<\/span>\n                <span classname=\"text-[10px] md:text-xs text-emerald-200 uppercase font-semibold\">Jam<\/span>\n              <\/div>\n              <div classname=\"bg-black\/20 backdrop-blur-sm rounded-2xl p-3 border border-white\/10\">\n                <span classname=\"text-2xl md:text-4xl font-extrabold block text-white\">{timeLeft.minutes}<\/span>\n                <span classname=\"text-[10px] md:text-xs text-emerald-200 uppercase font-semibold\">Minit<\/span>\n              <\/div>\n              <div classname=\"bg-black\/20 backdrop-blur-sm rounded-2xl p-3 border border-white\/10\">\n                <span classname=\"text-2xl md:text-4xl font-extrabold block text-white\">{timeLeft.seconds}<\/span>\n                <span classname=\"text-[10px] md:text-xs text-emerald-200 uppercase font-semibold\">Saat<\/span>\n              <\/div>\n            <\/div>\n          )}\n        <\/div>\n      <\/div>\n\n      {\/* Preparation Snapshot Cards *\/}\n      <div classname=\"grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4\">\n        <div classname=\"bg-white rounded-2xl p-4 shadow-sm border border-stone-200 flex flex-col justify-between\">\n          <div classname=\"flex items-center justify-between text-stone-500 mb-2\">\n            <span classname=\"text-xs font-semibold\">Status Persiapan<\/span>\n            <checkcircle2 classname=\"w-4 h-4 text-emerald-600\">\n          <\/checkcircle2><\/div>\n          <div classname=\"text-2xl font-bold text-stone-800\">{overallPrep}%<\/div>\n          <div classname=\"w-full bg-stone-100 rounded-full h-2 mt-2 overflow-hidden\">\n            <div classname=\"bg-emerald-600 h-2 rounded-full transition-all duration-500\" style=\"{{\" width:=\"\" `${overallprep}%`=\"\" }}=\"\"><\/div>\n          <\/div>\n          <span classname=\"text-[10px] text-stone-500 mt-1\">Gabungan Checklist &amp; Beg<\/span>\n        <\/div>\n\n        <div classname=\"bg-white rounded-2xl p-4 shadow-sm border border-stone-200 flex flex-col justify-between\">\n          <div classname=\"flex items-center justify-between text-stone-500 mb-2\">\n            <span classname=\"text-xs font-semibold\">Tugasan Siap<\/span>\n            <filetext classname=\"w-4 h-4 text-blue-600\">\n          <\/filetext><\/div>\n          <div classname=\"text-2xl font-bold text-stone-800\">\n            {taskStats.completed} <span classname=\"text-sm font-normal text-stone-400\">\/ {taskStats.total}<\/span>\n          <\/div>\n          <div classname=\"w-full bg-stone-100 rounded-full h-2 mt-2 overflow-hidden\">\n            <div classname=\"bg-blue-600 h-2 rounded-full transition-all duration-500\" style=\"{{\" width:=\"\" `${taskstats.percentage}%`=\"\" }}=\"\"><\/div>\n          <\/div>\n          <span classname=\"text-[10px] text-stone-500 mt-1\">{taskStats.incomplete} tugasan belum selesai<\/span>\n        <\/div>\n\n        <div classname=\"bg-white rounded-2xl p-4 shadow-sm border border-stone-200 flex flex-col justify-between\">\n          <div classname=\"flex items-center justify-between text-stone-500 mb-2\">\n            <span classname=\"text-xs font-semibold\">Barang Dibungkus<\/span>\n            <luggage classname=\"w-4 h-4 text-amber-600\">\n          <\/luggage><\/div>\n          <div classname=\"text-2xl font-bold text-stone-800\">\n            {packingStats.packedItems} <span classname=\"text-sm font-normal text-stone-400\">\/ {packingStats.totalItems}<\/span>\n          <\/div>\n          <div classname=\"w-full bg-stone-100 rounded-full h-2 mt-2 overflow-hidden\">\n            <div classname=\"bg-amber-600 h-2 rounded-full transition-all duration-500\" style=\"{{\" width:=\"\" `${packingstats.overallpercentage}%`=\"\" }}=\"\"><\/div>\n          <\/div>\n          <span classname=\"text-[10px] text-stone-500 mt-1\">Kemajuan keseluruhan beg<\/span>\n        <\/div>\n\n        <div classname=\"bg-white rounded-2xl p-4 shadow-sm border border-stone-200 flex flex-col justify-between\">\n          <div classname=\"flex items-center justify-between text-stone-500 mb-2\">\n            <span classname=\"text-xs font-semibold\">Belanja Semasa<\/span>\n            <dollarsign classname=\"w-4 h-4 text-emerald-600\">\n          <\/dollarsign><\/div>\n          <div classname=\"text-2xl font-bold text-stone-800\">\n            RM {expenseStats.totalMyr.toFixed(0)}\n          <\/div>\n          <div classname=\"w-full bg-stone-100 rounded-full h-2 mt-2 overflow-hidden\">\n            <div classname=\"bg-teal-600 h-2 rounded-full transition-all duration-500\" style=\"{{\" width:=\"\" `${expensestats.percentused}%`=\"\" }}=\"\"><\/div>\n          <\/div>\n          <span classname=\"text-[10px] text-stone-500 mt-1\">Baki: RM {expenseStats.remainingMyr.toFixed(0)}<\/span>\n        <\/div>\n      <\/div>\n\n      {\/* Critical Baby Essentials Warning Card *\/}\n      <div classname=\"bg-amber-50 border-2 border-amber-200 rounded-3xl p-5 md:p-6 shadow-sm\">\n        <div classname=\"flex items-start gap-3\">\n          <div classname=\"p-2.5 bg-amber-100 text-amber-800 rounded-2xl\">\n            <baby classname=\"w-6 h-6\">\n          <\/baby><\/div>\n          <div classname=\"flex-1\">\n            <div classname=\"flex items-center justify-between\">\n              <h2 classname=\"text-base font-bold text-amber-950\">Perhatian Khas Bayi (~1 Tahun)<\/h2>\n              <span classname=\"px-2.5 py-0.5 text-xs font-semibold bg-amber-200 text-amber-900 rounded-full\">Kritikal<\/span>\n            <\/div>\n            <p classname=\"text-xs md:text-sm text-amber-800 mt-1 leading-relaxed\">\n              <strong>Peringatan Utama:<\/strong> Kanak-kanak \/ bayi 1 tahun dilarang keras menaiki aktiviti belon udara panas Cappadocia atas faktor keselamatan undang-undang penerbangan awam Turki. Salah seorang ibu bapa perlu bersiap sedia bergilir menjaga anak di hotel atau kawasan bawah.\n            <\/p>\n            <div classname=\"grid grid-cols-1 sm:grid-cols-2 gap-2 mt-3 pt-3 border-t border-amber-200\/60 text-xs text-amber-900\">\n              <div classname=\"flex items-center gap-2\">\n                <span classname=\"w-2 h-2 rounded-full bg-amber-500\"><\/span>\n                <span>Kerusi Keselamatan Kereta (Car Seat): <strong>Perlu sahkan dengan ejen kenderaan tour<\/strong><\/span>\n              <\/div>\n              <div classname=\"flex items-center gap-2\">\n                <span classname=\"w-2 h-2 rounded-full bg-amber-500\"><\/span>\n                <span>Tiket Bayi Pegasus &amp; Emirates: <strong>Status belum disahkan dalam sistem<\/strong><\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      {\/* Outstanding Critical Checklist *\/}\n      <div classname=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\">\n        <div classname=\"flex items-center justify-between mb-4\">\n          <div>\n            <h2 classname=\"text-base font-bold text-stone-800\">Tugasan Kritikal Menunggu Tindakan<\/h2>\n            <p classname=\"text-xs text-stone-500\">Selesaikan perkara penting ini secepat mungkin<\/p>\n          <\/div>\n          <button onclick=\"{()\" ==\"\"> setActiveTab('checklist')}\n            className=\"text-xs font-semibold text-emerald-700 hover:text-emerald-800 bg-emerald-50 px-3 py-1.5 rounded-xl transition\"\n          &gt;\n            Lihat Semua ({taskStats.total})\n          <\/button>\n        <\/div>\n\n        {taskStats.criticalPending.length === 0 ? (\n          <div classname=\"text-center py-6 text-stone-400 text-sm\">\n            <checkcircle2 classname=\"w-8 h-8 mx-auto text-emerald-500 mb-2\">\n            Hebat! Semua tugasan berkeutamaan kritikal &amp; tinggi telah diselesaikan.\n          <\/checkcircle2><\/div>\n        ) : (\n          <div classname=\"space-y-2\">\n            {taskStats.criticalPending.slice(0, 4).map(item =&gt; (\n              <div key=\"{item.id}\" classname=\"flex items-center justify-between p-3 rounded-2xl bg-stone-50 border border-stone-200 hover:bg-stone-100 transition cursor-pointer\" onclick=\"{()\" ==\"\"> {\n                  const updated = data.checklist.map(t =&gt; t.id === item.id ? { ...t, done: !t.done } : t);\n                  setData({ ...data, checklist: updated });\n                  showToast(item.done ? 'Tugasan ditandakan belum siap' : 'Tugasan diselesaikan!');\n                }}\n              &gt;\n                <div classname=\"flex items-center gap-3\">\n                  <div classname=\"{item.done\" ?=\"\" \"text-emerald-600\"=\"\" :=\"\" \"text-stone-400\"}=\"\">\n                    {item.done ? <checkcircle2 classname=\"w-5 h-5\"> : <circle classname=\"w-5 h-5\">}\n                  <\/circle><\/checkcircle2><\/div>\n                  <div>\n                    <span classname=\"text-xs md:text-sm font-semibold text-stone-800 block\">{item.title}<\/span>\n                    <span classname=\"text-[11px] text-stone-500\">Tindakan: {item.assignedTo} \u2022 Tarikh: {item.deadline || 'Tiada'}<\/span>\n                  <\/div>\n                <\/div>\n                <span classname=\"text-[10px] font-bold px-2 py-0.5 rounded-full bg-red-100 text-red-700 whitespace-nowrap\">\n                  {item.priority}\n                <\/span>\n              <\/div>\n            ))}\n          <\/div>\n        )}\n      <\/div>\n\n      {\/* Next Upcoming Flights \/ Key Activities *\/}\n      <div classname=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\">\n        <div classname=\"flex items-center justify-between mb-4\">\n          <div>\n            <h2 classname=\"text-base font-bold text-stone-800\">Jadual Penerbangan Utama<\/h2>\n            <p classname=\"text-xs text-stone-500\">Perhatikan perbezaan lapangan terbang IST (Eropah) dan SAW (Asia)<\/p>\n          <\/div>\n          <button onclick=\"{()\" ==\"\"> setActiveTab('flights')}\n            className=\"text-xs font-semibold text-emerald-700 hover:text-emerald-800 bg-emerald-50 px-3 py-1.5 rounded-xl transition\"\n          &gt;\n            Semua Penerbangan\n          <\/button>\n        <\/div>\n\n        <div classname=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\n          {data.flights.slice(0, 4).map(fl =&gt; (\n            <div key=\"{fl.id}\" classname=\"p-4 rounded-2xl border border-stone-200 bg-stone-50\/70 hover:bg-white transition shadow-sm\">\n              <div classname=\"flex justify-between items-start\">\n                <span classname=\"{`px-2.5\" py-0.5=\"\" rounded-full=\"\" text-[10px]=\"\" font-bold=\"\" uppercase=\"\" tracking-wider=\"\" ${=\"\" fl.airporttype=\"==\" 'domestic-saw'=\"\" ?=\"\" 'bg-amber-100=\"\" text-amber-800=\"\" border=\"\" border-amber-300'=\"\" :=\"\" 'bg-blue-100=\"\" text-blue-800'=\"\" }`}=\"\">\n                  {fl.airline} \u2022 {fl.flightNumber}\n                <\/span>\n                <span classname=\"text-xs font-semibold text-stone-600\">{fl.date}<\/span>\n              <\/div>\n              <div classname=\"mt-3 flex items-center justify-between\">\n                <div>\n                  <div classname=\"text-lg font-black text-stone-800\">{fl.departureTime}<\/div>\n                  <div classname=\"text-xs font-medium text-stone-500\">{fl.origin}<\/div>\n                <\/div>\n                <div classname=\"flex flex-col items-center px-2\">\n                  <plane classname=\"w-4 h-4 text-stone-400 rotate-90 my-0.5\">\n                  <span classname=\"text-[10px] text-stone-400\">{fl.classType}<\/span>\n                <\/plane><\/div>\n                <div classname=\"text-right\">\n                  <div classname=\"text-lg font-black text-stone-800\">{fl.arrivalTime}<\/div>\n                  <div classname=\"text-xs font-medium text-stone-500\">{fl.destination}<\/div>\n                <\/div>\n              <\/div>\n              <div classname=\"mt-2 pt-2 border-t border-stone-200\/70 flex justify-between items-center text-[11px] text-stone-500\">\n                <span>Bagasi Dewasa: {fl.baggageAdult}<\/span>\n                <span classname=\"text-amber-700 font-medium\">Bayi: {fl.infantTicket}<\/span>\n              <\/div>\n            <\/div>\n          ))}\n        <\/div>\n      <\/div>\n    <\/div>\n  );\n\n  \/\/ 2. JADUAL PERJALANAN (ITINERARY)\n  const [selectedDayFilter, setSelectedDayFilter] = useState('ALL');\n  const [editingItinerary, setEditingItinerary] = useState(null);\n  const [newItineraryItem, setNewItineraryItem] = useState({\n    dayNumber: 1,\n    date: '2026-11-03',\n    city: 'Istanbul',\n    time: '12:00',\n    title: '',\n    location: '',\n    notes: '',\n    cost: 0,\n    currency: 'TRY',\n    status: 'Akan Datang',\n    bookingRef: '',\n    packageStatus: 'Termasuk dalam Pakej'\n  });\n  const [showAddItineraryModal, setShowAddItineraryModal] = useState(false);\n\n  const filteredItinerary = useMemo(() =&gt; {\n    if (selectedDayFilter === 'ALL') return data.itinerary;\n    return data.itinerary.filter(it =&gt; it.dayNumber.toString() === selectedDayFilter);\n  }, [data.itinerary, selectedDayFilter]);\n\n  const moveItinerary = (index, direction) =&gt; {\n    const newItems = [...data.itinerary];\n    const targetIndex = direction === 'up' ? index - 1 : index + 1;\n    if (targetIndex &lt; 0 || targetIndex &gt;= newItems.length) return;\n    const temp = newItems[index];\n    newItems[index] = newItems[targetIndex];\n    newItems[targetIndex] = temp;\n    setData({ ...data, itinerary: newItems });\n    showToast('Susunan aktiviti berjaya diubah');\n  };\n\n  const deleteItineraryItem = (id) =&gt; {\n    if (window.confirm('Hapus aktiviti ini dari jadual perjalanan?')) {\n      const updated = data.itinerary.filter(it =&gt; it.id !== id);\n      setData({ ...data, itinerary: updated });\n      showToast('Aktiviti dihapuskan.');\n    }\n  };\n\n  const saveItineraryItem = (item) =&gt; {\n    const updated = data.itinerary.map(it =&gt; it.id === item.id ? item : it);\n    setData({ ...data, itinerary: updated });\n    setEditingItinerary(null);\n    showToast('Perubahan jadual disimpan.');\n  };\n\n  const addItineraryItem = (e) =&gt; {\n    e.preventDefault();\n    if (!newItineraryItem.title.trim()) return;\n    const newItem = {\n      ...newItineraryItem,\n      id: 'it-' + Date.now(),\n      cost: Number(newItineraryItem.cost) || 0\n    };\n    setData({ ...data, itinerary: [...data.itinerary, newItem] });\n    setShowAddItineraryModal(false);\n    setNewItineraryItem({\n      dayNumber: 1,\n      date: '2026-11-03',\n      city: 'Istanbul',\n      time: '12:00',\n      title: '',\n      location: '',\n      notes: '',\n      cost: 0,\n      currency: 'TRY',\n      status: 'Akan Datang',\n      bookingRef: '',\n      packageStatus: 'Termasuk dalam Pakej'\n    });\n    showToast('Aktiviti baharu ditambah!');\n  };\n\n  const renderItinerary = () =&gt; (\n    <div classname=\"space-y-6\">\n      {\/* Top Header &amp; Day Filters *\/}\n      <div classname=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\">\n        <div classname=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3\">\n          <div>\n            <h2 classname=\"text-xl font-bold text-stone-800\">Jadual Perjalanan Harian (3\u201311 Nov 2026)<\/h2>\n            <p classname=\"text-xs text-stone-500\">Pengurusan penuh aktiviti di Istanbul dan Cappadocia<\/p>\n          <\/div>\n          <button onclick=\"{()\" ==\"\"> setShowAddItineraryModal(true)}\n            className=\"flex items-center gap-2 bg-emerald-700 hover:bg-emerald-800 text-white px-4 py-2 rounded-2xl text-xs font-semibold shadow-sm transition\"\n          &gt;\n            <plus classname=\"w-4 h-4\"> Tambah Aktiviti\n          <\/plus><\/button>\n        <\/div>\n\n        {\/* Day Pills Filter *\/}\n        <div classname=\"flex gap-2 overflow-x-auto pb-1 mt-4 scrollbar-none\">\n          <button onclick=\"{()\" ==\"\"> setSelectedDayFilter('ALL')}\n            className={`px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap transition ${\n              selectedDayFilter === 'ALL'\n                ? 'bg-stone-900 text-white shadow-sm'\n                : 'bg-stone-100 text-stone-600 hover:bg-stone-200'\n            }`}\n          &gt;\n            Semua Hari (9 Hari)\n          <\/button>\n          {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(day =&gt; (\n            <button key=\"{day}\" onclick=\"{()\" ==\"\"> setSelectedDayFilter(day.toString())}\n              className={`px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap transition ${\n                selectedDayFilter === day.toString()\n                  ? 'bg-emerald-800 text-white shadow-sm'\n                  : 'bg-stone-100 text-stone-600 hover:bg-stone-200'\n              }`}\n            &gt;\n              Hari {day} ({day === 1 ? '3 Nov' : `${day + 2} Nov`})\n            <\/button>\n          ))}\n        <\/div>\n      <\/div>\n\n      {\/* Package Inclusions Indicator Card *\/}\n      <div classname=\"bg-stone-50 border border-stone-200 rounded-2xl p-4 text-xs text-stone-700\">\n        <span classname=\"font-bold text-stone-800 block mb-1\">Status Pakej Perjalanan:<\/span>\n        <div classname=\"flex flex-wrap gap-2 text-[11px]\">\n          <span classname=\"px-2.5 py-1 rounded-lg bg-emerald-100 text-emerald-800 font-medium\">\u2713 Termasuk dalam Pakej (Hotel, Sarapan, Tour, Tiket Bosphorus, Pemandu)<\/span>\n          <span classname=\"px-2.5 py-1 rounded-lg bg-rose-100 text-rose-800 font-medium\">\u2717 Dikecualikan (Tiket Emirates Antarabangsa, Belon Udara Panas, Makan Malam)<\/span>\n          <span classname=\"px-2.5 py-1 rounded-lg bg-amber-100 text-amber-800 font-medium\">\u23f3 Menunggu Pengesahan (Kerusi Bayi, Tiket Domestik Anak)<\/span>\n        <\/div>\n      <\/div>\n\n      {\/* Itinerary Timeline List *\/}\n      <div classname=\"space-y-4\">\n        {filteredItinerary.map((item, index) =&gt; {\n          const isEditing = editingItinerary?.id === item.id;\n          const googleMapsUrl = `https:\/\/www.google.com\/maps\/search\/?api=1&amp;query=${encodeURIComponent(item.location || item.title)}`;\n\n          if (isEditing) {\n            return (\n              <div key=\"{item.id}\" classname=\"bg-white p-5 rounded-3xl border-2 border-emerald-500 shadow-md space-y-3\">\n                <div classname=\"flex justify-between items-center pb-2 border-b border-stone-100\">\n                  <span classname=\"font-bold text-sm text-stone-800\">Kemaskini Aktiviti<\/span>\n                  <button onclick=\"{()\" ==\"\"> setEditingItinerary(null)} className=\"text-stone-400 hover:text-stone-600\"&gt;\n                    <x classname=\"w-5 h-5\">\n                  <\/x><\/button>\n                <\/div>\n                <div classname=\"grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs\">\n                  <div>\n                    <label classname=\"font-semibold text-stone-600 block mb-1\">Tajuk Aktiviti<\/label>\n                    <input type=\"text\" classname=\"w-full border border-stone-300 rounded-xl p-2\" value=\"{editingItinerary.title}\" onchange=\"{(e)\" ==\"\"> setEditingItinerary({ ...editingItinerary, title: e.target.value })}\n                    \/&gt;\n                  <\/div>\n                  <div>\n                    <label classname=\"font-semibold text-stone-600 block mb-1\">Masa<\/label>\n                    <input type=\"text\" classname=\"w-full border border-stone-300 rounded-xl p-2\" value=\"{editingItinerary.time}\" onchange=\"{(e)\" ==\"\"> setEditingItinerary({ ...editingItinerary, time: e.target.value })}\n                    \/&gt;\n                  <\/div>\n                  <div>\n                    <label classname=\"font-semibold text-stone-600 block mb-1\">Status<\/label>\n                    <select classname=\"w-full border border-stone-300 rounded-xl p-2\" value=\"{editingItinerary.status}\" onchange=\"{(e)\" ==\"\"> setEditingItinerary({ ...editingItinerary, status: e.target.value })}\n                    &gt;\n                      <option value=\"Belum Mula\">Belum Mula<\/option>\n                      <option value=\"Akan Datang\">Akan Datang<\/option>\n                      <option value=\"Selesai\">Selesai<\/option>\n                      <option value=\"Dibatalkan\">Dibatalkan<\/option>\n                    <\/select>\n                  <\/div>\n                <\/div>\n\n                <div classname=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs\">\n                  <div>\n                    <label classname=\"font-semibold text-stone-600 block mb-1\">Lokasi<\/label>\n                    <input type=\"text\" classname=\"w-full border border-stone-300 rounded-xl p-2\" value=\"{editingItinerary.location}\" onchange=\"{(e)\" ==\"\"> setEditingItinerary({ ...editingItinerary, location: e.target.value })}\n                    \/&gt;\n                  <\/div>\n                  <div>\n                    <label classname=\"font-semibold text-stone-600 block mb-1\">Status Pakej<\/label>\n                    <input type=\"text\" classname=\"w-full border border-stone-300 rounded-xl p-2\" value=\"{editingItinerary.packageStatus}\" onchange=\"{(e)\" ==\"\"> setEditingItinerary({ ...editingItinerary, packageStatus: e.target.value })}\n                    \/&gt;\n                  <\/div>\n                <\/div>\n\n                <div>\n                  <label classname=\"font-semibold text-stone-600 block mb-1 text-xs\">Nota &amp; Maklumat Tambahan<\/label>\n                  <textarea rows=\"{2}\" classname=\"w-full border border-stone-300 rounded-xl p-2 text-xs\" value=\"{editingItinerary.notes}\" onchange=\"{(e)\" ==\"\"> setEditingItinerary({ ...editingItinerary, notes: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n\n                &lt;div className=\"flex justify-end gap-2 pt-2\"&gt;\n                  &lt;button\n                    onClick={() =&gt; setEditingItinerary(null)}\n                    className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-stone-100 text-stone-600 hover:bg-stone-200\"\n                  &gt;\n                    Batal\n                  &lt;\/button&gt;\n                  &lt;button\n                    onClick={() =&gt; saveItineraryItem(editingItinerary)}\n                    className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-700 text-white hover:bg-emerald-800\"\n                  &gt;\n                    Simpan Perubahan\n                  &lt;\/button&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            );\n          }\n\n          return (\n            &lt;div\n              key={item.id}\n              className={`bg-white rounded-3xl p-5 border transition shadow-sm ${\n                item.status === 'Selesai' ? 'border-emerald-200 bg-emerald-50\/20' : 'border-stone-200'\n              }`}\n            &gt;\n              &lt;div className=\"flex flex-col sm:flex-row justify-between items-start gap-3\"&gt;\n                &lt;div className=\"flex items-start gap-3 flex-1\"&gt;\n                  &lt;div className=\"flex flex-col items-center\"&gt;\n                    &lt;span className=\"w-8 h-8 rounded-2xl bg-stone-100 text-stone-800 font-bold text-xs flex items-center justify-center\"&gt;\n                      H{item.dayNumber}\n                    &lt;\/span&gt;\n                    &lt;span className=\"text-[10px] text-stone-400 mt-1 font-mono\"&gt;{item.time}&lt;\/span&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div className=\"flex-1\"&gt;\n                    &lt;div className=\"flex flex-wrap items-center gap-2\"&gt;\n                      &lt;h3 className=\"font-bold text-sm md:text-base text-stone-900\"&gt;{item.title}&lt;\/h3&gt;\n                      &lt;span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${\n                        item.status === 'Selesai'\n                          ? 'bg-emerald-100 text-emerald-800'\n                          : item.status === 'Dibatalkan'\n                          ? 'bg-rose-100 text-rose-800'\n                          : 'bg-stone-100 text-stone-700'\n                      }`}&gt;\n                        {item.status}\n                      &lt;\/span&gt;\n                    &lt;\/div&gt;\n\n                    &lt;div className=\"flex items-center gap-1.5 text-xs text-stone-500 mt-1\"&gt;\n                      &lt;MapPin className=\"w-3.5 h-3.5 text-rose-500 flex-shrink-0\" \/&gt;\n                      &lt;span&gt;{item.location}&lt;\/span&gt;\n                      &lt;a\n                        href={googleMapsUrl}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"inline-flex items-center gap-1 text-[11px] text-emerald-700 hover:text-emerald-900 font-semibold ml-2 underline\"\n                      &gt;\n                        Buka Google Maps &lt;ExternalLink className=\"w-2.5 h-2.5\" \/&gt;\n                      &lt;\/a&gt;\n                    &lt;\/div&gt;\n\n                    {item.notes &amp;&amp; (\n                      &lt;p className=\"text-xs text-stone-600 mt-2 bg-stone-50 p-2.5 rounded-xl border border-stone-100\"&gt;\n                        {item.notes}\n                      &lt;\/p&gt;\n                    )}\n\n                    &lt;div className=\"flex flex-wrap items-center gap-2 mt-3 pt-2 border-t border-stone-100 text-[11px]\"&gt;\n                      &lt;span className=\"text-stone-500\"&gt;Tarikh: &lt;strong&gt;{item.date}&lt;\/strong&gt;&lt;\/span&gt;\n                      &lt;span className=\"text-stone-400\"&gt;\u2022&lt;\/span&gt;\n                      &lt;span className=\"text-stone-500\"&gt;Bandar: &lt;strong&gt;{item.city}&lt;\/strong&gt;&lt;\/span&gt;\n                      &lt;span className=\"text-stone-400\"&gt;\u2022&lt;\/span&gt;\n                      &lt;span className=\"font-medium text-emerald-700\"&gt;{item.packageStatus}&lt;\/span&gt;\n                      {item.bookingRef &amp;&amp; (\n                        &lt;&gt;\n                          &lt;span className=\"text-stone-400\"&gt;\u2022&lt;\/span&gt;\n                          &lt;span className=\"font-mono text-stone-500\"&gt;Ref: {item.bookingRef}&lt;\/span&gt;\n                        &lt;\/&gt;\n                      )}\n                    &lt;\/div&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                {\/* Up\/Down reorder, Edit and Delete controls *\/}\n                &lt;div className=\"flex items-center gap-1 self-end sm:self-start\"&gt;\n                  &lt;button\n                    onClick={() =&gt; moveItinerary(index, 'up')}\n                    disabled={index === 0}\n                    className=\"p-1.5 rounded-xl hover:bg-stone-100 text-stone-500 disabled:opacity-30\"\n                    title=\"Naik ke atas\"\n                  &gt;\n                    &lt;ChevronUp className=\"w-4 h-4\" \/&gt;\n                  &lt;\/button&gt;\n                  &lt;button\n                    onClick={() =&gt; moveItinerary(index, 'down')}\n                    disabled={index === data.itinerary.length - 1}\n                    className=\"p-1.5 rounded-xl hover:bg-stone-100 text-stone-500 disabled:opacity-30\"\n                    title=\"Turun ke bawah\"\n                  &gt;\n                    &lt;ChevronDown className=\"w-4 h-4\" \/&gt;\n                  &lt;\/button&gt;\n                  &lt;button\n                    onClick={() =&gt; setEditingItinerary(item)}\n                    className=\"p-1.5 rounded-xl hover:bg-stone-100 text-stone-600\"\n                    title=\"Edit aktiviti\"\n                  &gt;\n                    &lt;Edit2 className=\"w-4 h-4\" \/&gt;\n                  &lt;\/button&gt;\n                  &lt;button\n                    onClick={() =&gt; deleteItineraryItem(item.id)}\n                    className=\"p-1.5 rounded-xl hover:bg-rose-50 text-rose-500\"\n                    title=\"Hapus aktiviti\"\n                  &gt;\n                    &lt;Trash2 className=\"w-4 h-4\" \/&gt;\n                  &lt;\/button&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          );\n        })}\n      &lt;\/div&gt;\n\n      {\/* Modal Add Itinerary *\/}\n      {showAddItineraryModal &amp;&amp; (\n        &lt;div className=\"fixed inset-0 bg-black\/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\"&gt;\n          &lt;div className=\"bg-white rounded-3xl p-6 max-w-lg w-full shadow-2xl max-h-[90vh] overflow-y-auto\"&gt;\n            &lt;div className=\"flex justify-between items-center pb-3 border-b border-stone-200\"&gt;\n              &lt;h3 className=\"font-bold text-base text-stone-800\"&gt;Tambah Aktiviti Baru&lt;\/h3&gt;\n              &lt;button onClick={() =&gt; setShowAddItineraryModal(false)} className=\"text-stone-400 hover:text-stone-600\"&gt;\n                &lt;X className=\"w-5 h-5\" \/&gt;\n              &lt;\/button&gt;\n            &lt;\/div&gt;\n\n            &lt;form onSubmit={addItineraryItem} className=\"space-y-3 mt-4 text-xs\"&gt;\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Hari Ke- (1 - 9)&lt;\/label&gt;\n                  &lt;input\n                    type=\"number\"\n                    min=\"1\"\n                    max=\"9\"\n                    required\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newItineraryItem.dayNumber}\n                    onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, dayNumber: Number(e.target.value) })}\n                  \/&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Masa (cth: 14:30)&lt;\/label&gt;\n                  &lt;input\n                    type=\"text\"\n                    required\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newItineraryItem.time}\n                    onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, time: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Tajuk Aktiviti&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  required\n                  placeholder=\"cth: Lawatan Masjid Sultan Ahmed\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newItineraryItem.title}\n                  onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, title: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Bandar&lt;\/label&gt;\n                  &lt;input\n                    type=\"text\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newItineraryItem.city}\n                    onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, city: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Tarikh&lt;\/label&gt;\n                  &lt;input\n                    type=\"date\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newItineraryItem.date}\n                    onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, date: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Lokasi \/ Landmark (untuk Google Maps)&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  placeholder=\"cth: Sultanahmet Square, Istanbul\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newItineraryItem.location}\n                  onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, location: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Status Pakej&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  placeholder=\"cth: Termasuk dalam Pakej \/ Bayaran Sendiri\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newItineraryItem.packageStatus}\n                  onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, packageStatus: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Nota Tambahan&lt;\/label&gt;\n                &lt;textarea\n                  rows={2}\n                  placeholder=\"Peringatan stroller, tiket, kasut bertutup...\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newItineraryItem.notes}\n                  onChange={(e) =&gt; setNewItineraryItem({ ...newItineraryItem, notes: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"flex justify-end gap-2 pt-3 border-t border-stone-200\"&gt;\n                &lt;button\n                  type=\"button\"\n                  onClick={() =&gt; setShowAddItineraryModal(false)}\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-stone-100 text-stone-600 hover:bg-stone-200\"\n                &gt;\n                  Batal\n                &lt;\/button&gt;\n                &lt;button\n                  type=\"submit\"\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-700 text-white hover:bg-emerald-800\"\n                &gt;\n                  Tambah Sekarang\n                &lt;\/button&gt;\n              &lt;\/div&gt;\n            &lt;\/form&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      )}\n    &lt;\/div&gt;\n  );\n\n  \/\/ 3. CHECKLIST PERSIAPAN\n  const [checklistFilter, setChecklistFilter] = useState('ALL'); \/\/ ALL, INCOMPLETE, COMPLETE, URGENT\n  const [categoryFilter, setCategoryFilter] = useState('ALL');\n  const [searchChecklist, setSearchChecklist] = useState('');\n  const [showAddChecklistModal, setShowAddChecklistModal] = useState(false);\n  const [newChecklistItem, setNewChecklistItem] = useState({\n    title: '',\n    category: 'Dokumen',\n    priority: 'Sederhana',\n    assignedTo: 'Ayah',\n    deadline: '',\n    notes: '',\n    done: false\n  });\n\n  const checklistCategories = useMemo(() =&gt; {\n    const cats = new Set(data.checklist.map(c =&gt; c.category));\n    return ['ALL', ...Array.from(cats)];\n  }, [data.checklist]);\n\n  const filteredChecklist = useMemo(() =&gt; {\n    return data.checklist.filter(item =&gt; {\n      \/\/ Status filter\n      if (checklistFilter === 'INCOMPLETE' &amp;&amp; item.done) return false;\n      if (checklistFilter === 'COMPLETE' &amp;&amp; !item.done) return false;\n      if (checklistFilter === 'URGENT' &amp;&amp; (item.priority !== 'Kritikal' &amp;&amp; item.priority !== 'Tinggi')) return false;\n\n      \/\/ Category filter\n      if (categoryFilter !== 'ALL' &amp;&amp; item.category !== categoryFilter) return false;\n\n      \/\/ Search term\n      if (searchChecklist.trim()) {\n        const query = searchChecklist.toLowerCase();\n        const matchTitle = item.title.toLowerCase().includes(query);\n        const matchNotes = item.notes?.toLowerCase().includes(query);\n        const matchPerson = item.assignedTo?.toLowerCase().includes(query);\n        if (!matchTitle &amp;&amp; !matchNotes &amp;&amp; !matchPerson) return false;\n      }\n      return true;\n    });\n  }, [data.checklist, checklistFilter, categoryFilter, searchChecklist]);\n\n  const toggleChecklistItem = (id) =&gt; {\n    const updated = data.checklist.map(item =&gt; item.id === id ? { ...item, done: !item.done } : item);\n    setData({ ...data, checklist: updated });\n  };\n\n  const deleteChecklistItem = (id) =&gt; {\n    const updated = data.checklist.filter(item =&gt; item.id !== id);\n    setData({ ...data, checklist: updated });\n    showToast('Tugasan checklist dihapuskan.');\n  };\n\n  const addChecklistItem = (e) =&gt; {\n    e.preventDefault();\n    if (!newChecklistItem.title.trim()) return;\n    const item = {\n      ...newChecklistItem,\n      id: 'c-' + Date.now()\n    };\n    setData({ ...data, checklist: [item, ...data.checklist] });\n    setShowAddChecklistModal(false);\n    setNewChecklistItem({\n      title: '',\n      category: 'Dokumen',\n      priority: 'Sederhana',\n      assignedTo: 'Ayah',\n      deadline: '',\n      notes: '',\n      done: false\n    });\n    showToast('Tugasan baharu berjaya disimpan!');\n  };\n\n  const renderChecklist = () =&gt; (\n    &lt;div className=\"space-y-6\"&gt;\n      {\/* Overview and Add Header *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\"&gt;\n        &lt;div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3\"&gt;\n          &lt;div&gt;\n            &lt;h2 className=\"text-xl font-bold text-stone-800\"&gt;Checklist Persiapan Pra-Perjalanan&lt;\/h2&gt;\n            &lt;p className=\"text-xs text-stone-500\"&gt;\n              {taskStats.completed} daripada {taskStats.total} tugasan diselesaikan ({taskStats.percentage}%)\n            &lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;button\n            onClick={() =&gt; setShowAddChecklistModal(true)}\n            className=\"flex items-center gap-2 bg-emerald-700 hover:bg-emerald-800 text-white px-4 py-2 rounded-2xl text-xs font-semibold shadow-sm transition\"\n          &gt;\n            &lt;Plus className=\"w-4 h-4\" \/&gt; Tambah Tugasan\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n\n        {\/* Progress Bar *\/}\n        &lt;div className=\"w-full bg-stone-100 rounded-full h-3 mt-4 overflow-hidden\"&gt;\n          &lt;div\n            className=\"bg-emerald-600 h-3 rounded-full transition-all duration-500\"\n            style={{ width: `${taskStats.percentage}%` }}\n          &gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n\n        {\/* Filter Controls *\/}\n        &lt;div className=\"flex flex-col sm:flex-row gap-3 mt-4 pt-4 border-t border-stone-100\"&gt;\n          &lt;div className=\"relative flex-1\"&gt;\n            &lt;Search className=\"w-4 h-4 absolute left-3 top-3 text-stone-400\" \/&gt;\n            &lt;input\n              type=\"text\"\n              placeholder=\"Cari tugasan, penama, atau nota...\"\n              className=\"w-full pl-9 pr-3 py-2 bg-stone-50 border border-stone-200 rounded-xl text-xs\"\n              value={searchChecklist}\n              onChange={(e) =&gt; setSearchChecklist(e.target.value)}\n            \/&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"flex gap-2 overflow-x-auto pb-1\"&gt;\n            &lt;select\n              className=\"bg-stone-50 border border-stone-200 rounded-xl px-3 py-2 text-xs font-medium text-stone-700\"\n              value={checklistFilter}\n              onChange={(e) =&gt; setChecklistFilter(e.target.value)}\n            &gt;\n              &lt;option value=\"ALL\"&gt;Semua Status&lt;\/option&gt;\n              &lt;option value=\"INCOMPLETE\"&gt;Belum Siap Sahaja&lt;\/option&gt;\n              &lt;option value=\"COMPLETE\"&gt;Sudah Siap Sahaja&lt;\/option&gt;\n              &lt;option value=\"URGENT\"&gt;Kritikal &amp; Tinggi&lt;\/option&gt;\n            &lt;\/select&gt;\n\n            &lt;select\n              className=\"bg-stone-50 border border-stone-200 rounded-xl px-3 py-2 text-xs font-medium text-stone-700\"\n              value={categoryFilter}\n              onChange={(e) =&gt; setCategoryFilter(e.target.value)}\n            &gt;\n              &lt;option value=\"ALL\"&gt;Semua Kategori&lt;\/option&gt;\n              {checklistCategories.filter(c =&gt; c !== 'ALL').map(cat =&gt; (\n                &lt;option key={cat} value={cat}&gt;{cat}&lt;\/option&gt;\n              ))}\n            &lt;\/select&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Checklist Task Cards *\/}\n      &lt;div className=\"space-y-2.5\"&gt;\n        {filteredChecklist.length === 0 ? (\n          &lt;div className=\"bg-white rounded-3xl p-8 text-center text-stone-400 border border-stone-200\"&gt;\n            Tiada tugasan ditemui mengikut tapisan semasa.\n          &lt;\/div&gt;\n        ) : (\n          filteredChecklist.map(item =&gt; (\n            &lt;div\n              key={item.id}\n              className={`bg-white rounded-2xl p-4 border transition shadow-sm flex items-start justify-between gap-3 ${\n                item.done ? 'border-emerald-200 bg-emerald-50\/15' : 'border-stone-200'\n              }`}\n            &gt;\n              &lt;div\n                className=\"flex items-start gap-3 flex-1 cursor-pointer\"\n                onClick={() =&gt; toggleChecklistItem(item.id)}\n              &gt;\n                &lt;div className={`mt-0.5 ${item.done ? 'text-emerald-600' : 'text-stone-300 hover:text-stone-500'}`}&gt;\n                  {item.done ? &lt;CheckCircle2 className=\"w-5 h-5\" \/&gt; : &lt;Circle className=\"w-5 h-5\" \/&gt;}\n                &lt;\/div&gt;\n                &lt;div className=\"flex-1\"&gt;\n                  &lt;div className=\"flex flex-wrap items-center gap-2\"&gt;\n                    &lt;span className={`text-xs md:text-sm font-semibold ${item.done ? 'line-through text-stone-400' : 'text-stone-800'}`}&gt;\n                      {item.title}\n                    &lt;\/span&gt;\n                    &lt;span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${\n                      item.priority === 'Kritikal'\n                        ? 'bg-red-100 text-red-700'\n                        : item.priority === 'Tinggi'\n                        ? 'bg-amber-100 text-amber-700'\n                        : 'bg-stone-100 text-stone-600'\n                    }`}&gt;\n                      {item.priority}\n                    &lt;\/span&gt;\n                  &lt;\/div&gt;\n\n                  {item.notes &amp;&amp; (\n                    &lt;p className=\"text-xs text-stone-500 mt-1\"&gt;{item.notes}&lt;\/p&gt;\n                  )}\n\n                  &lt;div className=\"flex flex-wrap items-center gap-2 text-[11px] text-stone-400 mt-2\"&gt;\n                    &lt;span className=\"font-medium text-stone-600\"&gt;Kategori: {item.category}&lt;\/span&gt;\n                    &lt;span&gt;\u2022&lt;\/span&gt;\n                    &lt;span&gt;Tanggungjawab: &lt;strong&gt;{item.assignedTo}&lt;\/strong&gt;&lt;\/span&gt;\n                    {item.deadline &amp;&amp; (\n                      &lt;&gt;\n                        &lt;span&gt;\u2022&lt;\/span&gt;\n                        &lt;span&gt;Tarikh Akhir: &lt;strong&gt;{item.deadline}&lt;\/strong&gt;&lt;\/span&gt;\n                      &lt;\/&gt;\n                    )}\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;button\n                onClick={() =&gt; deleteChecklistItem(item.id)}\n                className=\"p-1.5 text-stone-400 hover:text-rose-500 hover:bg-rose-50 rounded-xl transition\"\n                title=\"Hapus tugasan\"\n              &gt;\n                &lt;Trash2 className=\"w-4 h-4\" \/&gt;\n              &lt;\/button&gt;\n            &lt;\/div&gt;\n          ))\n        )}\n      &lt;\/div&gt;\n\n      {\/* Add Checklist Modal *\/}\n      {showAddChecklistModal &amp;&amp; (\n        &lt;div className=\"fixed inset-0 bg-black\/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\"&gt;\n          &lt;div className=\"bg-white rounded-3xl p-6 max-w-md w-full shadow-2xl\"&gt;\n            &lt;div className=\"flex justify-between items-center pb-3 border-b border-stone-200\"&gt;\n              &lt;h3 className=\"font-bold text-base text-stone-800\"&gt;Tambah Tugasan Baharu&lt;\/h3&gt;\n              &lt;button onClick={() =&gt; setShowAddChecklistModal(false)} className=\"text-stone-400 hover:text-stone-600\"&gt;\n                &lt;X className=\"w-5 h-5\" \/&gt;\n              &lt;\/button&gt;\n            &lt;\/div&gt;\n\n            &lt;form onSubmit={addChecklistItem} className=\"space-y-3 mt-4 text-xs\"&gt;\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Tajuk Tugasan&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  required\n                  placeholder=\"cth: Pengesahan Tiket Bayi Pegasus\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newChecklistItem.title}\n                  onChange={(e) =&gt; setNewChecklistItem({ ...newChecklistItem, title: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Kategori&lt;\/label&gt;\n                  &lt;input\n                    type=\"text\"\n                    required\n                    placeholder=\"cth: Dokumen, Bayi, Kesihatan\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newChecklistItem.category}\n                    onChange={(e) =&gt; setNewChecklistItem({ ...newChecklistItem, category: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Keutamaan&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newChecklistItem.priority}\n                    onChange={(e) =&gt; setNewChecklistItem({ ...newChecklistItem, priority: e.target.value })}\n                  &gt;\n                    &lt;option value=\"Rendah\"&gt;Rendah&lt;\/option&gt;\n                    &lt;option value=\"Sederhana\"&gt;Sederhana&lt;\/option&gt;\n                    &lt;option value=\"Tinggi\"&gt;Tinggi&lt;\/option&gt;\n                    &lt;option value=\"Kritikal\"&gt;Kritikal&lt;\/option&gt;\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Ahli Keluarga&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newChecklistItem.assignedTo}\n                    onChange={(e) =&gt; setNewChecklistItem({ ...newChecklistItem, assignedTo: e.target.value })}\n                  &gt;\n                    &lt;option value=\"Ayah\"&gt;Ayah&lt;\/option&gt;\n                    &lt;option value=\"Ibu\"&gt;Ibu&lt;\/option&gt;\n                    &lt;option value=\"Kedua-dua\"&gt;Kedua-dua (Ayah &amp; Ibu)&lt;\/option&gt;\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Tarikh Akhir (Pilihan)&lt;\/label&gt;\n                  &lt;input\n                    type=\"date\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newChecklistItem.deadline}\n                    onChange={(e) =&gt; setNewChecklistItem({ ...newChecklistItem, deadline: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Nota Tambahan&lt;\/label&gt;\n                &lt;textarea\n                  rows={2}\n                  placeholder=\"Catatan sokongan atau syarat penting...\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newChecklistItem.notes}\n                  onChange={(e) =&gt; setNewChecklistItem({ ...newChecklistItem, notes: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"flex justify-end gap-2 pt-3 border-t border-stone-200\"&gt;\n                &lt;button\n                  type=\"button\"\n                  onClick={() =&gt; setShowAddChecklistModal(false)}\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-stone-100 text-stone-600 hover:bg-stone-200\"\n                &gt;\n                  Batal\n                &lt;\/button&gt;\n                &lt;button\n                  type=\"submit\"\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-700 text-white hover:bg-emerald-800\"\n                &gt;\n                  Simpan Tugasan\n                &lt;\/button&gt;\n              &lt;\/div&gt;\n            &lt;\/form&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      )}\n    &lt;\/div&gt;\n  );\n\n  \/\/ 4. PACKING LIST\n  const [activeTravelerFilter, setActiveTravelerFilter] = useState('ALL'); \/\/ ALL, AYAH, IBU, ANAK\n  const [activeBagFilter, setActiveBagFilter] = useState('ALL'); \/\/ ALL, Check-in Bag, Cabin Bag, Baby Bag\n  const [showAddPackingModal, setShowAddPackingModal] = useState(false);\n  const [newPackingItem, setNewPackingItem] = useState({\n    traveler: 'AYAH',\n    item: '',\n    bag: 'Cabin Bag',\n    qty: 1,\n    notes: '',\n    packed: false\n  });\n\n  const filteredPacking = useMemo(() =&gt; {\n    return data.packing.filter(item =&gt; {\n      if (activeTravelerFilter !== 'ALL' &amp;&amp; item.traveler !== activeTravelerFilter) return false;\n      if (activeBagFilter !== 'ALL' &amp;&amp; item.bag !== activeBagFilter) return false;\n      return true;\n    });\n  }, [data.packing, activeTravelerFilter, activeBagFilter]);\n\n  const togglePackingItem = (id) =&gt; {\n    const updated = data.packing.map(item =&gt; item.id === id ? { ...item, packed: !item.packed } : item);\n    setData({ ...data, packing: updated });\n  };\n\n  const updateItemQty = (id, delta) =&gt; {\n    const updated = data.packing.map(item =&gt; {\n      if (item.id === id) {\n        const newQty = Math.max(1, (item.qty || 1) + delta);\n        return { ...item, qty: newQty };\n      }\n      return item;\n    });\n    setData({ ...data, packing: updated });\n  };\n\n  const duplicatePackingItem = (item) =&gt; {\n    const duplicated = {\n      ...item,\n      id: 'p-' + Date.now(),\n      item: `${item.item} (Salinan)`\n    };\n    setData({ ...data, packing: [...data.packing, duplicated] });\n    showToast('Barang berjaya diduplikasi.');\n  };\n\n  const deletePackingItem = (id) =&gt; {\n    const updated = data.packing.filter(item =&gt; item.id !== id);\n    setData({ ...data, packing: updated });\n    showToast('Barang dibuang dari senarai beg.');\n  };\n\n  const addPackingItem = (e) =&gt; {\n    e.preventDefault();\n    if (!newPackingItem.item.trim()) return;\n    const item = {\n      ...newPackingItem,\n      id: 'p-' + Date.now(),\n      qty: Number(newPackingItem.qty) || 1\n    };\n    setData({ ...data, packing: [...data.packing, item] });\n    setShowAddPackingModal(false);\n    setNewPackingItem({\n      traveler: 'AYAH',\n      item: '',\n      bag: 'Cabin Bag',\n      qty: 1,\n      notes: '',\n      packed: false\n    });\n    showToast('Barang baharu ditambah ke senarai bungkusan.');\n  };\n\n  const renderPacking = () =&gt; (\n    &lt;div className=\"space-y-6\"&gt;\n      {\/* Header and Summary Cards *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\"&gt;\n        &lt;div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3\"&gt;\n          &lt;div&gt;\n            &lt;h2 className=\"text-xl font-bold text-stone-800\"&gt;Senarai Bungkusan Bagasi (Packing List)&lt;\/h2&gt;\n            &lt;p className=\"text-xs text-stone-500\"&gt;\n              {packingStats.packedItems} daripada {packingStats.totalItems} barang siap dibungkus ({packingStats.overallPercentage}%)\n            &lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;button\n            onClick={() =&gt; setShowAddPackingModal(true)}\n            className=\"flex items-center gap-2 bg-emerald-700 hover:bg-emerald-800 text-white px-4 py-2 rounded-2xl text-xs font-semibold shadow-sm transition\"\n          &gt;\n            &lt;Plus className=\"w-4 h-4\" \/&gt; Tambah Barang\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n\n        {\/* Progress Breakdown by Person *\/}\n        &lt;div className=\"grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-stone-100\"&gt;\n          &lt;div className=\"bg-stone-50 p-3 rounded-2xl border border-stone-200 text-center\"&gt;\n            &lt;span className=\"text-xs font-bold text-stone-700 block\"&gt;AYAH&lt;\/span&gt;\n            &lt;span className=\"text-lg font-black text-emerald-800\"&gt;{packingStats.byPerson.AYAH.pct}%&lt;\/span&gt;\n            &lt;span className=\"text-[10px] text-stone-500 block\"&gt;{packingStats.byPerson.AYAH.packed}\/{packingStats.byPerson.AYAH.total} barang&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;div className=\"bg-stone-50 p-3 rounded-2xl border border-stone-200 text-center\"&gt;\n            &lt;span className=\"text-xs font-bold text-stone-700 block\"&gt;IBU&lt;\/span&gt;\n            &lt;span className=\"text-lg font-black text-emerald-800\"&gt;{packingStats.byPerson.IBU.pct}%&lt;\/span&gt;\n            &lt;span className=\"text-[10px] text-stone-500 block\"&gt;{packingStats.byPerson.IBU.packed}\/{packingStats.byPerson.IBU.total} barang&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;div className=\"bg-stone-50 p-3 rounded-2xl border border-stone-200 text-center\"&gt;\n            &lt;span className=\"text-xs font-bold text-stone-700 block\"&gt;ANAK&lt;\/span&gt;\n            &lt;span className=\"text-lg font-black text-amber-700\"&gt;{packingStats.byPerson.ANAK.pct}%&lt;\/span&gt;\n            &lt;span className=\"text-[10px] text-stone-500 block\"&gt;{packingStats.byPerson.ANAK.packed}\/{packingStats.byPerson.ANAK.total} barang&lt;\/span&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        {\/* Filter Pills *\/}\n        &lt;div className=\"flex flex-col sm:flex-row gap-2 mt-4\"&gt;\n          &lt;div className=\"flex gap-1.5 overflow-x-auto pb-1 flex-1\"&gt;\n            {['ALL', 'AYAH', 'IBU', 'ANAK'].map(tr =&gt; (\n              &lt;button\n                key={tr}\n                onClick={() =&gt; setActiveTravelerFilter(tr)}\n                className={`px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap transition ${\n                  activeTravelerFilter === tr\n                    ? 'bg-stone-900 text-white'\n                    : 'bg-stone-100 text-stone-600 hover:bg-stone-200'\n                }`}\n              &gt;\n                {tr === 'ALL' ? 'Semua Ahli' : tr}\n              &lt;\/button&gt;\n            ))}\n          &lt;\/div&gt;\n\n          &lt;div className=\"flex gap-1.5 overflow-x-auto pb-1\"&gt;\n            {['ALL', 'Check-in Bag', 'Cabin Bag', 'Baby Bag'].map(b =&gt; (\n              &lt;button\n                key={b}\n                onClick={() =&gt; setActiveBagFilter(b)}\n                className={`px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap transition ${\n                  activeBagFilter === b\n                    ? 'bg-emerald-800 text-white'\n                    : 'bg-stone-100 text-stone-600 hover:bg-stone-200'\n                }`}\n              &gt;\n                {b === 'ALL' ? 'Semua Beg' : b}\n              &lt;\/button&gt;\n            ))}\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Item List *\/}\n      &lt;div className=\"space-y-2\"&gt;\n        {filteredPacking.length === 0 ? (\n          &lt;div className=\"bg-white rounded-3xl p-8 text-center text-stone-400 border border-stone-200\"&gt;\n            Tiada barang ditemui untuk tapisan ini.\n          &lt;\/div&gt;\n        ) : (\n          filteredPacking.map(item =&gt; (\n            &lt;div\n              key={item.id}\n              className={`bg-white rounded-2xl p-3.5 border transition shadow-sm flex items-center justify-between gap-3 ${\n                item.packed ? 'border-emerald-200 bg-emerald-50\/15' : 'border-stone-200'\n              }`}\n            &gt;\n              &lt;div\n                className=\"flex items-start gap-3 flex-1 cursor-pointer\"\n                onClick={() =&gt; togglePackingItem(item.id)}\n              &gt;\n                &lt;div className={`mt-0.5 ${item.packed ? 'text-emerald-600' : 'text-stone-300 hover:text-stone-500'}`}&gt;\n                  {item.packed ? &lt;CheckCircle2 className=\"w-5 h-5\" \/&gt; : &lt;Circle className=\"w-5 h-5\" \/&gt;}\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;div className=\"flex flex-wrap items-center gap-2\"&gt;\n                    &lt;span className={`text-xs md:text-sm font-semibold ${item.packed ? 'line-through text-stone-400' : 'text-stone-800'}`}&gt;\n                      {item.item}\n                    &lt;\/span&gt;\n                    &lt;span className=\"text-[10px] font-bold px-2 py-0.5 rounded-full bg-stone-100 text-stone-600\"&gt;\n                      Kuantiti: {item.qty}\n                    &lt;\/span&gt;\n                  &lt;\/div&gt;\n                  {item.notes &amp;&amp; &lt;p className=\"text-xs text-stone-500 mt-0.5\"&gt;{item.notes}&lt;\/p&gt;}\n                  &lt;div className=\"flex items-center gap-2 text-[11px] text-stone-400 mt-1\"&gt;\n                    &lt;span className=\"font-semibold text-emerald-700\"&gt;{item.traveler}&lt;\/span&gt;\n                    &lt;span&gt;\u2022&lt;\/span&gt;\n                    &lt;span className=\"text-stone-600\"&gt;{item.bag}&lt;\/span&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              {\/* Action Buttons: Qty, Duplicate, Delete *\/}\n              &lt;div className=\"flex items-center gap-1.5\"&gt;\n                &lt;div className=\"flex items-center border border-stone-200 rounded-xl bg-stone-50\"&gt;\n                  &lt;button\n                    onClick={() =&gt; updateItemQty(item.id, -1)}\n                    className=\"px-2 py-1 text-xs text-stone-600 hover:bg-stone-200 rounded-l-xl\"\n                    title=\"Kurangkan\"\n                  &gt;\n                    -\n                  &lt;\/button&gt;\n                  &lt;span className=\"px-2 text-xs font-bold text-stone-700\"&gt;{item.qty}&lt;\/span&gt;\n                  &lt;button\n                    onClick={() =&gt; updateItemQty(item.id, 1)}\n                    className=\"px-2 py-1 text-xs text-stone-600 hover:bg-stone-200 rounded-r-xl\"\n                    title=\"Tambah\"\n                  &gt;\n                    +\n                  &lt;\/button&gt;\n                &lt;\/div&gt;\n                &lt;button\n                  onClick={() =&gt; duplicatePackingItem(item)}\n                  className=\"p-1.5 text-stone-400 hover:text-stone-600 rounded-xl hover:bg-stone-100\"\n                  title=\"Salin barang\"\n                &gt;\n                  &lt;Copy className=\"w-4 h-4\" \/&gt;\n                &lt;\/button&gt;\n                &lt;button\n                  onClick={() =&gt; deletePackingItem(item.id)}\n                  className=\"p-1.5 text-stone-400 hover:text-rose-500 rounded-xl hover:bg-rose-50\"\n                  title=\"Hapus barang\"\n                &gt;\n                  &lt;Trash2 className=\"w-4 h-4\" \/&gt;\n                &lt;\/button&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          ))\n        )}\n      &lt;\/div&gt;\n\n      {\/* Add Packing Modal *\/}\n      {showAddPackingModal &amp;&amp; (\n        &lt;div className=\"fixed inset-0 bg-black\/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\"&gt;\n          &lt;div className=\"bg-white rounded-3xl p-6 max-w-md w-full shadow-2xl\"&gt;\n            &lt;div className=\"flex justify-between items-center pb-3 border-b border-stone-200\"&gt;\n              &lt;h3 className=\"font-bold text-base text-stone-800\"&gt;Tambah Barang Ke Bagasi&lt;\/h3&gt;\n              &lt;button onClick={() =&gt; setShowAddPackingModal(false)} className=\"text-stone-400 hover:text-stone-600\"&gt;\n                &lt;X className=\"w-5 h-5\" \/&gt;\n              &lt;\/button&gt;\n            &lt;\/div&gt;\n\n            &lt;form onSubmit={addPackingItem} className=\"space-y-3 mt-4 text-xs\"&gt;\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Nama Barang&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  required\n                  placeholder=\"cth: Sarung Tangan Wol Bayi\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newPackingItem.item}\n                  onChange={(e) =&gt; setNewPackingItem({ ...newPackingItem, item: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Milik Siapa?&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newPackingItem.traveler}\n                    onChange={(e) =&gt; setNewPackingItem({ ...newPackingItem, traveler: e.target.value })}\n                  &gt;\n                    &lt;option value=\"AYAH\"&gt;AYAH&lt;\/option&gt;\n                    &lt;option value=\"IBU\"&gt;IBU&lt;\/option&gt;\n                    &lt;option value=\"ANAK\"&gt;ANAK&lt;\/option&gt;\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Kategori Beg&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newPackingItem.bag}\n                    onChange={(e) =&gt; setNewPackingItem({ ...newPackingItem, bag: e.target.value })}\n                  &gt;\n                    &lt;option value=\"Cabin Bag\"&gt;Cabin Bag&lt;\/option&gt;\n                    &lt;option value=\"Check-in Bag\"&gt;Check-in Bag&lt;\/option&gt;\n                    &lt;option value=\"Baby Bag\"&gt;Baby Bag (Diaper Bag)&lt;\/option&gt;\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Kuantiti&lt;\/label&gt;\n                  &lt;input\n                    type=\"number\"\n                    min=\"1\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newPackingItem.qty}\n                    onChange={(e) =&gt; setNewPackingItem({ ...newPackingItem, qty: Number(e.target.value) })}\n                  \/&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Catatan&lt;\/label&gt;\n                  &lt;input\n                    type=\"text\"\n                    placeholder=\"cth: Kalis angin \/ mudah dicapai\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newPackingItem.notes}\n                    onChange={(e) =&gt; setNewPackingItem({ ...newPackingItem, notes: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"flex justify-end gap-2 pt-3 border-t border-stone-200\"&gt;\n                &lt;button\n                  type=\"button\"\n                  onClick={() =&gt; setShowAddPackingModal(false)}\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-stone-100 text-stone-600 hover:bg-stone-200\"\n                &gt;\n                  Batal\n                &lt;\/button&gt;\n                &lt;button\n                  type=\"submit\"\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-700 text-white hover:bg-emerald-800\"\n                &gt;\n                  Simpan Barang\n                &lt;\/button&gt;\n              &lt;\/div&gt;\n            &lt;\/form&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      )}\n    &lt;\/div&gt;\n  );\n\n  \/\/ 5. BAJET &amp; PERBELANJAAN (BUDGET &amp; EXPENSES)\n  const [showAddExpenseModal, setShowAddExpenseModal] = useState(false);\n  const [newExpense, setNewExpense] = useState({\n    date: new Date().toISOString().slice(0, 10),\n    description: '',\n    category: 'Makanan &amp; Minuman',\n    amount: '',\n    currency: 'TRY',\n    paymentMethod: 'Kad Wise \/ Kad Debit',\n    traveler: 'Bersama',\n    notes: ''\n  });\n\n  const expenseCategories = [\n    'Makanan &amp; Minuman',\n    'Membeli-belah &amp; Cenderahati',\n    'Tarikan &amp; Tiket Lawatan',\n    'Aktiviti Belon Udara Panas (Pilihan)',\n    'Pengangkutan Tambahan &amp; Teksi',\n    'Keperluan &amp; Makanan Bayi',\n    'Kecemasan &amp; Perubatan',\n    'Lain-lain \/ Tipping'\n  ];\n\n  const addExpense = (e) =&gt; {\n    e.preventDefault();\n    if (!newExpense.description.trim() || !newExpense.amount) return;\n\n    const exp = {\n      ...newExpense,\n      id: 'exp-' + Date.now(),\n      amount: Number(newExpense.amount) || 0\n    };\n\n    setData({ ...data, expenses: [exp, ...data.expenses] });\n    setShowAddExpenseModal(false);\n    setNewExpense({\n      date: new Date().toISOString().slice(0, 10),\n      description: '',\n      category: 'Makanan &amp; Minuman',\n      amount: '',\n      currency: 'TRY',\n      paymentMethod: 'Kad Wise \/ Kad Debit',\n      traveler: 'Bersama',\n      notes: ''\n    });\n    showToast('Perbelanjaan baharu direkodkan.');\n  };\n\n  const deleteExpense = (id) =&gt; {\n    const updated = data.expenses.filter(e =&gt; e.id !== id);\n    setData({ ...data, expenses: updated });\n    showToast('Rekod perbelanjaan dihapuskan.');\n  };\n\n  const updateExchangeRate = (val) =&gt; {\n    const rate = Number(val) || 0;\n    setData({\n      ...data,\n      tripSettings: { ...data.tripSettings, tryToMyrRate: rate }\n    });\n  };\n\n  const updateBudgetLimit = (val) =&gt; {\n    const limit = Number(val) || 0;\n    setData({\n      ...data,\n      tripSettings: { ...data.tripSettings, budgetLimitMyr: limit }\n    });\n  };\n\n  const renderBudget = () =&gt; (\n    &lt;div className=\"space-y-6\"&gt;\n      {\/* Budget Summary Card with Manual Rate *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\"&gt;\n        &lt;div className=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4 pb-4 border-b border-stone-100\"&gt;\n          &lt;div&gt;\n            &lt;h2 className=\"text-xl font-bold text-stone-800\"&gt;Kalkulator &amp; Penjejak Bajet&lt;\/h2&gt;\n            &lt;p className=\"text-xs text-stone-500\"&gt;Mata wang dwipilihan: Ringgit Malaysia (MYR) dan Turkish Lira (TRY)&lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;button\n            onClick={() =&gt; setShowAddExpenseModal(true)}\n            className=\"flex items-center gap-2 bg-emerald-700 hover:bg-emerald-800 text-white px-4 py-2 rounded-2xl text-xs font-semibold shadow-sm transition\"\n          &gt;\n            &lt;Plus className=\"w-4 h-4\" \/&gt; Rekod Belanja Baru\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n\n        {\/* Currency Rate &amp; Budget Settings *\/}\n        &lt;div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 bg-stone-50 p-4 rounded-2xl border border-stone-200\"&gt;\n          &lt;div&gt;\n            &lt;label className=\"text-xs font-semibold text-stone-600 block mb-1\"&gt;\n              Kadar Tukaran (Kadar manual): 1 TRY = ? MYR\n            &lt;\/label&gt;\n            &lt;div className=\"flex items-center gap-2\"&gt;\n              &lt;span className=\"text-xs text-stone-400 font-mono\"&gt;RM&lt;\/span&gt;\n              &lt;input\n                type=\"number\"\n                step=\"0.001\"\n                className=\"w-full bg-white border border-stone-300 rounded-xl px-3 py-1.5 text-xs font-bold text-stone-800\"\n                value={data.tripSettings.tryToMyrRate}\n                onChange={(e) =&gt; updateExchangeRate(e.target.value)}\n              \/&gt;\n            &lt;\/div&gt;\n            &lt;span className=\"text-[10px] text-stone-400 mt-1 block\"&gt;Tukar kadar manual ini mengikut caj kad bank\/Wise anda&lt;\/span&gt;\n          &lt;\/div&gt;\n\n          &lt;div&gt;\n            &lt;label className=\"text-xs font-semibold text-stone-600 block mb-1\"&gt;\n              Had Sasaran Bajet Perbelanjaan (MYR)\n            &lt;\/label&gt;\n            &lt;div className=\"flex items-center gap-2\"&gt;\n              &lt;span className=\"text-xs text-stone-400 font-mono\"&gt;RM&lt;\/span&gt;\n              &lt;input\n                type=\"number\"\n                step=\"100\"\n                className=\"w-full bg-white border border-stone-300 rounded-xl px-3 py-1.5 text-xs font-bold text-stone-800\"\n                value={data.tripSettings.budgetLimitMyr}\n                onChange={(e) =&gt; updateBudgetLimit(e.target.value)}\n              \/&gt;\n            &lt;\/div&gt;\n            &lt;span className=\"text-[10px] text-stone-400 mt-1 block\"&gt;Tidak termasuk pakej asal yang telah dibayar&lt;\/span&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        {\/* Budget Numbers *\/}\n        &lt;div className=\"grid grid-cols-1 sm:grid-cols-3 gap-3 mt-4 text-center\"&gt;\n          &lt;div className=\"bg-stone-50 p-3.5 rounded-2xl border border-stone-200\"&gt;\n            &lt;span className=\"text-xs text-stone-500 font-medium block\"&gt;Jumlah Dibelanjakan&lt;\/span&gt;\n            &lt;span className=\"text-xl font-extrabold text-stone-900 block mt-1\"&gt;\n              RM {expenseStats.totalMyr.toFixed(2)}\n            &lt;\/span&gt;\n            &lt;span className=\"text-[11px] text-stone-500\"&gt;\n              \u2248 \u20ba{expenseStats.totalTry.toFixed(2)} TRY\n            &lt;\/span&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"bg-stone-50 p-3.5 rounded-2xl border border-stone-200\"&gt;\n            &lt;span className=\"text-xs text-stone-500 font-medium block\"&gt;Sasaran Bajet&lt;\/span&gt;\n            &lt;span className=\"text-xl font-extrabold text-stone-800 block mt-1\"&gt;\n              RM {expenseStats.budgetLimit.toFixed(2)}\n            &lt;\/span&gt;\n            &lt;span className=\"text-[11px] text-stone-500\"&gt;{expenseStats.percentUsed}% digunakan&lt;\/span&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"bg-stone-50 p-3.5 rounded-2xl border border-stone-200\"&gt;\n            &lt;span className=\"text-xs text-stone-500 font-medium block\"&gt;Baki Bajet&lt;\/span&gt;\n            &lt;span className={`text-xl font-extrabold block mt-1 ${\n              expenseStats.remainingMyr &gt;= 0 ? 'text-emerald-700' : 'text-rose-600'\n            }`}&gt;\n              RM {expenseStats.remainingMyr.toFixed(2)}\n            &lt;\/span&gt;\n            &lt;span className=\"text-[11px] text-stone-500\"&gt;\n              {expenseStats.remainingMyr &gt;= 0 ? 'Dalam kawalan' : 'Melebihi sasaran bajet'}\n            &lt;\/span&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        {\/* Category Breakdown Progress Bars *\/}\n        &lt;div className=\"mt-5 pt-4 border-t border-stone-100\"&gt;\n          &lt;h3 className=\"text-xs font-bold text-stone-700 uppercase tracking-wider mb-3\"&gt;Pecahan Mengikut Kategori (MYR)&lt;\/h3&gt;\n          {Object.keys(expenseStats.byCategory).length === 0 ? (\n            &lt;p className=\"text-xs text-stone-400 italic\"&gt;Belum ada sebarang transaksi direkodkan. Tekan 'Rekod Belanja Baru' untuk mula.&lt;\/p&gt;\n          ) : (\n            &lt;div className=\"space-y-2\"&gt;\n              {Object.entries(expenseStats.byCategory).map(([cat, amount]) =&gt; {\n                const pct = expenseStats.totalMyr &gt; 0 ? Math.round((amount \/ expenseStats.totalMyr) * 100) : 0;\n                return (\n                  &lt;div key={cat} className=\"space-y-1\"&gt;\n                    &lt;div className=\"flex justify-between text-xs\"&gt;\n                      &lt;span className=\"text-stone-700 font-medium\"&gt;{cat}&lt;\/span&gt;\n                      &lt;span className=\"font-bold text-stone-900\"&gt;RM {amount.toFixed(2)} ({pct}%)&lt;\/span&gt;\n                    &lt;\/div&gt;\n                    &lt;div className=\"w-full bg-stone-100 rounded-full h-1.5 overflow-hidden\"&gt;\n                      &lt;div className=\"bg-emerald-600 h-1.5 rounded-full\" style={{ width: `${pct}%` }}&gt;&lt;\/div&gt;\n                    &lt;\/div&gt;\n                  &lt;\/div&gt;\n                );\n              })}\n            &lt;\/div&gt;\n          )}\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Transaction Records Table *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\"&gt;\n        &lt;h3 className=\"text-base font-bold text-stone-800 mb-3\"&gt;Senarai Transaksi Sebenar&lt;\/h3&gt;\n        {data.expenses.length === 0 ? (\n          &lt;div className=\"text-center py-10 text-stone-400 text-xs\"&gt;\n            &lt;DollarSign className=\"w-8 h-8 mx-auto text-stone-300 mb-2\" \/&gt;\n            Tiada rekod bayaran direka. Anda boleh merekodkan perbelanjaan sebenar sebelum atau semasa di T\u00fcrkiye.\n          &lt;\/div&gt;\n        ) : (\n          &lt;div className=\"space-y-2.5\"&gt;\n            {data.expenses.map(exp =&gt; (\n              &lt;div key={exp.id} className=\"p-3.5 rounded-2xl bg-stone-50 border border-stone-200 flex justify-between items-center gap-3\"&gt;\n                &lt;div className=\"flex-1\"&gt;\n                  &lt;div className=\"flex items-center gap-2\"&gt;\n                    &lt;span className=\"text-xs md:text-sm font-bold text-stone-900\"&gt;{exp.description}&lt;\/span&gt;\n                    &lt;span className=\"text-[10px] font-semibold px-2 py-0.5 rounded-full bg-stone-200 text-stone-700\"&gt;\n                      {exp.category}\n                    &lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;div className=\"flex flex-wrap items-center gap-2 text-[11px] text-stone-500 mt-1\"&gt;\n                    &lt;span&gt;{exp.date}&lt;\/span&gt;\n                    &lt;span&gt;\u2022&lt;\/span&gt;\n                    &lt;span&gt;Kaedah: {exp.paymentMethod}&lt;\/span&gt;\n                    {exp.notes &amp;&amp; (\n                      &lt;&gt;\n                        &lt;span&gt;\u2022&lt;\/span&gt;\n                        &lt;span&gt;{exp.notes}&lt;\/span&gt;\n                      &lt;\/&gt;\n                    )}\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                &lt;div className=\"text-right flex items-center gap-3\"&gt;\n                  &lt;div&gt;\n                    &lt;span className=\"text-sm md:text-base font-extrabold text-stone-900 block\"&gt;\n                      {exp.currency === 'TRY' ? `\u20ba${exp.amount.toFixed(2)}` : `RM ${exp.amount.toFixed(2)}`}\n                    &lt;\/span&gt;\n                    {exp.currency === 'TRY' &amp;&amp; (\n                      &lt;span className=\"text-[10px] text-stone-400 block\"&gt;\n                        \u2248 RM {(exp.amount * Number(data.tripSettings.tryToMyrRate || 0.13)).toFixed(2)}\n                      &lt;\/span&gt;\n                    )}\n                  &lt;\/div&gt;\n\n                  &lt;button\n                    onClick={() =&gt; deleteExpense(exp.id)}\n                    className=\"p-1.5 text-stone-400 hover:text-rose-500 rounded-xl hover:bg-rose-50\"\n                    title=\"Hapus rekod\"\n                  &gt;\n                    &lt;Trash2 className=\"w-4 h-4\" \/&gt;\n                  &lt;\/button&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            ))}\n          &lt;\/div&gt;\n        )}\n      &lt;\/div&gt;\n\n      {\/* Add Expense Modal *\/}\n      {showAddExpenseModal &amp;&amp; (\n        &lt;div className=\"fixed inset-0 bg-black\/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\"&gt;\n          &lt;div className=\"bg-white rounded-3xl p-6 max-w-md w-full shadow-2xl\"&gt;\n            &lt;div className=\"flex justify-between items-center pb-3 border-b border-stone-200\"&gt;\n              &lt;h3 className=\"font-bold text-base text-stone-800\"&gt;Rekod Perbelanjaan Baru&lt;\/h3&gt;\n              &lt;button onClick={() =&gt; setShowAddExpenseModal(false)} className=\"text-stone-400 hover:text-stone-600\"&gt;\n                &lt;X className=\"w-5 h-5\" \/&gt;\n              &lt;\/button&gt;\n            &lt;\/div&gt;\n\n            &lt;form onSubmit={addExpense} className=\"space-y-3 mt-4 text-xs\"&gt;\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Keterangan \/ Kedai&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  required\n                  placeholder=\"cth: Makan malam Kumpir di Ortak\u00f6y\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newExpense.description}\n                  onChange={(e) =&gt; setNewExpense({ ...newExpense, description: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Jumlah&lt;\/label&gt;\n                  &lt;input\n                    type=\"number\"\n                    step=\"0.01\"\n                    required\n                    placeholder=\"0.00\"\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newExpense.amount}\n                    onChange={(e) =&gt; setNewExpense({ ...newExpense, amount: e.target.value })}\n                  \/&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Mata Wang&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newExpense.currency}\n                    onChange={(e) =&gt; setNewExpense({ ...newExpense, currency: e.target.value })}\n                  &gt;\n                    &lt;option value=\"TRY\"&gt;TRY (Turkish Lira \u20ba)&lt;\/option&gt;\n                    &lt;option value=\"MYR\"&gt;MYR (Ringgit Malaysia)&lt;\/option&gt;\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"grid grid-cols-2 gap-3\"&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Kategori&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newExpense.category}\n                    onChange={(e) =&gt; setNewExpense({ ...newExpense, category: e.target.value })}\n                  &gt;\n                    {expenseCategories.map(c =&gt; (\n                      &lt;option key={c} value={c}&gt;{c}&lt;\/option&gt;\n                    ))}\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n                &lt;div&gt;\n                  &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Kaedah Bayaran&lt;\/label&gt;\n                  &lt;select\n                    className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                    value={newExpense.paymentMethod}\n                    onChange={(e) =&gt; setNewExpense({ ...newExpense, paymentMethod: e.target.value })}\n                  &gt;\n                    &lt;option value=\"Kad Wise\"&gt;Kad Wise&lt;\/option&gt;\n                    &lt;option value=\"Kad Debit \/ Kredit\"&gt;Kad Debit \/ Kredit&lt;\/option&gt;\n                    &lt;option value=\"Tunai (TRY)\"&gt;Tunai (TRY)&lt;\/option&gt;\n                    &lt;option value=\"Tunai (EUR)\"&gt;Tunai (EUR)&lt;\/option&gt;\n                  &lt;\/select&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Tarikh&lt;\/label&gt;\n                &lt;input\n                  type=\"date\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newExpense.date}\n                  onChange={(e) =&gt; setNewExpense({ ...newExpense, date: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div&gt;\n                &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Nota Tambahan&lt;\/label&gt;\n                &lt;input\n                  type=\"text\"\n                  placeholder=\"cth: Resit disimpan dalam beg sandang\"\n                  className=\"w-full border border-stone-300 rounded-xl p-2.5\"\n                  value={newExpense.notes}\n                  onChange={(e) =&gt; setNewExpense({ ...newExpense, notes: e.target.value })}\n                \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"flex justify-end gap-2 pt-3 border-t border-stone-200\"&gt;\n                &lt;button\n                  type=\"button\"\n                  onClick={() =&gt; setShowAddExpenseModal(false)}\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-stone-100 text-stone-600 hover:bg-stone-200\"\n                &gt;\n                  Batal\n                &lt;\/button&gt;\n                &lt;button\n                  type=\"submit\"\n                  className=\"px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-700 text-white hover:bg-emerald-800\"\n                &gt;\n                  Simpan Transaksi\n                &lt;\/button&gt;\n              &lt;\/div&gt;\n            &lt;\/form&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      )}\n    &lt;\/div&gt;\n  );\n\n  \/\/ 6. DOKUMEN &amp; PENERBANGAN\n  const [editingFlight, setEditingFlight] = useState(null);\n\n  const saveFlightChanges = (flight) =&gt; {\n    const updated = data.flights.map(f =&gt; f.id === flight.id ? flight : f);\n    setData({ ...data, flights: updated });\n    setEditingFlight(null);\n    showToast('Maklumat penerbangan dikemaskini.');\n  };\n\n  const renderDocuments = () =&gt; (\n    &lt;div className=\"space-y-6\"&gt;\n      {\/* Flight Management Section *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\"&gt;\n        &lt;div className=\"flex justify-between items-center mb-4\"&gt;\n          &lt;div&gt;\n            &lt;h2 className=\"text-xl font-bold text-stone-800\"&gt;Tiket Penerbangan &amp; Tempahan&lt;\/h2&gt;\n            &lt;p className=\"text-xs text-stone-500\"&gt;\n              Antarabangsa (Emirates) &amp; Domestik (Pegasus). Pastikan elaun bagasi disahkan.\n            &lt;\/p&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        &lt;div className=\"space-y-4\"&gt;\n          {data.flights.map(flight =&gt; {\n            const isEditing = editingFlight?.id === flight.id;\n\n            if (isEditing) {\n              return (\n                &lt;div key={flight.id} className=\"p-4 rounded-3xl border-2 border-emerald-600 bg-stone-50 space-y-3 text-xs\"&gt;\n                  &lt;div className=\"flex justify-between items-center font-bold text-stone-800\"&gt;\n                    &lt;span&gt;Edit Penerbangan: {flight.airline} {flight.flightNumber}&lt;\/span&gt;\n                    &lt;button onClick={() =&gt; setEditingFlight(null)} className=\"text-stone-400 hover:text-stone-600\"&gt;\n                      &lt;X className=\"w-4 h-4\" \/&gt;\n                    &lt;\/button&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2\"&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Tarikh&lt;\/label&gt;\n                      &lt;input\n                        type=\"date\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.date}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, date: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Masa Pelepasan&lt;\/label&gt;\n                      &lt;input\n                        type=\"text\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.departureTime}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, departureTime: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Masa Ketibaan&lt;\/label&gt;\n                      &lt;input\n                        type=\"text\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.arrivalTime}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, arrivalTime: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div className=\"grid grid-cols-1 sm:grid-cols-2 gap-2\"&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Nombor Kerusi&lt;\/label&gt;\n                      &lt;input\n                        type=\"text\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.seatNumbers}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, seatNumbers: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Rujukan Tempahan (PNR)&lt;\/label&gt;\n                      &lt;input\n                        type=\"text\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.bookingRef}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, bookingRef: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div className=\"grid grid-cols-1 sm:grid-cols-2 gap-2\"&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Elaun Bagasi Dewasa&lt;\/label&gt;\n                      &lt;input\n                        type=\"text\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.baggageAdult}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, baggageAdult: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                    &lt;div&gt;\n                      &lt;label className=\"font-semibold text-stone-600 block mb-1\"&gt;Status Tiket Bayi&lt;\/label&gt;\n                      &lt;input\n                        type=\"text\"\n                        className=\"w-full border rounded-xl p-2 bg-white\"\n                        value={editingFlight.infantTicket}\n                        onChange={(e) =&gt; setEditingFlight({ ...editingFlight, infantTicket: e.target.value })}\n                      \/&gt;\n                    &lt;\/div&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div className=\"flex justify-end gap-2 pt-2\"&gt;\n                    &lt;button\n                      onClick={() =&gt; setEditingFlight(null)}\n                      className=\"px-3 py-1.5 rounded-xl bg-stone-200 text-stone-700 font-semibold\"\n                    &gt;\n                      Batal\n                    &lt;\/button&gt;\n                    &lt;button\n                      onClick={() =&gt; saveFlightChanges(editingFlight)}\n                      className=\"px-3 py-1.5 rounded-xl bg-emerald-700 text-white font-semibold\"\n                    &gt;\n                      Simpan Kemaskini\n                    &lt;\/button&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n              );\n            }\n\n            return (\n              &lt;div\n                key={flight.id}\n                className={`p-4 rounded-3xl border transition shadow-sm bg-white ${\n                  flight.airportType === 'Domestic-SAW' ? 'border-amber-200 bg-amber-50\/20' : 'border-stone-200'\n                }`}\n              &gt;\n                &lt;div className=\"flex flex-col sm:flex-row justify-between items-start gap-2\"&gt;\n                  &lt;div className=\"flex items-center gap-2\"&gt;\n                    &lt;span className={`px-2.5 py-0.5 rounded-full text-xs font-bold uppercase ${\n                      flight.airline === 'Emirates' ? 'bg-red-100 text-red-800' : 'bg-amber-100 text-amber-900'\n                    }`}&gt;\n                      {flight.airline} {flight.flightNumber}\n                    &lt;\/span&gt;\n                    &lt;span className=\"text-xs text-stone-500 font-mono\"&gt;Ref: {flight.bookingRef}&lt;\/span&gt;\n                  &lt;\/div&gt;\n\n                  &lt;div className=\"flex items-center gap-2\"&gt;\n                    &lt;span className=\"text-xs font-semibold text-stone-700\"&gt;{flight.date}&lt;\/span&gt;\n                    &lt;button\n                      onClick={() =&gt; setEditingFlight(flight)}\n                      className=\"p-1 text-stone-400 hover:text-stone-600 rounded-lg\"\n                      title=\"Edit maklumat penerbangan\"\n                    &gt;\n                      &lt;Edit2 className=\"w-3.5 h-3.5\" \/&gt;\n                    &lt;\/button&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                {\/* Route visualization *\/}\n                &lt;div className=\"grid grid-cols-3 items-center text-center my-3 py-2 bg-stone-50 rounded-2xl border border-stone-100\"&gt;\n                  &lt;div className=\"text-left pl-3\"&gt;\n                    &lt;span className=\"text-base md:text-lg font-black text-stone-800 block\"&gt;{flight.departureTime}&lt;\/span&gt;\n                    &lt;span className=\"text-xs font-semibold text-stone-600 block\"&gt;{flight.origin}&lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;div className=\"flex flex-col items-center\"&gt;\n                    &lt;Plane className=\"w-4 h-4 text-emerald-700\" \/&gt;\n                    &lt;span className=\"text-[10px] text-stone-400 mt-1\"&gt;{flight.classType}&lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;div className=\"text-right pr-3\"&gt;\n                    &lt;span className=\"text-base md:text-lg font-black text-stone-800 block\"&gt;{flight.arrivalTime}&lt;\/span&gt;\n                    &lt;span className=\"text-xs font-semibold text-stone-600 block\"&gt;{flight.destination}&lt;\/span&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                &lt;div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2 text-[11px] text-stone-600 mt-2 pt-2 border-t border-stone-100\"&gt;\n                  &lt;div&gt;\n                    &lt;span className=\"text-stone-400 block\"&gt;Bagasi Dewasa:&lt;\/span&gt;\n                    &lt;strong className=\"text-stone-800\"&gt;{flight.baggageAdult}&lt;\/strong&gt;\n                  &lt;\/div&gt;\n                  &lt;div&gt;\n                    &lt;span className=\"text-stone-400 block\"&gt;Bagasi Lain-lain:&lt;\/span&gt;\n                    &lt;span className={flight.baggageOthers === 'Belum disahkan' ? 'text-amber-700 font-bold' : 'text-stone-800'}&gt;\n                      {flight.baggageOthers}\n                    &lt;\/span&gt;\n                  &lt;\/div&gt;\n                  &lt;div&gt;\n                    &lt;span className=\"text-stone-400 block\"&gt;Tiket &amp; Kerusi Bayi:&lt;\/span&gt;\n                    &lt;span className={flight.infantTicket === 'Belum disahkan' ? 'text-rose-600 font-bold' : 'text-stone-800'}&gt;\n                      {flight.infantTicket}\n                    &lt;\/span&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            );\n          })}\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Sensitive Documents &amp; Passport Metadata *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\"&gt;\n        &lt;div className=\"flex justify-between items-center mb-3\"&gt;\n          &lt;div&gt;\n            &lt;h2 className=\"text-lg font-bold text-stone-800\"&gt;Metadata Pasport &amp; Perlindungan Insurans&lt;\/h2&gt;\n            &lt;p className=\"text-xs text-stone-500\"&gt;Maklumat sulit disembunyikan secara lalai untuk keselamatan privasi.&lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;button\n            onClick={() =&gt; setShowSensitiveDocs(!showSensitiveDocs)}\n            className=\"flex items-center gap-1.5 px-3 py-1.5 rounded-xl border border-stone-200 text-xs font-semibold text-stone-700 hover:bg-stone-50\"\n          &gt;\n            {showSensitiveDocs ? &lt;EyeOff className=\"w-4 h-4\" \/&gt; : &lt;Eye className=\"w-4 h-4\" \/&gt;}\n            {showSensitiveDocs ? 'Sembunyi' : 'Papar Nombor'}\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n\n        &lt;div className=\"space-y-3 mt-4\"&gt;\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200\"&gt;\n            &lt;span className=\"text-xs font-bold text-stone-800 block mb-2\"&gt;1. Pasport Ayah (Dewasa 1)&lt;\/span&gt;\n            &lt;div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs\"&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Nombor Pasport:&lt;\/span&gt;\n                &lt;span className=\"font-mono font-bold text-stone-800\"&gt;\n                  {showSensitiveDocs ? data.documents.fatherPassport.number : '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022'}\n                &lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Tarikh Luput:&lt;\/span&gt;\n                &lt;span className=\"font-medium text-stone-800\"&gt;{data.documents.fatherPassport.expiry}&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Status:&lt;\/span&gt;\n                &lt;span className=\"text-emerald-700 font-bold\"&gt;{data.documents.fatherPassport.status}&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200\"&gt;\n            &lt;span className=\"text-xs font-bold text-stone-800 block mb-2\"&gt;2. Pasport Ibu (Dewasa 2)&lt;\/span&gt;\n            &lt;div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs\"&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Nombor Pasport:&lt;\/span&gt;\n                &lt;span className=\"font-mono font-bold text-stone-800\"&gt;\n                  {showSensitiveDocs ? data.documents.motherPassport.number : '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022'}\n                &lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Tarikh Luput:&lt;\/span&gt;\n                &lt;span className=\"font-medium text-stone-800\"&gt;{data.documents.motherPassport.expiry}&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Status:&lt;\/span&gt;\n                &lt;span className=\"text-amber-700 font-bold\"&gt;{data.documents.motherPassport.status}&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200\"&gt;\n            &lt;span className=\"text-xs font-bold text-stone-800 block mb-2\"&gt;3. Pasport &amp; Dokumen Anak (~1 Tahun)&lt;\/span&gt;\n            &lt;div className=\"grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs\"&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Nombor Pasport:&lt;\/span&gt;\n                &lt;span className=\"font-mono font-bold text-stone-800\"&gt;\n                  {showSensitiveDocs ? data.documents.toddlerPassport.number : '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022'}\n                &lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Tarikh Luput:&lt;\/span&gt;\n                &lt;span className=\"font-medium text-stone-800\"&gt;{data.documents.toddlerPassport.expiry}&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Status:&lt;\/span&gt;\n                &lt;span className=\"text-amber-700 font-bold\"&gt;{data.documents.toddlerPassport.status}&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200 text-xs\"&gt;\n            &lt;span className=\"font-bold text-stone-800 block mb-1\"&gt;Insurans Perjalanan Keluarga&lt;\/span&gt;\n            &lt;div className=\"flex flex-wrap items-center justify-between gap-2\"&gt;\n              &lt;div&gt;\n                &lt;p className=\"text-stone-600\"&gt;Polisi: &lt;strong className=\"font-mono\"&gt;{data.documents.insurancePolicyNumber}&lt;\/strong&gt;&lt;\/p&gt;\n                &lt;p className=\"text-stone-500\"&gt;Status Pembekal: {data.documents.insuranceProvider}&lt;\/p&gt;\n              &lt;\/div&gt;\n              &lt;div className=\"text-right\"&gt;\n                &lt;span className=\"text-stone-400 block\"&gt;Talian Kecemasan 24\/7:&lt;\/span&gt;\n                &lt;span className=\"font-mono font-bold text-stone-800\"&gt;{data.documents.insurancePhone}&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n\n  \/\/ 7. NOTA &amp; KECEMASAN (NOTES &amp; CONTACTS)\n  const [generalNotesText, setGeneralNotesText] = useState(data.notesAndContacts.generalNotes);\n\n  const saveGeneralNotes = () =&gt; {\n    setData({\n      ...data,\n      notesAndContacts: { ...data.notesAndContacts, generalNotes: generalNotesText }\n    });\n    showToast('Nota harian berjaya disimpan!');\n  };\n\n  const renderNotesAndEmergency = () =&gt; (\n    &lt;div className=\"space-y-6\"&gt;\n      {\/* Emergency T\u00fcrkiye Quick Call Box *\/}\n      &lt;div className=\"bg-red-50 border-2 border-red-200 rounded-3xl p-5 md:p-6 shadow-sm\"&gt;\n        &lt;div className=\"flex items-center gap-3\"&gt;\n          &lt;div className=\"p-3 bg-red-600 text-white rounded-2xl\"&gt;\n            &lt;Phone className=\"w-6 h-6 animate-pulse\" \/&gt;\n          &lt;\/div&gt;\n          &lt;div&gt;\n            &lt;h2 className=\"text-lg font-black text-red-950\"&gt;NOMBOR KECEMASAN T\u00dcRKIYE: 112&lt;\/h2&gt;\n            &lt;p className=\"text-xs text-red-800\"&gt;\n              Satu nombor berpusat untuk Polis, Ambulans, dan Bomba di seluruh T\u00fcrkiye (Bebas tol).\n            &lt;\/p&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Diplomatic &amp; Consular Contacts *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\"&gt;\n        &lt;h3 className=\"text-base font-bold text-stone-800 mb-4\"&gt;Perwakilan Diplomatik Malaysia di T\u00fcrkiye&lt;\/h3&gt;\n        &lt;div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs\"&gt;\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-1.5\"&gt;\n            &lt;span className=\"font-bold text-stone-900 block\"&gt;{data.notesAndContacts.istanbulConsulate.name}&lt;\/span&gt;\n            &lt;p className=\"text-stone-600\"&gt;{data.notesAndContacts.istanbulConsulate.address}&lt;\/p&gt;\n            &lt;p className=\"text-stone-800 font-mono font-bold pt-1\"&gt;\n              Tel: &lt;a href={`tel:${data.notesAndContacts.istanbulConsulate.phone}`} className=\"text-emerald-700 underline\"&gt;{data.notesAndContacts.istanbulConsulate.phone}&lt;\/a&gt;\n            &lt;\/p&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-1.5\"&gt;\n            &lt;span className=\"font-bold text-stone-900 block\"&gt;{data.notesAndContacts.malaysiaEmbassyAnkara.name}&lt;\/span&gt;\n            &lt;p className=\"text-stone-600\"&gt;{data.notesAndContacts.malaysiaEmbassyAnkara.address}&lt;\/p&gt;\n            &lt;p className=\"text-stone-800 font-mono font-bold pt-1\"&gt;\n              Tel: &lt;a href={`tel:${data.notesAndContacts.malaysiaEmbassyAnkara.phone}`} className=\"text-emerald-700 underline\"&gt;{data.notesAndContacts.malaysiaEmbassyAnkara.phone}&lt;\/a&gt;\n            &lt;\/p&gt;\n            &lt;p className=\"text-stone-600 font-mono\"&gt;Pegawai Bertugas: {data.notesAndContacts.malaysiaEmbassyAnkara.dutyOfficer}&lt;\/p&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Hotel &amp; Lodging Contacts *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\"&gt;\n        &lt;h3 className=\"text-base font-bold text-stone-800 mb-4\"&gt;Penginapan &amp; Hotel&lt;\/h3&gt;\n        &lt;div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs\"&gt;\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-1\"&gt;\n            &lt;span className=\"font-bold text-stone-900 block\"&gt;{data.notesAndContacts.hotelIstanbul.name}&lt;\/span&gt;\n            &lt;p className=\"text-stone-500\"&gt;{data.notesAndContacts.hotelIstanbul.address}&lt;\/p&gt;\n            &lt;p className=\"text-stone-700\"&gt;Daftar Masuk: {data.notesAndContacts.hotelIstanbul.checkIn}&lt;\/p&gt;\n            &lt;p className=\"font-mono font-bold text-emerald-800\"&gt;Tel: {data.notesAndContacts.hotelIstanbul.phone}&lt;\/p&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"p-4 rounded-2xl bg-stone-50 border border-stone-200 space-y-1\"&gt;\n            &lt;span className=\"font-bold text-stone-900 block\"&gt;{data.notesAndContacts.hotelCappadocia.name}&lt;\/span&gt;\n            &lt;p className=\"text-stone-500\"&gt;{data.notesAndContacts.hotelCappadocia.address}&lt;\/p&gt;\n            &lt;p className=\"text-stone-700\"&gt;Daftar Masuk: {data.notesAndContacts.hotelCappadocia.checkIn}&lt;\/p&gt;\n            &lt;p className=\"font-mono font-bold text-emerald-800\"&gt;Tel: {data.notesAndContacts.hotelCappadocia.phone}&lt;\/p&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      {\/* Editable General Notes *\/}\n      &lt;div className=\"bg-white rounded-3xl p-5 md:p-6 shadow-sm border border-stone-200\"&gt;\n        &lt;div className=\"flex justify-between items-center mb-3\"&gt;\n          &lt;h3 className=\"text-base font-bold text-stone-800\"&gt;Nota Perjalanan &amp; Peringatan Harian&lt;\/h3&gt;\n          &lt;button\n            onClick={saveGeneralNotes}\n            className=\"px-3.5 py-1.5 bg-emerald-700 hover:bg-emerald-800 text-white rounded-xl text-xs font-semibold shadow-sm transition\"\n          &gt;\n            Simpan Nota\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n        &lt;textarea\n          rows={6}\n          className=\"w-full border border-stone-200 rounded-2xl p-3 text-xs leading-relaxed text-stone-700 focus:outline-emerald-600\"\n          value={generalNotesText}\n          onChange={(e) =&gt; setGeneralNotesText(e.target.value)}\n        \/&gt;\n      &lt;\/div&gt;\n\n      {\/* Data Backup &amp; Restore Center *\/}\n      &lt;div className=\"bg-stone-900 text-white rounded-3xl p-5 md:p-6 shadow-lg\"&gt;\n        &lt;h3 className=\"text-base font-bold mb-1\"&gt;Pengurusan Sandaran Data (Data Persistence)&lt;\/h3&gt;\n        &lt;p className=\"text-xs text-stone-400 mb-4 leading-relaxed\"&gt;\n          Semua perubahan disimpan serta-merta ke dalam pelayar (localStorage). Gunakan fungsi eksport untuk membuat salinan fail JSON atau mencetak dokumen perjalanan.\n        &lt;\/p&gt;\n\n        &lt;div className=\"flex flex-wrap gap-2.5\"&gt;\n          &lt;button\n            onClick={handleExportJson}\n            className=\"flex items-center gap-1.5 px-4 py-2 bg-emerald-700 hover:bg-emerald-600 text-white rounded-xl text-xs font-semibold transition\"\n          &gt;\n            &lt;Download className=\"w-4 h-4\" \/&gt; Eksport Salinan JSON\n          &lt;\/button&gt;\n\n          &lt;label className=\"flex items-center gap-1.5 px-4 py-2 bg-stone-700 hover:bg-stone-600 text-white rounded-xl text-xs font-semibold cursor-pointer transition\"&gt;\n            &lt;Upload className=\"w-4 h-4\" \/&gt; Import Salinan JSON\n            &lt;input type=\"file\" accept=\".json\" onChange={handleImportJson} className=\"hidden\" \/&gt;\n          &lt;\/label&gt;\n\n          &lt;button\n            onClick={handlePrintPdf}\n            className=\"flex items-center gap-1.5 px-4 py-2 bg-stone-800 hover:bg-stone-700 text-stone-200 rounded-xl text-xs font-semibold border border-stone-700 transition\"\n          &gt;\n            &lt;FileText className=\"w-4 h-4\" \/&gt; Cetak \/ Simpan PDF\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={handleResetData}\n            className=\"flex items-center gap-1.5 px-4 py-2 bg-rose-900\/60 hover:bg-rose-900 text-rose-200 rounded-xl text-xs font-semibold border border-rose-800 transition ml-auto\"\n          &gt;\n            &lt;RefreshCw className=\"w-4 h-4\" \/&gt; Set Semula Data\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n\n  return (\n    &lt;div className=\"min-h-screen bg-[#FBF9F5] text-stone-800 font-sans pb-24 md:pb-12\"&gt;\n      {\/* Toast Notification *\/}\n      {toastMessage &amp;&amp; (\n        &lt;div className=\"fixed top-5 left-1\/2 -translate-x-1\/2 z-50 bg-stone-900 text-white text-xs font-semibold px-4 py-2.5 rounded-full shadow-2xl flex items-center gap-2 animate-bounce\"&gt;\n          &lt;Check className=\"w-4 h-4 text-emerald-400\" \/&gt;\n          &lt;span&gt;{toastMessage}&lt;\/span&gt;\n        &lt;\/div&gt;\n      )}\n\n      {\/* Top Navbar *\/}\n      &lt;header className=\"sticky top-0 z-40 bg-white\/90 backdrop-blur-md border-b border-stone-200\"&gt;\n        &lt;div className=\"max-w-5xl mx-auto px-4 h-16 flex items-center justify-between\"&gt;\n          &lt;div className=\"flex items-center gap-2.5\"&gt;\n            &lt;div className=\"w-9 h-9 rounded-2xl bg-emerald-800 text-white flex items-center justify-center font-black text-sm shadow-sm\"&gt;\n              TR\n            &lt;\/div&gt;\n            &lt;div&gt;\n              &lt;span className=\"font-extrabold text-sm md:text-base tracking-tight text-stone-900 block leading-tight\"&gt;\n                KAZ FAMILY\n              &lt;\/span&gt;\n              &lt;span className=\"text-[10px] text-emerald-800 font-semibold tracking-wider uppercase block\"&gt;\n                T\u00fcrkiye 2026\n              &lt;\/span&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n\n          {\/* Desktop Navigation Links *\/}\n          &lt;nav className=\"hidden md:flex items-center gap-1 text-xs font-semibold text-stone-600\"&gt;\n            {[\n              { id: 'dashboard', label: 'Dashboard' },\n              { id: 'itinerary', label: 'Jadual Perjalanan' },\n              { id: 'checklist', label: 'Checklist' },\n              { id: 'packing', label: 'Packing List' },\n              { id: 'budget', label: 'Bajet' },\n              { id: 'flights', label: 'Penerbangan' },\n              { id: 'notes', label: 'Nota &amp; Kecemasan' }\n            ].map(tab =&gt; (\n              &lt;button\n                key={tab.id}\n                onClick={() =&gt; setActiveTab(tab.id)}\n                className={`px-3 py-1.5 rounded-xl transition ${\n                  activeTab === tab.id\n                    ? 'bg-emerald-800 text-white'\n                    : 'hover:bg-stone-100 text-stone-700'\n                }`}\n              &gt;\n                {tab.label}\n              &lt;\/button&gt;\n            ))}\n          &lt;\/nav&gt;\n\n          &lt;div className=\"flex items-center gap-2\"&gt;\n            &lt;button\n              onClick={handlePrintPdf}\n              className=\"hidden sm:flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-xl border border-stone-200 hover:bg-stone-100 text-stone-700\"\n              title=\"Cetak jadual\"\n            &gt;\n              &lt;Download className=\"w-3.5 h-3.5\" \/&gt; PDF\n            &lt;\/button&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/header&gt;\n\n      {\/* Main App Content Container *\/}\n      &lt;main className=\"max-w-5xl mx-auto px-4 pt-6\"&gt;\n        {activeTab === 'dashboard' &amp;&amp; renderDashboard()}\n        {activeTab === 'itinerary' &amp;&amp; renderItinerary()}\n        {activeTab === 'checklist' &amp;&amp; renderChecklist()}\n        {activeTab === 'packing' &amp;&amp; renderPacking()}\n        {activeTab === 'budget' &amp;&amp; renderBudget()}\n        {activeTab === 'flights' &amp;&amp; renderDocuments()}\n        {activeTab === 'notes' &amp;&amp; renderNotesAndEmergency()}\n      &lt;\/main&gt;\n\n      {\/* Sticky Bottom Navigation for Mobile Devices *\/}\n      &lt;nav className=\"md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white\/95 backdrop-blur-lg border-t border-stone-200 px-2 py-1.5\"&gt;\n        &lt;div className=\"grid grid-cols-7 gap-0.5 text-center\"&gt;\n          &lt;button\n            onClick={() =&gt; setActiveTab('dashboard')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'dashboard' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;Calendar className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Utama&lt;\/span&gt;\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={() =&gt; setActiveTab('itinerary')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'itinerary' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;Clock className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Jadual&lt;\/span&gt;\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={() =&gt; setActiveTab('checklist')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'checklist' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;CheckCircle2 className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Checklist&lt;\/span&gt;\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={() =&gt; setActiveTab('packing')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'packing' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;Luggage className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Beg&lt;\/span&gt;\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={() =&gt; setActiveTab('budget')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'budget' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;DollarSign className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Bajet&lt;\/span&gt;\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={() =&gt; setActiveTab('flights')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'flights' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;Plane className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Tiket&lt;\/span&gt;\n          &lt;\/button&gt;\n\n          &lt;button\n            onClick={() =&gt; setActiveTab('notes')}\n            className={`flex flex-col items-center py-1 rounded-xl transition ${\n              activeTab === 'notes' ? 'text-emerald-800 font-bold' : 'text-stone-400'\n            }`}\n          &gt;\n            &lt;FileText className=\"w-5 h-5\" \/&gt;\n            &lt;span className=\"text-[9px] mt-0.5\"&gt;Nota&lt;\/span&gt;\n          &lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/nav&gt;\n    &lt;\/div&gt;\n  );\n}<\/textarea><\/div><\/div><\/div><\/div>\n<\/script>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ms\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>KAZ FAMILY \u2022 T\u00dcRKIYE TRIP 2026<\/title>\n  <!-- Tailwind CSS -->\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <!-- React & ReactDOM (UMD Production) -->\n  <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n  <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n  <!-- Babel Standalone untuk JSX -->\n  <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n  <!-- Google Font Inter -->\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Plus Jakarta Sans', sans-serif;\n      -webkit-tap-highlight-color: transparent;\n    }\n    .scrollbar-none::-webkit-scrollbar {\n      display: none;\n    }\n    .scrollbar-none {\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    @media print {\n      header, nav, .no-print {\n        display: none !important;\n      }\n      body {\n        background-color: white !important;\n      }\n    }\n  <\/style>\n<\/head>\n<body class=\"bg-[#FBF9F5] text-stone-800 antialiased selection:bg-emerald-200\">\n  <div id=\"root\"><\/div>\n\n  <!-- Inline Application Script -->\n  <script type=\"text\/babel\">\n    const { useState, useEffect, useMemo } = React;\n\n    \/\/ SVG Icons\n    const Icons = {\n      Calendar: () => (\n        <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n          <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/>\n          <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/>\n          <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/>\n        <\/svg>\n      ),\n      Clock: () => (\n        <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n          <polyline points=\"12 6 12 12 16 14\"\/>\n        <\/svg>\n      ),\n      CheckCircle2: () => (\n        <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"\/>\n          <path d=\"m9 12 2 2 4-4\"\/>\n        <\/svg>\n      ),\n      Circle: () => (\n        <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n        <\/svg>\n      ),\n      Luggage: () => (\n        <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M6 20h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2z\"\/>\n          <path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"\/>\n          <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"15\"\/>\n          <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"15\"\/>\n        <\/svg>\n      ),\n      DollarSign: () => (\n        <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"\/>\n          <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/>\n        <\/svg>\n      ),\n      Plane: () => (\n        <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.3c.4-.2.6-.6.5-1.1z\"\/>\n        <\/svg>\n      ),\n      FileText: () => (\n        <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n          <polyline points=\"14 2 14 8 20 8\"\/>\n          <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n          <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n        <\/svg>\n      ),\n      MapPin: () => (\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/>\n          <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\n        <\/svg>\n      ),\n      Plus: () => (\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/>\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\n        <\/svg>\n      ),\n      Trash2: () => (\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <polyline points=\"3 6 5 6 21 6\"\/>\n          <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"\/>\n        <\/svg>\n      ),\n      Edit2: () => (\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\"\/>\n        <\/svg>\n      ),\n      Copy: () => (\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"\/>\n          <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/>\n        <\/svg>\n      ),\n      ChevronUp: () => (\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <polyline points=\"18 15 12 9 6 15\"\/>\n        <\/svg>\n      ),\n      ChevronDown: () => (\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <polyline points=\"6 9 12 15 18 9\"\/>\n        <\/svg>\n      ),\n      Download: () => (\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/>\n          <polyline points=\"7 10 12 15 17 10\"\/>\n          <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/>\n        <\/svg>\n      ),\n      Upload: () => (\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/>\n          <polyline points=\"17 8 12 3 7 8\"\/>\n          <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"\/>\n        <\/svg>\n      ),\n      Baby: () => (\n        <svg className=\"w-6 h-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M9 12h.01M15 12h.01M10 16c.5.5 1.5.5 2 0M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 19 6.3z\"\/>\n        <\/svg>\n      ),\n      Phone: () => (\n        <svg className=\"w-6 h-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/>\n        <\/svg>\n      ),\n      Check: () => (\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2.5\">\n          <polyline points=\"20 6 9 17 4 12\"\/>\n        <\/svg>\n      ),\n      X: () => (\n        <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/>\n        <\/svg>\n      ),\n      ExternalLink: () => (\n        <svg className=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/>\n          <polyline points=\"15 3 21 3 21 9\"\/>\n          <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/>\n        <\/svg>\n      ),\n      Search: () => (\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\n        <\/svg>\n      ),\n      RefreshCw: () => (\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <polyline points=\"23 4 23 10 17 10\"\/>\n          <polyline points=\"1 20 1 14 7 14\"\/>\n          <path d=\"M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15\"\/>\n        <\/svg>\n      )\n    };\n\n    \/\/ --- INITIAL SEED DATA WITH SCHEMA VERSION ---\n    const APP_STORAGE_KEY = 'KAZ_TURKIYE_TRIP_2026_HTML_V1';\n    const SCHEMA_VERSION = '1.0.0';\n\n    const initialSeedData = {\n      version: SCHEMA_VERSION,\n      tripSettings: {\n        tripName: 'KAZ FAMILY \u2022 T\u00dcRKIYE TRIP 2026',\n        departureIso: '2026-11-04T01:25:00+08:00',\n        travelers: [\n          { id: 't1', name: 'Ayah (Dewasa)', role: 'Adult', baggage: '25kg Check-in \/ 7kg Cabin (Disahkan)' },\n          { id: 't2', name: 'Ibu (Dewasa)', role: 'Adult', baggage: 'Belum disahkan' },\n          { id: 't3', name: 'Anak (~1 Tahun)', role: 'Toddler', baggage: 'Belum disahkan' }\n        ],\n        tryToMyrRate: 0.13,\n        budgetLimitMyr: 8000\n      },\n      flights: [\n        {\n          id: 'f1',\n          airline: 'Emirates',\n          flightNumber: 'EK343',\n          date: '2026-11-04',\n          origin: 'KUL (Kuala Lumpur T1)',\n          destination: 'DXB (Dubai T3)',\n          departureTime: '01:25',\n          arrivalTime: '04:45',\n          classType: 'Economy Saver',\n          bookingRef: 'EK-MY-CONFIRMED',\n          baggageAdult: '25 kg (Disahkan)',\n          baggageOthers: 'Belum disahkan',\n          infantTicket: 'Belum disahkan',\n          seatNumbers: 'Pilihan Semasa Check-in',\n          status: 'Akan Datang',\n          airportType: 'International'\n        },\n        {\n          id: 'f2',\n          airline: 'Emirates',\n          flightNumber: 'EK123',\n          date: '2026-11-04',\n          origin: 'DXB (Dubai T3)',\n          destination: 'IST (Istanbul Airport - European)',\n          departureTime: '10:15',\n          arrivalTime: '14:25',\n          classType: 'Economy Saver',\n          bookingRef: 'EK-MY-CONFIRMED',\n          baggageAdult: '25 kg (Disahkan)',\n          baggageOthers: 'Belum disahkan',\n          infantTicket: 'Belum disahkan',\n          seatNumbers: 'Pilihan Semasa Check-in',\n          status: 'Akan Datang',\n          airportType: 'International'\n        },\n        {\n          id: 'f3',\n          airline: 'Pegasus Airlines',\n          flightNumber: 'PC2736',\n          date: '2026-11-05',\n          origin: 'SAW (Sabiha G\u00f6k\u00e7en - Asian side)',\n          destination: 'ASR (Kayseri Erkilet Airport)',\n          departureTime: '14:20',\n          arrivalTime: '15:35',\n          classType: 'Domestic Economy',\n          bookingRef: 'PGS-DOM-PENDING',\n          baggageAdult: 'Menunggu Pengesahan',\n          baggageOthers: 'Belum disahkan',\n          infantTicket: 'Belum disahkan',\n          seatNumbers: 'Belum ditetapkan',\n          status: 'Akan Datang',\n          airportType: 'Domestic-SAW'\n        },\n        {\n          id: 'f4',\n          airline: 'Pegasus Airlines',\n          flightNumber: 'PC2737',\n          date: '2026-11-07',\n          origin: 'ASR (Kayseri Erkilet Airport)',\n          destination: 'SAW (Sabiha G\u00f6k\u00e7en - Asian side)',\n          departureTime: '16:20',\n          arrivalTime: '17:50',\n          classType: 'Domestic Economy',\n          bookingRef: 'PGS-DOM-PENDING',\n          baggageAdult: 'Menunggu Pengesahan',\n          baggageOthers: 'Belum disahkan',\n          infantTicket: 'Belum disahkan',\n          seatNumbers: 'Belum ditetapkan',\n          status: 'Akan Datang',\n          airportType: 'Domestic-SAW'\n        },\n        {\n          id: 'f5',\n          airline: 'Emirates',\n          flightNumber: 'EK122',\n          date: '2026-11-10',\n          origin: 'IST (Istanbul Airport - European)',\n          destination: 'DXB (Dubai T3)',\n          departureTime: '20:05',\n          arrivalTime: '01:20 (+1d)',\n          classType: 'Economy Saver',\n          bookingRef: 'EK-MY-CONFIRMED',\n          baggageAdult: '25 kg (Disahkan)',\n          baggageOthers: 'Belum disahkan',\n          infantTicket: 'Belum disahkan',\n          seatNumbers: 'Pilihan Semasa Check-in',\n          status: 'Akan Datang',\n          airportType: 'International'\n        },\n        {\n          id: 'f6',\n          airline: 'Emirates',\n          flightNumber: 'EK346',\n          date: '2026-11-11',\n          origin: 'DXB (Dubai T3)',\n          destination: 'KUL (Kuala Lumpur T1)',\n          departureTime: '03:40',\n          arrivalTime: '14:45',\n          classType: 'Economy Saver',\n          bookingRef: 'EK-MY-CONFIRMED',\n          baggageAdult: '25 kg (Disahkan)',\n          baggageOthers: 'Belum disahkan',\n          infantTicket: 'Belum disahkan',\n          seatNumbers: 'Pilihan Semasa Check-in',\n          status: 'Akan Datang',\n          airportType: 'International'\n        }\n      ],\n      itinerary: [\n        {\n          id: 'it-1',\n          dayNumber: 1,\n          date: '2026-11-03',\n          city: 'Kuala Lumpur',\n          time: '21:25',\n          title: 'Daftar Masuk KLIA Terminal 1',\n          location: 'Kuala Lumpur International Airport Terminal 1',\n          notes: 'Buka kaunter Emirates EK343. Sahkan pendaftaran stroller lipat di kaunter.',\n          status: 'Akan Datang',\n          bookingRef: 'EK343',\n          packageStatus: 'Dikecualikan (Tiket Sendiri)'\n        },\n        {\n          id: 'it-2',\n          dayNumber: 2,\n          date: '2026-11-04',\n          city: 'Istanbul',\n          time: '14:25',\n          title: 'Tiba di Lapangan Terbang Istanbul (IST) & Pemindahan Peribadi',\n          location: 'Istanbul Airport (IST)',\n          notes: 'Pemandu swasta sedia menunggu di balai ketibaan. Hotel check-in dan rehat.',\n          status: 'Akan Datang',\n          bookingRef: 'PVT-TRANSFER-IST',\n          packageStatus: 'Termasuk dalam Pakej'\n        },\n        {\n          id: 'it-3',\n          dayNumber: 3,\n          date: '2026-11-05',\n          city: 'Istanbul -> Cappadocia',\n          time: '10:20',\n          title: 'Bertolak ke Lapangan Terbang SAW untuk Penerbangan Cappadocia',\n          location: 'Sabiha G\u00f6k\u00e7en International Airport (SAW)',\n          notes: 'Penerbangan Pegasus PC2736 ke Kayseri (14:20 - 15:35). Tiba di Cappadocia, daftar masuk hotel gua.',\n          status: 'Akan Datang',\n          bookingRef: 'PC2736',\n          packageStatus: 'Termasuk dalam Pakej'\n        },\n        {\n          id: 'it-4',\n          dayNumber: 4,\n          date: '2026-11-06',\n          city: 'Cappadocia',\n          time: '05:30',\n          title: 'Sunrise Belon Udara Panas (Pilihan) & Lawatan Sehari Cappadocia',\n          location: 'G\u00f6reme Open Air Museum & Uchisar Castle',\n          notes: 'PERINGATAN BAYI: Bayi 1 tahun dilarang naik belon! Seorang ibu bapa perlu bergilir menjaga bayi. Pakej lawatan termasuk makan tengah hari di Avanos.',\n          status: 'Akan Datang',\n          bookingRef: 'CAPPA-DAY-TOUR',\n          packageStatus: 'Termasuk dalam Pakej (Belon Dikecualikan)'\n        },\n        {\n          id: 'it-5',\n          dayNumber: 5,\n          date: '2026-11-07',\n          city: 'Cappadocia -> Istanbul',\n          time: '12:20',\n          title: 'Sarapan, Masa Bebas & Penerbangan Pulang ke Istanbul',\n          location: 'Kayseri Erkilet Airport (ASR)',\n          notes: 'Penerbangan Pegasus PC2737 ke Sabiha G\u00f6k\u00e7en (SAW) 16:20 - 17:50. Pemindahan peribadi ke hotel Istanbul.',\n          status: 'Akan Datang',\n          bookingRef: 'PC2737',\n          packageStatus: 'Termasuk dalam Pakej'\n        },\n        {\n          id: 'it-6',\n          dayNumber: 6,\n          date: '2026-11-08',\n          city: 'Istanbul',\n          time: '09:00',\n          title: 'Pelayaran Bosphorus, Pierre Loti, Menara Galata & Ortak\u00f6y',\n          location: 'Bosphorus Strait, Ey\u00fcp Sultan, Galata Tower',\n          notes: 'Tiket bot Bosphorus ke \u00dcsk\u00fcdar termasuk dalam pakej. Lawatan Ey\u00fcp Sultan & rasa Kumpir di Ortak\u00f6y.',\n          status: 'Akan Datang',\n          bookingRef: 'BOSPHORUS-DAY',\n          packageStatus: 'Termasuk dalam Pakej'\n        },\n        {\n          id: 'it-7',\n          dayNumber: 7,\n          date: '2026-11-09',\n          city: 'Istanbul',\n          time: '09:30',\n          title: 'Warisan Klasik Sultanahmet & Membeli-belah Bazaar',\n          location: 'Hagia Sophia, Blue Mosque, Topkapi Palace, Grand Bazaar',\n          notes: 'Pemandu pelancong tempatan akan memimpin lawatan bersejarah sepanjang hari.',\n          status: 'Akan Datang',\n          bookingRef: 'SULTANAHMET-DAY',\n          packageStatus: 'Termasuk dalam Pakej'\n        },\n        {\n          id: 'it-8',\n          dayNumber: 8,\n          date: '2026-11-10',\n          city: 'Istanbul -> Dubai',\n          time: '15:05',\n          title: 'Kemas Beg, Masa Bebas & Pemindahan ke Lapangan Terbang IST',\n          location: 'Istanbul Airport (IST)',\n          notes: 'Daftar keluar hotel. Pemindahan ke IST untuk Emirates EK122 (berlepas 20:05).',\n          status: 'Akan Datang',\n          bookingRef: 'EK122',\n          packageStatus: 'Termasuk dalam Pakej'\n        },\n        {\n          id: 'it-9',\n          dayNumber: 9,\n          date: '2026-11-11',\n          city: 'Dubai -> Kuala Lumpur',\n          time: '03:40',\n          title: 'Penerbangan Sambungan EK346 Tiba di Kuala Lumpur',\n          location: 'Kuala Lumpur International Airport T1',\n          notes: 'Tiba di KLIA jam 14:45. Ambil bagasi dan pulang ke rumah dengan selamat.',\n          status: 'Akan Datang',\n          bookingRef: 'EK346',\n          packageStatus: 'Dikecualikan (Tiket Sendiri)'\n        }\n      ],\n      checklist: [\n        { id: 'c1', title: 'Perbaharui & Sahkan Sah Laku Pasport (>6 Bulan)', category: 'Dokumen', priority: 'Tinggi', assignedTo: 'Ayah', deadline: '2026-09-30', done: true, notes: 'Pastikan pasport Ayah, Ibu dan Anak sah hingga Mei 2027' },\n        { id: 'c2', title: 'Sahkan Tiket Antarabangsa Isteri & Anak', category: 'Tiket & Tempahan', priority: 'Kritikal', assignedTo: 'Ayah', deadline: '2026-10-15', done: false, notes: 'Hanya tiket seorang dewasa disahkan dalam rekod asal.' },\n        { id: 'c3', title: 'Tempahan Tiket Bayi & Bagasi Pegasus Airlines', category: 'Penerbangan Domestik', priority: 'Kritikal', assignedTo: 'Ayah', deadline: '2026-10-15', done: false, notes: 'Sahkan PC2736 & PC2737 untuk elaun beg dan tempat duduk bayi' },\n        { id: 'c4', title: 'Insurans Perjalanan Keluarga Termasuk Perlindungan Bayi', category: 'Insurans', priority: 'Tinggi', assignedTo: 'Ibu', deadline: '2026-10-20', done: false, notes: 'Perlindungan pembatalan penerbangan dan perubatan luar negara' },\n        { id: 'c5', title: 'Salinan Fizikal & Digital Sijil Lahir Anak', category: 'Dokumen', priority: 'Tinggi', assignedTo: 'Ibu', deadline: '2026-10-25', done: false, notes: 'Wajib dibawa bersama pasport anak untuk pemeriksaan imigresen' },\n        { id: 'c6', title: 'Pengesahan Baucar Hotel di Istanbul & Cappadocia', category: 'Tiket & Tempahan', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-10-28', done: true, notes: 'Termasuk sarapan harian dan penginapan bilik keluarga' },\n        { id: 'c7', title: 'Pengesahan Pengangkutan Lapangan Terbang Peribadi', category: 'Pengangkutan', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-10-28', done: true, notes: 'Pastikan kenderaan muat 3 bagasi besar dan stroller' },\n        { id: 'c8', title: 'Minta Kerusi Keselamatan Bayi (Car Seat) untuk Kenderaan Tour', category: 'Bayi & Keselamatan', priority: 'Kritikal', assignedTo: 'Ibu', deadline: '2026-10-25', done: false, notes: 'Penting untuk keselamatan anak perjalanan darat jauh di Turki' },\n        { id: 'c9', title: 'Daftar Masuk Dalam Talian Emirates (48 Jam Sebelum)', category: 'Penerbangan', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-11-02', done: false, notes: 'Pilih kerusi bassinet jika masih ada kekosongan' },\n        { id: 'c10', title: 'Pengaktifan Kad Luar Negara (Wise\/Maybank\/CIMB) & Tukaran TRY', category: 'Kewangan', priority: 'Tinggi', assignedTo: 'Ayah', deadline: '2026-10-30', done: false, notes: 'Aktifkan fungsi luar negara dan sediakan tunai persediaan' },\n        { id: 'c11', title: 'Beli eSIM T\u00fcrkiye (cth: Airalo\/Nomad)', category: 'Komunikasi', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-10-31', done: false, notes: 'Aktifkan sebelum mendarat di Istanbul' },\n        { id: 'c12', title: 'Muat Turun Peta Luar Talian Google Maps & Google Translate', category: 'Aplikasi', priority: 'Sederhana', assignedTo: 'Ibu', deadline: '2026-11-01', done: false, notes: 'Peta luar talian Istanbul dan wilayah G\u00f6reme' },\n        { id: 'c13', title: 'Ubat-ubatan Asas Kanak-kanak & Dewasa', category: 'Kesihatan', priority: 'Kritikal', assignedTo: 'Ibu', deadline: '2026-10-28', done: false, notes: 'Paracetamol bayi, ubat batuk, syringe, termometer & minyak telon' },\n        { id: 'c14', title: 'Pakaian Musim Sejuk\/Gugur Cappadocia (5\u00b0C - 14\u00b0C)', category: 'Pakaian', priority: 'Tinggi', assignedTo: 'Ibu', deadline: '2026-10-29', done: false, notes: 'Thermal inner, fleece jacket, sarung tangan' },\n        { id: 'c15', title: 'Bekalan Makanan Bayi, Susu Formula & Botol', category: 'Bayi & Keselamatan', priority: 'Kritikal', assignedTo: 'Ibu', deadline: '2026-10-30', done: false, notes: 'Pouch puri, termos air panas mini & biskut anak' },\n        { id: 'c16', title: 'Keselamatan Rumah: Tutup Gas, Paip Utama & Pemasa Lampu', category: 'Rumah', priority: 'Sederhana', assignedTo: 'Ayah', deadline: '2026-11-03', done: false, notes: 'Maklumkan kepada jiran terdekat' },\n        { id: 'c17', title: 'Timbang Beg & Pastikan Had Berat Dipatuhi', category: 'Bagasi', priority: 'Tinggi', assignedTo: 'Ayah', deadline: '2026-11-03', done: false, notes: 'Gunakan penimbang digital bagasi sebelum ke KLIA' }\n      ],\n      packing: [\n        { id: 'p1', traveler: 'AYAH', item: 'Jaket Kalis Angin \/ Puffer Jacket', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Suhu sejuk pagi' },\n        { id: 'p2', traveler: 'AYAH', item: 'Thermal Inner Heattech', bag: 'Check-in Bag', qty: 3, packed: false, notes: 'Untuk Cappadocia' },\n        { id: 'p3', traveler: 'AYAH', item: 'T-shirt Lengan Panjang & Baju Kemeja', bag: 'Check-in Bag', qty: 5, packed: false, notes: 'Kapas selesa' },\n        { id: 'p4', traveler: 'AYAH', item: 'Seluar Tahan Lasak \/ Jeans', bag: 'Check-in Bag', qty: 3, packed: false, notes: 'Untuk jalan jauh' },\n        { id: 'p5', traveler: 'AYAH', item: 'Stoking Tebal & Pakaian Dalam', bag: 'Check-in Bag', qty: 7, packed: false, notes: 'Bahan wol sejuk' },\n        { id: 'p6', traveler: 'AYAH', item: 'Kasut Berjalan Selesa (Sneakers)', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Jalan berbukit batu' },\n        { id: 'p7', traveler: 'AYAH', item: 'Palam Universal Adapter Type C\/F & Pengecas', bag: 'Cabin Bag', qty: 2, packed: false, notes: 'Soket T\u00fcrkiye 2-pin' },\n        { id: 'p8', traveler: 'AYAH', item: 'Pasport Asal & Dompet Perjalanan', bag: 'Cabin Bag', qty: 1, packed: true, notes: 'Sentiasa bawa' },\n\n        { id: 'p9', traveler: 'IBU', item: 'Warm Jacket \/ Long Coat Tebal', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Bawa atas kapal' },\n        { id: 'p10', traveler: 'IBU', item: 'Thermal Inner Heattech', bag: 'Check-in Bag', qty: 3, packed: false, notes: 'Lapisan asas cuaca sejuk' },\n        { id: 'p11', traveler: 'IBU', item: 'Baju Kurung \/ Blouse & Seluar Selesa', bag: 'Check-in Bag', qty: 6, packed: false, notes: 'Sopan untuk masjid' },\n        { id: 'p12', traveler: 'IBU', item: 'Tudung Mudah Bentuk & Inner', bag: 'Check-in Bag', qty: 6, packed: false, notes: 'Pilihan warna bersesuaian' },\n        { id: 'p13', traveler: 'IBU', item: 'Stoking Tebal & Sarung Tangan', bag: 'Check-in Bag', qty: 6, packed: false, notes: 'Pagi sejuk G\u00f6reme' },\n        { id: 'p14', traveler: 'IBU', item: 'Kasut Berjalan Kalis Air & Selesa', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Untuk berjalan di bazaar' },\n        { id: 'p15', traveler: 'IBU', item: 'Set Skincare, Lip Balm & Pelembap', bag: 'Check-in Bag', qty: 1, packed: false, notes: 'Udara musim sejuk kering' },\n        { id: 'p16', traveler: 'IBU', item: 'Pasport Asal Ibu', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Simpan selamat' },\n\n        { id: 'p17', traveler: 'ANAK', item: 'Pampers \/ Diapers Saiz Anak', bag: 'Check-in Bag', qty: 35, packed: false, notes: 'Bekalan 9 hari' },\n        { id: 'p18', traveler: 'ANAK', item: 'Tisu Basah Bebas Alkohol', bag: 'Baby Bag', qty: 4, packed: false, notes: 'Pek poket & pek besar' },\n        { id: 'p19', traveler: 'ANAK', item: 'Pelapik Menukar Lampin (Changing Mat)', bag: 'Baby Bag', qty: 2, packed: false, notes: 'Untuk tandas awam' },\n        { id: 'p20', traveler: 'ANAK', item: 'Pakaian Lengkap Harian Bayi', bag: 'Check-in Bag', qty: 10, packed: false, notes: 'Romper & seluar tebal' },\n        { id: 'p21', traveler: 'ANAK', item: 'Baju Thermal Dalaman Bayi', bag: 'Check-in Bag', qty: 4, packed: false, notes: 'Lapisan penting waktu malam' },\n        { id: 'p22', traveler: 'ANAK', item: 'Jaket Tebal Bayi Berhoodie', bag: 'Baby Bag', qty: 1, packed: false, notes: 'Kalis angin' },\n        { id: 'p23', traveler: 'ANAK', item: 'Stoking Tebal, Kasut, Sarung Tangan & Beanie', bag: 'Baby Bag', qty: 4, packed: false, notes: 'Elak kehilangan haba' },\n        { id: 'p24', traveler: 'ANAK', item: 'Susu Formula \/ Pek Bekalan Susu', bag: 'Baby Bag', qty: 2, packed: false, notes: 'Bekalan mencukupi' },\n        { id: 'p25', traveler: 'ANAK', item: 'Botol Susu & Termos Mini Air Panas', bag: 'Baby Bag', qty: 3, packed: false, notes: 'Mudah bancuh dalam perjalanan' },\n        { id: 'p26', traveler: 'ANAK', item: 'Pouch Makanan Puri Bayi & Biskut', bag: 'Baby Bag', qty: 10, packed: false, notes: 'Makanan mudah ketika berjalan' },\n        { id: 'p27', traveler: 'ANAK', item: 'Ubat Bayi, Syringe & Termometer Pantas', bag: 'Baby Bag', qty: 1, packed: false, notes: 'Sentiasa dalam beg sandang' },\n        { id: 'p28', traveler: 'ANAK', item: 'Stroller Lipat Saiz Kabin', bag: 'Cabin Bag', qty: 1, packed: false, notes: 'Bawa ke pintu pesawat' },\n        { id: 'p29', traveler: 'ANAK', item: 'Baby Carrier Ergonomik (Gendongan)', bag: 'Baby Bag', qty: 1, packed: false, notes: 'Sangat berguna di bukit Cappadocia' },\n        { id: 'p30', traveler: 'ANAK', item: 'Mainan Kegemaran & Bantal Tidur Kecil', bag: 'Baby Bag', qty: 2, packed: false, notes: 'Menenangkan anak waktu malam' }\n      ],\n      expenses: [],\n      notesAndContacts: {\n        emergencyNumber: '112 (Panggilan Kecemasan Kebangsaan T\u00fcrkiye)',\n        malaysiaEmbassyAnkara: {\n          name: 'Kedutaan Besar Malaysia di Ankara',\n          address: 'Koza Sokak No. 56, G.O.P. 06700 Cankaya, Ankara',\n          phone: '+90 312 446 3547 \/ 3548',\n          dutyOfficer: '+90 534 975 0198'\n        },\n        istanbulConsulate: {\n          name: 'Konsulat Jeneral Malaysia di Istanbul',\n          address: 'Esentepe Mah. Ali Kaya Sok. Polat Plaza B Blok No:1\/1 Sisli, Istanbul',\n          phone: '+90 212 963 8122'\n        },\n        hotelIstanbul: {\n          name: 'Hotel Istanbul Old City Heritage',\n          address: 'Sultanahmet, Fatih, Istanbul',\n          phone: '+90 212 518 9000',\n          checkIn: '4 Nov 2026 (15:00)'\n        },\n        hotelCappadocia: {\n          name: 'Cappadocia Cave Suites Hotel',\n          address: 'G\u00f6reme, Nev\u015fehir, Cappadocia',\n          phone: '+90 384 271 2800',\n          checkIn: '5 Nov 2026'\n        },\n        generalNotes: 'Pakej Pelancongan Termasuk: Penginapan bilik keluarga beserta sarapan, 1x makan tengah hari di Cappadocia, pemandu pelancong berlesen, tiket pelayaran Bosphorus \u00dcsk\u00fcdar, tiket penerbangan domestik Pegasus, dan pengangkutan peribadi lapangan terbang.\\n\\nPakej Tidak Termasuk: Tiket penerbangan antarabangsa Emirates, insurans perjalanan persendirian, makan malam harian, dan tiket aktiviti belon udara panas.'\n      }\n    };\n\n    function App() {\n      \/\/ Local Storage Initialization\n      const [data, setData] = useState(() => {\n        try {\n          const saved = localStorage.getItem(APP_STORAGE_KEY);\n          if (saved) {\n            const parsed = JSON.parse(saved);\n            if (parsed && parsed.version === SCHEMA_VERSION) {\n              return parsed;\n            }\n          }\n        } catch (e) {\n          console.error(e);\n        }\n        return initialSeedData;\n      });\n\n      const [activeTab, setActiveTab] = useState('dashboard');\n      const [toastMessage, setToastMessage] = useState(null);\n\n      \/\/ Autosave\n      useEffect(() => {\n        try {\n          localStorage.setItem(APP_STORAGE_KEY, JSON.stringify(data));\n        } catch (e) {\n          console.error('Autosave error', e);\n        }\n      }, [data]);\n\n      const showToast = (msg) => {\n        setToastMessage(msg);\n        setTimeout(() => setToastMessage(null), 3000);\n      };\n\n      \/\/ Countdown to 4 Nov 2026 01:25 Asia\/Kuala_Lumpur\n      const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0, isPast: false });\n\n      useEffect(() => {\n        const target = new Date('2026-11-04T01:25:00+08:00').getTime();\n        const updateTimer = () => {\n          const now = new Date().getTime();\n          const diff = target - now;\n          if (diff <= 0) {\n            setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0, isPast: true });\n          } else {\n            const days = Math.floor(diff \/ (1000 * 60 * 60 * 24));\n            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\n            const minutes = Math.floor((diff % (1000 * 60 * 60)) \/ (1000 * 60));\n            const seconds = Math.floor((diff % (1000 * 60)) \/ 1000);\n            setTimeLeft({ days, hours, minutes, seconds, isPast: false });\n          }\n        };\n        updateTimer();\n        const interval = setInterval(updateTimer, 1000);\n        return () => clearInterval(interval);\n      }, []);\n\n      \/\/ Metrics\n      const taskStats = useMemo(() => {\n        const total = data.checklist.length;\n        const completed = data.checklist.filter(c => c.done).length;\n        const incomplete = total - completed;\n        const percentage = total > 0 ? Math.round((completed \/ total) * 100) : 0;\n        const criticalPending = data.checklist.filter(c => !c.done && (c.priority === 'Kritikal' || c.priority === 'Tinggi'));\n        return { total, completed, incomplete, percentage, criticalPending };\n      }, [data.checklist]);\n\n      const packingStats = useMemo(() => {\n        const totalItems = data.packing.length;\n        const packedItems = data.packing.filter(p => p.packed).length;\n        const overallPercentage = totalItems > 0 ? Math.round((packedItems \/ totalItems) * 100) : 0;\n        return { totalItems, packedItems, overallPercentage };\n      }, [data.packing]);\n\n      const expenseStats = useMemo(() => {\n        const rate = Number(data.tripSettings.tryToMyrRate) || 0.13;\n        let totalMyr = 0;\n        let totalTry = 0;\n        data.expenses.forEach(exp => {\n          const amt = Number(exp.amount) || 0;\n          if (exp.currency === 'TRY') {\n            totalTry += amt;\n            totalMyr += amt * rate;\n          } else {\n            totalMyr += amt;\n          }\n        });\n        const budgetLimit = Number(data.tripSettings.budgetLimitMyr) || 8000;\n        const remainingMyr = budgetLimit - totalMyr;\n        const percentUsed = budgetLimit > 0 ? Math.min(100, Math.round((totalMyr \/ budgetLimit) * 100)) : 0;\n        return { totalMyr, totalTry, budgetLimit, remainingMyr, percentUsed };\n      }, [data.expenses, data.tripSettings.tryToMyrRate, data.tripSettings.budgetLimitMyr]);\n\n      const overallPrep = Math.round((taskStats.percentage * 0.6) + (packingStats.overallPercentage * 0.4));\n\n      \/\/ Backup & Reset Handlers\n      const handleReset = () => {\n        if (confirm('Adakah anda pasti mahu set semula semua data ke tetapan asal?')) {\n          setData(initialSeedData);\n          showToast('Data perjalanan telah diset semula.');\n        }\n      };\n\n      const handleExport = () => {\n        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application\/json' });\n        const url = URL.createObjectURL(blob);\n        const a = document.createElement('a');\n        a.href = url;\n        a.download = `kaz_family_turkiye_2026_${new Date().toISOString().slice(0, 10)}.json`;\n        a.click();\n        URL.revokeObjectURL(url);\n        showToast('Fail JSON berjaya dieksport.');\n      };\n\n      const handleImport = (e) => {\n        const file = e.target.files?.[0];\n        if (!file) return;\n        const reader = new FileReader();\n        reader.onload = (event) => {\n          try {\n            const imported = JSON.parse(event.target.result);\n            if (imported && imported.tripSettings && imported.itinerary) {\n              setData(imported);\n              showToast('Data sandaran berjaya dimuatkan.');\n            } else {\n              showToast('Ralat: Format fail JSON tidak sah.');\n            }\n          } catch (err) {\n            showToast('Ralat memproses fail.');\n          }\n        };\n        reader.readAsText(file);\n        e.target.value = null;\n      };\n\n      \/\/ Tab 1: Dashboard\n      const renderDashboard = () => (\n        <div className=\"space-y-6\">\n          <div className=\"bg-gradient-to-br from-emerald-800 to-teal-900 text-white rounded-3xl p-6 md:p-8 shadow-xl relative overflow-hidden\">\n            <div className=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-white\/10 pb-4\">\n              <div>\n                <span className=\"inline-block px-3 py-1 bg-emerald-700\/60 rounded-full text-xs font-semibold uppercase tracking-wider text-emerald-200 mb-2\">\n                  Percutian Keluarga 2026\n                <\/span>\n                <h1 className=\"text-2xl md:text-3xl font-extrabold tracking-tight\">KAZ FAMILY \u2022 T\u00dcRKIYE<\/h1>\n                <p className=\"text-emerald-100 text-sm mt-1 flex items-center gap-2\">\n                  <Icons.MapPin \/> Istanbul & Cappadocia \u2022 3\u201311 November 2026\n                <\/p>\n              <\/div>\n              <div className=\"text-left md:text-right\">\n                <span className=\"text-xs text-emerald-200\">Ahli Keluarga<\/span>\n                <p className=\"font-semibold text-sm\">2 Dewasa & 1 Anak (~1 Tahun)<\/p>\n              <\/div>\n            <\/div>\n\n            <div className=\"mt-6\">\n              <p className=\"text-xs uppercase font-medium text-emerald-300 tracking-wider mb-2\">\n                Hitung Detik Pelepasan (4 Nov 2026, 01:25 MYT KLIA EK343):\n              <\/p>\n              {timeLeft.isPast ? (\n                <div className=\"bg-white\/10 rounded-2xl p-4 text-center font-bold\">\n                  Penerbangan telah berlangsung! Selamat bercuti.\n                <\/div>\n              ) : (\n                <div className=\"grid grid-cols-4 gap-2 md:gap-4 text-center\">\n                  <div className=\"bg-black\/20 backdrop-blur-sm rounded-2xl p-3 border border-white\/10\">\n                    <span className=\"text-2xl md:text-4xl font-extrabold block text-white\">{timeLeft.days}<\/span>\n                    <span className=\"text-[10px] md:text-xs text-emerald-200 uppercase font-semibold\">Hari<\/span>\n                  <\/div>\n                  <div className=\"bg-black\/20 backdrop-blur-sm rounded-2xl p-3 border border-white\/10\">\n                    <span className=\"text-2xl md:text-4xl font-extrabold block text-white\">{timeLeft.hours}<\/span>\n                    <span className=\"text-[10px] md:text-xs text-emerald-200 uppercase font-semibold\">Jam<\/span>\n                  <\/div>\n                  <div className=\"bg-black\/20 backdrop-blur-sm rounded-2xl p-3 border border-white\/10\">\n                    <span className=\"text-2xl md:text-4xl font-extrabold block text-white\">{timeLeft.minutes}<\/span>\n                    <span className=\"text-[10px] md:text-xs text-emerald-200 uppercase font-semibold\">Minit<\/span>\n                  <\/div>\n                  <div className=\"bg-black\/20 backdrop-blur-sm rounded-2xl p-3 border border-white\/10\">\n                    <span className=\"text-2xl md:text-4xl font-extrabold block text-white\">{timeLeft.seconds}<\/span>\n                    <span className=\"text-[10px] md:text-xs text-emerald-200 uppercase font-semibold\">Saat<\/span>\n                  <\/div>\n                <\/div>\n              )}\n            <\/div>\n          <\/div>\n\n          <div className=\"grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4\">\n            <div className=\"bg-white rounded-2xl p-4 shadow-sm border border-stone-200 flex flex-col justify-between\">\n              <span className=\"text-xs font-semibold text-stone-500\">Status Persiapan<\/span>\n              <div className=\"text-2xl font-bold text-stone-800 mt-2\">{overallPrep}%<\/div>\n              <div className=\"w-full bg-stone-100 rounded-full h-2 mt-2 overflow-hidden\">\n                <div className=\"bg-emerald-600 h-2 rounded-full\" style={{ width: `${overallPrep}%` }}><\/div>\n              <\/div>\n            <\/div>\n\n            <div className=\"bg-white rounded-2xl p-4 shadow-sm border border-stone-200 flex flex-col justify-between\">\n              <span className=\"text-xs font-semibold text-stone-500\">Tugasan Siap<\/span>\n              <div className=\"text-2xl font-bold text-stone-800 mt-2\">\n                {taskStats.completed} <span className=\"text-sm font-normal text-stone-400\">\/ {taskStats.total}<\/span>\n              <\/div>\n              <div className=\"w-full bg-stone-100 rounded-full h-2 mt-2 overflow-hidden\">\n                <div className=\"bg-blue-600 h-2 rounded-full\" style={{ width: `${taskStats.percentage}%` }}><\/div>\n              <\/div>\n            <\/div>\n\n            <div className=\"bg-white rounded-2xl p-4 shadow-sm border border-stone-200 flex flex-col justify-between\">\n              <span className=\"text-xs font-semibold text-stone-500\">Barang Dibungkus<\/span>\n              <div className=\"text-2xl font-bold text-stone-800 mt-2\">\n                {packingStats.packedItems} <span className=\"text-sm font-normal text-stone-400\">\/ {packingStats.totalItems}<\/span>\n              <\/div>\n              <div className=\"w-full bg-stone-100 rounded-full h-2 mt-2 overflow-hidden\">\n                <div className=\"bg-amber-600 h-2 rounded-full\" style={{ width: `${packingStats.overallPercentage}%` }}><\/div>\n              <\/div>\n            <\/div>\n\n            <div className=\"bg-white rounded-2xl p-4 shadow-sm border border-stone-200 flex flex-col justify-between\">\n              <span className=\"text-xs font-semibold text-stone-500\">Jumlah Belanja<\/span>\n              <div className=\"text-2xl font-bold text-stone-800 mt-2\">RM {expenseStats.totalMyr.toFixed(0)}<\/div>\n              <div className=\"w-full bg-stone-100 rounded-full h-2 mt-2 overflow-hidden\">\n                <div className=\"bg-teal-600 h-2 rounded-full\" style={{ width: `${expenseStats.percentUsed}%` }}><\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          {\/* Baby Travel Alert *\/}\n          <div className=\"bg-amber-50 border-2 border-amber-200 rounded-3xl p-5 shadow-sm flex items-start gap-3\">\n            <div className=\"p-2.5 bg-amber-100 text-amber-800 rounded-2xl\">\n              <Icons.Baby \/>\n            <\/div>\n            <div>\n              <h2 className=\"text-sm md:text-base font-bold text-amber-950\">Perhatian Khas Bayi (~1 Tahun)<\/h2>\n              <p className=\"text-xs md:text-sm text-amber-800 mt-1 leading-relaxed\">\n                Kanak-kanak bawah 6 tahun <strong>dilarang<\/strong> menaiki belon udara panas Cappadocia atas faktor undang-undang Turki. Ibu bapa perlu bergilir menjaga bayi. Pastikan car seat dan tiket bayi Pegasus disahkan awal.\n              <\/p>\n            <\/div>\n          <\/div>\n\n          {\/* Critical Checklist Summary *\/}\n          <div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\">\n            <div className=\"flex justify-between items-center mb-3\">\n              <h2 className=\"text-base font-bold text-stone-800\">Tugasan Penting Menunggu<\/h2>\n              <button onClick={() => setActiveTab('checklist')} className=\"text-xs font-semibold text-emerald-700 bg-emerald-50 px-3 py-1.5 rounded-xl\">\n                Buka Semua ({taskStats.total})\n              <\/button>\n            <\/div>\n            <div className=\"space-y-2\">\n              {taskStats.criticalPending.slice(0, 3).map(item => (\n                <div\n                  key={item.id}\n                  onClick={() => {\n                    const updated = data.checklist.map(c => c.id === item.id ? { ...c, done: !c.done } : c);\n                    setData({ ...data, checklist: updated });\n                    showToast('Status tugasan dikemaskini');\n                  }}\n                  className=\"flex items-center justify-between p-3 rounded-2xl bg-stone-50 border border-stone-200 cursor-pointer hover:bg-stone-100\"\n                >\n                  <div className=\"flex items-center gap-3\">\n                    <span className=\"text-stone-400\"><Icons.Circle \/><\/span>\n                    <span className=\"text-xs md:text-sm font-semibold text-stone-800\">{item.title}<\/span>\n                  <\/div>\n                  <span className=\"text-[10px] font-bold px-2 py-0.5 rounded-full bg-red-100 text-red-700\">\n                    {item.priority}\n                  <\/span>\n                <\/div>\n              ))}\n            <\/div>\n          <\/div>\n        <\/div>\n      );\n\n      \/\/ Tab 2: Jadual Perjalanan\n      const [itineraryDay, setItineraryDay] = useState('ALL');\n      const filteredItinerary = useMemo(() => {\n        if (itineraryDay === 'ALL') return data.itinerary;\n        return data.itinerary.filter(it => it.dayNumber.toString() === itineraryDay);\n      }, [data.itinerary, itineraryDay]);\n\n      const moveActivity = (idx, dir) => {\n        const arr = [...data.itinerary];\n        const target = dir === 'up' ? idx - 1 : idx + 1;\n        if (target < 0 || target >= arr.length) return;\n        const temp = arr[idx];\n        arr[idx] = arr[target];\n        arr[target] = temp;\n        setData({ ...data, itinerary: arr });\n        showToast('Susunan aktiviti berjaya diubah');\n      };\n\n      const renderItinerary = () => (\n        <div className=\"space-y-4\">\n          <div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\">\n            <h2 className=\"text-lg font-bold text-stone-800 mb-2\">Jadual Perjalanan Harian (3\u201311 Nov 2026)<\/h2>\n            <div className=\"flex gap-2 overflow-x-auto pb-1 scrollbar-none\">\n              <button\n                onClick={() => setItineraryDay('ALL')}\n                className={`px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap ${itineraryDay === 'ALL' ? 'bg-stone-900 text-white' : 'bg-stone-100 text-stone-600'}`}\n              >\n                Semua Hari\n              <\/button>\n              {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(d => (\n                <button\n                  key={d}\n                  onClick={() => setItineraryDay(d.toString())}\n                  className={`px-3 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap ${itineraryDay === d.toString() ? 'bg-emerald-800 text-white' : 'bg-stone-100 text-stone-600'}`}\n                >\n                  Hari {d}\n                <\/button>\n              ))}\n            <\/div>\n          <\/div>\n\n          <div className=\"space-y-3\">\n            {filteredItinerary.map((item, index) => (\n              <div key={item.id} className=\"bg-white rounded-3xl p-4 md:p-5 border border-stone-200 shadow-sm flex flex-col md:flex-row justify-between gap-3\">\n                <div className=\"flex items-start gap-3 flex-1\">\n                  <div className=\"w-9 h-9 rounded-2xl bg-stone-100 text-stone-800 font-bold text-xs flex items-center justify-center flex-shrink-0\">\n                    H{item.dayNumber}\n                  <\/div>\n                  <div>\n                    <div className=\"flex flex-wrap items-center gap-2\">\n                      <span className=\"font-mono text-xs font-bold text-emerald-800\">{item.time}<\/span>\n                      <h3 className=\"font-bold text-sm md:text-base text-stone-900\">{item.title}<\/h3>\n                    <\/div>\n                    <p className=\"text-xs text-stone-500 mt-1 flex items-center gap-1.5\">\n                      <Icons.MapPin \/>\n                      <span>{item.location}<\/span>\n                      <a\n                        href={`https:\/\/www.google.com\/maps\/search\/?api=1&#038;query=${encodeURIComponent(item.location || item.title)}`}\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                        className=\"text-emerald-700 underline font-semibold flex items-center gap-0.5 ml-1\"\n                      >\n                        Maps <Icons.ExternalLink \/>\n                      <\/a>\n                    <\/p>\n                    {item.notes && <p className=\"text-xs text-stone-600 mt-2 bg-stone-50 p-2.5 rounded-xl border border-stone-100\">{item.notes}<\/p>}\n                    <div className=\"text-[11px] text-stone-500 mt-2 flex gap-3\">\n                      <span>Tarikh: <strong>{item.date}<\/strong><\/span>\n                      <span className=\"text-emerald-700 font-medium\">{item.packageStatus}<\/span>\n                    <\/div>\n                  <\/div>\n                <\/div>\n\n                <div className=\"flex items-center gap-1 self-end md:self-start\">\n                  <button onClick={() => moveActivity(index, 'up')} disabled={index === 0} className=\"p-1.5 rounded-xl hover:bg-stone-100 text-stone-500 disabled:opacity-20\">\n                    <Icons.ChevronUp \/>\n                  <\/button>\n                  <button onClick={() => moveActivity(index, 'down')} disabled={index === data.itinerary.length - 1} className=\"p-1.5 rounded-xl hover:bg-stone-100 text-stone-500 disabled:opacity-20\">\n                    <Icons.ChevronDown \/>\n                  <\/button>\n                  <button\n                    onClick={() => {\n                      if (confirm('Padam aktiviti ini?')) {\n                        setData({ ...data, itinerary: data.itinerary.filter(i => i.id !== item.id) });\n                        showToast('Aktiviti dipadam');\n                      }\n                    }}\n                    className=\"p-1.5 rounded-xl hover:bg-rose-50 text-rose-500\"\n                  >\n                    <Icons.Trash2 \/>\n                  <\/button>\n                <\/div>\n              <\/div>\n            ))}\n          <\/div>\n        <\/div>\n      );\n\n      \/\/ Tab 3: Checklist Persiapan\n      const [checkSearch, setCheckSearch] = useState('');\n      const [checkPriority, setCheckPriority] = useState('ALL');\n      const filteredChecklist = useMemo(() => {\n        return data.checklist.filter(c => {\n          if (checkPriority === 'INCOMPLETE' && c.done) return false;\n          if (checkPriority === 'COMPLETE' && !c.done) return false;\n          if (checkSearch.trim()) {\n            return c.title.toLowerCase().includes(checkSearch.toLowerCase()) || c.notes?.toLowerCase().includes(checkSearch.toLowerCase());\n          }\n          return true;\n        });\n      }, [data.checklist, checkSearch, checkPriority]);\n\n      const renderChecklist = () => (\n        <div className=\"space-y-4\">\n          <div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\">\n            <h2 className=\"text-lg font-bold text-stone-800 mb-2\">Checklist Persiapan Pra-Perjalanan<\/h2>\n            <div className=\"flex flex-col sm:flex-row gap-2 mt-2\">\n              <input\n                type=\"text\"\n                placeholder=\"Cari tugasan...\"\n                value={checkSearch}\n                onChange={e => setCheckSearch(e.target.value)}\n                className=\"w-full bg-stone-50 border border-stone-200 rounded-xl px-3 py-2 text-xs\"\n              \/>\n              <select\n                value={checkPriority}\n                onChange={e => setCheckPriority(e.target.value)}\n                className=\"bg-stone-50 border border-stone-200 rounded-xl px-3 py-2 text-xs font-medium\"\n              >\n                <option value=\"ALL\">Semua Tugasan<\/option>\n                <option value=\"INCOMPLETE\">Belum Siap<\/option>\n                <option value=\"COMPLETE\">Sudah Siap<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n\n          <div className=\"space-y-2\">\n            {filteredChecklist.map(item => (\n              <div\n                key={item.id}\n                className={`p-3.5 rounded-2xl bg-white border shadow-sm flex items-start justify-between gap-3 ${item.done ? 'border-emerald-200 bg-emerald-50\/20' : 'border-stone-200'}`}\n              >\n                <div\n                  className=\"flex items-start gap-3 flex-1 cursor-pointer\"\n                  onClick={() => {\n                    const updated = data.checklist.map(c => c.id === item.id ? { ...c, done: !c.done } : c);\n                    setData({ ...data, checklist: updated });\n                  }}\n                >\n                  <div className={`mt-0.5 ${item.done ? 'text-emerald-600' : 'text-stone-300'}`}>\n                    {item.done ? <Icons.CheckCircle2 \/> : <Icons.Circle \/>}\n                  <\/div>\n                  <div>\n                    <span className={`text-xs md:text-sm font-semibold ${item.done ? 'line-through text-stone-400' : 'text-stone-800'}`}>\n                      {item.title}\n                    <\/span>\n                    {item.notes && <p className=\"text-xs text-stone-500 mt-0.5\">{item.notes}<\/p>}\n                    <div className=\"flex items-center gap-2 text-[10px] text-stone-400 mt-1\">\n                      <span className=\"font-bold text-stone-600\">{item.assignedTo}<\/span>\n                      <span>\u2022<\/span>\n                      <span className=\"px-2 py-0.5 rounded-full bg-stone-100 text-stone-700 font-semibold\">{item.priority}<\/span>\n                      {item.deadline && <span>\u2022 Akhir: {item.deadline}<\/span>}\n                    <\/div>\n                  <\/div>\n                <\/div>\n\n                <button\n                  onClick={() => {\n                    setData({ ...data, checklist: data.checklist.filter(c => c.id !== item.id) });\n                    showToast('Tugasan dihapuskan');\n                  }}\n                  className=\"text-stone-400 hover:text-rose-500 p-1\"\n                >\n                  <Icons.Trash2 \/>\n                <\/button>\n              <\/div>\n            ))}\n          <\/div>\n        <\/div>\n      );\n\n      \/\/ Tab 4: Packing List\n      const [travelerTab, setTravelerTab] = useState('ALL');\n      const filteredPacking = useMemo(() => {\n        if (travelerTab === 'ALL') return data.packing;\n        return data.packing.filter(p => p.traveler === travelerTab);\n      }, [data.packing, travelerTab]);\n\n      const renderPacking = () => (\n        <div className=\"space-y-4\">\n          <div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\">\n            <h2 className=\"text-lg font-bold text-stone-800 mb-2\">Senarai Beg & Bungkusan (Packing List)<\/h2>\n            <div className=\"flex gap-2\">\n              {['ALL', 'AYAH', 'IBU', 'ANAK'].map(t => (\n                <button\n                  key={t}\n                  onClick={() => setTravelerTab(t)}\n                  className={`px-3 py-1.5 rounded-xl text-xs font-semibold ${travelerTab === t ? 'bg-stone-900 text-white' : 'bg-stone-100 text-stone-600'}`}\n                >\n                  {t === 'ALL' ? 'Semua Beg' : t}\n                <\/button>\n              ))}\n            <\/div>\n          <\/div>\n\n          <div className=\"space-y-2\">\n            {filteredPacking.map(item => (\n              <div\n                key={item.id}\n                className={`p-3 rounded-2xl bg-white border shadow-sm flex items-center justify-between gap-3 ${item.packed ? 'border-emerald-200 bg-emerald-50\/20' : 'border-stone-200'}`}\n              >\n                <div\n                  className=\"flex items-center gap-3 flex-1 cursor-pointer\"\n                  onClick={() => {\n                    const updated = data.packing.map(p => p.id === item.id ? { ...p, packed: !p.packed } : p);\n                    setData({ ...data, packing: updated });\n                  }}\n                >\n                  <div className={item.packed ? 'text-emerald-600' : 'text-stone-300'}>\n                    {item.packed ? <Icons.CheckCircle2 \/> : <Icons.Circle \/>}\n                  <\/div>\n                  <div>\n                    <span className={`text-xs md:text-sm font-semibold ${item.packed ? 'line-through text-stone-400' : 'text-stone-800'}`}>\n                      {item.item}\n                    <\/span>\n                    <div className=\"text-[11px] text-stone-400 flex items-center gap-2 mt-0.5\">\n                      <span className=\"font-semibold text-emerald-800\">{item.traveler}<\/span>\n                      <span>\u2022<\/span>\n                      <span>{item.bag}<\/span>\n                      <span>\u2022<\/span>\n                      <span>Qty: {item.qty}<\/span>\n                    <\/div>\n                  <\/div>\n                <\/div>\n\n                <div className=\"flex items-center gap-1\">\n                  <button\n                    onClick={() => {\n                      const copy = { ...item, id: 'p-' + Date.now(), item: item.item + ' (Salinan)' };\n                      setData({ ...data, packing: [...data.packing, copy] });\n                      showToast('Barang disalin');\n                    }}\n                    className=\"p-1.5 text-stone-400 hover:text-stone-700\"\n                  >\n                    <Icons.Copy \/>\n                  <\/button>\n                  <button\n                    onClick={() => {\n                      setData({ ...data, packing: data.packing.filter(p => p.id !== item.id) });\n                      showToast('Barang dibuang');\n                    }}\n                    className=\"p-1.5 text-stone-400 hover:text-rose-500\"\n                  >\n                    <Icons.Trash2 \/>\n                  <\/button>\n                <\/div>\n              <\/div>\n            ))}\n          <\/div>\n        <\/div>\n      );\n\n      \/\/ Tab 5: Bajet & Perbelanjaan\n      const [newExpenseName, setNewExpenseName] = useState('');\n      const [newExpenseAmt, setNewExpenseAmt] = useState('');\n      const [newExpenseCurr, setNewExpenseCurr] = useState('TRY');\n\n      const handleAddExpense = (e) => {\n        e.preventDefault();\n        if (!newExpenseName || !newExpenseAmt) return;\n        const record = {\n          id: 'exp-' + Date.now(),\n          description: newExpenseName,\n          amount: Number(newExpenseAmt) || 0,\n          currency: newExpenseCurr,\n          date: new Date().toISOString().slice(0, 10)\n        };\n        setData({ ...data, expenses: [record, ...data.expenses] });\n        setNewExpenseName('');\n        setNewExpenseAmt('');\n        showToast('Perbelanjaan ditambah');\n      };\n\n      const renderBudget = () => (\n        <div className=\"space-y-4\">\n          <div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\">\n            <h2 className=\"text-lg font-bold text-stone-800 mb-3\">Kalkulator Bajet & Perbelanjaan<\/h2>\n            <div className=\"grid grid-cols-2 gap-3 bg-stone-50 p-3 rounded-2xl border border-stone-200 mb-4 text-xs\">\n              <div>\n                <span className=\"text-stone-500 block mb-1\">Kadar Manual (1 TRY = ? MYR):<\/span>\n                <input\n                  type=\"number\"\n                  step=\"0.001\"\n                  value={data.tripSettings.tryToMyrRate}\n                  onChange={e => setData({ ...data, tripSettings: { ...data.tripSettings, tryToMyrRate: Number(e.target.value) } })}\n                  className=\"w-full bg-white border border-stone-300 rounded-xl px-2.5 py-1.5 font-bold\"\n                \/>\n              <\/div>\n              <div>\n                <span className=\"text-stone-500 block mb-1\">Sasaran Bajet (MYR):<\/span>\n                <input\n                  type=\"number\"\n                  step=\"100\"\n                  value={data.tripSettings.budgetLimitMyr}\n                  onChange={e => setData({ ...data, tripSettings: { ...data.tripSettings, budgetLimitMyr: Number(e.target.value) } })}\n                  className=\"w-full bg-white border border-stone-300 rounded-xl px-2.5 py-1.5 font-bold\"\n                \/>\n              <\/div>\n            <\/div>\n\n            <div className=\"grid grid-cols-3 gap-2 text-center text-xs\">\n              <div className=\"bg-stone-50 p-3 rounded-2xl border border-stone-200\">\n                <span className=\"text-stone-400 block\">Belanja<\/span>\n                <span className=\"text-base font-extrabold text-stone-800 mt-1 block\">RM {expenseStats.totalMyr.toFixed(0)}<\/span>\n              <\/div>\n              <div className=\"bg-stone-50 p-3 rounded-2xl border border-stone-200\">\n                <span className=\"text-stone-400 block\">Sasaran<\/span>\n                <span className=\"text-base font-extrabold text-stone-800 mt-1 block\">RM {expenseStats.budgetLimit.toFixed(0)}<\/span>\n              <\/div>\n              <div className=\"bg-stone-50 p-3 rounded-2xl border border-stone-200\">\n                <span className=\"text-stone-400 block\">Baki<\/span>\n                <span className={`text-base font-extrabold mt-1 block ${expenseStats.remainingMyr >= 0 ? 'text-emerald-700' : 'text-rose-600'}`}>\n                  RM {expenseStats.remainingMyr.toFixed(0)}\n                <\/span>\n              <\/div>\n            <\/div>\n\n            <form onSubmit={handleAddExpense} className=\"flex gap-2 mt-4 pt-4 border-t border-stone-100\">\n              <input\n                type=\"text\"\n                placeholder=\"Nama belanja...\"\n                value={newExpenseName}\n                onChange={e => setNewExpenseName(e.target.value)}\n                className=\"flex-1 bg-stone-50 border border-stone-200 rounded-xl px-3 py-2 text-xs\"\n              \/>\n              <input\n                type=\"number\"\n                placeholder=\"Jumlah\"\n                value={newExpenseAmt}\n                onChange={e => setNewExpenseAmt(e.target.value)}\n                className=\"w-24 bg-stone-50 border border-stone-200 rounded-xl px-3 py-2 text-xs font-bold\"\n              \/>\n              <select\n                value={newExpenseCurr}\n                onChange={e => setNewExpenseCurr(e.target.value)}\n                className=\"bg-stone-50 border border-stone-200 rounded-xl px-2 py-2 text-xs font-bold\"\n              >\n                <option value=\"TRY\">\u20ba TRY<\/option>\n                <option value=\"MYR\">RM MYR<\/option>\n              <\/select>\n              <button type=\"submit\" className=\"bg-emerald-800 text-white px-3 py-2 rounded-xl text-xs font-semibold\">\n                Tambah\n              <\/button>\n            <\/form>\n          <\/div>\n\n          <div className=\"space-y-2\">\n            {data.expenses.map(exp => (\n              <div key={exp.id} className=\"p-3 bg-white border border-stone-200 rounded-2xl flex justify-between items-center shadow-sm\">\n                <div>\n                  <span className=\"text-xs font-bold text-stone-800 block\">{exp.description}<\/span>\n                  <span className=\"text-[10px] text-stone-400\">{exp.date}<\/span>\n                <\/div>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"text-right\">\n                    <span className=\"text-sm font-extrabold text-stone-900 block\">\n                      {exp.currency === 'TRY' ? `\u20ba${exp.amount.toFixed(2)}` : `RM ${exp.amount.toFixed(2)}`}\n                    <\/span>\n                    {exp.currency === 'TRY' && (\n                      <span className=\"text-[10px] text-stone-400 block\">\n                        \u2248 RM {(exp.amount * Number(data.tripSettings.tryToMyrRate || 0.13)).toFixed(2)}\n                      <\/span>\n                    )}\n                  <\/div>\n                  <button\n                    onClick={() => {\n                      setData({ ...data, expenses: data.expenses.filter(e => e.id !== exp.id) });\n                      showToast('Rekod belanja dipadam');\n                    }}\n                    className=\"text-stone-400 hover:text-rose-500 p-1\"\n                  >\n                    <Icons.Trash2 \/>\n                  <\/button>\n                <\/div>\n              <\/div>\n            ))}\n          <\/div>\n        <\/div>\n      );\n\n      \/\/ Tab 6: Penerbangan\n      const renderFlights = () => (\n        <div className=\"space-y-4\">\n          <div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200\">\n            <h2 className=\"text-lg font-bold text-stone-800 mb-1\">Tiket & Jadual Penerbangan<\/h2>\n            <p className=\"text-xs text-stone-500 mb-3\">Antarabangsa (Emirates - IST) & Domestik (Pegasus - SAW)<\/p>\n\n            <div className=\"space-y-3\">\n              {data.flights.map(fl => (\n                <div\n                  key={fl.id}\n                  className={`p-4 rounded-2xl border shadow-sm ${fl.airportType === 'Domestic-SAW' ? 'border-amber-200 bg-amber-50\/20' : 'border-stone-200 bg-white'}`}\n                >\n                  <div className=\"flex justify-between items-start\">\n                    <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold ${fl.airline === 'Emirates' ? 'bg-red-100 text-red-800' : 'bg-amber-100 text-amber-900'}`}>\n                      {fl.airline} \u2022 {fl.flightNumber}\n                    <\/span>\n                    <span className=\"text-xs font-semibold text-stone-600\">{fl.date}<\/span>\n                  <\/div>\n\n                  <div className=\"flex items-center justify-between my-2\">\n                    <div>\n                      <span className=\"text-base font-extrabold text-stone-800 block\">{fl.departureTime}<\/span>\n                      <span className=\"text-xs text-stone-500 font-medium\">{fl.origin}<\/span>\n                    <\/div>\n                    <div className=\"text-stone-400 text-xs flex flex-col items-center\">\n                      <Icons.Plane \/>\n                    <\/div>\n                    <div className=\"text-right\">\n                      <span className=\"text-base font-extrabold text-stone-800 block\">{fl.arrivalTime}<\/span>\n                      <span className=\"text-xs text-stone-500 font-medium\">{fl.destination}<\/span>\n                    <\/div>\n                  <\/div>\n\n                  <div className=\"text-[11px] text-stone-500 border-t border-stone-100 pt-2 flex justify-between\">\n                    <span>Bagasi: <strong>{fl.baggageAdult}<\/strong><\/span>\n                    <span className=\"text-amber-800 font-medium\">Bayi: {fl.infantTicket}<\/span>\n                  <\/div>\n                <\/div>\n              ))}\n            <\/div>\n          <\/div>\n        <\/div>\n      );\n\n      \/\/ Tab 7: Nota & Kecemasan\n      const renderNotes = () => (\n        <div className=\"space-y-4\">\n          <div className=\"bg-red-50 border-2 border-red-200 rounded-3xl p-5 shadow-sm flex items-center gap-3\">\n            <div className=\"p-3 bg-red-600 text-white rounded-2xl\">\n              <Icons.Phone \/>\n            <\/div>\n            <div>\n              <h2 className=\"text-base font-extrabold text-red-950\">NOMBOR KECEMASAN T\u00dcRKIYE: 112<\/h2>\n              <p className=\"text-xs text-red-800\">Satu nombor untuk Polis, Ambulans & Bomba di seluruh T\u00fcrkiye.<\/p>\n            <\/div>\n          <\/div>\n\n          <div className=\"bg-white rounded-3xl p-5 shadow-sm border border-stone-200 text-xs space-y-3\">\n            <h3 className=\"text-sm font-bold text-stone-800\">Kedutaan & Konsulat Malaysia<\/h3>\n            <div className=\"p-3 bg-stone-50 rounded-2xl border border-stone-200\">\n              <strong className=\"block text-stone-800\">{data.notesAndContacts.istanbulConsulate.name}<\/strong>\n              <p className=\"text-stone-500 mt-1\">{data.notesAndContacts.istanbulConsulate.address}<\/p>\n              <p className=\"font-bold text-emerald-800 mt-1\">Tel: {data.notesAndContacts.istanbulConsulate.phone}<\/p>\n            <\/div>\n            <div className=\"p-3 bg-stone-50 rounded-2xl border border-stone-200\">\n              <strong className=\"block text-stone-800\">{data.notesAndContacts.malaysiaEmbassyAnkara.name}<\/strong>\n              <p className=\"text-stone-500 mt-1\">{data.notesAndContacts.malaysiaEmbassyAnkara.address}<\/p>\n              <p className=\"font-bold text-emerald-800 mt-1\">Tel: {data.notesAndContacts.malaysiaEmbassyAnkara.phone}<\/p>\n            <\/div>\n          <\/div>\n\n          <div className=\"bg-stone-900 text-white rounded-3xl p-5 shadow-sm text-xs\">\n            <h3 className=\"text-sm font-bold mb-2\">Simpanan & Sandaran Fail<\/h3>\n            <p className=\"text-stone-400 mb-3\">Semua data disimpan automatik dalam browser anda. Boleh dieksport bila-bila masa.<\/p>\n            <div className=\"flex flex-wrap gap-2\">\n              <button onClick={handleExport} className=\"bg-emerald-700 px-3 py-2 rounded-xl font-semibold flex items-center gap-1.5\">\n                <Icons.Download \/> Eksport JSON\n              <\/button>\n              <label className=\"bg-stone-700 px-3 py-2 rounded-xl font-semibold flex items-center gap-1.5 cursor-pointer\">\n                <Icons.Upload \/> Import JSON\n                <input type=\"file\" accept=\".json\" onChange={handleImport} className=\"hidden\" \/>\n              <\/label>\n              <button onClick={() => window.print()} className=\"bg-stone-800 border border-stone-700 px-3 py-2 rounded-xl font-semibold\">\n                Cetak PDF\n              <\/button>\n              <button onClick={handleReset} className=\"bg-rose-900 text-rose-200 px-3 py-2 rounded-xl font-semibold ml-auto\">\n                Reset Data\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      );\n\n      return (\n        <div className=\"min-h-screen pb-24 md:pb-10\">\n          {\/* Toast Notification *\/}\n          {toastMessage && (\n            <div className=\"fixed top-4 left-1\/2 -translate-x-1\/2 z-50 bg-stone-900 text-white text-xs font-semibold px-4 py-2.5 rounded-full shadow-2xl flex items-center gap-2\">\n              <Icons.Check \/>\n              <span>{toastMessage}<\/span>\n            <\/div>\n          )}\n\n          {\/* Desktop & Mobile Header *\/}\n          <header className=\"sticky top-0 z-40 bg-white\/95 backdrop-blur-md border-b border-stone-200\">\n            <div className=\"max-w-4xl mx-auto px-4 h-16 flex items-center justify-between\">\n              <div className=\"flex items-center gap-2.5\">\n                <div className=\"w-9 h-9 rounded-2xl bg-emerald-800 text-white flex items-center justify-center font-black text-xs shadow-sm\">\n                  TR\n                <\/div>\n                <div>\n                  <span className=\"font-extrabold text-sm tracking-tight text-stone-900 block leading-tight\">\n                    KAZ FAMILY\n                  <\/span>\n                  <span className=\"text-[10px] text-emerald-800 font-bold uppercase tracking-wider block\">\n                    T\u00fcrkiye 2026\n                  <\/span>\n                <\/div>\n              <\/div>\n\n              {\/* Desktop Tabs *\/}\n              <nav className=\"hidden md:flex items-center gap-1 text-xs font-semibold text-stone-600\">\n                {[\n                  { id: 'dashboard', label: 'Dashboard' },\n                  { id: 'itinerary', label: 'Jadual' },\n                  { id: 'checklist', label: 'Checklist' },\n                  { id: 'packing', label: 'Beg' },\n                  { id: 'budget', label: 'Bajet' },\n                  { id: 'flights', label: 'Penerbangan' },\n                  { id: 'notes', label: 'Nota' }\n                ].map(t => (\n                  <button\n                    key={t.id}\n                    onClick={() => setActiveTab(t.id)}\n                    className={`px-3 py-1.5 rounded-xl transition ${activeTab === t.id ? 'bg-emerald-800 text-white' : 'hover:bg-stone-100 text-stone-700'}`}\n                  >\n                    {t.label}\n                  <\/button>\n                ))}\n              <\/nav>\n            <\/div>\n          <\/header>\n\n          {\/* Main Body *\/}\n          <main className=\"max-w-4xl mx-auto px-4 pt-5\">\n            {activeTab === 'dashboard' && renderDashboard()}\n            {activeTab === 'itinerary' && renderItinerary()}\n            {activeTab === 'checklist' && renderChecklist()}\n            {activeTab === 'packing' && renderPacking()}\n            {activeTab === 'budget' && renderBudget()}\n            {activeTab === 'flights' && renderFlights()}\n            {activeTab === 'notes' && renderNotes()}\n          <\/main>\n\n          {\/* Bottom Sticky Mobile Navigation *\/}\n          <nav className=\"md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white\/95 backdrop-blur-lg border-t border-stone-200 px-2 py-1.5\">\n            <div className=\"grid grid-cols-7 gap-0.5 text-center\">\n              <button onClick={() => setActiveTab('dashboard')} className={`flex flex-col items-center py-1 ${activeTab === 'dashboard' ? 'text-emerald-800 font-bold' : 'text-stone-400'}`}>\n                <Icons.Calendar \/>\n                <span className=\"text-[9px] mt-0.5\">Utama<\/span>\n              <\/button>\n              <button onClick={() => setActiveTab('itinerary')} className={`flex flex-col items-center py-1 ${activeTab === 'itinerary' ? 'text-emerald-800 font-bold' : 'text-stone-400'}`}>\n                <Icons.Clock \/>\n                <span className=\"text-[9px] mt-0.5\">Jadual<\/span>\n              <\/button>\n              <button onClick={() => setActiveTab('checklist')} className={`flex flex-col items-center py-1 ${activeTab === 'checklist' ? 'text-emerald-800 font-bold' : 'text-stone-400'}`}>\n                <Icons.CheckCircle2 \/>\n                <span className=\"text-[9px] mt-0.5\">Checklist<\/span>\n              <\/button>\n              <button onClick={() => setActiveTab('packing')} className={`flex flex-col items-center py-1 ${activeTab === 'packing' ? 'text-emerald-800 font-bold' : 'text-stone-400'}`}>\n                <Icons.Luggage \/>\n                <span className=\"text-[9px] mt-0.5\">Beg<\/span>\n              <\/button>\n              <button onClick={() => setActiveTab('budget')} className={`flex flex-col items-center py-1 ${activeTab === 'budget' ? 'text-emerald-800 font-bold' : 'text-stone-400'}`}>\n                <Icons.DollarSign \/>\n                <span className=\"text-[9px] mt-0.5\">Bajet<\/span>\n              <\/button>\n              <button onClick={() => setActiveTab('flights')} className={`flex flex-col items-center py-1 ${activeTab === 'flights' ? 'text-emerald-800 font-bold' : 'text-stone-400'}`}>\n                <Icons.Plane \/>\n                <span className=\"text-[9px] mt-0.5\">Tiket<\/span>\n              <\/button>\n              <button onClick={() => setActiveTab('notes')} className={`flex flex-col items-center py-1 ${activeTab === 'notes' ? 'text-emerald-800 font-bold' : 'text-stone-400'}`}>\n                <Icons.FileText \/>\n                <span className=\"text-[9px] mt-0.5\">Nota<\/span>\n              <\/button>\n            <\/div>\n          <\/nav>\n        <\/div>\n      );\n    }\n\n    ReactDOM.createRoot(document.getElementById('root')).render(<App \/>);\n  <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>KAZ FAMILY \u2022 T\u00dcRKIYE TRIP 2026<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shafakha.com\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shafakha.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shafakha.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shafakha.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shafakha.com\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":4,"href":"https:\/\/shafakha.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/shafakha.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/shafakha.com\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}