From 1a613c607cd5d4b993637ed6f00e039993d3dbb2 Mon Sep 17 00:00:00 2001
From: frakarr <fcarra79@gmail.com>
Date: Thu, 11 Dec 2025 22:28:13 +0100
Subject: [PATCH] Update FamilyList.tsx

---
 pages/FamilyList.tsx | 77 ++++++++++++++++++++++----------------------
 1 file changed, 39 insertions(+), 38 deletions(-)

diff --git a/pages/FamilyList.tsx b/pages/FamilyList.tsx
index 7ffc8e6..63a9af8 100644
--- a/pages/FamilyList.tsx
+++ b/pages/FamilyList.tsx
@@ -1,7 +1,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { CondoService } from '../services/api';
+import { CondoService } from '../services/mockDb';
 import { Family, Condo, Notice, AppSettings } from '../types';
 import { Search, ChevronRight, UserCircle, Building, Bell, AlertTriangle, Hammer, Calendar, Info, Link as LinkIcon, Check } from 'lucide-react';
 
@@ -100,6 +100,44 @@ export const FamilyList: React.FC = () => {
 
   return (
     <div className="space-y-8 pb-12">
+      
+      {/* Notices Section - Dashboard effect */}
+      {settings?.features.notices && notices.length > 0 && (
+          <div className="space-y-3 mb-6">
+              <h3 className="font-bold text-slate-700 flex items-center gap-2">
+                  <Bell className="w-5 h-5" /> Bacheca Avvisi
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {notices.map(notice => {
+                      const isRead = userReadIds.includes(notice.id);
+                      return (
+                        <div key={notice.id} className={`bg-white p-4 rounded-xl border relative transition-all ${isRead ? 'border-slate-100 opacity-80' : 'border-blue-200 shadow-sm ring-1 ring-blue-100'}`}>
+                            <div className="flex items-start gap-3">
+                                <div className={`p-2 rounded-lg flex-shrink-0 ${notice.type === 'warning' ? 'bg-amber-50' : 'bg-slate-50'}`}>
+                                    <NoticeIcon type={notice.type} />
+                                </div>
+                                <div className="min-w-0 flex-1">
+                                    <div className="flex items-center justify-between gap-2 mb-1">
+                                        <h4 className={`font-bold text-sm truncate ${isRead ? 'text-slate-600' : 'text-slate-800'}`}>{notice.title}</h4>
+                                        {isRead && <span className="text-[10px] bg-slate-100 text-slate-400 px-1.5 py-0.5 rounded font-bold uppercase">Letto</span>}
+                                        {!isRead && <span className="text-[10px] bg-blue-100 text-blue-600 px-1.5 py-0.5 rounded font-bold uppercase">Nuovo</span>}
+                                    </div>
+                                    <p className="text-xs text-slate-400 mb-2">{new Date(notice.date).toLocaleDateString()}</p>
+                                    <p className="text-sm text-slate-600 line-clamp-2 mb-2">{notice.content}</p>
+                                    {notice.link && (
+                                        <a href={notice.link} target="_blank" rel="noopener noreferrer" className="text-xs text-blue-600 font-medium hover:underline flex items-center gap-1">
+                                            <LinkIcon className="w-3 h-3"/> Apri Link
+                                        </a>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                      );
+                  })}
+              </div>
+          </div>
+      )}
+
       {/* Responsive Header */}
       <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
         <div>
@@ -124,43 +162,6 @@ export const FamilyList: React.FC = () => {
         </div>
       </div>
 
-      {/* Notices Section (Visible to Users only if feature enabled) */}
-      {settings?.features.notices && notices.length > 0 && (
-          <div className="space-y-3">
-              <h3 className="font-bold text-slate-700 flex items-center gap-2">
-                  <Bell className="w-5 h-5" /> Bacheca Avvisi
-              </h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                  {notices.map(notice => {
-                      const isRead = userReadIds.includes(notice.id);
-                      return (
-                        <div key={notice.id} className={`bg-white p-4 rounded-xl border relative transition-all ${isRead ? 'border-slate-100 opacity-80' : 'border-blue-200 shadow-sm ring-1 ring-blue-100'}`}>
-                            <div className="flex items-start gap-3">
-                                <div className={`p-2 rounded-lg flex-shrink-0 ${notice.type === 'warning' ? 'bg-amber-50' : 'bg-slate-50'}`}>
-                                    <NoticeIcon type={notice.type} />
-                                </div>
-                                <div className="min-w-0">
-                                    <div className="flex items-center gap-2 mb-1">
-                                        <h4 className={`font-bold text-sm truncate ${isRead ? 'text-slate-600' : 'text-slate-800'}`}>{notice.title}</h4>
-                                        {isRead && <span className="text-[10px] bg-slate-100 text-slate-400 px-1.5 py-0.5 rounded font-bold uppercase">Letto</span>}
-                                        {!isRead && <span className="text-[10px] bg-blue-100 text-blue-600 px-1.5 py-0.5 rounded font-bold uppercase">Nuovo</span>}
-                                    </div>
-                                    <p className="text-xs text-slate-400 mb-2">{new Date(notice.date).toLocaleDateString()}</p>
-                                    <p className="text-sm text-slate-600 line-clamp-3 mb-2">{notice.content}</p>
-                                    {notice.link && (
-                                        <a href={notice.link} target="_blank" rel="noopener noreferrer" className="text-xs text-blue-600 font-medium hover:underline flex items-center gap-1">
-                                            <LinkIcon className="w-3 h-3"/> Apri Link
-                                        </a>
-                                    )}
-                                </div>
-                            </div>
-                        </div>
-                      );
-                  })}
-              </div>
-          </div>
-      )}
-
       {/* List */}
       <div className="bg-white shadow-sm rounded-xl overflow-hidden border border-slate-200">
         <ul className="divide-y divide-slate-100">