Update Layout.tsx
This commit is contained in:
@@ -17,7 +17,7 @@ export const Layout: React.FC = () => {
|
|||||||
|
|
||||||
// Notifications
|
// Notifications
|
||||||
const [activeNotice, setActiveNotice] = useState<Notice | null>(null);
|
const [activeNotice, setActiveNotice] = useState<Notice | null>(null);
|
||||||
const [hasNewExpenses, setHasNewExpenses] = useState(false);
|
const [newExpensesCount, setNewExpensesCount] = useState(0);
|
||||||
|
|
||||||
// Ticket Badges
|
// Ticket Badges
|
||||||
const [ticketBadgeCount, setTicketBadgeCount] = useState(0);
|
const [ticketBadgeCount, setTicketBadgeCount] = useState(0);
|
||||||
@@ -101,9 +101,9 @@ export const Layout: React.FC = () => {
|
|||||||
const lastViewed = localStorage.getItem('lastViewedExpensesTime');
|
const lastViewed = localStorage.getItem('lastViewedExpensesTime');
|
||||||
const lastViewedTime = lastViewed ? parseInt(lastViewed) : 0;
|
const lastViewedTime = lastViewed ? parseInt(lastViewed) : 0;
|
||||||
|
|
||||||
// Check if any expense was created AFTER the last visit
|
// Count expenses created AFTER the last visit
|
||||||
const hasNew = myExpenses.some((e: any) => new Date(e.createdAt).getTime() > lastViewedTime);
|
const count = myExpenses.filter((e: any) => new Date(e.createdAt).getTime() > lastViewedTime).length;
|
||||||
setHasNewExpenses(hasNew);
|
setNewExpensesCount(count);
|
||||||
|
|
||||||
} catch(e) {}
|
} catch(e) {}
|
||||||
}
|
}
|
||||||
@@ -310,8 +310,10 @@ export const Layout: React.FC = () => {
|
|||||||
<Briefcase className="w-5 h-5" />
|
<Briefcase className="w-5 h-5" />
|
||||||
<span className="font-medium">{isAdmin ? 'Spese Straordinarie' : 'Le Mie Spese Extra'}</span>
|
<span className="font-medium">{isAdmin ? 'Spese Straordinarie' : 'Le Mie Spese Extra'}</span>
|
||||||
</div>
|
</div>
|
||||||
{hasNewExpenses && (
|
{newExpensesCount > 0 && (
|
||||||
<span className="bg-red-500 w-2.5 h-2.5 rounded-full animate-pulse"></span>
|
<span className="bg-red-500 text-white text-[10px] font-bold px-1.5 h-5 min-w-[20px] rounded-full flex items-center justify-center shadow-sm">
|
||||||
|
{newExpensesCount > 99 ? '99+' : newExpensesCount}
|
||||||
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
|||||||
Reference in New Issue
Block a user