feat: Introduce multi-condo management and notices

This commit refactors the application to support managing multiple condominiums.

Key changes include:
- Introduction of `Condo` and `Notice` data types.
- Implementation of multi-condo selection and management, including active condo context.
- Addition of a notice system to inform users about important updates or events within a condo.
- Styling adjustments to ensure better visibility of form elements.
- Mock database updates to accommodate new entities and features.

components/Layout.tsx

@@ -1,12 +1,62 @@
-import React from 'react';
+
+import React, { useEffect, useState } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
-import { Users, Settings, Building, LogOut, Menu, X } from 'lucide-react';
+import { Users, Settings, Building, LogOut, Menu, X, ChevronDown, Check, LayoutDashboard, Megaphone, Info, AlertTriangle, Hammer, Calendar } from 'lucide-react';
 import { CondoService } from '../services/mockDb';
+import { Condo, Notice } from '../types';
 
 export const Layout: React.FC = () => {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const user = CondoService.getCurrentUser();
-  const isAdmin = user?.role === 'admin';
+  const isAdmin = user?.role === 'admin' || user?.role === 'poweruser';
+  
+  const [condos, setCondos] = useState<Condo[]>([]);
+  const [activeCondo, setActiveCondo] = useState<Condo | undefined>(undefined);
+  const [showCondoDropdown, setShowCondoDropdown] = useState(false);
+
+  // Notice Modal State
+  const [activeNotice, setActiveNotice] = useState<Notice | null>(null);
+
+  const fetchContext = async () => {
+    if (isAdmin) {
+        const list = await CondoService.getCondos();
+        setCondos(list);
+    }
+    const active = await CondoService.getActiveCondo();
+    setActiveCondo(active);
+
+    // Check for notices for User (not admin, to avoid spamming admin managing multiple condos)
+    if (!isAdmin && active && user) {
+        const unread = await CondoService.getUnreadNoticesForUser(user.id, active.id);
+        if (unread.length > 0) {
+            // Show the most recent unread notice
+            setActiveNotice(unread[0]);
+        }
+    }
+  };
+
+  useEffect(() => {
+      fetchContext();
+
+      // Listen for updates from Settings
+      const handleCondoUpdate = () => fetchContext();
+      window.addEventListener('condo-updated', handleCondoUpdate);
+      return () => window.removeEventListener('condo-updated', handleCondoUpdate);
+  }, [isAdmin]);
+
+  const handleCondoSwitch = (condoId: string) => {
+      CondoService.setActiveCondo(condoId);
+      setShowCondoDropdown(false);
+  };
+
+  const handleReadNotice = async () => {
+      if (activeNotice && user) {
+          await CondoService.markNoticeAsRead(activeNotice.id, user.id);
+          setActiveNotice(null);
+      }
+  };
+
+  const closeNoticeModal = () => setActiveNotice(null);
 
   const navClass = ({ isActive }: { isActive: boolean }) =>
     `flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${
@@ -17,16 +67,61 @@ export const Layout: React.FC = () => {
 
   const closeMenu = () => setIsMobileMenuOpen(false);
 
+  const NoticeIcon = ({type}: {type: string}) => {
+      switch(type) {
+          case 'warning': return <AlertTriangle className="w-8 h-8 text-amber-500" />;
+          case 'maintenance': return <Hammer className="w-8 h-8 text-orange-500" />;
+          case 'event': return <Calendar className="w-8 h-8 text-purple-500" />;
+          default: return <Info className="w-8 h-8 text-blue-500" />;
+      }
+  };
+
   return (
     <div className="flex h-screen bg-slate-50 overflow-hidden">
       
+      {/* Active Notice Modal */}
+      {activeNotice && (
+          <div className="fixed inset-0 bg-black/60 z-[100] flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in duration-300">
+              <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden transform transition-all scale-100">
+                  <div className={`p-6 ${activeNotice.type === 'warning' ? 'bg-amber-50' : 'bg-blue-50'} border-b border-slate-100 flex items-start gap-4`}>
+                      <div className="p-3 bg-white rounded-full shadow-sm">
+                          <NoticeIcon type={activeNotice.type} />
+                      </div>
+                      <div>
+                          <h3 className="text-xl font-bold text-slate-800 leading-tight">{activeNotice.title}</h3>
+                          <p className="text-sm text-slate-500 mt-1">{new Date(activeNotice.date).toLocaleDateString()}</p>
+                      </div>
+                  </div>
+                  <div className="p-6 text-slate-600 leading-relaxed whitespace-pre-wrap">
+                      {activeNotice.content}
+                      {activeNotice.link && (
+                          <div className="mt-4">
+                              <a href={activeNotice.link} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline font-medium hover:text-blue-800">
+                                  Apri Documento / Link
+                              </a>
+                          </div>
+                      )}
+                  </div>
+                  <div className="p-4 bg-slate-50 border-t border-slate-100 flex gap-3">
+                      <button onClick={closeNoticeModal} className="flex-1 py-2.5 px-4 text-slate-600 font-medium hover:bg-slate-200 rounded-lg transition-colors">Chiudi</button>
+                      <button onClick={handleReadNotice} className="flex-1 py-2.5 px-4 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 shadow-md transition-colors flex items-center justify-center gap-2">
+                          <Check className="w-5 h-5" /> Letto
+                      </button>
+                  </div>
+              </div>
+          </div>
+      )}
+
       {/* Mobile Header */}
       <div className="lg:hidden fixed top-0 left-0 right-0 h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 z-40 shadow-sm">
-        <div className="flex items-center gap-2">
-           <div className="bg-blue-600 p-1.5 rounded-lg">
+        <div className="flex items-center gap-2 overflow-hidden">
+           <div className="bg-blue-600 p-1.5 rounded-lg flex-shrink-0">
             <Building className="text-white w-5 h-5" />
           </div>
-          <h1 className="font-bold text-lg text-slate-800">CondoPay</h1>
+          <div className="flex flex-col min-w-0">
+              <h1 className="font-bold text-slate-800 leading-tight truncate">CondoPay</h1>
+              {activeCondo && <p className="text-xs text-slate-500 truncate">{activeCondo.name}</p>}
+          </div>
         </div>
         <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="p-2 text-slate-600 focus:outline-none">
           {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
@@ -43,19 +138,76 @@ export const Layout: React.FC = () => {
         fixed top-0 left-0 bottom-0 w-72 bg-white border-r border-slate-200 flex flex-col shadow-xl z-50 transform transition-transform duration-300 ease-in-out
         ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0 lg:static lg:shadow-none lg:z-auto
       `}>
