Implement multi-user WhatsApp notifications and settings UI
This commit is contained in:
AyrisAI
163
app/[lang]/dashboard/settings/page.tsx
Normal file
163
app/[lang]/dashboard/settings/page.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useDictionary } from "@/components/DictionaryContext";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { data: session } = useSession();
|
||||
const [profile, setProfile] = useState<any>(null);
|
||||
const [waStatus, setWaStatus] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const dict = useDictionary();
|
||||
|
||||
useEffect(() => {
|
||||
fetchProfile();
|
||||
fetchWaStatus();
|
||||
|
||||
// Check WA status every 5 seconds if not connected
|
||||
const interval = setInterval(() => {
|
||||
fetchWaStatus();
|
||||
}, 5000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const fetchProfile = async () => {
|
||||
const res = await fetch("/api/users/profile");
|
||||
const data = await res.json();
|
||||
setProfile(data);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const fetchWaStatus = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/whatsapp/status");
|
||||
const data = await res.json();
|
||||
setWaStatus(data);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
try {
|
||||
await fetch("/api/users/profile", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(profile)
|
||||
});
|
||||
alert("Ayarlar kaydedildi!");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div className="page-body"><span className="spinner" /></div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-header">
|
||||
<div>
|
||||
<h1 className="page-title">Bildirim Ayarları</h1>
|
||||
<p className="page-subtitle">Telegram ve WhatsApp bildirimlerinizi buradan yönetin.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="page-body" style={{ maxWidth: 800 }}>
|
||||
<form onSubmit={handleSave} className="form-group">
|
||||
<div className="card">
|
||||
<h3 style={{ marginBottom: 20, display: "flex", alignItems: "center", gap: 10 }}>
|
||||
<TelegramIcon /> Telegram Bildirimleri
|
||||
</h3>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 20 }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="tg-enabled"
|
||||
checked={profile.telegramEnabled}
|
||||
onChange={e => setProfile({...profile, telegramEnabled: e.target.checked})}
|
||||
/>
|
||||
<label htmlFor="tg-enabled">Telegram bildirimlerini aktif et</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="label">Telegram ID</label>
|
||||
<input
|
||||
className="input"
|
||||
value={profile.telegramId || ""}
|
||||
onChange={e => setProfile({...profile, telegramId: e.target.value})}
|
||||
placeholder="Örn: 5009005027"
|
||||
/>
|
||||
<p style={{ fontSize: 12, color: "var(--text-secondary)", marginTop: 6 }}>
|
||||
Botu başlatın ve ID'nizi buraya yazın.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ marginTop: 24 }}>
|
||||
<h3 style={{ marginBottom: 20, display: "flex", alignItems: "center", gap: 10 }}>
|
||||
<WhatsAppIcon /> WhatsApp Bildirimleri
|
||||
</h3>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 20 }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="wa-enabled"
|
||||
checked={profile.whatsappEnabled}
|
||||
onChange={e => setProfile({...profile, whatsappEnabled: e.target.checked})}
|
||||
/>
|
||||
<label htmlFor="wa-enabled">WhatsApp bildirimlerini aktif et</label>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
|
||||
<div>
|
||||
<label className="label">Telefon Numarası</label>
|
||||
<input
|
||||
className="input"
|
||||
value={profile.whatsappNumber || ""}
|
||||
onChange={e => setProfile({...profile, whatsappNumber: e.target.value})}
|
||||
placeholder="90554XXXXXXX"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ borderLeft: "1px solid var(--border)", paddingLeft: 24 }}>
|
||||
<label className="label">Bağlantı Durumu</label>
|
||||
{waStatus?.status === 'connected' ? (
|
||||
<div style={{ color: "#10b981", fontWeight: 600, display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<div style={{ width: 8, height: 8, borderRadius: "50%", background: "#10b981" }} />
|
||||
Bağlı
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div style={{ color: "#ef4444", fontWeight: 600, display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
|
||||
<div style={{ width: 8, height: 8, borderRadius: "50%", background: "#ef4444" }} />
|
||||
Bağlı Değil
|
||||
</div>
|
||||
{waStatus?.qr && (
|
||||
<div style={{ background: "#fff", padding: 10, borderRadius: 8, width: "fit-content" }}>
|
||||
<img src={waStatus.qr} alt="QR Code" style={{ width: 150, height: 150 }} />
|
||||
<p style={{ fontSize: 11, color: "#000", textAlign: "center", marginTop: 5 }}>WhatsApp'tan okutun</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 24, display: "flex", justifyContent: "flex-end" }}>
|
||||
<button type="submit" className="btn btn-primary" disabled={saving}>
|
||||
{saving ? <span className="spinner" /> : "Değişiklikleri Kaydet"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TelegramIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>; }
|
||||
function WhatsAppIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5Z"/></svg>; }
|
||||
Reference in New Issue
Block a user