feat(features): add Monthly View for meeting control (Work on Desktop devices)

[FussuChalice]

Fixes # (issue)

Type of change

Please delete options that are not relevant.

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [x] This change requires a documentation update

Checklist:

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [ ] My changes generate no new warnings
• [x] Any dependent changes have been merged and published in downstream modules

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
organized-app	✅ Ready (Inspect)	Visit Preview	Jan 16, 2025 3:36pm

[rhahao]

Task linked: CU-86c0ezum9 Desktop monthly view

[coderabbitai[bot]]

Walkthrough

This pull request introduces a comprehensive monthly view feature for managing midweek meeting assignments. The implementation includes a new MonthlyView component, a custom useMonthlyView hook, and supporting components like WeekBadge, WeekHoverBox, and EmptyAssignment. The changes enhance state management and user interaction, enabling users to switch between weekly and monthly views of meeting assignments with detailed selection options across different meeting sections and weeks. Additionally, several components have been updated to support conditional rendering of icons and improved styling.

Changes

File	Change Summary
src/features/meetings/monthly_view/index.tsx	Added MonthlyView React component for monthly meeting assignments and export statement.
src/features/meetings/monthly_view/useMonthlyView.tsx	Introduced custom hook to manage monthly view state and logic, including export statement.
src/features/meetings/monthly_view/week_badge/index.tsx	Created WeekBadge component for displaying week information and export statement.
src/features/meetings/monthly_view/week_badge/index.types.tsx	Added WeekBadgeType type definition.
src/features/meetings/monthly_view/week_hoverbox/index.tsx	Implemented WeekHoverBox component with tooltip functionality and export statement.
src/features/meetings/monthly_view/week_hoverbox/index.types.tsx	Defined WeekHoverBoxType for hover box props.
src/features/meetings/monthly_view/empty_assignment/index.tsx	Introduced EmptyAssignment component for displaying messages when there are no assignments and export statement.
src/pages/meetings/midweek/index.tsx	Updated to include monthly view toggle and rendering, added state management for openWeekView.
src/pages/meetings/midweek/useMidweek.tsx	Added state management for week view toggling with new handler functions.
src/components/tooltip/index.tsx	Minor improvement to enterDelay handling.
src/features/meetings/person_selector/brother_selector/index.tsx	Added optional showIcon property to control icon rendering.
src/features/meetings/person_selector/circuit_overseer/index.tsx	Introduced showIcon property for conditional icon rendering.
src/features/meetings/person_selector/index.types.ts	Added showIcon property to PersonSelectorType.
src/features/meetings/person_selector/outgoing_speaker/index.tsx	Added showIcon property to control icon rendering.
src/features/meetings/person_selector/stream_speaker/index.tsx	Introduced showIcon property for icon visibility control.
src/features/meetings/person_selector/student_selector/index.tsx	Added showIcon property to control rendering of StudentIcon.
src/features/meetings/person_selector/visiting_speaker/index.tsx	Introduced showIcon property for conditional rendering of IconMale.
src/features/meetings/monthly_view/index.styled.tsx	Added new styled components StyledMonthlyViewRow, StyledMonthlyViewColumn, and StyledMonthlyViewTitleBox.
src/components/select/index.tsx	Enhanced dropdown menu styling and scrollbar appearance.
src/components/select/index.styles.tsx	Added new style rule for the SelectStyled component's text color.
src/features/meetings/monthly_view/add_custom_modal_window/index.tsx	Introduced AddCustomModalWindow component for adding custom meeting parts and export statement.
src/features/meetings/monthly_view/add_custom_modal_window/index.types.tsx	Added AddCustomModalWindowType type definition.
src/features/meetings/monthly_view/add_custom_modal_window/useAddCustomModalWindow.tsx	Added custom hook for managing custom modal window functionalities.

Suggested reviewers

• rhahao

Possibly related PRs

• #3360: The changes in the MidweekMeeting component involve rendering the MonthlyView component based on the state of openWeekView, which is directly related to the new MonthlyView component introduced in the main PR.
• #3374: The modifications in the MidweekMeeting component include the addition of the MonthlyView component, which is relevant to the changes made in the main PR regarding the MonthlyView component's functionality and integration.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[FussuChalice]

