fcarra/Condopay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Settings.tsx

Browse Source
This commit is contained in:
frakarr
2026-01-09 23:51:52 +01:00
committed by GitHub
parent b90aab82ca
commit d739bf6f5e
1 changed files with 43 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
pages/Settings.tsx
View File

@@ -6,7 +6,7 @@ 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,
Eye, EyeOff, Calendar, List, UserCog, Mail, Power, MapPin, CreditCard,
ToggleLeft, ToggleRight, LayoutGrid, PieChart, Users, Send, Cloud, HardDrive, ChevronRight, Palette, Image as ImageIcon, Upload
} from 'lucide-react';
@@ -51,6 +51,7 @@ export const SettingsPage: React.FC = () => {
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('');
@@ -342,7 +343,26 @@ export const SettingsPage: React.FC = () => {
<div><label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Scadenza (Giorno)</label><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 rounded-xl" /></div>
</div>
</div>
<div><label className="text-xs font-bold text-slate-500 uppercase mb-2 block">PayPal Client ID</label><input type="text" value={activeCondo.paypalClientId || ''} onChange={e => setActiveCondo({...activeCondo, paypalClientId: e.target.value})} className="w-full border border-slate-200 p-3 rounded-xl text-xs font-mono" /></div>
<div>
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">PayPal Client ID</label>
<div className="relative">
<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 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">
@@ -443,12 +463,27 @@ export const SettingsPage: React.FC = () => {
<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 => (
<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"><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></div>
</div>
))}
{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>
)}