feat: Add targeted notices to Condopay
Implements the ability to send notices to specific families within a condominium, rather than broadcasting to all. This includes: - Updating the `Notice` type with `targetFamilyIds`. - Adding a `target_families` JSON column to the `notices` table in the database, with a migration for existing installations. - Modifying the API to handle the new `targetFamilyIds` field during notice creation and retrieval. - Updating the UI to allow users to select specific families for notices.
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { CondoService } from '../services/mockDb';
|
||||
import { AppSettings, Family, User, AlertDefinition, Condo, Notice, NoticeIconType, NoticeRead } from '../types';
|
||||
import { Save, Building, Coins, Plus, Pencil, Trash2, X, CalendarCheck, AlertTriangle, User as UserIcon, Server, Bell, Clock, FileText, Lock, Megaphone, CheckCircle2, Info, Hammer, Link as LinkIcon, Eye, Calendar, List, UserCog, Mail, Power, MapPin, CreditCard, ToggleLeft, ToggleRight, LayoutGrid, PieChart } from 'lucide-react';
|
||||
import { Save, Building, Coins, Plus, Pencil, Trash2, X, CalendarCheck, AlertTriangle, User as UserIcon, Server, Bell, Clock, FileText, Lock, Megaphone, CheckCircle2, Info, Hammer, Link as LinkIcon, Eye, Calendar, List, UserCog, Mail, Power, MapPin, CreditCard, ToggleLeft, ToggleRight, LayoutGrid, PieChart, Users } from 'lucide-react';
|
||||
|
||||
export const SettingsPage: React.FC = () => {
|
||||
const currentUser = CondoService.getCurrentUser();
|
||||
@@ -96,6 +96,7 @@ export const SettingsPage: React.FC = () => {
|
||||
const [notices, setNotices] = useState<Notice[]>([]);
|
||||
const [showNoticeModal, setShowNoticeModal] = useState(false);
|
||||
const [editingNotice, setEditingNotice] = useState<Notice | null>(null);
|
||||
const [noticeTargetMode, setNoticeTargetMode] = useState<'all' | 'specific'>('all');
|
||||
const [noticeForm, setNoticeForm] = useState<{
|
||||
title: string;
|
||||
content: string;
|
||||
@@ -103,13 +104,15 @@ export const SettingsPage: React.FC = () => {
|
||||
link: string;
|
||||
condoId: string;
|
||||
active: boolean;
|
||||
targetFamilyIds: string[];
|
||||
}>({
|
||||
title: '',
|
||||
content: '',
|
||||
type: 'info',
|
||||
link: '',
|
||||
condoId: '',
|
||||
active: true
|
||||
active: true,
|
||||
targetFamilyIds: []
|
||||
});
|
||||
const [noticeReadStats, setNoticeReadStats] = useState<Record<string, NoticeRead[]>>({});
|
||||
|
||||
@@ -421,12 +424,23 @@ export const SettingsPage: React.FC = () => {
|
||||
// --- Notice Handlers ---
|
||||
const openAddNoticeModal = () => {
|
||||
setEditingNotice(null);
|
||||
setNoticeForm({ title: '', content: '', type: 'info', link: '', condoId: activeCondo?.id || '', active: true });
|
||||
setNoticeTargetMode('all');
|
||||
setNoticeForm({ title: '', content: '', type: 'info', link: '', condoId: activeCondo?.id || '', active: true, targetFamilyIds: [] });
|
||||
setShowNoticeModal(true);
|
||||
};
|
||||
const openEditNoticeModal = (n: Notice) => {
|
||||
setEditingNotice(n);
|
||||
setNoticeForm({ title: n.title, content: n.content, type: n.type, link: n.link || '', condoId: n.condoId, active: n.active });
|
||||
const isTargeted = n.targetFamilyIds && n.targetFamilyIds.length > 0;
|
||||
setNoticeTargetMode(isTargeted ? 'specific' : 'all');
|
||||
setNoticeForm({
|
||||
title: n.title,
|
||||
content: n.content,
|
||||
type: n.type,
|
||||
link: n.link || '',
|
||||
condoId: n.condoId,
|
||||
active: n.active,
|
||||
targetFamilyIds: n.targetFamilyIds || []
|
||||
});
|
||||
setShowNoticeModal(true);
|
||||
};
|
||||
const handleNoticeSubmit = async (e: React.FormEvent) => {
|
||||
@@ -435,6 +449,7 @@ export const SettingsPage: React.FC = () => {
|
||||
const payload: Notice = {
|
||||
id: editingNotice ? editingNotice.id : '',
|
||||
...noticeForm,
|
||||
targetFamilyIds: noticeTargetMode === 'all' ? [] : noticeForm.targetFamilyIds,
|
||||
date: editingNotice ? editingNotice.date : new Date().toISOString()
|
||||
};
|
||||
await CondoService.saveNotice(payload);
|
||||
@@ -456,6 +471,17 @@ export const SettingsPage: React.FC = () => {
|
||||
setNotices(notices.map(n => n.id === notice.id ? updated : n));
|
||||
} catch(e) { console.error(e); }
|
||||
};
|
||||
|
||||
const toggleNoticeFamilyTarget = (familyId: string) => {
|
||||
setNoticeForm(prev => {
|
||||
const current = prev.targetFamilyIds;
|
||||
if (current.includes(familyId)) {
|
||||
return { ...prev, targetFamilyIds: current.filter(id => id !== familyId) };
|
||||
} else {
|
||||
return { ...prev, targetFamilyIds: [...current, familyId] };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const openReadDetails = (noticeId: string) => {
|
||||
setSelectedNoticeId(noticeId);
|
||||
@@ -841,18 +867,32 @@ export const SettingsPage: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{notices.map(notice => (
|
||||
<div key={notice.id} className={`bg-white p-5 rounded-xl border shadow-sm relative transition-all ${notice.active ? 'border-slate-200' : 'border-slate-100 opacity-60 bg-slate-50'}`}>
|
||||
{notices.map(notice => {
|
||||
const isTargeted = notice.targetFamilyIds && notice.targetFamilyIds.length > 0;
|
||||
return (
|
||||
<div key={notice.id} className={`bg-white p-5 rounded-xl border shadow-sm relative transition-all ${notice.active ? 'border-slate-200' : 'border-slate-100 opacity-60 bg-slate-50'}`}>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`p-2 rounded-lg ${notice.type === 'warning' ? 'bg-amber-100 text-amber-600' : notice.type === 'maintenance' ? 'bg-orange-100 text-orange-600' : 'bg-blue-100 text-blue-600'}`}>
|
||||
{notice.type === 'warning' ? <AlertTriangle className="w-5 h-5"/> : notice.type === 'maintenance' ? <Hammer className="w-5 h-5"/> : notice.type === 'event' ? <Calendar className="w-5 h-5"/> : <Info className="w-5 h-5"/>}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-slate-800">{notice.title}</h4>
|
||||
<h4 className="font-bold text-slate-800 flex items-center gap-2">
|
||||
{notice.title}
|
||||
{isTargeted && (
|
||||
<span className="text-[10px] bg-slate-100 text-slate-500 border border-slate-200 px-2 py-0.5 rounded-full uppercase flex items-center gap-1">
|
||||
<Users className="w-3 h-3" /> Privato
|
||||
</span>
|
||||
)}
|
||||
</h4>
|
||||
<p className="text-xs text-slate-400 font-medium uppercase tracking-wide mb-1">{getCondoName(notice.condoId)} • {new Date(notice.date).toLocaleDateString()}</p>
|
||||
<p className="text-sm text-slate-600 line-clamp-2">{notice.content}</p>
|
||||
{notice.link && <a href={notice.link} className="text-xs text-blue-600 underline mt-1 flex items-center gap-1"><LinkIcon className="w-3 h-3"/> Allegato</a>}
|
||||
{isTargeted && (
|
||||
<p className="text-[10px] text-slate-400 mt-2">
|
||||
Visibile a: {notice.targetFamilyIds!.length} famiglie
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-3">
|
||||
@@ -881,7 +921,8 @@ export const SettingsPage: React.FC = () => {
|
||||
<button onClick={() => handleDeleteNotice(notice.id)} className="text-sm text-red-600 font-medium px-3 py-1 hover:bg-red-50 rounded">Elimina</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
{notices.length === 0 && <div className="text-center p-8 text-slate-400">Nessun avviso pubblicato.</div>}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1017,44 +1058,96 @@ export const SettingsPage: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* NOTICE MODAL (Existing) */}
|
||||
{/* NOTICE MODAL (Updated with Target Selector) */}
|
||||
{showNoticeModal && (
|
||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6 animate-in fade-in zoom-in duration-200">
|
||||
<h3 className="font-bold text-lg mb-4 text-slate-800">{editingNotice ? 'Modifica Avviso' : 'Nuovo Avviso'}</h3>
|
||||
<form onSubmit={handleNoticeSubmit} className="space-y-4">
|
||||
<input className="w-full border p-2.5 rounded-lg text-slate-700" placeholder="Titolo" value={noticeForm.title} onChange={e => setNoticeForm({...noticeForm, title: e.target.value})} required />
|
||||
<textarea className="w-full border p-2.5 rounded-lg text-slate-700 h-24" placeholder="Contenuto avviso..." value={noticeForm.content} onChange={e => setNoticeForm({...noticeForm, content: e.target.value})} required />
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 font-bold uppercase mb-1 block">Tipo</label>
|
||||
<select className="w-full border p-2.5 rounded-lg text-slate-700 bg-white" value={noticeForm.type} onChange={e => setNoticeForm({...noticeForm, type: e.target.value as any})}>
|
||||
<option value="info">Info</option>
|
||||
<option value="warning">Avviso</option>
|
||||
<option value="maintenance">Manutenzione</option>
|
||||
<option value="event">Evento</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 font-bold uppercase mb-1 block">Stato</label>
|
||||
<select className="w-full border p-2.5 rounded-lg text-slate-700 bg-white" value={noticeForm.active ? 'true' : 'false'} onChange={e => setNoticeForm({...noticeForm, active: e.target.value === 'true'})}>
|
||||
<option value="true">Attivo</option>
|
||||
<option value="false">Bozza / Nascosto</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6 animate-in fade-in zoom-in duration-200 flex flex-col max-h-[90vh]">
|
||||
<h3 className="font-bold text-lg mb-4 text-slate-800 flex-shrink-0">{editingNotice ? 'Modifica Avviso' : 'Nuovo Avviso'}</h3>
|
||||
<div className="overflow-y-auto flex-1 pr-2">
|
||||
<form id="noticeForm" onSubmit={handleNoticeSubmit} className="space-y-4">
|
||||
<input className="w-full border p-2.5 rounded-lg text-slate-700" placeholder="Titolo" value={noticeForm.title} onChange={e => setNoticeForm({...noticeForm, title: e.target.value})} required />
|
||||
<textarea className="w-full border p-2.5 rounded-lg text-slate-700 h-24" placeholder="Contenuto avviso..." value={noticeForm.content} onChange={e => setNoticeForm({...noticeForm, content: e.target.value})} required />
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 font-bold uppercase mb-1 block">Tipo</label>
|
||||
<select className="w-full border p-2.5 rounded-lg text-slate-700 bg-white" value={noticeForm.type} onChange={e => setNoticeForm({...noticeForm, type: e.target.value as any})}>
|
||||
<option value="info">Info</option>
|
||||
<option value="warning">Avviso</option>
|
||||
<option value="maintenance">Manutenzione</option>
|
||||
<option value="event">Evento</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 font-bold uppercase mb-1 block">Stato</label>
|
||||
<select className="w-full border p-2.5 rounded-lg text-slate-700 bg-white" value={noticeForm.active ? 'true' : 'false'} onChange={e => setNoticeForm({...noticeForm, active: e.target.value === 'true'})}>
|
||||
<option value="true">Attivo</option>
|
||||
<option value="false">Bozza / Nascosto</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 font-bold uppercase mb-1 block">Link Esterno (Opzionale)</label>
|
||||
<input className="w-full border p-2.5 rounded-lg text-slate-700" placeholder="https://..." value={noticeForm.link} onChange={e => setNoticeForm({...noticeForm, link: e.target.value})} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 font-bold uppercase mb-2 block">A chi è rivolto?</label>
|
||||
<div className="flex gap-4 mb-3">
|
||||
<label className="flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="targetMode"
|
||||
value="all"
|
||||
checked={noticeTargetMode === 'all'}
|
||||
onChange={() => setNoticeTargetMode('all')}
|
||||
className="w-4 h-4 text-blue-600"
|
||||
/>
|
||||
Tutti i condomini
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="targetMode"
|
||||
value="specific"
|
||||
checked={noticeTargetMode === 'specific'}
|
||||
onChange={() => setNoticeTargetMode('specific')}
|
||||
className="w-4 h-4 text-blue-600"
|
||||
/>
|
||||
Seleziona Famiglie
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<button type="button" onClick={() => setShowNoticeModal(false)} className="flex-1 border p-2.5 rounded-lg text-slate-600 hover:bg-slate-50">Annulla</button>
|
||||
<button type="submit" className="flex-1 bg-blue-600 text-white p-2.5 rounded-lg hover:bg-blue-700">Salva</button>
|
||||
</div>
|
||||
</form>
|
||||
{/* Family Selector */}
|
||||
{noticeTargetMode === 'specific' && (
|
||||
<div className="border border-slate-200 rounded-lg p-2 max-h-40 overflow-y-auto bg-slate-50">
|
||||
{families.length === 0 ? (
|
||||
<p className="text-xs text-slate-400 text-center py-2">Nessuna famiglia disponibile.</p>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{families.map(fam => (
|
||||
<label key={fam.id} className="flex items-center gap-2 p-1.5 hover:bg-white rounded cursor-pointer transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={noticeForm.targetFamilyIds.includes(fam.id)}
|
||||
onChange={() => toggleNoticeFamilyTarget(fam.id)}
|
||||
className="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm text-slate-700">{fam.name} <span className="text-slate-400 text-xs">(Int. {fam.unitNumber})</span></span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 font-bold uppercase mb-1 block">Link Esterno (Opzionale)</label>
|
||||
<input className="w-full border p-2.5 rounded-lg text-slate-700" placeholder="https://..." value={noticeForm.link} onChange={e => setNoticeForm({...noticeForm, link: e.target.value})} />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="flex gap-2 pt-4 border-t border-slate-100 flex-shrink-0">
|
||||
<button type="button" onClick={() => setShowNoticeModal(false)} className="flex-1 border p-2.5 rounded-lg text-slate-600 hover:bg-slate-50">Annulla</button>
|
||||
<button type="submit" form="noticeForm" className="flex-1 bg-blue-600 text-white p-2.5 rounded-lg hover:bg-blue-700">Salva</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user