blyzer/fasto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement persistent notification system
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m38s
Details

Browse Source 
- Added notifications table with auto-migration on startup.

- Created backend endpoints for fetching and managing notifications.

- Implemented interactive notification tray in the header with unread badges.

- Added automated triggers for organization creation and user registration completion.
This commit is contained in:
Cauê Faleiros
2026-03-09 17:08:41 -03:00
parent ec7cb18928
commit ccbba312bb
3 changed files with 196 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
components/Layout.tsx
View File

@@ -4,7 +4,7 @@ import {
LayoutDashboard, Users, UserCircle, Bell, Search, Menu, X, LogOut,
Hexagon, Settings, Building2, Sun, Moon, Loader2
} from 'lucide-react';
import { getAttendances, getUsers, getUserById, logout, searchGlobal } from '../services/dataService';
import { getAttendances, getUsers, getUserById, logout, searchGlobal, getNotifications, markNotificationAsRead, markAllNotificationsAsRead } from '../services/dataService';
import { User } from '../types';
const SidebarItem = ({ to, icon: Icon, label, collapsed }: { to: string, icon: any, label: string, collapsed: boolean }) => (
@@ -36,6 +36,16 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
const [isSearching, setIsSearching] = useState(false);
const [showSearchResults, setShowSearchResults] = useState(false);
// Notifications State
const [notifications, setNotifications] = useState<any[]>([]);
const [showNotifications, setShowNotifications] = useState(false);
const unreadCount = notifications.filter(n => !n.is_read).length;
const loadNotifications = async () => {
const data = await getNotifications();
setNotifications(data);
};
useEffect(() => {
const delayDebounceFn = setTimeout(async () => {
if (searchQuery.length >= 2) {
@@ -79,6 +89,9 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
}
};
fetchCurrentUser();
loadNotifications();
const interval = setInterval(loadNotifications, 60000);
return () => clearInterval(interval);
}, [navigate]);
const handleLogout = () => {
@@ -364,11 +377,73 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
{/* Notifications */}
<div className="relative">
<button className="p-2 text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-full relative transition-colors">
<button
onClick={() => setShowNotifications(!showNotifications)}
className="p-2 text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-full relative transition-colors"
>
<Bell size={20} />
<span className="absolute top-1.5 right-2 w-2.5 h-2.5 bg-brand-yellow rounded-full border-2 border-white dark:border-dark-header"></span>
{unreadCount > 0 && (
<span className="absolute top-1.5 right-2 w-2.5 h-2.5 bg-brand-yellow rounded-full border-2 border-white dark:border-dark-header"></span>
)}
</button>
{showNotifications && (
<div className="absolute top-full mt-2 right-0 w-80 bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl shadow-2xl overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200">
<div className="p-4 border-b border-zinc-100 dark:border-dark-border flex justify-between items-center">
<h3 className="font-bold text-zinc-900 dark:text-dark-text">Notificações</h3>
{unreadCount > 0 && (
<button
onClick={async () => {
await markAllNotificationsAsRead();
loadNotifications();
}}
className="text-xs text-brand-yellow hover:underline"
>
Marcar todas como lidas
</button>
)}
</div>
<div className="max-h-96 overflow-y-auto">
{notifications.length > 0 ? (
notifications.map(n => (
<button
key={n.id}
onClick={async () => {
if (!n.is_read) await markNotificationAsRead(n.id);
if (n.link) navigate(n.link);
setShowNotifications(false);
loadNotifications();
}}
className={`w-full p-4 text-left hover:bg-zinc-50 dark:hover:bg-dark-border transition-colors border-b border-zinc-50 dark:border-dark-border/50 last:border-0 ${!n.is_read ? 'bg-brand-yellow/5 dark:bg-brand-yellow/5' : ''}`}
>
<div className="flex justify-between items-start mb-1">
<span className={`text-xs font-bold uppercase tracking-wider ${
n.type === 'success' ? 'text-green-500' :
n.type === 'warning' ? 'text-orange-500' :
n.type === 'error' ? 'text-red-500' : 'text-blue-500'
}`}>
{n.type}
</span>
<span className="text-[10px] text-zinc-400 dark:text-dark-muted">
{new Date(n.created_at).toLocaleDateString()}
</span>
</div>
<div className="text-sm font-bold text-zinc-900 dark:text-dark-text mb-0.5">{n.title}</div>
<p className="text-xs text-zinc-500 dark:text-dark-muted line-clamp-2">{n.message}</p>
</button>
))
) : (
<div className="p-8 text-center text-zinc-500 dark:text-dark-muted text-sm">
Nenhuma notificação por enquanto.
</div>
)}
</div>
</div>
)}
</div>
{/* Close notifications when clicking outside */}
{showNotifications && <div className="fixed inset-0 z-40" onClick={() => setShowNotifications(false)} />}
</div>
</header>