-        <div className="p-6 hidden lg:flex items-center gap-3 border-b border-slate-100 h-20">
-          <div className="bg-blue-600 p-2 rounded-lg">
-            <Building className="text-white w-6 h-6" />
+        {/* Desktop Logo & Condo Switcher */}
+        <div className="p-6 hidden lg:flex flex-col gap-4 border-b border-slate-100">
+          <div className="flex items-center gap-3">
+              <div className="bg-blue-600 p-2 rounded-lg">
+                <Building className="text-white w-6 h-6" />
+              </div>
+              <h1 className="font-bold text-xl text-slate-800 tracking-tight">CondoPay</h1>
           </div>
-          <h1 className="font-bold text-xl text-slate-800 tracking-tight">CondoPay</h1>
+
+          {/* Condo Switcher (Admin Only) */}
+          {isAdmin && (
+              <div className="relative mt-2">
+                   <div className="flex items-center gap-1.5 mb-2 text-xs font-bold text-slate-400 uppercase tracking-wider">
+                       <LayoutDashboard className="w-3 h-3" />
+                       Condomini
+                   </div>
+                  <button 
+                    onClick={() => setShowCondoDropdown(!showCondoDropdown)}
+                    className="w-full flex items-center justify-between px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 hover:border-blue-300 transition-colors"
+                  >
+                      <span className="font-medium truncate">{activeCondo?.name || 'Seleziona Condominio'}</span>
+                      <ChevronDown className="w-4 h-4 text-slate-400" />
+                  </button>
+                  
+                  {showCondoDropdown && (
+                      <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-slate-200 rounded-lg shadow-xl z-50 max-h-60 overflow-y-auto">
+                          {condos.map(c => (
+                              <button
+                                key={c.id}
+                                onClick={() => handleCondoSwitch(c.id)}
+                                className="w-full text-left px-3 py-2 text-sm hover:bg-slate-50 flex items-center justify-between group"
+                              >
+                                  <span className="truncate text-slate-700 group-hover:text-blue-700">{c.name}</span>
+                                  {c.id === activeCondo?.id && <Check className="w-3 h-3 text-blue-600" />}
+                              </button>
+                          ))}
+                      </div>
+                  )}
+              </div>
+          )}
+          {!isAdmin && activeCondo && (
+               <div className="px-3 py-2 bg-slate-50 border border-slate-100 rounded-lg text-sm text-slate-500 truncate">
+                   {activeCondo.name}
+               </div>
+          )}
         </div>
         
-        {/* Mobile Header inside drawer to align content */}
+        {/* Mobile Header inside drawer */}
         <div className="lg:hidden p-4 flex items-center justify-between border-b border-slate-100 h-16">
              <span className="font-bold text-slate-700 text-lg">Menu</span>
              <button onClick={closeMenu} className="p-1 rounded-md hover:bg-slate-100"><X className="w-6 h-6 text-slate-500"/></button>
         </div>
 
+        {/* Mobile Condo Switcher */}
+        {isAdmin && (
+             <div className="lg:hidden px-4 py-2 border-b border-slate-100">
+                 <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-2">
+                    <LayoutDashboard className="w-3 h-3" />
+                    Condominio Attivo
+                 </p>
+                 <select 
+                    value={activeCondo?.id || ''}
+                    onChange={(e) => handleCondoSwitch(e.target.value)}
+                    className="w-full p-2 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 font-medium outline-none"
+                 >
+                     {condos.map(c => <option key={c.id} value={c.id} className="text-slate-800">{c.name}</option>)}
+                 </select>
+             </div>
+        )}
+
         <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
           <div className="lg:hidden mb-4 px-2 pt-2">
              <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Navigazione</p>
@@ -98,4 +250,4 @@ export const Layout: React.FC = () => {
       </main>
     </div>
   );
-};
+};