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

Update FamilyList.tsx

Browse Source
This commit is contained in:
frakarr
2025-12-11 22:28:13 +01:00
committed by GitHub
parent ffebddaf33
commit 1a613c607c
1 changed files with 39 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
pages/FamilyList.tsx
View File

@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { CondoService } from '../services/api'; import { CondoService } from '../services/mockDb';
import { Family, Condo, Notice, AppSettings } from '../types'; import { Family, Condo, Notice, AppSettings } from '../types';
import { Search, ChevronRight, UserCircle, Building, Bell, AlertTriangle, Hammer, Calendar, Info, Link as LinkIcon, Check } from 'lucide-react'; 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 ( return (
<div className="space-y-8 pb-12"> <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 */} {/* Responsive Header */}
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4"> <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div> <div>
@@ -124,43 +162,6 @@ export const FamilyList: React.FC = () => {
</div> </div>
</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 */} {/* List */}
<div className="bg-white shadow-sm rounded-xl overflow-hidden border border-slate-200"> <div className="bg-white shadow-sm rounded-xl overflow-hidden border border-slate-200">
<ul className="divide-y divide-slate-100"> <ul className="divide-y divide-slate-100">