866 lines
74 KiB
TypeScript
866 lines
74 KiB
TypeScript
|
|
import React, { useEffect, useState } from 'react';
|
|
import { CondoService } from '../services/mockDb';
|
|
import { AppSettings, Family, User, AlertDefinition, Condo, Notice, NoticeIconType, NoticeRead, BrandingConfig, StorageConfig } 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, EyeOff, Calendar, List, UserCog, Mail, Power, MapPin, CreditCard,
|
|
ToggleLeft, ToggleRight, LayoutGrid, PieChart, Users, Send, Cloud, HardDrive, ChevronRight, Palette, Image as ImageIcon, Upload,
|
|
Phone, Hash, Type, Globe, Key, Database, AlignLeft, Euro
|
|
} from 'lucide-react';
|
|
|
|
const COLOR_MAP: Record<string, string> = {
|
|
blue: '#2563eb',
|
|
purple: '#9333ea',
|
|
green: '#16a34a',
|
|
red: '#dc2626',
|
|
orange: '#ea580c',
|
|
slate: '#475569'
|
|
};
|
|
|
|
export const SettingsPage: React.FC = () => {
|
|
const currentUser = CondoService.getCurrentUser();
|
|
const isSuperAdmin = currentUser?.role === 'admin';
|
|
const isPrivileged = currentUser?.role === 'admin' || currentUser?.role === 'poweruser';
|
|
|
|
type TabType = 'profile' | 'features' | 'branding' | 'general' | 'storage' | 'condos' | 'families' | 'users' | 'notices' | 'alerts';
|
|
|
|
const [activeTab, setActiveTab] = useState<TabType>(isPrivileged ? 'general' : 'profile');
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Profile Form
|
|
const [profileForm, setProfileForm] = useState({
|
|
name: currentUser?.name || '',
|
|
phone: currentUser?.phone || '',
|
|
password: '',
|
|
receiveAlerts: currentUser?.receiveAlerts ?? true
|
|
});
|
|
const [profileSaving, setProfileSaving] = useState(false);
|
|
const [profileMsg, setProfileMsg] = useState('');
|
|
|
|
// Branding & Features
|
|
const [activeCondo, setActiveCondo] = useState<Condo | undefined>(undefined);
|
|
const [globalSettings, setGlobalSettings] = useState<AppSettings | null>(null);
|
|
const [brandingForm, setBrandingForm] = useState<BrandingConfig>({ appName: 'CondoPay', primaryColor: 'blue', logoUrl: '', loginBackgroundUrl: '' });
|
|
|
|
// Condos List
|
|
const [condos, setCondos] = useState<Condo[]>([]);
|
|
const [showCondoModal, setShowCondoModal] = useState(false);
|
|
const [editingCondo, setEditingCondo] = useState<Condo | null>(null);
|
|
const [condoForm, setCondoForm] = useState<Partial<Condo>>({
|
|
name: '', address: '', streetNumber: '', city: '', province: '', zipCode: '', notes: '', paypalClientId: '', defaultMonthlyQuota: 100, dueDay: 10
|
|
});
|
|
const [showPayPalKey, setShowPayPalKey] = useState(false); // State for PayPal input visibility
|
|
|
|
const [saving, setSaving] = useState(false);
|
|
const [successMsg, setSuccessMsg] = useState('');
|
|
|
|
// Families Management
|
|
const [families, setFamilies] = useState<Family[]>([]);
|
|
const [showFamilyModal, setShowFamilyModal] = useState(false);
|
|
const [editingFamily, setEditingFamily] = useState<Family | null>(null);
|
|
const [familyForm, setFamilyForm] = useState({ name: '', unitNumber: '', stair: '', floor: '', notes: '', contactEmail: '', customMonthlyQuota: '' });
|
|
|
|
// Users Management
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
const [showUserModal, setShowUserModal] = useState(false);
|
|
const [editingUser, setEditingUser] = useState<User | null>(null);
|
|
const [userForm, setUserForm] = useState({ name: '', email: '', password: '', phone: '', role: 'user' as User['role'], familyId: '', receiveAlerts: true });
|
|
|
|
// Alerts & Email Rules
|
|
const [alerts, setAlerts] = useState<AlertDefinition[]>([]);
|
|
const [showAlertModal, setShowAlertModal] = useState(false);
|
|
const [editingAlert, setEditingAlert] = useState<AlertDefinition | null>(null);
|
|
const [alertForm, setAlertForm] = useState<Partial<AlertDefinition>>({ subject: '', body: '', daysOffset: 1, offsetType: 'before_next_month', sendHour: 9, active: true });
|
|
|
|
const [showSmtpModal, setShowSmtpModal] = useState(false);
|
|
const [testingSmtp, setTestingSmtp] = useState(false);
|
|
const [testSmtpMsg, setTestSmtpMsg] = useState('');
|
|
|
|
// Notices (Bacheca)
|
|
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: '', content: '', type: 'info' as NoticeIconType, link: '', condoId: '', active: true, targetFamilyIds: [] as string[] });
|
|
const [noticeReadStats, setNoticeReadStats] = useState<Record<string, NoticeRead[]>>({});
|
|
const [showReadDetailsModal, setShowReadDetailsModal] = useState(false);
|
|
const [selectedNoticeId, setSelectedNoticeId] = useState<string | null>(null);
|
|
|
|
// Cloud Storage Settings
|
|
const [storageForm, setStorageForm] = useState<StorageConfig>({ provider: 'local_db', apiKey: '', apiSecret: '', bucket: '', region: '' });
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const activeC = await CondoService.getActiveCondo();
|
|
const gSettings = await CondoService.getSettings();
|
|
|
|
setActiveCondo(activeC);
|
|
setGlobalSettings(gSettings);
|
|
setBrandingForm(gSettings.branding || { appName: 'CondoPay', primaryColor: 'blue', logoUrl: '', loginBackgroundUrl: '' });
|
|
setStorageForm(gSettings.storageConfig || { provider: 'local_db', apiKey: '', apiSecret: '', bucket: '', region: '' });
|
|
|
|
if (isPrivileged) {
|
|
setCondos(await CondoService.getCondos());
|
|
if (activeC) {
|
|
setFamilies(await CondoService.getFamilies(activeC.id));
|
|
setUsers(await CondoService.getUsers(activeC.id));
|
|
setAlerts(await CondoService.getAlerts(activeC.id));
|
|
const allNotices = await CondoService.getNotices(activeC.id);
|
|
setNotices(allNotices);
|
|
const stats: Record<string, NoticeRead[]> = {};
|
|
for (const n of allNotices) {
|
|
try { stats[n.id] = await CondoService.getNoticeReadStatus(n.id); } catch(e) {}
|
|
}
|
|
setNoticeReadStats(stats);
|
|
}
|
|
}
|
|
} catch(e) { console.error("Error loading settings data", e); } finally { setLoading(false); }
|
|
};
|
|
fetchData();
|
|
}, [isPrivileged]);
|
|
|
|
// --- SUBMIT HANDLERS ---
|
|
const handleProfileSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault(); setProfileSaving(true); setProfileMsg('');
|
|
try { await CondoService.updateProfile(profileForm); setProfileMsg('Profilo aggiornato con successo!'); setTimeout(() => setProfileMsg(''), 3000); setProfileForm(prev => ({ ...prev, password: '' })); } catch (e) { setProfileMsg('Errore aggiornamento profilo'); } finally { setProfileSaving(false); }
|
|
};
|
|
const handleGeneralSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault(); if (!activeCondo) return; setSaving(true); setSuccessMsg('');
|
|
try { await CondoService.saveCondo(activeCondo); setSuccessMsg('Dati condominio aggiornati!'); setTimeout(() => setSuccessMsg(''), 3000); setCondos(await CondoService.getCondos()); } catch (e) { console.error(e); } finally { setSaving(false); }
|
|
};
|
|
const handleFeaturesSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault(); if (!globalSettings) return; setSaving(true);
|
|
try { await CondoService.updateSettings(globalSettings); setSuccessMsg('Configurazione salvata!'); setTimeout(() => { setSuccessMsg(''); window.location.reload(); }, 1500); } catch (e) { console.error(e); } finally { setSaving(false); }
|
|
};
|
|
const handleBrandingSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault(); if (!globalSettings) return; setSaving(true); setSuccessMsg('');
|
|
try {
|
|
const updated = { ...globalSettings, branding: brandingForm };
|
|
await CondoService.updateSettings(updated);
|
|
setGlobalSettings(updated);
|
|
window.dispatchEvent(new Event('branding-updated'));
|
|
setSuccessMsg('Branding salvato!'); setTimeout(() => setSuccessMsg(''), 3000);
|
|
} catch(e) { console.error(e); alert('Errore salvataggio branding'); } finally { setSaving(false); }
|
|
};
|
|
const handleStorageSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault(); if (!globalSettings) return; setSaving(true); setSuccessMsg('');
|
|
try { const updated = { ...globalSettings, storageConfig: storageForm }; await CondoService.updateSettings(updated); setGlobalSettings(updated); setSuccessMsg('Configurazione Storage salvata!'); setTimeout(() => setSuccessMsg(''), 3000); } catch (e) { console.error(e); } finally { setSaving(false); }
|
|
};
|
|
const handleLogoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) { const reader = new FileReader(); reader.onload = (ev) => setBrandingForm(prev => ({...prev, logoUrl: ev.target?.result as string})); reader.readAsDataURL(file); }
|
|
};
|
|
const handleBgUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) { const reader = new FileReader(); reader.onload = (ev) => setBrandingForm(prev => ({...prev, loginBackgroundUrl: ev.target?.result as string})); reader.readAsDataURL(file); }
|
|
};
|
|
|
|
// --- CRUD HELPERS ---
|
|
const openAddCondoModal = () => { setEditingCondo(null); setCondoForm({ name: '', address: '', streetNumber: '', city: '', province: '', zipCode: '', notes: '', paypalClientId: '', defaultMonthlyQuota: 100, dueDay: 10 }); setShowCondoModal(true); };
|
|
const openEditCondoModal = (c: Condo) => { setEditingCondo(c); setCondoForm(c); setShowCondoModal(true); };
|
|
const handleCondoSubmit = async (e: React.FormEvent) => { e.preventDefault(); try { await CondoService.saveCondo({ id: editingCondo?.id || '', ...condoForm } as Condo); setCondos(await CondoService.getCondos()); setShowCondoModal(false); window.dispatchEvent(new Event('condo-updated')); } catch (e) { alert("Errore"); } };
|
|
const handleDeleteCondo = async (id: string) => { if(window.confirm("Eliminare definitivamente il condominio?")) { await CondoService.deleteCondo(id); setCondos(await CondoService.getCondos()); } };
|
|
|
|
const openAddFamilyModal = () => { setEditingFamily(null); setFamilyForm({ name: '', unitNumber: '', stair: '', floor: '', notes: '', contactEmail: '', customMonthlyQuota: '' }); setShowFamilyModal(true); };
|
|
const openEditFamilyModal = (f: Family) => { setEditingFamily(f); setFamilyForm({ name: f.name, unitNumber: f.unitNumber, stair: f.stair || '', floor: f.floor || '', notes: f.notes || '', contactEmail: f.contactEmail || '', customMonthlyQuota: f.customMonthlyQuota?.toString() || '' }); setShowFamilyModal(true); };
|
|
const handleFamilySubmit = async (e: React.FormEvent) => { e.preventDefault(); try { if (editingFamily) { await CondoService.updateFamily({ ...editingFamily, ...familyForm, customMonthlyQuota: familyForm.customMonthlyQuota ? parseFloat(familyForm.customMonthlyQuota) : undefined }); } else { await CondoService.addFamily({ ...familyForm, customMonthlyQuota: familyForm.customMonthlyQuota ? parseFloat(familyForm.customMonthlyQuota) : undefined }); } setFamilies(await CondoService.getFamilies(activeCondo?.id)); setShowFamilyModal(false); } catch (e) { alert("Errore"); } };
|
|
const handleDeleteFamily = async (id: string) => { if (window.confirm("Eliminare la famiglia?")) { await CondoService.deleteFamily(id); setFamilies(await CondoService.getFamilies(activeCondo?.id)); } };
|
|
|
|
const openAddUserModal = () => { setEditingUser(null); setUserForm({ name: '', email: '', password: '', phone: '', role: 'user', familyId: '', receiveAlerts: true }); setShowUserModal(true); };
|
|
const openEditUserModal = (u: User) => { setEditingUser(u); setUserForm({ name: u.name || '', email: u.email, password: '', phone: u.phone || '', role: u.role || 'user', familyId: u.familyId || '', receiveAlerts: u.receiveAlerts ?? true }); setShowUserModal(true); };
|
|
const handleUserSubmit = async (e: React.FormEvent) => { e.preventDefault(); try { if (editingUser) { await CondoService.updateUser(editingUser.id, userForm); } else { await CondoService.createUser(userForm); } setUsers(await CondoService.getUsers(activeCondo?.id)); setShowUserModal(false); } catch (e) { alert("Errore salvataggio utente"); } };
|
|
const handleDeleteUser = async (id: string) => { if(window.confirm("Eliminare questo account utente?")) { await CondoService.deleteUser(id); setUsers(await CondoService.getUsers(activeCondo?.id)); } };
|
|
|
|
const openAddNoticeModal = () => { setEditingNotice(null); setNoticeForm({ title: '', content: '', type: 'info', link: '', condoId: activeCondo?.id || '', active: true, targetFamilyIds: [] }); setNoticeTargetMode('all'); 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, targetFamilyIds: n.targetFamilyIds || [] }); setNoticeTargetMode(n.targetFamilyIds && n.targetFamilyIds.length > 0 ? 'specific' : 'all'); setShowNoticeModal(true); };
|
|
const handleNoticeSubmit = async (e: React.FormEvent) => { e.preventDefault(); try { const payload = { ...noticeForm, targetFamilyIds: noticeTargetMode === 'all' ? [] : noticeForm.targetFamilyIds }; if (editingNotice) { await CondoService.saveNotice({ ...editingNotice, ...payload }); } else { await CondoService.saveNotice(payload as any); } setNotices(await CondoService.getNotices(activeCondo?.id)); setShowNoticeModal(false); } catch (e) { alert("Errore"); } };
|
|
const handleDeleteNotice = async (id: string) => { if(confirm('Eliminare l\'avviso?')) { await CondoService.deleteNotice(id); setNotices(await CondoService.getNotices(activeCondo?.id)); } };
|
|
|
|
const openAddAlertModal = () => { setEditingAlert(null); setAlertForm({ subject: '', body: '', daysOffset: 1, offsetType: 'before_next_month', sendHour: 9, active: true }); setShowAlertModal(true); };
|
|
const openEditAlertModal = (a: AlertDefinition) => { setEditingAlert(a); setAlertForm(a); setShowAlertModal(true); };
|
|
const handleAlertSubmit = async (e: React.FormEvent) => { e.preventDefault(); try { await CondoService.saveAlert({ ...editingAlert, ...alertForm } as AlertDefinition); setAlerts(await CondoService.getAlerts(activeCondo?.id)); setShowAlertModal(false); } catch(e) { alert("Errore"); } };
|
|
const handleDeleteAlert = async (id: string) => { if(window.confirm("Eliminare la regola di avviso?")) { await CondoService.deleteAlert(id); setAlerts(await CondoService.getAlerts(activeCondo?.id)); } };
|
|
|
|
const handleTestSmtp = async (e: React.FormEvent) => {
|
|
e.preventDefault(); if (!globalSettings?.smtpConfig) return; setTestingSmtp(true); setTestSmtpMsg('');
|
|
try { await CondoService.testSmtpConfig(globalSettings.smtpConfig); setTestSmtpMsg('Invio riuscito!'); } catch (e: any) { setTestSmtpMsg('Errore: ' + e.message); } finally { setTestingSmtp(false); }
|
|
};
|
|
|
|
const toggleFeature = (key: keyof AppSettings['features']) => {
|
|
if (!globalSettings) return;
|
|
setGlobalSettings({ ...globalSettings, features: { ...globalSettings.features, [key]: !globalSettings.features[key] } });
|
|
};
|
|
|
|
// --- RENDER HELPERS ---
|
|
const tabs: {id: TabType, label: string, icon: React.ReactNode}[] = [
|
|
{ id: 'profile', label: 'Il Tuo Profilo', icon: <UserIcon className="w-4 h-4"/> },
|
|
];
|
|
if (isSuperAdmin) {
|
|
tabs.push(
|
|
{ id: 'features', label: 'Funzionalità', icon: <LayoutGrid className="w-4 h-4"/> },
|
|
{ id: 'branding', label: 'Personalizzazione', icon: <Palette className="w-4 h-4"/> }
|
|
);
|
|
}
|
|
if (isPrivileged) {
|
|
tabs.push({ id: 'general', label: 'Condominio', icon: <Building className="w-4 h-4"/> });
|
|
if (globalSettings?.features.documents) tabs.push({ id: 'storage', label: 'Cloud Storage', icon: <HardDrive className="w-4 h-4"/> });
|
|
if (globalSettings?.features.multiCondo) tabs.push({ id: 'condos', label: 'Lista Condomini', icon: <List className="w-4 h-4"/> });
|
|
tabs.push(
|
|
{ id: 'families', label: 'Famiglie', icon: <Coins className="w-4 h-4"/> },
|
|
{ id: 'users', label: 'Account Utenti', icon: <UserCog className="w-4 h-4"/> }
|
|
);
|
|
if (globalSettings?.features.notices) tabs.push({ id: 'notices', label: 'Bacheca Avvisi', icon: <Megaphone className="w-4 h-4"/> });
|
|
tabs.push({ id: 'alerts', label: 'Scadenze & Email', icon: <Bell className="w-4 h-4"/> });
|
|
}
|
|
|
|
// Componente per lo stato vuoto quando non c'è un condominio attivo
|
|
const NoCondoState = () => (
|
|
<div className="bg-amber-50 border border-amber-200 rounded-2xl p-8 text-center">
|
|
<Building className="w-12 h-12 text-amber-400 mx-auto mb-4" />
|
|
<h3 className="text-xl font-bold text-amber-800 mb-2">Nessun Condominio Selezionato</h3>
|
|
<p className="text-amber-700 mb-6">Per accedere a questa sezione devi prima creare o selezionare un condominio.</p>
|
|
<button onClick={openAddCondoModal} className="bg-amber-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-amber-700 inline-flex items-center gap-2 justify-center">
|
|
<Plus className="w-5 h-5"/> Crea il tuo primo Condominio
|
|
</button>
|
|
</div>
|
|
);
|
|
|
|
if (loading) return <div className="p-12 text-center text-slate-400">Inizializzazione impostazioni...</div>;
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto pb-32 animate-fade-in">
|
|
<div className="mb-8">
|
|
<h2 className="text-3xl font-bold text-slate-900">Pannello di Controllo</h2>
|
|
<p className="text-slate-500 mt-1">{activeCondo ? `Configurazione per: ${activeCondo.name}` : 'Benvenuto! Inizia configurando il tuo stabile.'}</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col md:flex-row gap-8">
|
|
{/* Sidebar Nav */}
|
|
<div className="md:w-72 flex-shrink-0">
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden sticky top-4">
|
|
<div className="flex md:flex-col overflow-x-auto no-scrollbar p-3 gap-1.5">
|
|
{tabs.map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold transition-all whitespace-nowrap ${activeTab === tab.id ? 'bg-blue-600 text-white shadow-lg shadow-blue-200' : 'text-slate-600 hover:bg-slate-50'}`}
|
|
>
|
|
{tab.icon}
|
|
<span>{tab.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Area */}
|
|
<div className="flex-1 min-w-0">
|
|
{activeTab === 'profile' && (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
|
<div className="flex items-center gap-3 mb-8"><div className="p-3 bg-blue-50 rounded-2xl text-blue-600"><UserIcon className="w-6 h-6" /></div><h3 className="text-xl font-bold text-slate-800">Il Tuo Profilo</h3></div>
|
|
<form onSubmit={handleProfileSubmit} className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Nome Completo</label>
|
|
<div className="relative">
|
|
<UserIcon className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input type="text" value={profileForm.name} onChange={(e) => setProfileForm({...profileForm, name: e.target.value})} className="w-full border border-slate-200 p-3 pl-10 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none" required />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Email</label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input type="email" value={currentUser?.email || ''} disabled className="w-full border border-slate-100 bg-slate-50 p-3 pl-10 rounded-xl text-slate-400 cursor-not-allowed" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Telefono</label>
|
|
<div className="relative">
|
|
<Phone className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input type="tel" value={profileForm.phone} onChange={(e) => setProfileForm({...profileForm, phone: e.target.value})} className="w-full border border-slate-200 p-3 pl-10 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Password</label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input type="password" placeholder="Opzionale" value={profileForm.password} onChange={(e) => setProfileForm({...profileForm, password: e.target.value})} className="w-full border border-slate-200 p-3 pl-10 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="pt-2 border-t flex justify-between items-center"><button type="submit" disabled={profileSaving} className="bg-blue-600 text-white px-8 py-3 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-blue-700 shadow-lg shadow-blue-200 disabled:opacity-50"><Save className="w-4 h-4" /> {profileSaving ? '...' : 'Salva'}</button>{profileMsg && <p className="text-sm font-bold text-green-600">{profileMsg}</p>}</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{isSuperAdmin && activeTab === 'branding' && globalSettings && (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
|
<div className="flex items-center gap-3 mb-8"><div className="p-3 bg-purple-50 rounded-2xl text-purple-600"><Palette className="w-6 h-6" /></div><h3 className="text-xl font-bold text-slate-800">Branding</h3></div>
|
|
<form onSubmit={handleBrandingSubmit} className="space-y-8">
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Nome App</label>
|
|
<div className="relative">
|
|
<Type className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border border-slate-200 p-3 pl-10 rounded-xl font-bold text-slate-800" value={brandingForm.appName} onChange={e => setBrandingForm({...brandingForm, appName: e.target.value})}/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-4 block">Colore Primario</label>
|
|
<div className="flex gap-4 flex-wrap items-center bg-slate-50 p-6 rounded-2xl border border-slate-100">
|
|
{Object.keys(COLOR_MAP).map(colorKey => (
|
|
<button key={colorKey} type="button" onClick={() => setBrandingForm({...brandingForm, primaryColor: colorKey})} className={`w-12 h-12 rounded-2xl border-4 transition-all hover:scale-110 flex items-center justify-center shadow-sm ${brandingForm.primaryColor === colorKey ? 'border-white ring-4 ring-slate-900' : 'border-transparent'}`} style={{ backgroundColor: COLOR_MAP[colorKey] }}>{brandingForm.primaryColor === colorKey && <CheckCircle2 className="w-6 h-6 text-white"/>}</button>
|
|
))}
|
|
<div className="h-10 w-px bg-slate-200 mx-2" />
|
|
<div className="flex items-center gap-2">
|
|
<input type="color" value={brandingForm.primaryColor.startsWith('#') ? brandingForm.primaryColor : '#2563eb'} onChange={e => setBrandingForm({...brandingForm, primaryColor: e.target.value})} className="w-12 h-12 rounded-2xl border-2 cursor-pointer p-0 bg-transparent"/>
|
|
<div className="relative">
|
|
<Hash className="absolute left-2 top-3.5 w-4 h-4 text-slate-400" />
|
|
<input type="text" value={brandingForm.primaryColor} onChange={e => setBrandingForm({...brandingForm, primaryColor: e.target.value})} className="w-32 text-sm font-mono border border-slate-200 rounded-xl p-3 pl-8 uppercase font-bold"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div><label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Logo</label><div className="border-4 border-dashed border-slate-100 rounded-3xl p-8 text-center relative h-48 flex items-center justify-center bg-slate-50/50 hover:bg-slate-50 transition-colors"><input type="file" onChange={handleLogoUpload} className="absolute inset-0 opacity-0 cursor-pointer z-10" />{brandingForm.logoUrl ? <img src={brandingForm.logoUrl} alt="Logo" className="max-h-full max-w-full object-contain" /> : <ImageIcon className="w-12 h-12 text-slate-300"/>}</div></div>
|
|
<div><label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Sfondo Login</label><div className="border-4 border-dashed border-slate-100 rounded-3xl p-8 text-center relative h-48 flex items-center justify-center bg-slate-50/50 hover:bg-slate-50 transition-colors"><input type="file" onChange={handleBgUpload} className="absolute inset-0 opacity-0 cursor-pointer z-10" />{brandingForm.loginBackgroundUrl ? <img src={brandingForm.loginBackgroundUrl} alt="Bg" className="w-full h-full object-cover rounded-xl" /> : <Upload className="w-12 h-12 text-slate-300"/>}</div></div>
|
|
</div>
|
|
<div className="pt-6 border-t flex justify-between items-center">
|
|
<div className="flex-1">{successMsg && <span className="text-green-600 font-bold flex items-center gap-2"><CheckCircle2 className="w-5 h-5"/> {successMsg}</span>}</div>
|
|
<button type="submit" disabled={saving} className="bg-slate-900 text-white px-10 py-4 rounded-2xl font-bold hover:bg-black shadow-xl flex items-center justify-center gap-2 disabled:opacity-50">
|
|
{saving ? 'Salvataggio...' : <><Save className="w-5 h-5" /> Applica</>}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{isSuperAdmin && activeTab === 'features' && globalSettings && (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
|
<div className="flex items-center gap-3 mb-8"><div className="p-3 bg-green-50 rounded-2xl text-green-600"><LayoutGrid className="w-6 h-6" /></div><h3 className="text-xl font-bold text-slate-800">Moduli</h3></div>
|
|
<form onSubmit={handleFeaturesSubmit} className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{['multiCondo', 'tickets', 'documents', 'payPal', 'notices', 'reports', 'extraordinaryExpenses', 'condoFinancialsView'].map(k => (
|
|
<div key={k} onClick={() => toggleFeature(k as any)} className={`flex items-center justify-between p-5 rounded-2xl border cursor-pointer ${globalSettings.features[k as keyof AppSettings['features']] ? 'bg-blue-50 border-blue-200' : 'bg-white border-slate-200'}`}>
|
|
<span className="font-bold text-slate-800 capitalize">{k.replace(/([A-Z])/g, ' $1').trim()}</span>
|
|
<span className={`h-6 w-11 rounded-full relative transition-colors ${globalSettings.features[k as keyof AppSettings['features']] ? 'bg-blue-600' : 'bg-slate-300'}`}><span className={`absolute top-1 left-1 bg-white w-4 h-4 rounded-full transition-transform ${globalSettings.features[k as keyof AppSettings['features']] ? 'translate-x-5' : ''}`}/></span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="pt-8 border-t flex justify-between items-center">
|
|
<div className="flex-1">{successMsg && <span className="text-green-600 font-bold flex items-center gap-2"><CheckCircle2 className="w-5 h-5"/> {successMsg}</span>}</div>
|
|
<button type="submit" disabled={saving} className="bg-blue-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-blue-700 shadow-lg flex items-center justify-center gap-2 disabled:opacity-50">
|
|
{saving ? '...' : 'Salva'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{/* TAB CONDOMINIO (GENERAL) */}
|
|
{activeTab === 'general' && (
|
|
<>
|
|
{!activeCondo ? <NoCondoState /> : (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
|
<div className="flex items-center gap-3 mb-8"><div className="p-3 bg-blue-50 rounded-2xl text-blue-600"><Building className="w-6 h-6" /></div><h3 className="text-xl font-bold text-slate-800">Dati Condominio</h3></div>
|
|
<form onSubmit={handleGeneralSubmit} className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Nome</label>
|
|
<div className="relative">
|
|
<Building className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input type="text" value={activeCondo.name} onChange={e => setActiveCondo({...activeCondo, name: e.target.value})} className="w-full border border-slate-200 p-3 pl-10 rounded-xl font-bold" required />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Indirizzo</label>
|
|
<div className="relative">
|
|
<MapPin className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input type="text" value={activeCondo.address || ''} onChange={e => setActiveCondo({...activeCondo, address: e.target.value})} className="w-full border border-slate-200 p-3 pl-10 rounded-xl" required />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Città</label>
|
|
<input type="text" value={activeCondo.city || ''} onChange={e => setActiveCondo({...activeCondo, city: e.target.value})} className="w-full border border-slate-200 p-3 rounded-xl" />
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Prov</label>
|
|
<input type="text" value={activeCondo.province || ''} onChange={e => setActiveCondo({...activeCondo, province: e.target.value})} className="w-full border border-slate-200 p-3 rounded-xl" />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Quota Mensile</label>
|
|
<div className="relative">
|
|
<Euro className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input type="number" value={activeCondo.defaultMonthlyQuota} onChange={e => setActiveCondo({...activeCondo, defaultMonthlyQuota: parseFloat(e.target.value)})} className="w-full border border-slate-200 p-3 pl-10 rounded-xl font-bold" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Scadenza (Giorno)</label>
|
|
<div className="relative">
|
|
<Calendar className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input type="number" value={activeCondo.dueDay || 10} onChange={e => setActiveCondo({...activeCondo, dueDay: parseInt(e.target.value)})} className="w-full border border-slate-200 p-3 pl-10 rounded-xl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">PayPal Client ID</label>
|
|
<div className="relative">
|
|
<CreditCard className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input
|
|
type={showPayPalKey ? "text" : "password"}
|
|
value={activeCondo.paypalClientId || ''}
|
|
onChange={e => setActiveCondo({...activeCondo, paypalClientId: e.target.value})}
|
|
className="w-full border border-slate-200 p-3 pl-10 rounded-xl text-xs font-mono pr-10"
|
|
placeholder="sandbox_..."
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPayPalKey(!showPayPalKey)}
|
|
className="absolute right-3 top-3 text-slate-400 hover:text-blue-600 transition-colors"
|
|
>
|
|
{showPayPalKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
|
</button>
|
|
</div>
|
|
<p className="text-[10px] text-slate-400 mt-1">Necessario per abilitare i pagamenti online.</p>
|
|
</div>
|
|
<div className="pt-6 border-t flex justify-between items-center">
|
|
<div className="flex-1">{successMsg && <span className="text-green-600 font-bold flex items-center gap-2"><CheckCircle2 className="w-5 h-5"/> {successMsg}</span>}</div>
|
|
<button type="submit" disabled={saving} className="bg-blue-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-blue-700 shadow-lg flex items-center justify-center gap-2 disabled:opacity-50">
|
|
{saving ? '...' : 'Salva Dati'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* TAB STORAGE */}
|
|
{activeTab === 'storage' && (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
|
<div className="flex items-center gap-3 mb-8"><div className="p-3 bg-amber-50 rounded-2xl text-amber-600"><HardDrive className="w-6 h-6" /></div><h3 className="text-xl font-bold text-slate-800">Storage Cloud</h3></div>
|
|
<form onSubmit={handleStorageSubmit} className="space-y-6">
|
|
<select value={storageForm.provider} onChange={e => setStorageForm({...storageForm, provider: e.target.value as any})} className="w-full border border-slate-200 p-3 rounded-xl font-bold text-slate-700">
|
|
<option value="local_db">Database Locale (Default)</option>
|
|
<option value="s3">Amazon S3</option>
|
|
<option value="google_drive">Google Drive</option>
|
|
<option value="dropbox">Dropbox</option>
|
|
<option value="onedrive">Microsoft OneDrive</option>
|
|
</select>
|
|
{storageForm.provider !== 'local_db' && (
|
|
<div className="space-y-6 p-6 bg-slate-50 rounded-2xl border border-slate-100">
|
|
{storageForm.provider === 's3' && (
|
|
<>
|
|
<div className="relative">
|
|
<Database className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input value={storageForm.bucket || ''} onChange={e => setStorageForm({...storageForm, bucket: e.target.value})} className="w-full border p-3 pl-10 rounded-xl" placeholder="Bucket Name" />
|
|
</div>
|
|
<div className="relative">
|
|
<Globe className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input value={storageForm.region || ''} onChange={e => setStorageForm({...storageForm, region: e.target.value})} className="w-full border p-3 pl-10 rounded-xl" placeholder="Region (es. eu-central-1)" />
|
|
</div>
|
|
<div className="relative">
|
|
<Key className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input value={storageForm.apiKey || ''} onChange={e => setStorageForm({...storageForm, apiKey: e.target.value})} className="w-full border p-3 pl-10 rounded-xl" placeholder="Access Key ID" />
|
|
</div>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input value={storageForm.apiSecret || ''} onChange={e => setStorageForm({...storageForm, apiSecret: e.target.value})} className="w-full border p-3 pl-10 rounded-xl" placeholder="Secret Access Key" type="password" />
|
|
</div>
|
|
</>
|
|
)}
|
|
{storageForm.provider === 'google_drive' && (
|
|
<>
|
|
<div className="relative">
|
|
<Database className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input value={storageForm.bucket || ''} onChange={e => setStorageForm({...storageForm, bucket: e.target.value})} className="w-full border p-3 pl-10 rounded-xl" placeholder="Parent Folder ID (Opzionale)" />
|
|
</div>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input value={storageForm.apiKey || ''} onChange={e => setStorageForm({...storageForm, apiKey: e.target.value})} className="w-full border p-3 pl-10 rounded-xl" placeholder="Service Account Email (client_email)" />
|
|
</div>
|
|
<textarea value={storageForm.apiSecret || ''} onChange={e => setStorageForm({...storageForm, apiSecret: e.target.value})} className="w-full border p-3 rounded-xl h-32 text-xs font-mono" placeholder="Private Key (-----BEGIN PRIVATE KEY...)" />
|
|
</>
|
|
)}
|
|
{(storageForm.provider === 'dropbox' || storageForm.provider === 'onedrive') && (
|
|
<>
|
|
<div className="relative">
|
|
<Key className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input value={storageForm.apiKey || ''} onChange={e => setStorageForm({...storageForm, apiKey: e.target.value})} className="w-full border p-3 pl-10 rounded-xl" placeholder="Access Token" type="password" />
|
|
</div>
|
|
<p className="text-xs text-slate-500">Nota: Inserisci un Access Token valido a lunga durata.</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="pt-4 border-t flex justify-between items-center">
|
|
<div className="flex-1">{successMsg && <span className="text-green-600 font-bold flex items-center gap-2"><CheckCircle2 className="w-5 h-5"/> {successMsg}</span>}</div>
|
|
<button type="submit" disabled={saving} className="bg-slate-900 text-white px-8 py-3 rounded-xl font-bold flex items-center justify-center gap-2 disabled:opacity-50">
|
|
{saving ? '...' : 'Salva'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{/* TAB LISTA CONDOMINI */}
|
|
{activeTab === 'condos' && (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
|
<div className="flex justify-between items-center mb-8"><h3 className="text-xl font-bold text-slate-800">Elenco Condomini</h3><button onClick={openAddCondoModal} className="bg-blue-600 text-white px-4 py-2 rounded-xl font-bold flex items-center justify-center gap-2"><Plus className="w-4 h-4"/> Aggiungi</button></div>
|
|
<div className="grid gap-4">
|
|
{condos.map(c => (
|
|
<div key={c.id} className="flex items-center justify-between p-5 rounded-2xl border bg-slate-50 border-slate-100">
|
|
<div><p className="font-bold text-slate-800">{c.name}</p><p className="text-xs text-slate-500">{c.city}</p></div>
|
|
<div className="flex gap-2">
|
|
<button onClick={() => CondoService.setActiveCondo(c.id)} className="px-4 py-2 bg-white border border-slate-200 rounded-lg text-xs font-bold hover:bg-slate-50">Usa</button>
|
|
<button onClick={() => openEditCondoModal(c)} className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg"><Pencil className="w-5 h-5"/></button>
|
|
<button onClick={() => handleDeleteCondo(c.id)} className="p-2 text-red-500 hover:bg-red-50 rounded-lg"><Trash2 className="w-5 h-5"/></button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TAB FAMIGLIE */}
|
|
{activeTab === 'families' && (
|
|
<>
|
|
{!activeCondo ? <NoCondoState /> : (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
|
<div className="flex justify-between items-center mb-8"><h3 className="text-xl font-bold text-slate-800">Famiglie</h3><button onClick={openAddFamilyModal} className="bg-blue-600 text-white px-4 py-2 rounded-xl font-bold flex items-center justify-center gap-2"><Plus className="w-4 h-4"/> Aggiungi</button></div>
|
|
<div className="overflow-x-auto border border-slate-100 rounded-2xl">
|
|
<table className="w-full text-sm text-left">
|
|
<thead className="bg-slate-50 text-slate-500 font-bold uppercase text-[10px]"><tr><th className="px-6 py-4">Nome</th><th className="px-6 py-4">Unità</th><th className="px-6 py-4 text-right">Azioni</th></tr></thead>
|
|
<tbody className="divide-y divide-slate-50">{families.map(f => (<tr key={f.id} className="hover:bg-slate-50"><td className="px-6 py-4 font-bold text-slate-800">{f.name}</td><td className="px-6 py-4">{f.unitNumber}</td><td className="px-6 py-4 text-right"><div className="flex justify-end gap-2"><button onClick={() => openEditFamilyModal(f)} className="text-blue-600 p-2"><Pencil className="w-4 h-4"/></button><button onClick={() => handleDeleteFamily(f.id)} className="text-red-500 p-2"><Trash2 className="w-4 h-4"/></button></div></td></tr>))}</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* TAB USERS (ADMIN) */}
|
|
{activeTab === 'users' && (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
|
<div className="flex justify-between items-center mb-8"><h3 className="text-xl font-bold text-slate-800">Utenti</h3><button onClick={openAddUserModal} className="bg-blue-600 text-white px-4 py-2 rounded-xl font-bold flex items-center justify-center gap-2"><Plus className="w-4 h-4"/> Aggiungi</button></div>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{users.map(u => {
|
|
const isTargetAdmin = u.role === 'admin';
|
|
// Logic: PowerUsers cannot edit/delete Admins
|
|
const canManage = !(currentUser?.role === 'poweruser' && isTargetAdmin);
|
|
|
|
return (
|
|
<div key={u.id} className="p-5 border border-slate-100 rounded-2xl bg-slate-50 flex items-center justify-between">
|
|
<div><p className="font-bold text-slate-800">{u.name}</p><p className="text-xs text-slate-400">{u.email}</p><span className="text-[10px] uppercase font-bold bg-white px-2 py-0.5 rounded border border-slate-200 mt-1 inline-block">{u.role}</span></div>
|
|
<div className="flex gap-1">
|
|
{canManage ? (
|
|
<>
|
|
<button onClick={() => openEditUserModal(u)} className="p-2 text-blue-600 hover:bg-white rounded-lg"><Pencil className="w-4 h-4"/></button>
|
|
<button onClick={() => handleDeleteUser(u.id)} className="p-2 text-red-500 hover:bg-white rounded-lg"><Trash2 className="w-4 h-4"/></button>
|
|
</>
|
|
) : (
|
|
<span className="text-[10px] text-slate-400 font-medium italic px-2 py-1">Protetto</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TAB NOTICES */}
|
|
{activeTab === 'notices' && (
|
|
<>
|
|
{!activeCondo ? <NoCondoState /> : (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
|
<div className="flex justify-between items-center mb-8"><h3 className="text-xl font-bold text-slate-800">Bacheca</h3><button onClick={openAddNoticeModal} className="bg-blue-600 text-white px-4 py-2 rounded-xl font-bold flex items-center justify-center gap-2"><Plus className="w-4 h-4"/> Pubblica</button></div>
|
|
<div className="grid gap-4">{notices.map(n => (<div key={n.id} className="p-5 border rounded-2xl flex justify-between items-start gap-4"><div className="min-w-0 flex-1"><h4 className="font-bold text-slate-800 break-words">{n.title}</h4><p className="text-sm text-slate-500 break-words mt-1">{n.content}</p></div><div className="flex gap-2 flex-shrink-0"><button onClick={() => { setSelectedNoticeId(n.id); setShowReadDetailsModal(true); }} className="p-2 text-slate-500 bg-slate-50 rounded-lg"><Eye className="w-4 h-4"/></button><button onClick={() => openEditNoticeModal(n)} className="p-2 text-blue-600 bg-blue-50 rounded-lg"><Pencil className="w-4 h-4"/></button><button onClick={() => handleDeleteNotice(n.id)} className="p-2 text-red-500 bg-red-50 rounded-lg"><Trash2 className="w-4 h-4"/></button></div></div>))}</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* TAB ALERTS */}
|
|
{activeTab === 'alerts' && (
|
|
<>
|
|
{!activeCondo ? <NoCondoState /> : (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
|
<div className="flex justify-between items-center mb-8"><h3 className="text-xl font-bold text-slate-800">Alerts</h3><div className="flex gap-2"><button onClick={() => setShowSmtpModal(true)} className="bg-slate-100 text-slate-700 px-4 py-2 rounded-xl font-bold">SMTP</button><button onClick={openAddAlertModal} className="bg-blue-600 text-white px-4 py-2 rounded-xl font-bold flex items-center justify-center gap-2"><Plus className="w-4 h-4"/></button></div></div>
|
|
<div className="grid gap-4">{alerts.map(a => (<div key={a.id} className="p-5 border rounded-2xl flex justify-between"><div><h4 className="font-bold text-slate-800">{a.subject}</h4><p className="text-xs text-slate-500">{a.daysOffset}gg {a.offsetType}</p></div><button onClick={() => handleDeleteAlert(a.id)} className="text-red-500"><Trash2 className="w-4 h-4"/></button></div>))}</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- MODALS (Omitted unchanged modals like Condo, Family, User for brevity, assuming standard implementation) --- */}
|
|
{/* Keeping just the essential parts that rely on state to prove functionality */}
|
|
{showCondoModal && (
|
|
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
|
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-lg p-8 animate-in fade-in zoom-in duration-200">
|
|
<h3 className="font-bold text-2xl mb-6 text-slate-800">{editingCondo ? 'Modifica Condominio' : 'Nuovo Condominio'}</h3>
|
|
<form onSubmit={handleCondoSubmit} className="space-y-4">
|
|
<div className="relative">
|
|
<Building className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="Nome Condominio" value={condoForm.name} onChange={e => setCondoForm({...condoForm, name: e.target.value})} required />
|
|
</div>
|
|
<div className="relative">
|
|
<MapPin className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="Indirizzo" value={condoForm.address} onChange={e => setCondoForm({...condoForm, address: e.target.value})} />
|
|
</div>
|
|
<div className="flex gap-4 pt-4"><button type="button" onClick={() => setShowCondoModal(false)} className="flex-1 bg-slate-100 py-3 rounded-xl font-bold hover:bg-slate-200">Annulla</button><button type="submit" className="flex-1 bg-blue-600 text-white py-3 rounded-xl font-bold hover:bg-blue-700">Salva</button></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showFamilyModal && (
|
|
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
|
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-md p-8 animate-in fade-in zoom-in duration-200">
|
|
<h3 className="font-bold text-2xl mb-6 text-slate-800">{editingFamily ? 'Modifica Famiglia' : 'Nuova Famiglia'}</h3>
|
|
<form onSubmit={handleFamilySubmit} className="space-y-4">
|
|
<div className="relative">
|
|
<UserIcon className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="Nome (es. Fam. Rossi)" value={familyForm.name} onChange={e => setFamilyForm({...familyForm, name: e.target.value})} required />
|
|
</div>
|
|
<div className="relative">
|
|
<Building className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="Interno / Unità" value={familyForm.unitNumber} onChange={e => setFamilyForm({...familyForm, unitNumber: e.target.value})} required />
|
|
</div>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="Email Contatto" type="email" value={familyForm.contactEmail} onChange={e => setFamilyForm({...familyForm, contactEmail: e.target.value})} />
|
|
</div>
|
|
<div className="relative">
|
|
<Euro className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="Quota Personalizzata (Opzionale)" type="number" step="0.01" value={familyForm.customMonthlyQuota} onChange={e => setFamilyForm({...familyForm, customMonthlyQuota: e.target.value})} />
|
|
</div>
|
|
<div className="flex gap-4 pt-4"><button type="button" onClick={() => setShowFamilyModal(false)} className="flex-1 bg-slate-100 py-3 rounded-xl font-bold hover:bg-slate-200">Annulla</button><button type="submit" className="flex-1 bg-blue-600 text-white py-3 rounded-xl font-bold hover:bg-blue-700">Salva</button></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showUserModal && (
|
|
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
|
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-md p-8 animate-in fade-in zoom-in duration-200">
|
|
<h3 className="font-bold text-2xl mb-6 text-slate-800">{editingUser ? 'Modifica Utente' : 'Nuovo Utente'}</h3>
|
|
<form onSubmit={handleUserSubmit} className="space-y-4">
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input type="email" className="w-full border p-3 pl-10 rounded-xl" placeholder="Email" value={userForm.email} onChange={e => setUserForm({...userForm, email: e.target.value})} required />
|
|
</div>
|
|
<div className="relative">
|
|
<UserIcon className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="Nome" value={userForm.name} onChange={e => setUserForm({...userForm, name: e.target.value})} />
|
|
</div>
|
|
<div className="relative">
|
|
<Phone className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input type="tel" className="w-full border p-3 pl-10 rounded-xl" placeholder="Telefono" value={userForm.phone} onChange={e => setUserForm({...userForm, phone: e.target.value})} />
|
|
</div>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input type="password" className="w-full border p-3 pl-10 rounded-xl" placeholder="Password (lascia vuoto se invariata)" value={userForm.password} onChange={e => setUserForm({...userForm, password: e.target.value})} />
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-1 block">Ruolo</label>
|
|
<select className="w-full border p-3 rounded-xl bg-white" value={userForm.role} onChange={(e: any) => setUserForm({...userForm, role: e.target.value})}>
|
|
<option value="user">Utente Standard</option>
|
|
<option value="poweruser">Power User</option>
|
|
<option value="admin">Amministratore</option>
|
|
</select>
|
|
</div>
|
|
{userForm.role === 'user' && (
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-1 block">Associa Famiglia</label>
|
|
<select className="w-full border p-3 rounded-xl bg-white" value={userForm.familyId} onChange={(e) => setUserForm({...userForm, familyId: e.target.value})}>
|
|
<option value="">Nessuna</option>
|
|
{families.map(f => <option key={f.id} value={f.id}>{f.name} ({f.unitNumber})</option>)}
|
|
</select>
|
|
</div>
|
|
)}
|
|
<div className="flex gap-4 pt-4"><button type="button" onClick={() => setShowUserModal(false)} className="flex-1 bg-slate-100 py-3 rounded-xl font-bold hover:bg-slate-200">Annulla</button><button type="submit" className="flex-1 bg-blue-600 text-white py-3 rounded-xl font-bold hover:bg-blue-700">Salva</button></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showNoticeModal && (
|
|
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
|
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-lg p-8 animate-in fade-in zoom-in duration-200">
|
|
<h3 className="font-bold text-2xl mb-6 text-slate-800">{editingNotice ? 'Modifica Avviso' : 'Nuovo Avviso'}</h3>
|
|
<form onSubmit={handleNoticeSubmit} className="space-y-4">
|
|
<div className="relative">
|
|
<Type className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="Titolo" value={noticeForm.title} onChange={e => setNoticeForm({...noticeForm, title: e.target.value})} required />
|
|
</div>
|
|
<div className="relative">
|
|
<AlignLeft className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<textarea className="w-full border p-3 pl-10 rounded-xl h-24" placeholder="Contenuto..." value={noticeForm.content} onChange={e => setNoticeForm({...noticeForm, content: e.target.value})} required />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-1 block">Tipo</label>
|
|
<select className="w-full border p-3 rounded-xl bg-white" value={noticeForm.type} onChange={(e: any) => setNoticeForm({...noticeForm, type: e.target.value})}>
|
|
<option value="info">Info</option>
|
|
<option value="warning">Avviso</option>
|
|
<option value="maintenance">Lavori</option>
|
|
<option value="event">Evento</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-1 block">Visibilità</label>
|
|
<div className="flex gap-2 mt-2">
|
|
<button type="button" onClick={() => setNoticeTargetMode('all')} className={`flex-1 py-2 rounded-lg text-xs font-bold border ${noticeTargetMode === 'all' ? 'bg-blue-50 border-blue-200 text-blue-600' : 'bg-white border-slate-200 text-slate-500'}`}>Tutti</button>
|
|
<button type="button" onClick={() => setNoticeTargetMode('specific')} className={`flex-1 py-2 rounded-lg text-xs font-bold border ${noticeTargetMode === 'specific' ? 'bg-blue-50 border-blue-200 text-blue-600' : 'bg-white border-slate-200 text-slate-500'}`}>Specifici</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{noticeTargetMode === 'specific' && (
|
|
<div className="border rounded-xl p-2 max-h-32 overflow-y-auto">
|
|
{families.map(f => (
|
|
<label key={f.id} className="flex items-center gap-2 p-2 hover:bg-slate-50 rounded cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={noticeForm.targetFamilyIds.includes(f.id)}
|
|
onChange={e => {
|
|
if (e.target.checked) setNoticeForm(prev => ({...prev, targetFamilyIds: [...prev.targetFamilyIds, f.id]}));
|
|
else setNoticeForm(prev => ({...prev, targetFamilyIds: prev.targetFamilyIds.filter(id => id !== f.id)}));
|
|
}}
|
|
className="rounded text-blue-600"
|
|
/>
|
|
<span className="text-sm text-slate-700">{f.name}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className="relative">
|
|
<LinkIcon className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="Link esterno (es. PDF Drive)" value={noticeForm.link} onChange={e => setNoticeForm({...noticeForm, link: e.target.value})} />
|
|
</div>
|
|
<div className="flex gap-4 pt-4"><button type="button" onClick={() => setShowNoticeModal(false)} className="flex-1 bg-slate-100 py-3 rounded-xl font-bold hover:bg-slate-200">Annulla</button><button type="submit" className="flex-1 bg-blue-600 text-white py-3 rounded-xl font-bold hover:bg-blue-700">Pubblica</button></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showAlertModal && (
|
|
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
|
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-lg p-8 animate-in fade-in zoom-in duration-200">
|
|
<h3 className="font-bold text-2xl mb-6 text-slate-800">Regola Avviso Automatico</h3>
|
|
<form onSubmit={handleAlertSubmit} className="space-y-4">
|
|
<div className="relative">
|
|
<Type className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="Oggetto Email" value={alertForm.subject} onChange={e => setAlertForm({...alertForm, subject: e.target.value})} required />
|
|
</div>
|
|
<div className="relative">
|
|
<AlignLeft className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<textarea className="w-full border p-3 pl-10 rounded-xl h-24" placeholder="Testo Email..." value={alertForm.body} onChange={e => setAlertForm({...alertForm, body: e.target.value})} required />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="text-xs font-bold text-slate-500 uppercase mb-1 block">Giorni Offset</label><input type="number" className="w-full border p-3 rounded-xl" value={alertForm.daysOffset} onChange={e => setAlertForm({...alertForm, daysOffset: parseInt(e.target.value)})} /></div>
|
|
<div><label className="text-xs font-bold text-slate-500 uppercase mb-1 block">Tipo Offset</label><select className="w-full border p-3 rounded-xl bg-white" value={alertForm.offsetType} onChange={(e: any) => setAlertForm({...alertForm, offsetType: e.target.value})}><option value="before_next_month">Giorni prima scadenza</option><option value="after_current_month">Giorni dopo scadenza</option></select></div>
|
|
</div>
|
|
<div className="flex gap-4 pt-4"><button type="button" onClick={() => setShowAlertModal(false)} className="flex-1 bg-slate-100 py-3 rounded-xl font-bold hover:bg-slate-200">Annulla</button><button type="submit" className="flex-1 bg-blue-600 text-white py-3 rounded-xl font-bold hover:bg-blue-700">Salva</button></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showSmtpModal && globalSettings?.smtpConfig && (
|
|
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
|
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-md p-8 animate-in fade-in zoom-in duration-200">
|
|
<h3 className="font-bold text-2xl mb-6 text-slate-800">Configurazione SMTP</h3>
|
|
<form onSubmit={async (e) => {
|
|
e.preventDefault();
|
|
// Update settings directly via API
|
|
const updated = { ...globalSettings, smtpConfig: globalSettings.smtpConfig };
|
|
await CondoService.updateSettings(updated);
|
|
setGlobalSettings(updated);
|
|
setShowSmtpModal(false);
|
|
}} className="space-y-4">
|
|
<div className="relative">
|
|
<Server className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="Host (smtp.gmail.com)" value={globalSettings.smtpConfig.host} onChange={e => setGlobalSettings({...globalSettings, smtpConfig: {...globalSettings.smtpConfig!, host: e.target.value}})} required />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="relative">
|
|
<Hash className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input type="number" className="w-full border p-3 pl-10 rounded-xl" placeholder="Porta (465)" value={globalSettings.smtpConfig.port} onChange={e => setGlobalSettings({...globalSettings, smtpConfig: {...globalSettings.smtpConfig!, port: parseInt(e.target.value)}})} required />
|
|
</div>
|
|
<label className="flex items-center gap-2 border p-3 rounded-xl bg-slate-50 cursor-pointer"><input type="checkbox" checked={globalSettings.smtpConfig.secure} onChange={e => setGlobalSettings({...globalSettings, smtpConfig: {...globalSettings.smtpConfig!, secure: e.target.checked}})} /> <span className="text-sm font-bold text-slate-600">SSL/TLS</span></label>
|
|
</div>
|
|
<div className="relative">
|
|
<UserIcon className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="Utente/Email" value={globalSettings.smtpConfig.user} onChange={e => setGlobalSettings({...globalSettings, smtpConfig: {...globalSettings.smtpConfig!, user: e.target.value}})} required />
|
|
</div>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" type="password" placeholder="Password" value={globalSettings.smtpConfig.pass} onChange={e => setGlobalSettings({...globalSettings, smtpConfig: {...globalSettings.smtpConfig!, pass: e.target.value}})} required />
|
|
</div>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-3.5 w-5 h-5 text-slate-400" />
|
|
<input className="w-full border p-3 pl-10 rounded-xl" placeholder="From Email (Opzionale)" value={globalSettings.smtpConfig.fromEmail || ''} onChange={e => setGlobalSettings({...globalSettings, smtpConfig: {...globalSettings.smtpConfig!, fromEmail: e.target.value}})} />
|
|
</div>
|
|
|
|
{testSmtpMsg && <div className={`p-3 rounded-xl text-sm font-bold text-center ${testSmtpMsg.includes('Errore') ? 'bg-red-50 text-red-600' : 'bg-green-50 text-green-600'}`}>{testSmtpMsg}</div>}
|
|
|
|
<div className="flex gap-2 pt-2">
|
|
<button type="button" onClick={handleTestSmtp} disabled={testingSmtp} className="flex-1 bg-slate-100 text-slate-600 py-3 rounded-xl font-bold hover:bg-slate-200">{testingSmtp ? '...' : 'Test'}</button>
|
|
<button type="submit" className="flex-1 bg-blue-600 text-white py-3 rounded-xl font-bold hover:bg-blue-700">Salva Config</button>
|
|
</div>
|
|
</form>
|
|
<button onClick={() => setShowSmtpModal(false)} className="absolute top-4 right-4 text-slate-400 hover:text-slate-600"><X className="w-6 h-6"/></button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showReadDetailsModal && selectedNoticeId && (
|
|
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
|
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-md p-6 animate-in fade-in zoom-in duration-200 max-h-[80vh] flex flex-col">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="font-bold text-lg text-slate-800">Stato Lettura</h3>
|
|
<button onClick={() => setShowReadDetailsModal(false)}><X className="w-5 h-5 text-slate-400"/></button>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto">
|
|
{users.length === 0 ? <p className="text-center text-slate-400">Nessun utente.</p> : (
|
|
<div className="space-y-2">
|
|
{users.map(u => {
|
|
const readInfo = noticeReadStats[selectedNoticeId]?.find(r => r.userId === u.id);
|
|
return (
|
|
<div key={u.id} className="flex items-center justify-between p-3 border rounded-xl bg-slate-50">
|
|
<div>
|
|
<p className="font-bold text-sm text-slate-700">{u.name}</p>
|
|
<p className="text-xs text-slate-400">{u.email}</p>
|
|
</div>
|
|
{readInfo ? (
|
|
<div className="text-right">
|
|
<span className="text-xs font-bold text-green-600 bg-green-100 px-2 py-1 rounded-full flex items-center gap-1 justify-end"><CheckCircle2 className="w-3 h-3"/> Letto</span>
|
|
<p className="text-[10px] text-slate-400 mt-1">{new Date(readInfo.readAt).toLocaleString()}</p>
|
|
</div>
|
|
) : (
|
|
<span className="text-xs font-bold text-slate-400 bg-white border px-2 py-1 rounded-full">Non letto</span>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|