337 lines
14 KiB
JavaScript
337 lines
14 KiB
JavaScript
/**
|
||
* @file SmsCityRulesPanel.jsx
|
||
* @description Управление SMS-отправкой по городам.
|
||
* Админ может:
|
||
* - Включить/выключить SMS для города × кампания (постоянно)
|
||
* - Указать период (с/по дату) — временно
|
||
* - Добавить комментарий
|
||
* - «Все города» (*) или «Все кампании» (*) — массовое правило
|
||
*/
|
||
import React, { useState, useEffect, useCallback } from "react";
|
||
import { Panel } from "../UI/Panel";
|
||
import { supabase } from "../../supabaseClient";
|
||
import { CRIMEAN_CITIES } from "../../constants/cities.js";
|
||
|
||
const CAMPAIGN_LABELS = {
|
||
first_sms: "1-е SMS",
|
||
second_sms: "2-е SMS",
|
||
paid_storage: "Платное хранение",
|
||
"*": "Все кампании",
|
||
};
|
||
|
||
const CITY_ALL = "*";
|
||
|
||
export const SmsCityRulesPanel = () => {
|
||
const [rules, setRules] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [showForm, setShowForm] = useState(false);
|
||
const [saving, setSaving] = useState(false);
|
||
const [message, setMessage] = useState("");
|
||
|
||
// Form state
|
||
const [formCity, setFormCity] = useState("Ялта");
|
||
const [formCampaign, setFormCampaign] = useState("*");
|
||
const [formEnabled, setFormEnabled] = useState(false);
|
||
const [formFrom, setFormFrom] = useState("");
|
||
const [formUntil, setFormUntil] = useState("");
|
||
const [formNote, setFormNote] = useState("");
|
||
|
||
const fetchRules = useCallback(async () => {
|
||
setLoading(true);
|
||
try {
|
||
const { data, error } = await supabase
|
||
.from("sms_city_rules")
|
||
.select("*")
|
||
.order("city", { ascending: true })
|
||
.order("campaign_type", { ascending: true });
|
||
if (error) throw error;
|
||
setRules(data || []);
|
||
} catch (e) {
|
||
console.error("fetch sms_city_rules error", e);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => { fetchRules(); }, [fetchRules]);
|
||
|
||
const handleSave = async () => {
|
||
setSaving(true);
|
||
try {
|
||
const { error } = await supabase.from("sms_city_rules").insert({
|
||
city: formCity,
|
||
campaign_type: formCampaign,
|
||
enabled: formEnabled,
|
||
valid_from: formFrom || null,
|
||
valid_until: formUntil || null,
|
||
note: formNote || "",
|
||
});
|
||
if (error) throw error;
|
||
setShowForm(false);
|
||
setFormNote("");
|
||
setFormFrom("");
|
||
setFormUntil("");
|
||
setMessage("✅ Правило добавлено");
|
||
fetchRules();
|
||
setTimeout(() => setMessage(""), 3000);
|
||
} catch (e) {
|
||
setMessage("❌ Ошибка: " + e.message);
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleToggle = async (rule) => {
|
||
try {
|
||
const { error } = await supabase
|
||
.from("sms_city_rules")
|
||
.update({ enabled: !rule.enabled })
|
||
.eq("id", rule.id);
|
||
if (error) throw error;
|
||
fetchRules();
|
||
} catch (e) {
|
||
console.error("toggle error", e);
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (id) => {
|
||
try {
|
||
const { error } = await supabase
|
||
.from("sms_city_rules")
|
||
.delete()
|
||
.eq("id", id);
|
||
if (error) throw error;
|
||
fetchRules();
|
||
} catch (e) {
|
||
console.error("delete error", e);
|
||
}
|
||
};
|
||
|
||
const fmtDate = (d) => {
|
||
if (!d) return "—";
|
||
try {
|
||
return new Date(d).toLocaleDateString("ru-RU", { day: "2-digit", month: "short", year: "numeric" });
|
||
} catch { return d; }
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* Header */}
|
||
<Panel className="p-5 space-y-3">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-xl">🏙️</span>
|
||
<div>
|
||
<h2 className="text-sm font-semibold uppercase tracking-[0.16em] text-[var(--color-text)]">
|
||
SMS по городам
|
||
</h2>
|
||
<p className="text-xs text-[var(--color-text-muted)] mt-1">
|
||
Управление отправкой SMS по городам и кампаниям. Выключенное правило = SMS не отправляется.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowForm(!showForm)}
|
||
className="rounded-xl bg-[var(--color-accent)] px-4 py-2 text-xs font-semibold text-white transition hover:opacity-90"
|
||
>
|
||
{showForm ? "Отмена" : "+ Правило"}
|
||
</button>
|
||
</div>
|
||
{message && <span className="text-sm text-[var(--color-text-muted)]">{message}</span>}
|
||
</Panel>
|
||
|
||
{/* Add rule form */}
|
||
{showForm && (
|
||
<Panel className="p-5 space-y-4">
|
||
<h3 className="text-sm font-semibold text-[var(--color-text)]">Новое правило</h3>
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
{/* City */}
|
||
<div className="space-y-1">
|
||
<label className="text-xs font-medium text-[var(--color-text-muted)]">Город</label>
|
||
<select
|
||
value={formCity}
|
||
onChange={(e) => setFormCity(e.target.value)}
|
||
className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)]"
|
||
>
|
||
<option value={CITY_ALL}>⭐ Все города</option>
|
||
{CRIMEAN_CITIES.map((c) => (
|
||
<option key={c} value={c}>{c}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
{/* Campaign */}
|
||
<div className="space-y-1">
|
||
<label className="text-xs font-medium text-[var(--color-text-muted)]">Кампания</label>
|
||
<select
|
||
value={formCampaign}
|
||
onChange={(e) => setFormCampaign(e.target.value)}
|
||
className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)]"
|
||
>
|
||
<option value="*">⭐ Все кампании</option>
|
||
<option value="first_sms">1-е SMS</option>
|
||
<option value="second_sms">2-е SMS</option>
|
||
<option value="paid_storage">Платное хранение</option>
|
||
</select>
|
||
</div>
|
||
{/* Enabled toggle */}
|
||
<div className="space-y-1">
|
||
<label className="text-xs font-medium text-[var(--color-text-muted)]">Статус</label>
|
||
<div className="flex gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setFormEnabled(true)}
|
||
className={["rounded-xl border px-4 py-2 text-sm font-medium transition",
|
||
formEnabled ? "border-[#22c55e] bg-[rgba(34,197,94,0.12)] text-[#22c55e]" : "border-[var(--color-border)] text-[var(--color-text-muted)]"].join(" ")}
|
||
>
|
||
✅ Включить
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setFormEnabled(false)}
|
||
className={["rounded-xl border px-4 py-2 text-sm font-medium transition",
|
||
!formEnabled ? "border-[#ef4444] bg-[rgba(239,68,68,0.12)] text-[#ef4444]" : "border-[var(--color-border)] text-[var(--color-text-muted)]"].join(" ")}
|
||
>
|
||
❌ Выключить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{/* Period */}
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div className="space-y-1">
|
||
<label className="text-xs font-medium text-[var(--color-text-muted)]">С даты</label>
|
||
<input
|
||
type="date"
|
||
value={formFrom}
|
||
onChange={(e) => setFormFrom(e.target.value)}
|
||
className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)]"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<label className="text-xs font-medium text-[var(--color-text-muted)]">По дату</label>
|
||
<input
|
||
type="date"
|
||
value={formUntil}
|
||
onChange={(e) => setFormUntil(e.target.value)}
|
||
className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)]"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* Note */}
|
||
<div className="space-y-1">
|
||
<label className="text-xs font-medium text-[var(--color-text-muted)]">Комментарий</label>
|
||
<input
|
||
type="text"
|
||
value={formNote}
|
||
onChange={(e) => setFormNote(e.target.value)}
|
||
placeholder="Например: Ялта временно отключена"
|
||
className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)]"
|
||
/>
|
||
</div>
|
||
<p className="text-xs text-[var(--color-text-muted)]">
|
||
Пустые даты = правило действует постоянно. Указав даты, можно временно отключить SMS на период.
|
||
</p>
|
||
<button
|
||
type="button"
|
||
disabled={saving}
|
||
onClick={handleSave}
|
||
className="rounded-xl bg-[var(--color-accent)] px-5 py-2.5 text-sm font-semibold text-white transition hover:opacity-90 disabled:opacity-40"
|
||
>
|
||
{saving ? "Сохранение..." : "Сохранить правило"}
|
||
</button>
|
||
</Panel>
|
||
)}
|
||
|
||
{/* Rules table */}
|
||
<Panel className="p-5 space-y-3">
|
||
<h2 className="text-sm font-semibold uppercase tracking-[0.16em] text-[var(--color-text)]">
|
||
Правила ({rules.length})
|
||
</h2>
|
||
{loading ? (
|
||
<p className="text-sm text-[var(--color-text-muted)]">Загрузка...</p>
|
||
) : rules.length === 0 ? (
|
||
<div className="rounded-xl border border-dashed border-[var(--color-border)] p-6 text-center">
|
||
<p className="text-sm text-[var(--color-text-muted)]">
|
||
Правил пока нет. SMS отправляются во все города.
|
||
</p>
|
||
<p className="text-xs text-[var(--color-text-muted)] mt-1">
|
||
Нажмите «+ Правило» чтобы отключить SMS для конкретного города.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{rules.map((rule) => {
|
||
const isActive = rule.enabled &&
|
||
(!rule.valid_from || new Date(rule.valid_from) <= new Date()) &&
|
||
(!rule.valid_until || new Date(rule.valid_until) >= new Date());
|
||
return (
|
||
<div
|
||
key={rule.id}
|
||
className="flex items-center justify-between gap-3 rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] p-4"
|
||
>
|
||
<div className="flex items-center gap-3 flex-1">
|
||
{/* Toggle */}
|
||
<button
|
||
type="button"
|
||
onClick={() => handleToggle(rule)}
|
||
className={[
|
||
"relative h-6 w-11 rounded-full transition shrink-0",
|
||
rule.enabled ? "bg-[#22c55e]" : "bg-[var(--color-border)]"
|
||
].join(" ")}
|
||
>
|
||
<span className={[
|
||
"absolute top-0.5 h-5 w-5 rounded-full bg-white transition-all",
|
||
rule.enabled ? "left-[22px]" : "left-0.5"
|
||
].join(" ")} />
|
||
</button>
|
||
{/* Info */}
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<span className="text-sm font-medium text-[var(--color-text)]">
|
||
{rule.city === CITY_ALL ? "⭐ Все города" : rule.city}
|
||
</span>
|
||
<span className="text-xs text-[var(--color-text-muted)]">·</span>
|
||
<span className="text-xs font-medium text-[var(--color-text-muted)]">
|
||
{CAMPAIGN_LABELS[rule.campaign_type] || rule.campaign_type}
|
||
</span>
|
||
<span
|
||
className="rounded-lg px-2 py-0.5 text-[10px] font-semibold uppercase"
|
||
style={{
|
||
backgroundColor: isActive ? "rgba(34,197,94,0.12)" : "rgba(239,68,68,0.12)",
|
||
color: isActive ? "#22c55e" : "#ef4444",
|
||
}}
|
||
>
|
||
{isActive ? "Активно" : rule.enabled ? "Запланировано" : "Выключено"}
|
||
</span>
|
||
</div>
|
||
{(rule.valid_from || rule.valid_until) && (
|
||
<div className="text-xs text-[var(--color-text-muted)] mt-1">
|
||
📅 {fmtDate(rule.valid_from)} — {fmtDate(rule.valid_until)}
|
||
</div>
|
||
)}
|
||
{rule.note && (
|
||
<div className="text-xs text-[var(--color-text-muted)] mt-0.5">
|
||
💬 {rule.note}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{/* Delete */}
|
||
<button
|
||
type="button"
|
||
onClick={() => handleDelete(rule.id)}
|
||
className="rounded-lg p-1.5 text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)] hover:text-[var(--color-danger)] transition shrink-0"
|
||
title="Удалить правило"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</Panel>
|
||
</div>
|
||
);
|
||
}; |