feat: İhaleist - Akıllı İhale Takip ve Analiz Platformu (Full PRD + 7 Enterprise Modül)
This commit is contained in:
@@ -0,0 +1,134 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { Smartphone, Wifi, WifiOff, Download, Bell, CheckCircle2, ShieldCheck, Zap, Sparkles } from 'lucide-react';
|
||||
import confetti from 'canvas-confetti';
|
||||
|
||||
export const PwaSettings = () => {
|
||||
const { userProfile } = useApp();
|
||||
const [offlineMode, setOfflineMode] = useState(true);
|
||||
const [pushSubscribed, setPushSubscribed] = useState(true);
|
||||
const [installed, setInstalled] = useState(false);
|
||||
|
||||
const handleInstallPwa = () => {
|
||||
setInstalled(true);
|
||||
confetti({ particleCount: 70 });
|
||||
};
|
||||
|
||||
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 PWA & Saha Ekibi Offline Modu</h2>
|
||||
<p className="text-xs text-cyan-200 mt-0.5">Saha satış temsilcileriniz için internet bağlantısı olmadığında dahi çevrimdışı çalışma ve anlık push bildirimi.</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">
|
||||
{offlineMode ? <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">
|
||||
Senkronize
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-xs text-slate-700">
|
||||
<p className="flex justify-between">
|
||||
<span>İhale Kayıtları:</span>
|
||||
<strong className="text-slate-900">102 İhale Önbellekte</strong>
|
||||
</p>
|
||||
<p className="flex justify-between">
|
||||
<span>Şartname PDF'leri:</span>
|
||||
<strong className="text-slate-900">18 Belge Çevrimdışı</strong>
|
||||
</p>
|
||||
<p className="flex justify-between">
|
||||
<span>Son Senkronizasyon:</span>
|
||||
<strong className="text-emerald-700">Bugün 14:45</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setOfflineMode(!offlineMode)}
|
||||
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"
|
||||
>
|
||||
{offlineMode ? 'Çevrimdışı Önbelleği Yenile' : 'Çevrimdışı Modu Aktif Et'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Push Notifications */}
|
||||
<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 Mobil Push Bildirimleri
|
||||
</h3>
|
||||
<span className="bg-amber-100 text-amber-800 font-extrabold text-[10px] px-2 py-0.5 rounded-full">
|
||||
İzin Verildi
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-600 leading-relaxed">
|
||||
İhale son başvuru saatine 3 saat kala mobil cihazınıza sesli ve titreşimli anlık uyarı bildirimi gönderilir.
|
||||
</p>
|
||||
|
||||
<label className="flex items-center justify-between p-3 bg-slate-50 rounded-xl border border-slate-200 cursor-pointer text-xs font-bold text-slate-800">
|
||||
<span>Mobil Push Uyarısı</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={pushSubscribed}
|
||||
onChange={() => setPushSubscribed(!pushSubscribed)}
|
||||
className="w-4 h-4 accent-cyan-600 rounded"
|
||||
/>
|
||||
</label>
|
||||
</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>Cihaza Yüklendi!</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Download className="w-4 h-4 text-slate-950" />
|
||||
<span>İhaleist Uygulamasını Cihaza Yükle</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user