Notification System

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• src/components/notifications/NotificationCenter.tsx
• src/hooks/useNotifications.ts
• src/integrations/supabase/types.ts
• supabase/functions/send-notification/index.ts

Introduction

The Notification System in the TAMV project is designed to provide real-time updates and persistent alerts to users regarding system events, status changes, and administrative actions. It serves as the primary communication bridge between the backend services and the end-user interface, ensuring that critical information is delivered promptly and can be reviewed asynchronously through a centralized interface.

The system is built upon a hybrid architecture utilizing Supabase for data persistence and real-time triggers, paired with a React-based frontend that manages state and UI presentation. It handles various notification types, including informational alerts, success messages, and system errors, providing a unified experience across the application.
Sources: README.md:1-2, src/components/notifications/NotificationCenter.tsx, src/hooks/useNotifications.ts

System Architecture

Data Architecture

The foundation of the notification system lies in the database schema, which tracks the lifecycle of every alert sent to a user. The system stores details such as the message content, the recipient's identifier, the timestamp of creation, and the current read/unread status.

The ER diagram above illustrates the relationship between users and their notifications, where a single user can be associated with multiple notification records.
Sources: src/integrations/supabase/types.ts

Logic and Flow

Notifications are generated via edge functions or database triggers and then pushed to the client. The client-side logic manages the polling or real-time subscription to ensure the UI remains synchronized with the server state.

The flowchart describes the data flow from an initial system event through the database to the user interface, including the feedback loop for user interactions.
Sources: src/hooks/useNotifications.ts, supabase/functions/send-notification/index.ts

Components and Hooks

NotificationCenter Component

The NotificationCenter.tsx file serves as the primary UI component. It renders a list of notifications, provides visual cues for unread messages (such as badges), and offers controls for managing the notification history.

Key responsibilities include:

• Rendering notification cards with specific icons based on type.
• Providing a "Clear All" functionality.
• Displaying empty states when no notifications are present.
  Sources: src/components/notifications/NotificationCenter.tsx

useNotifications Hook

The useNotifications.ts hook abstracts the complexity of interacting with the Supabase backend. It provides a clean API for components to fetch, update, and subscribe to notification data.

Function	Description
fetchNotifications	Retrieves the list of notifications for the current authenticated user.
markAsRead	Updates the is_read status of a specific notification ID to true.
deleteNotification	Removes a notification record from the database.
subscribe	Establishes a real-time connection to the notifications table.

Sources: src/hooks/useNotifications.ts

API and Integration

The backend processing is handled via Supabase Edge Functions. These functions are responsible for dispatching notifications based on external triggers or scheduled tasks.

This sequence diagram shows the interaction between the application logic, the edge function responsible for sending notifications, and the eventual update on the client side.
Sources: supabase/functions/send-notification/index.ts, src/hooks/useNotifications.ts

Configuration and Types

The system uses TypeScript definitions to ensure type safety across the notification lifecycle. This includes defining valid notification types (e.g., 'info', 'warning', 'error', 'success') and the structure of the database response.

Field	Type	Description
id	UUID	Unique identifier for the notification.
user_id	UUID	The ID of the user the notification is intended for.
type	String	Categorization of the alert (info, success, etc).
is_read	Boolean	Flag indicating if the user has seen the alert.

Sources: src/integrations/supabase/types.ts

Conclusion

The Notification System provides a robust framework for user communication within the TAMV project. By leveraging Supabase's real-time capabilities and a modular React frontend, it ensures that users are always informed of relevant activities while maintaining a performant and scalable architecture.