311 lines
16 KiB
React
311 lines
16 KiB
React
import {DeliveryQueue} from './DeliveryQueue';
|
||
import React, { useState, useEffect } from 'react';
|
||
import { useApp } from '../../context/AppContext';
|
||
import { Smartphone, Wifi, WifiOff, Download, Bell, CheckCircle2, Moon, Mail, Send } from 'lucide-react';
|
||
import confetti from 'canvas-confetti';
|
||
import { getToken } from '../../services/auth';
|
||
import { NotifySubscriptions } from './NotifySubscriptions';
|
||
|
||
export const PwaSettings = () => {
|
||
const { userProfile, authUser, tenders, reminderSettings, setReminderSettings, requestPushPermission, notify, isQuietNow } = useApp();
|
||
// Gerçek Cache API sayımı — sahte "102 ihale önbellekte" yerine
|
||
const [onbellekSayisi, setOnbellekSayisi] = useState(null);
|
||
const [onbellekAdi, setOnbellekAdi] = useState('');
|
||
const [cacheLoading, setCacheLoading] = useState(false);
|
||
const [cacheError, setCacheError] = useState(null);
|
||
const [online, setOnline] = useState(navigator.onLine);
|
||
const refreshCacheStatus = async () => {
|
||
setCacheLoading(true); setCacheError(null);
|
||
try {
|
||
if (!('caches' in window)) throw new Error('Bu tarayıcı uygulama önbelleğini desteklemiyor.');
|
||
const adlar = (await caches.keys()).filter(name => name.startsWith('ihaleist-'));
|
||
let toplam = 0;
|
||
for (const ad of adlar) toplam += (await (await caches.open(ad)).keys()).length;
|
||
setOnbellekSayisi(toplam); setOnbellekAdi(adlar.join(', '));
|
||
} catch (error) { setCacheError(error.message); setOnbellekSayisi(null); }
|
||
finally { setCacheLoading(false); }
|
||
};
|
||
useEffect(() => { refreshCacheStatus(); }, []);
|
||
useEffect(() => {
|
||
const changed = () => setOnline(navigator.onLine);
|
||
window.addEventListener('online', changed); window.addEventListener('offline', changed);
|
||
return () => { window.removeEventListener('online', changed); window.removeEventListener('offline', changed); };
|
||
}, []);
|
||
const [installed, setInstalled] = useState(false);
|
||
const [permission, setPermission] = useState(typeof Notification !== 'undefined' ? Notification.permission : 'unsupported');
|
||
|
||
// E-posta (Resend) durumu + test gönderimi
|
||
const [emailCfg, setEmailCfg] = useState(null); // null=bilinmiyor, true/false
|
||
const [emailSending, setEmailSending] = useState(false);
|
||
const [emailResult, setEmailResult] = useState(null);
|
||
useEffect(() => {
|
||
fetch('/api/notify/email/config')
|
||
.then((r) => r.json())
|
||
.then((d) => setEmailCfg(Boolean(d.configured)))
|
||
.catch(() => setEmailCfg(false));
|
||
}, []);
|
||
|
||
const sendTestEmail = async () => {
|
||
setEmailSending(true);
|
||
setEmailResult(null);
|
||
try {
|
||
const yeniler = tenders.filter((t) => t.isYeni).slice(0, 15);
|
||
const res = await fetch('/api/notify/email/test', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${getToken()}` },
|
||
body: JSON.stringify({ subject: 'İhaleist — bildirim testi', tenders: yeniler }),
|
||
});
|
||
const data = await res.json();
|
||
if (data.success) {
|
||
setEmailResult({ ok: true, msg: `E-posta gönderildi → ${data.to}` });
|
||
notify('E-posta gönderildi', `Test e-postası ${data.to} adresine iletildi.`);
|
||
} else {
|
||
setEmailResult({ ok: false, msg: data.error || 'Gönderilemedi' });
|
||
}
|
||
} catch (e) {
|
||
setEmailResult({ ok: false, msg: e.message });
|
||
} finally {
|
||
setEmailSending(false);
|
||
}
|
||
};
|
||
|
||
const handleEnablePush = async () => {
|
||
const p = await requestPushPermission();
|
||
setPermission(p);
|
||
if (p === 'granted') {
|
||
setReminderSettings((s) => ({ ...s, pushEnabled: true }));
|
||
notify('Bildirimler açıldı', 'Yeni ihale ve son tarih uyarıları buradan gelecek.');
|
||
confetti({ particleCount: 50 });
|
||
}
|
||
};
|
||
const setQuiet = (patch) => setReminderSettings((s) => ({ ...s, ...patch }));
|
||
|
||
// Gerçek PWA kurulumu: tarayıcı beforeinstallprompt verirse yerel diyalog;
|
||
// zaten standalone açıldıysa "yüklü"; iOS Safari'de olay yok → yol tarifi.
|
||
const [kurulumOlayi, setKurulumOlayi] = useState(null);
|
||
const [iosIpucu, setIosIpucu] = useState(false);
|
||
useEffect(() => {
|
||
const standalone = window.matchMedia?.('(display-mode: standalone)')?.matches || window.navigator.standalone === true;
|
||
if (standalone) setInstalled(true);
|
||
const yakala = (e) => { e.preventDefault(); setKurulumOlayi(e); };
|
||
const kuruldu = () => { setInstalled(true); setKurulumOlayi(null); };
|
||
window.addEventListener('beforeinstallprompt', yakala);
|
||
window.addEventListener('appinstalled', kuruldu);
|
||
return () => { window.removeEventListener('beforeinstallprompt', yakala); window.removeEventListener('appinstalled', kuruldu); };
|
||
}, []);
|
||
const handleInstallPwa = async () => {
|
||
if (kurulumOlayi) {
|
||
kurulumOlayi.prompt();
|
||
const { outcome } = await kurulumOlayi.userChoice.catch(() => ({ outcome: 'dismissed' }));
|
||
if (outcome === 'accepted') setInstalled(true);
|
||
setKurulumOlayi(null);
|
||
return;
|
||
}
|
||
setIosIpucu(true); // olay yoksa (iOS / zaten yüklü / desteklenmiyor) yol tarifi göster
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6 animate-fade-in">
|
||
|
||
{/* Header Banner */}
|
||
<div className="bg-linear-to-r from-slate-900 via-blue-950 to-cyan-900 text-white p-6 rounded-2xl shadow-lg border border-cyan-800/40 flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-12 h-12 rounded-2xl bg-cyan-600 text-white flex items-center justify-center font-black shadow-md">
|
||
<Smartphone className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<h2 className="font-extrabold text-xl">Mobil uygulama ve bağlantı durumu</h2>
|
||
<p className="text-xs text-cyan-200 mt-0.5">Uygulama kabuğu önbellekten açılabilir. İhale güncelleme, belge erişimi ve hazırlık kaydı için internet bağlantısı gerekir.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Controls Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
|
||
{/* Offline Cache Status */}
|
||
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs space-y-4">
|
||
<div className="flex items-center justify-between border-b border-slate-100 pb-3">
|
||
<h3 className="font-extrabold text-sm text-slate-900 flex items-center gap-2">
|
||
{online ? <Wifi className="w-4 h-4 text-emerald-600" /> : <WifiOff className="w-4 h-4 text-slate-400" />} Çevrimdışı (Offline) Önbellek
|
||
</h3>
|
||
<span className="bg-emerald-100 text-emerald-800 font-extrabold text-[10px] px-2 py-0.5 rounded-full">
|
||
{online ? 'Bağlantı var' : 'Çevrimdışı'}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="space-y-2 text-xs text-slate-700">
|
||
<p className="flex justify-between">
|
||
<span>İhale Kayıtları (bellekte):</span>
|
||
<strong className="text-slate-900">{tenders.length.toLocaleString('tr-TR')} ihale</strong>
|
||
</p>
|
||
<p className="flex justify-between">
|
||
<span>Önbelleğe alınmış istek:</span>
|
||
<strong className="text-slate-900">{onbellekSayisi == null ? '—' : `${onbellekSayisi} kayıt`}</strong>
|
||
</p>
|
||
<p className="flex justify-between">
|
||
<span>Uygulama sürümü önbelleği:</span>
|
||
<strong className="text-emerald-700">{onbellekAdi || '—'}</strong>
|
||
</p>
|
||
</div>
|
||
|
||
<button
|
||
onClick={refreshCacheStatus} disabled={cacheLoading}
|
||
className="w-full bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold text-xs py-2.5 rounded-xl border border-slate-200 transition-colors"
|
||
>
|
||
{cacheLoading ? 'Kontrol ediliyor…' : 'Önbellek durumunu kontrol et'}
|
||
</button>
|
||
{cacheError && <p role="alert" className="text-xs text-red-700">{cacheError}</p>}
|
||
<p className="text-xs text-slate-600">Bağlantı durumu sunucuya erişimi garanti etmez. Çevrimdışı değişiklikler otomatik gönderim kuyruğuna alınmaz; kayıt sonucunu kontrol edin.</p>
|
||
</div>
|
||
|
||
{/* Gerçek Tarayıcı Bildirimleri + Sessiz Saatler */}
|
||
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs space-y-4">
|
||
<div className="flex items-center justify-between border-b border-slate-100 pb-3">
|
||
<h3 className="font-extrabold text-sm text-slate-900 flex items-center gap-2">
|
||
<Bell className="w-4 h-4 text-amber-500" /> Anlık Bildirimler
|
||
</h3>
|
||
<span className={`font-extrabold text-[10px] px-2 py-0.5 rounded-full ${
|
||
permission === 'granted' ? 'bg-emerald-100 text-emerald-800' : permission === 'denied' ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-600'
|
||
}`}>
|
||
{permission === 'granted' ? 'İzin Verildi' : permission === 'denied' ? 'Reddedildi' : permission === 'unsupported' ? 'Desteklenmiyor' : 'İzin Bekliyor'}
|
||
</span>
|
||
</div>
|
||
|
||
<p className="text-xs text-slate-600 leading-relaxed">
|
||
Tarayıcı bildirimlerine izin verin; yeni ihale ve son tarih uyarıları gerçek bildirim olarak gelir.
|
||
</p>
|
||
|
||
{permission !== 'granted' ? (
|
||
<button onClick={handleEnablePush} disabled={permission === 'unsupported'}
|
||
className="w-full bg-amber-500 hover:bg-amber-400 disabled:opacity-40 text-white font-bold text-xs py-2.5 rounded-xl">
|
||
Bildirimlere İzin Ver
|
||
</button>
|
||
) : (
|
||
<button onClick={() => notify('Test bildirimi', isQuietNow() ? 'Sessiz saatte — sadece listeye eklendi.' : 'Bildirimler çalışıyor ✓')}
|
||
className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs py-2.5 rounded-xl">
|
||
Test Bildirimi Gönder
|
||
</button>
|
||
)}
|
||
|
||
{/* Sessiz saatler — gerçek */}
|
||
<div className="pt-2 border-t border-slate-100 space-y-2">
|
||
<label className="flex items-center justify-between text-xs font-bold text-slate-800 cursor-pointer">
|
||
<span className="flex items-center gap-1.5"><Moon className="w-3.5 h-3.5 text-indigo-500" /> Sessiz Saatler</span>
|
||
<input type="checkbox" checked={reminderSettings.quietEnabled}
|
||
onChange={(e) => setQuiet({ quietEnabled: e.target.checked })}
|
||
className="w-4 h-4 accent-indigo-600 rounded" />
|
||
</label>
|
||
{reminderSettings.quietEnabled && (
|
||
<div className="flex items-center gap-2 text-xs">
|
||
<input type="time" value={reminderSettings.quietStart}
|
||
onChange={(e) => setQuiet({ quietStart: e.target.value })}
|
||
className="bg-slate-50 border border-slate-300 rounded-lg px-2 py-1.5 flex-1" />
|
||
<span className="text-slate-400">→</span>
|
||
<input type="time" value={reminderSettings.quietEnd}
|
||
onChange={(e) => setQuiet({ quietEnd: e.target.value })}
|
||
className="bg-slate-50 border border-slate-300 rounded-lg px-2 py-1.5 flex-1" />
|
||
</div>
|
||
)}
|
||
{reminderSettings.quietEnabled && (
|
||
<p className="text-[10px] text-slate-400">
|
||
{isQuietNow() ? '🔕 Şu an sessiz saatte — tarayıcı bildirimi gösterilmez, uyarılar listeye eklenir.' : '🔔 Şu an aktif — bildirimler gösterilir.'}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* E-posta Bildirimi (Resend) — gerçek gönderim */}
|
||
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs space-y-4">
|
||
<div className="flex items-center justify-between border-b border-slate-100 pb-3">
|
||
<h3 className="font-extrabold text-sm text-slate-900 flex items-center gap-2">
|
||
<Mail className="w-4 h-4 text-blue-500" /> E-posta Bildirimi
|
||
</h3>
|
||
<span className={`font-extrabold text-[10px] px-2 py-0.5 rounded-full ${
|
||
emailCfg === true ? 'bg-emerald-100 text-emerald-800' : emailCfg === false ? 'bg-amber-100 text-amber-800' : 'bg-slate-100 text-slate-600'
|
||
}`}>
|
||
{emailCfg === true ? 'Aktif (Resend)' : emailCfg === false ? 'Yapılandırılmadı' : 'Kontrol ediliyor…'}
|
||
</span>
|
||
</div>
|
||
|
||
<p className="text-xs text-slate-600 leading-relaxed">
|
||
{emailCfg === false
|
||
? 'E-posta göndermek için sunucuya RESEND_API_KEY ekleyin (Coolify → Environment). Ayrıca gönderen domainini Resend’de DNS ile doğrulayın.'
|
||
: 'Takip kriterlerinize uyan ihaleler, hesabınızın e-posta adresine özet olarak gönderilir. Aşağıdan kendinize test gönderebilirsiniz.'}
|
||
</p>
|
||
|
||
<label className="flex items-center justify-between text-xs font-bold text-slate-800 cursor-pointer">
|
||
<span>E-posta bildirimleri açık</span>
|
||
<input type="checkbox" checked={reminderSettings.emailEnabled}
|
||
onChange={(e) => setReminderSettings((s) => ({ ...s, emailEnabled: e.target.checked }))}
|
||
className="w-4 h-4 accent-blue-600 rounded" />
|
||
</label>
|
||
|
||
<button
|
||
onClick={sendTestEmail}
|
||
disabled={emailSending || emailCfg !== true || !authUser}
|
||
className="w-full bg-blue-600 hover:bg-blue-500 disabled:opacity-40 text-white font-bold text-xs py-2.5 rounded-xl flex items-center justify-center gap-2"
|
||
title={!authUser ? 'Giriş yapın' : emailCfg !== true ? 'RESEND_API_KEY gerekli' : 'Kendinize test e-postası gönder'}
|
||
>
|
||
<Send className="w-3.5 h-3.5" />
|
||
{emailSending ? 'Gönderiliyor…' : 'Kendime Test E-postası Gönder'}
|
||
</button>
|
||
|
||
{emailResult && (
|
||
<p className={`text-[11px] ${emailResult.ok ? 'text-emerald-600' : 'text-red-600'}`}>
|
||
{emailResult.ok ? '✓ ' : '⚠ '}{emailResult.msg}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* Install PWA Application */}
|
||
<div className="bg-linear-to-br from-slate-900 to-cyan-950 text-white p-6 rounded-2xl shadow-xs space-y-4 border border-cyan-800/40">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="font-black text-sm text-white flex items-center gap-2">
|
||
<Download className="w-4 h-4 text-cyan-400" /> İhaleist Mobil / Masaüstü
|
||
</h3>
|
||
<span className="bg-cyan-500 text-slate-950 font-black text-[10px] px-2 py-0.5 rounded-full">
|
||
PWA 2.0
|
||
</span>
|
||
</div>
|
||
|
||
<p className="text-xs text-slate-300 leading-relaxed">
|
||
İhaleist'i iOS, Android, Windows veya Mac cihazınıza bir tıklama ile uygulama olarak kurun.
|
||
</p>
|
||
|
||
<button
|
||
onClick={handleInstallPwa}
|
||
disabled={installed}
|
||
className="w-full bg-cyan-500 hover:bg-cyan-400 disabled:bg-slate-700 text-slate-950 font-black text-xs py-3 rounded-xl flex items-center justify-center gap-2 shadow-md transition-colors cursor-pointer"
|
||
>
|
||
{installed ? (
|
||
<>
|
||
<CheckCircle2 className="w-4 h-4 text-emerald-950" />
|
||
<span>Uygulama olarak yüklü</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Download className="w-4 h-4 text-slate-950" />
|
||
<span>İhaleist Uygulamasını Cihaza Yükle</span>
|
||
</>
|
||
)}
|
||
</button>
|
||
{iosIpucu && !installed && (
|
||
<div className="bg-white/10 border border-white/15 rounded-xl p-3 text-[11px] text-slate-200 leading-relaxed space-y-1">
|
||
<p><strong className="text-white">iPhone / iPad (Safari):</strong> alttaki Paylaş simgesi → <strong>Ana Ekrana Ekle</strong>.</p>
|
||
<p><strong className="text-white">Android (Chrome):</strong> sağ üst ⋮ menü → <strong>Uygulamayı yükle</strong> / Ana ekrana ekle.</p>
|
||
<p><strong className="text-white">Masaüstü (Chrome/Edge):</strong> adres çubuğunun sağındaki yükleme simgesi.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Otomatik bildirim abonelikleri */}
|
||
<NotifySubscriptions />
|
||
<DeliveryQueue />
|
||
|
||
</div>
|
||
);
|
||
};
|