As a frontend developer, I want to implement the nautical theme and page structure from the mock-design pages so that all existing scaffold pages (home, login, signup, welcome, dashboard/overview, dashboard/ai-assistant, dashboard/settings) look exactly identical to the mock-design references. This includes applying the Navy Blue (#001F54), Seafoam Green (#2E8B57), White (#FFFFFF), and Light Gray (#F5F5F5) color palette, wave animations, anchor icons, compass elements, and removing any scaffold pages not needed by the SRD user flows. This task must be completed before all other page implementation tasks.
As a frontend developer, I want to implement the Dashboard page based on the existing JSX design (v2) so that Troop Leaders can view an overview with quick actions (Compose, Announcements, Scheduler, Permissions), Scouts can view notifications and events, and Parents can view updates. Includes nautical interactive dashboard with wave animation, compass navigation, message-in-a-bottle animation, and troop activity timeline strip. Links to Compose, Announcements, Scheduler, Permissions, Inbox, and Timeline pages.
As a frontend developer, I want to implement the Timeline page based on the existing JSX design (v2) so that Scouts and Parents can view upcoming troop activities, events, and reminders on a scrollable nautical-map-style timeline. Includes activity cards with event type color coding, reminder chips, and filters for activity type. Flows from Dashboard and Profile. Scouts view events; Parents view activity updates.
As a frontend developer, I want to implement the Scheduler page based on the existing JSX design (v2) so that Troop Leaders can set and confirm automated reminders and notifications based on troop activities. Includes SchedulerToolbar with Month/Week/Day view toggles, SchedulerSidebar with mini calendar and recipient group filters, SchedulerCalendarGrid with event chips, UpcomingRemindersPanel, NewReminderModal, and ConfirmScheduleModal. Flows from Dashboard, links to confirmation step.
As a frontend developer, I want to implement the Permissions page based on the existing JSX design (v2) so that Troop Leaders can manage which leaders can send mass emails and perform other privileged actions. Includes PermissionsPageHeader, RoleOverviewCards (Leaders/Scouts/Parents counts), LeaderPermissionsTable with search and action columns, RoleAssignmentPanel with assign-role form and role definitions accordion, and PermissionAuditLog. Flows from Dashboard.
As a frontend developer, I want to implement the Compose page based on the existing JSX design (v2) so that Troop Leaders can write formatted emails, select recipients (individuals or groups), attach files, schedule sends with EST/PST timezone defaults, and send messages. Includes rich-text editor, recipient multi-select with role/group autocomplete, attachment upload, and schedule-send toggle. Flows from Dashboard and links back after send.
As a frontend developer, I want to implement the Login page based on the existing JSX design (v2) so that Troop Leaders, Scouts, and Parents can sign in with role-based tab selection, email/password fields, password visibility toggle, SSO option, and nautical branding (anchor logo, wave animation, compass watermark). The page flows to the Dashboard for all personas. References the approved Login v2 design.
As a frontend developer, I want to implement the Inbox page based on the existing JSX design (v2) so that Scouts and Parents can read messages and announcements, and Troop Leaders can view sent/received communications. Includes InboxSidebar with folder navigation (Inbox, Sent, Announcements, Scheduled, Trash), unread badges, label chips, MessageList with thread previews, MessageDetail reading pane, ComposeDrawer, and MessageBottleToast micro-interaction. On mobile the sidebar collapses to a slide-out drawer.
As a frontend developer, I want to implement the Announcements page based on the existing JSX design (v2) so that Troop Leaders can post announcements to entire troop groups. Includes announcement composer, recipient group selector, announcement feed/list, and status indicators. Flows from Dashboard. Parents and Scouts see read-only announcement feed.
As a frontend developer, I want to implement the Profile page based on the existing JSX design (v2) so that all users (Troop Leaders, Scouts, Parents) can view and edit their profile. Includes ProfileHero with avatar edit overlay, wave animation, and role badge; ProfileNav sidebar; PersonalInfoForm; NotificationPreferences with role-restricted toggles; TimezoneLocalization with EST/PST defaults; RoleBadgePermissions read-only panel; SecuritySettings with change-password form; and DangerZone with account deactivation. Flows from Dashboard via user avatar dropdown.
As a backend developer, I want to implement the scheduler and reminders REST API using FastAPI so that Troop Leaders can create, list, update, and delete scheduled reminders, and the system can trigger automated notifications at the scheduled time. Endpoints include: POST /reminders, GET /reminders, GET /reminders/{id}, PATCH /reminders/{id}, DELETE /reminders/{id}. Supports EST/PST timezone defaults and repeat frequencies (one-time, weekly, monthly).
As a backend developer, I want to implement the messaging REST API using FastAPI so that the Inbox and Compose pages can send, receive, list, and manage messages between users. Endpoints include: POST /messages (send), GET /messages (list inbox/sent), GET /messages/{id} (detail), DELETE /messages/{id} (delete/trash), PATCH /messages/{id}/read. Supports role-based access so only authorized leaders can send mass emails.
As a backend developer, I want to implement the announcements REST API using FastAPI so that Troop Leaders can post announcements to groups and all members can retrieve them. Endpoints include: POST /announcements (create), GET /announcements (list), GET /announcements/{id} (detail), PATCH /announcements/{id} (edit), DELETE /announcements/{id}. Role-based access restricts creation to authorized leaders only.
As a backend developer, I want to implement the user profile REST API using FastAPI so that all users can retrieve and update their profile information, notification preferences, and timezone/localization settings. Endpoints include: GET /users/me, PATCH /users/me, PATCH /users/me/notifications, PATCH /users/me/timezone, POST /users/me/change-password, DELETE /users/me (deactivate). Role information is read-only and managed through the permissions API.
As a backend developer, I want to implement the troop activities and timeline REST API using FastAPI so that Scouts and Parents can retrieve upcoming troop events, activities, and reminders. Endpoints include: GET /activities (list with filters), GET /activities/{id} (detail), POST /activities (leaders only), PATCH /activities/{id}, DELETE /activities/{id}. Supports filtering by type and date range.
As a backend developer, I want to implement the permissions management REST API using FastAPI so that Troop Leaders can assign roles, grant/revoke specific permissions to other leaders, and view the permission audit log. Endpoints include: GET /permissions/roles, POST /permissions/assign, PATCH /permissions/{userId}, DELETE /permissions/{userId}, GET /permissions/audit-log. Enforces that only Troop Leaders can manage permissions.
As a frontend developer, I want to integrate the Compose page with the messaging API so that Troop Leaders can send real emails/messages, select live recipient groups, attach files, and schedule sends. Replaces mock submission with actual POST /messages calls including recipient group resolution.
As a frontend developer, I want to integrate the Timeline page with the activities API so that Scouts and Parents see real upcoming troop events and reminders. Filters connect to API query params. Replaces all static mock data with live responses.
As a frontend developer, I want to integrate the Scheduler page with the reminders API so that Troop Leaders can create, view, edit, and delete real scheduled reminders. Calendar grid and UpcomingRemindersPanel display live data. NewReminderModal and ConfirmScheduleModal submit to POST /reminders.
As a frontend developer, I want to integrate the Profile page with the user profile API so that users can view and save real personal information, notification preferences, timezone settings, and change their password. DangerZone deactivation calls DELETE /users/me with confirmation.
As a frontend developer, I want to integrate the Permissions page with the permissions management API so that the LeaderPermissionsTable shows real leader data, the RoleAssignmentPanel submits live role grants, and the PermissionAuditLog displays real audit entries. All CRUD operations connect to the backend.
As a backend developer, I want to implement role-based access control middleware in FastAPI so that API endpoints enforce that only Troop Leaders can send mass emails, post announcements, manage permissions, and create activities, while Scouts and Parents are restricted to read-only access on appropriate endpoints. Uses JWT claims to carry role information.
As a frontend developer, I want to integrate the Inbox page with the messaging and announcements backend APIs so that real message data is displayed, users can read/delete messages, and the MessageBottleToast fires on new message arrival via polling or websocket. Replaces all mock/static data with live API calls.
As a backend developer, I want to implement an automated notification delivery service so that scheduled reminders are sent to the correct recipient groups (Scouts, Parents, Leaders) at the configured EST/PST time. Uses a background task scheduler (e.g., APScheduler within FastAPI) to trigger email/notification dispatch at the scheduled time.
No comments yet. Be the first!