[Bug]: Enhance Notification Page with Auto-Delete and User-Controlled Deletion

[dipexplorer]

🔍 Is there an existing issue for this?

• I have searched the existing issues

🐛 Describe the bug

• Add functionality to the Notification Page to improve usability and management of notifications.
• Features to implement:
  1. Automatic Deletion:
     • Appointment notifications should automatically delete after their scheduled deadline or time has passed.
  2. User-Controlled Deletion:
     • Users should have the option to manually delete any notification at any time.
• Ensure that the notifications UI clearly shows which notifications are active and which are expired.
• Include visual cues or animations for deleted notifications (fade-out or slide animation) for better UX.

✅ Expected behavior

• Keeps the Notification Page organized and clutter-free.
• Provides flexibility for users to manage notifications manually.
• Improves overall user experience and engagement with timely and relevant notifications.

Important Notes / Guidelines

1. Automatic deletion should occur after the appointment or notification deadline without affecting other notifications.
2. Users must have a clear and accessible option to delete notifications manually.
3. Ensure responsiveness and consistent design across mobile, tablet, and desktop devices.
4. Provide visual feedback for deleted notifications (animations, confirmation messages, or toast alerts).
5. Do not disrupt existing notifications or other page functionalities.

Acceptance Criteria

1. Appointment notifications automatically disappear after the deadline.
2. Users can manually delete any notification.
3. Deleted notifications animate visually (fade or slide).
4. The Notification Page remains responsive and visually consistent.

📸 Add ScreenShots

On which device are you experiencing this bug?

No response

📋 Checklist

• I have read the Contributing Guidelines
• I'm a GSSOC'24 contributor
• I have starred the repository