481 lines
24 KiB
TypeScript
481 lines
24 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import { useForm } from "react-hook-form"
|
||
import { zodResolver } from "@hookform/resolvers/zod"
|
||
import * as z from "zod"
|
||
import { Customer } from "@/types/customer"
|
||
import { sendBulkSms } from "@/lib/sms/actions"
|
||
import { getTemplates, createTemplate, deleteTemplate, SmsTemplate } from "@/lib/sms/templates"
|
||
|
||
import { Button } from "@/components/ui/button"
|
||
import { Textarea } from "@/components/ui/textarea"
|
||
import { Checkbox } from "@/components/ui/checkbox"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from "@/components/ui/dialog"
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select"
|
||
import { Loader2, Send, Save, Trash2, BookOpen, Smartphone } from "lucide-react"
|
||
import { toast } from "sonner"
|
||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||
|
||
const formSchema = z.object({
|
||
manualNumbers: z.string().optional(),
|
||
message: z.string().min(1, "Mesaj içeriği boş olamaz").max(900, "Mesaj çok uzun (max 900 karakter)"),
|
||
selectedCustomers: z.array(z.string()).optional()
|
||
})
|
||
|
||
interface SmsPageProps {
|
||
customers: Customer[]
|
||
}
|
||
|
||
export default function SmsPageClient({ customers }: SmsPageProps) {
|
||
const [loading, setLoading] = useState(false)
|
||
const [templates, setTemplates] = useState<SmsTemplate[]>([])
|
||
|
||
// Template Management States
|
||
const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false)
|
||
const [newTemplateTitle, setNewTemplateTitle] = useState("")
|
||
const [newTemplateMessage, setNewTemplateMessage] = useState("")
|
||
const [templateLoading, setTemplateLoading] = useState(false)
|
||
|
||
// Contact Picker States
|
||
const [isContactModalOpen, setIsContactModalOpen] = useState(false)
|
||
const [searchTerm, setSearchTerm] = useState("")
|
||
|
||
const form = useForm<z.infer<typeof formSchema>>({
|
||
resolver: zodResolver(formSchema),
|
||
defaultValues: {
|
||
manualNumbers: "",
|
||
message: "",
|
||
selectedCustomers: []
|
||
},
|
||
})
|
||
|
||
async function handleNativeContactPicker() {
|
||
if (!('contacts' in navigator && 'ContactsManager' in window)) {
|
||
toast.error("Rehber özelliği desteklenmiyor (HTTPS gerekli olabilir).")
|
||
return
|
||
}
|
||
|
||
try {
|
||
const props = ['tel'];
|
||
const opts = { multiple: true };
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const contacts = await (navigator as any).contacts.select(props, opts);
|
||
|
||
if (contacts && contacts.length > 0) {
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const newNumbers = contacts.map((contact: any) => {
|
||
const phone = contact.tel?.[0]
|
||
return phone ? phone.replace(/\s/g, '') : null;
|
||
}).filter(Boolean).join(", ");
|
||
|
||
if (newNumbers) {
|
||
const current = form.getValues("manualNumbers");
|
||
const updated = current ? `${current}, ${newNumbers}` : newNumbers;
|
||
form.setValue("manualNumbers", updated);
|
||
toast.success(`${contacts.length} numara eklendi.`);
|
||
}
|
||
}
|
||
} catch (ex) {
|
||
console.error(ex);
|
||
}
|
||
}
|
||
|
||
// Load templates on mount
|
||
useEffect(() => {
|
||
loadTemplates()
|
||
}, [])
|
||
|
||
async function loadTemplates() {
|
||
const result = await getTemplates()
|
||
if (result.success && result.data) {
|
||
setTemplates(result.data)
|
||
}
|
||
}
|
||
|
||
async function handleSaveTemplate() {
|
||
if (!newTemplateTitle || !newTemplateMessage) {
|
||
toast.error("Başlık ve mesaj zorunludur")
|
||
return
|
||
}
|
||
|
||
setTemplateLoading(true)
|
||
const result = await createTemplate(newTemplateTitle, newTemplateMessage)
|
||
setTemplateLoading(false)
|
||
|
||
if (result.success) {
|
||
toast.success("Şablon kaydedildi")
|
||
setNewTemplateTitle("")
|
||
setNewTemplateMessage("")
|
||
setIsTemplateModalOpen(false)
|
||
loadTemplates()
|
||
} else {
|
||
toast.error(result.error || "Şablon kaydedilemedi")
|
||
}
|
||
}
|
||
|
||
async function handleDeleteTemplate(id: string) {
|
||
if (!confirm("Bu şablonu silmek istediğinize emin misiniz?")) return
|
||
|
||
const result = await deleteTemplate(id)
|
||
if (result.success) {
|
||
toast.success("Şablon silindi")
|
||
loadTemplates()
|
||
} else {
|
||
toast.error("Şablon silinemedi")
|
||
}
|
||
}
|
||
|
||
const handleSelectTemplate = (id: string) => {
|
||
const template = templates.find(t => t.id === id)
|
||
if (template) {
|
||
form.setValue("message", template.message)
|
||
}
|
||
}
|
||
|
||
// Filter customers for contact picker
|
||
const filteredCustomers = customers.filter(c =>
|
||
c.full_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
c.phone?.includes(searchTerm)
|
||
)
|
||
|
||
const toggleCustomerSelection = (phone: string) => {
|
||
const current = form.getValues("selectedCustomers") || []
|
||
if (current.includes(phone)) {
|
||
form.setValue("selectedCustomers", current.filter(p => p !== phone))
|
||
} else {
|
||
form.setValue("selectedCustomers", [...current, phone])
|
||
}
|
||
}
|
||
|
||
const selectAllFiltered = () => {
|
||
const current = form.getValues("selectedCustomers") || []
|
||
const newPhones = filteredCustomers.map(c => c.phone).filter(Boolean) as string[]
|
||
// Merge unique
|
||
const merged = Array.from(new Set([...current, ...newPhones]))
|
||
form.setValue("selectedCustomers", merged)
|
||
}
|
||
|
||
const deselectAll = () => {
|
||
form.setValue("selectedCustomers", [])
|
||
}
|
||
|
||
async function onSubmit(values: z.infer<typeof formSchema>) {
|
||
const manualPhones = values.manualNumbers
|
||
?.split(/[,\n]/)
|
||
.map(p => p.trim())
|
||
.filter(p => p !== "") || []
|
||
|
||
const customerPhones = values.selectedCustomers || []
|
||
const allPhones = [...manualPhones, ...customerPhones]
|
||
|
||
if (allPhones.length === 0) {
|
||
toast.error("Lütfen en az bir alıcı seçin veya numara girin.")
|
||
return
|
||
}
|
||
|
||
setLoading(true)
|
||
try {
|
||
const result = await sendBulkSms(allPhones, values.message)
|
||
if (result.success) {
|
||
toast.success(result.message)
|
||
form.reset({
|
||
manualNumbers: "",
|
||
message: "",
|
||
selectedCustomers: []
|
||
})
|
||
} else {
|
||
toast.error(result.error || "SMS gönderilirken hata oluştu")
|
||
}
|
||
} catch {
|
||
toast.error("Bir hata oluştu")
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const watchedSelected = form.watch("selectedCustomers") || []
|
||
|
||
return (
|
||
<div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
|
||
<h2 className="text-2xl md:text-3xl font-bold tracking-tight">SMS Gönderimi</h2>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<Card className="md:col-span-2 lg:col-span-1">
|
||
<CardHeader>
|
||
<CardTitle>Mesaj Bilgileri</CardTitle>
|
||
<CardDescription>
|
||
Toplu veya tekil SMS gönderin. (Türkçe karakter desteklenir)
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<form id="sms-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||
{/* Templates Section */}
|
||
<div className="flex items-end gap-2">
|
||
<div className="flex-1 space-y-2">
|
||
<Label>Hazır Şablonlar</Label>
|
||
<Select onValueChange={handleSelectTemplate}>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="Şablon seçin..." />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{templates.map(t => (
|
||
<SelectItem key={t.id} value={t.id}>{t.title}</SelectItem>
|
||
))}
|
||
{templates.length === 0 && <div className="p-2 text-sm text-muted-foreground">Henüz şablon yok</div>}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<Dialog open={isTemplateModalOpen} onOpenChange={setIsTemplateModalOpen}>
|
||
<DialogTrigger asChild>
|
||
<Button type="button" variant="outline" size="icon">
|
||
<Save className="h-4 w-4" />
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>Yeni SMS Şablonu</DialogTitle>
|
||
<DialogDescription>
|
||
Sık kullandığınız mesajları şablon olarak kaydedin.
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-4">
|
||
<div className="space-y-2">
|
||
<Label>Şablon Adı</Label>
|
||
<Input
|
||
placeholder="Örn: Bayram Kutlaması"
|
||
value={newTemplateTitle}
|
||
onChange={e => setNewTemplateTitle(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>Mesaj İçeriği</Label>
|
||
<Textarea
|
||
placeholder="Mesajınız..."
|
||
value={newTemplateMessage}
|
||
onChange={e => setNewTemplateMessage(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
{templates.length > 0 && (
|
||
<div className="pt-4 border-t">
|
||
<h4 className="text-sm font-medium mb-2">Kayıtlı Şablonlar</h4>
|
||
<ScrollArea className="h-32 rounded border p-2">
|
||
{templates.map(t => (
|
||
<div key={t.id} className="flex items-center justify-between text-sm py-1">
|
||
<span>{t.title}</span>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
className="h-6 w-6 p-0 text-red-500"
|
||
onClick={() => handleDeleteTemplate(t.id)}
|
||
>
|
||
<Trash2 className="h-3 w-3" />
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</ScrollArea>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<DialogFooter>
|
||
<Button type="button" variant="outline" onClick={() => setIsTemplateModalOpen(false)}>İptal</Button>
|
||
<Button type="button" onClick={handleSaveTemplate} disabled={templateLoading}>Kaydet</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<FormLabel label="Gönderilecek Mesaj" />
|
||
<Textarea
|
||
className="min-h-[120px]"
|
||
placeholder="Mesajınızı buraya yazın..."
|
||
{...form.register("message")}
|
||
/>
|
||
<div className="flex justify-between text-xs text-muted-foreground">
|
||
<span>Türkçe karakterler otomatik desteklenir.</span>
|
||
<span>{form.watch("message")?.length || 0} / 900</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<Label>Manuel Numaralar</Label>
|
||
<Button
|
||
type="button"
|
||
variant="default"
|
||
onClick={handleNativeContactPicker}
|
||
>
|
||
<Smartphone className="mr-2 h-4 w-4" />
|
||
Telefondan Seç
|
||
</Button>
|
||
</div>
|
||
<Textarea
|
||
placeholder="5551234567 (Her satıra bir numara)"
|
||
className="min-h-[80px]"
|
||
{...form.register("manualNumbers")}
|
||
/>
|
||
</div>
|
||
|
||
<div className="pt-2">
|
||
<div className="p-4 bg-slate-50 dark:bg-slate-900 rounded-md">
|
||
<h4 className="font-semibold mb-2">Özet</h4>
|
||
<ul className="list-disc list-inside text-sm">
|
||
<li>Manuel: {(form.watch("manualNumbers")?.split(/[,\n]/).filter(x => x.trim()).length || 0)} Kişi</li>
|
||
<li>Seçili Müşteri: {watchedSelected.length} Kişi</li>
|
||
<li className="font-bold mt-1">Toplam: {(form.watch("manualNumbers")?.split(/[,\n]/).filter(x => x.trim()).length || 0) + watchedSelected.length} Kişi</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</CardContent>
|
||
<CardFooter>
|
||
<Button form="sms-form" type="submit" disabled={loading} className="w-full">
|
||
{loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Send className="mr-2 h-4 w-4" />}
|
||
Gönderimi Başlat
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
|
||
{/* Contact Picker Section */}
|
||
<Card className="md:col-span-2 lg:col-span-1 h-fit">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center justify-between">
|
||
<span>Müşteri Rehberi</span>
|
||
<div className="flex gap-2">
|
||
<Dialog open={isContactModalOpen} onOpenChange={setIsContactModalOpen}>
|
||
<DialogTrigger asChild>
|
||
<Button variant="outline" size="sm">
|
||
<BookOpen className="mr-2 h-4 w-4" />
|
||
Rehberi Aç
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent className="max-w-2xl h-[80vh] flex flex-col">
|
||
<DialogHeader>
|
||
<DialogTitle>Müşteri Seçimi</DialogTitle>
|
||
<DialogDescription>
|
||
Listeden SMS göndermek istediğiniz müşterileri seçin.
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="flex items-center space-x-2 py-4">
|
||
<Input
|
||
placeholder="İsim veya telefon ile ara..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex gap-2 mb-2">
|
||
<Button size="sm" variant="outline" onClick={selectAllFiltered}>Görünenleri Seç</Button>
|
||
<Button size="sm" variant="ghost" onClick={deselectAll}>Temizle</Button>
|
||
</div>
|
||
|
||
<ScrollArea className="flex-1 pr-4">
|
||
<div className="space-y-2">
|
||
{filteredCustomers.length === 0 && <p className="text-center text-muted-foreground py-4">Sonuç bulunamadı.</p>}
|
||
{filteredCustomers.map((customer) => (
|
||
<div
|
||
key={customer.id}
|
||
className="flex items-center space-x-3 p-3 rounded-lg border hover:bg-slate-50 dark:hover:bg-slate-900 cursor-pointer transition-colors"
|
||
onClick={() => toggleCustomerSelection(customer.phone || "")}
|
||
>
|
||
<Checkbox
|
||
checked={watchedSelected.includes(customer.phone || "")}
|
||
onCheckedChange={() => { }} // Handle by parent div click
|
||
id={`modal-customer-${customer.id}`}
|
||
/>
|
||
<div className="flex-1">
|
||
<div className="font-medium">{customer.full_name}</div>
|
||
<div className="text-sm text-muted-foreground">{customer.phone}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</ScrollArea>
|
||
|
||
<DialogFooter className="mt-4">
|
||
<div className="flex items-center justify-between w-full">
|
||
<span className="text-sm text-muted-foreground">
|
||
{watchedSelected.length} kişi seçildi
|
||
</span>
|
||
<Button onClick={() => setIsContactModalOpen(false)}>Tamam</Button>
|
||
</div>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
</CardTitle>
|
||
<CardDescription>
|
||
Hızlı seçim veya detaylı arama yapın.
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<Input
|
||
placeholder="Hızlı ara..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
/>
|
||
<ScrollArea className="h-[400px] w-full pr-4 border rounded-md p-2">
|
||
<div className="space-y-2">
|
||
{filteredCustomers.map((customer) => (
|
||
<div
|
||
key={customer.id}
|
||
className="flex items-center space-x-3 p-2 rounded hover:bg-slate-50 dark:hover:bg-slate-900 cursor-pointer"
|
||
onClick={() => toggleCustomerSelection(customer.phone || "")}
|
||
>
|
||
<Checkbox
|
||
checked={watchedSelected.includes(customer.phone || "")}
|
||
id={`list-customer-${customer.id}`}
|
||
className="mt-0.5"
|
||
/>
|
||
<div className="grid gap-0.5 leading-none">
|
||
<label
|
||
htmlFor={`list-customer-${customer.id}`}
|
||
className="font-medium cursor-pointer"
|
||
>
|
||
{customer.full_name}
|
||
</label>
|
||
<p className="text-xs text-muted-foreground">
|
||
{customer.phone || "Telefon Yok"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
{filteredCustomers.length === 0 && (
|
||
<p className="text-sm text-muted-foreground text-center py-2">Sonuç yok.</p>
|
||
)}
|
||
</div>
|
||
</ScrollArea>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function FormLabel({ label }: { label: string }) {
|
||
return <Label>{label}</Label>
|
||
}
|