@rhahao Hi, I fixed some bugs that were causing "red text" in the console.

[joaochris]

@rhahao Will this commit be in the new version that will be released on December 1st?

[rhahao]

Hello @joaochris, no it will not be included yet, but it will be available shortly after that. Thank you.

[netlify[bot]]

✅ Deploy Preview for staging-organized ready!

Name	Link
🔨 Latest commit	bc74b1b01a89264cf07fc11d5c6644e888b0416b
🔍 Latest deploy log	https://app.netlify.com/sites/staging-organized/deploys/67560f9f1165fb00088faa04
😎 Deploy Preview	https://deploy-preview-2652--staging-organized.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.

[rhahao]

@FussuChalice: could you please solve the merge conflicts in this PR so that it will be included in the next app release? Thank you.

[rhahao]

Hello @ux-git and @FussuChalice: it seems like we need to show the year to the options here:

Also, I’ve noticed that it is very hard to have the tooltip to be shown in the current implementation.

And @FussuChalice, make sure to show only the months that are included in the sources. Otherwise, the app will crash when selecting an out-of-range month. Thanks.

[ux-git]

Also, I’ve noticed that it is very hard to have the tooltip to be shown in the current implementation.

@rhahao do you mean in terms of using the page as a user or hard in terms of coding / keeping the code clean? What suggestions would you have?

[rhahao]

@ux-git: I mean as user hovering the fields to get the source materials.

[rhahao]

@FussuChalice, @ux-git: I think it would be great to have something displayed here rather than just nothing. Here in this case it’s the Organizational Accomplishments part, so no assignment will be made. Thanks.

[ux-git]

@rhahao @FussuChalice what about having:

1. Empty 'None' indicator (looks like a field but is not) with a 'This part isn't included this week.' hover tooltip. This ensures better structure with 100% clarity that certain meeting parts are simply not included and that's not a bug.
2. Included 'Custom part' row to enable creating custom parts for the Living as christians section.

---

Additional questions @rhahao: a) Is adding custom parts already implemented in the current version? Asking if Max could adopt the existing functionality to his page? b) Some experience regarding the 'Organizational Accomplishments' part – in some congregation this part is still assigned to a brother. Most of time this involves elderly brothers or those who don't yet learned the language very well, to still be able to say a few intro/outro words. I personally faced these scenarios, so maybe it would be nice to not fully disable scheduling such parts?

[rhahao]

a) Is adding custom parts already implemented in the current version? Asking if Max could adopt the existing functionality to his page?

@ux-git: Affirmative. But I do not think its current implementation would be good in this page. As an idea, adding a custom part in this view may open a pop-up to enter the information needed. After this is saved, assignment can be made.

b) Some experience regarding the 'Organizational Accomplishments' part – in some congregation this part is still assigned to a brother. Most of time this involves elderly brothers or those who don't yet learned the language very well, to still be able to say a few intro/outro words. I personally faced these scenarios, so maybe it would be nice to not fully disable scheduling such parts?

On this one, I prefer to keep the current approach. (See S-38) Thanks.

[ux-git]

Okay, great. Then tomorrow I'll prepare a pop-up design as well as another state: 'The meeting part exists, but should not be assigned' 👍

[rhahao]

@FussuChalice: it seems like the Aux Counselor fields are not aligned correctly with the other fields. Thanks for taking a look at it.

[sonarqubecloud[bot]]

Quality Gate passed

Issues
35 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
17.2% Duplication on New Code

See analysis details on SonarQube Cloud

[cypress[bot]]

organized-app    Run #1971

Run Properties:   Passed #1971  •  3e5fb7e243: feat(meetings): add monthly view for editing midweek meeting

Project	organized-app
Branch Review	main
Run status	Passed #1971
Run duration	00m 05s
Commit	3e5fb7e243: feat(meetings): add monthly view for editing midweek meeting
Committer	Max Makaluk
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	1
View all changes introduced in this branch ↗︎