Carlos anniversary celebrated

[cgomezhub]

Description

This part of a new Report Page: Create Company Summary Dashboard for Admins requested by Jae.
Implements # (WBS)
Anniversary Celebrared Component

Related PRS (if any):

This frontend PR is related to the #1128 backend PR.

…

Main features explained:

• Visualization of volunteer anniversaries within the current week.
• Comparison of volunteer anniversaries between the current and previous week.
• Clicking on the volunteer email icon allows you to send a personalized congratulatory email using previously configured Gmail OAuth settings. (For more information on Gmail setup, please watch the video below.)

…

How to test:

This frontend PR is related to the #1128 backend PR.

1. Check out the current branch.
2. Do npm install and ... to run this PR locally.
3. Clear site data/cache.
4. Log in as admin user.
5. Navigate to Dashboard > Reports > Total Org Summary > Volunteer Engagement Trends.
6. Set up the Gmail Api in your account http://console.cloud.google.com and https://developers.google.com/ (please watch the Gmail Api setup video belowuntil minut 7).
   7.Set up the environment variables in the .env file of your backend project (see .env image).
7. Chech the anniversary list.
8. Select and click on the email icon.
9. Send a congratulatory email.
10. Check sent folder of your gmail acount.

Screenshots or videos needed:

App features video:

https://www.loom.com/share/d4f75956df7b4ef6946dd17aa8bfa806?sid=5ccabce1-1fb8-4c11-a9f7-a5127a3ea793

Gmail Api setup video (just watch until minut 7)

https://www.youtube.com/watch?v=-rcRf7yswfM&list=LL&index=8&t=304s

Image of Environment variables

Note:

Remember!. Here are the absolutely necessary steps to successfully send a congratulatory email from your Google account:

• Set up the Gmail API in your account. (Removes unnecessary "Api") - Links can stay as provided. (Please watch the Gmail API setup video until minute 7).
• Set up the environment variables in the .env file of your backend project. (See image)

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	8b28e2b
🔍 Latest deploy log	https://app.netlify.com/sites/highestgoodnetwork-dev/deploys/674f64679fd7d10008f7daed
😎 Deploy Preview	https://deploy-preview-2772--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Ankuriboh]

Can confirm that sending anniversary congratulation emails works on my end. A small problem I found is that when sending email while I didn't edit content in the editor, the system will send an empty email.

This feature can be further enhanced by adding scheduled emails sending (i.e. automated congrats email on n-year + their registered date), and probably some template email text for congratulating the user.

[zhiminV]

I have check the feature inLight and dark mode and it work as expected

Screen.Recording.2024-10-25.at.10.25.39.PM.mov

[one-community]

Thank you all, merging!