gamma-an

As a Backend Developer, I need to implement user authentication using JWT tokens to secure API endpoints and manage user sessions.

As a Backend Developer, I need to develop the subscription management API to handle CRUD operations for customer subscriptions.

As a Backend Developer, I need to set up RBAC middleware to enforce role-based access control across the platform.

As a Backend Developer, I need to implement the ticket management API to allow support staff to create, update, and resolve support tickets.

As a Backend Developer, I need to develop the analytics API to provide admins with access to usage analytics and reports.

As a frontend developer, implement the Navbar section for the Landing page. This section provides a shared navigation shell across the project, displaying the brand logo, navigation links to various pages, and Sign In/Sign Up buttons for unauthenticated users. The Navbar should be responsive, with a hamburger menu for mobile devices. Implement hover animations using motion/react for the Sign In and Sign Up buttons, where the text and icon drift slightly toward the cursor. Ensure the Navbar maintains a consistent design across all device sizes. Acceptance criteria: The Navbar must render exactly once on the Landing page, displaying the brand logo, navigation links, and authentication buttons. The magnetic hover effect must be implemented on the Sign In and Sign Up buttons, and the responsive hamburger menu must function correctly. The Navbar must adhere to the design structure and theme provided in the source code. No backend integration is required for this section. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the LandingAICapabilities section to showcase AI-powered features. This section should display 6 AI capabilities in a responsive grid layout with hover animations and scroll-triggered stagger animations. Each capability card includes an icon, title, and description. Ensure the grid shimmer reveal and cascade unfold animations are implemented using the motion library. Acceptance criteria: The Landing page must render the LandingAICapabilities section exactly once. The section should display 6 capability cards with hover effects and animations as described. The design must match the provided layout and theme. No backend integration is required as the data is static. The section is accessible to Customers only. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the LandingIntegrations section to showcase third-party platform connections. This section should display integration logos for Email, Slack, and Calendar with hover effects that include a subtle scale and drift animation. Use the motion library to achieve the magnetic logo cluster effect. Acceptance criteria: The Landing page must render the LandingIntegrations section exactly once. The section should display the integration logos with the specified hover animations. The design must match the provided layout and theme. No backend integration is required as the data is static. The section is accessible to Customers only. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the LandingCTA section to encourage visitors to start a free trial or request a demo. This section should include a headline, supporting copy, and two CTA buttons with hover animations. Use the motion library to implement the breathing glow effect on the buttons. Acceptance criteria: The Landing page must render the LandingCTA section exactly once. The section should display the headline, supporting copy, and two CTA buttons with the specified animations. The design must match the provided layout and theme. No backend integration is required as the data is static. The section is accessible to Customers only. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the Footer section to provide consistent navigation and legal information across all pages. This section should include brand logo, project links, legal links, and an integration overview. Ensure the responsive layout adapts to different screen sizes. Acceptance criteria: The Footer must render on the Landing page exactly once. The section should display all specified elements with hover animations for links. The design must match the provided layout and theme. No backend integration is required as the data is static. The section is accessible to all personas. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the DashboardControls section for the Dashboard page. This section manages the dashboard_filters state and includes a time-range selector, churn risk filter checkboxes, and a health score range slider. It should update embedded metric sections (DashboardMRRSummary, DashboardChurnRisk, DashboardHealthScores, DashboardCustomerCards) reactively based on filter changes. The section must provide apply and reset buttons to persist or reset filter states. Acceptance criteria: The DashboardControls must render exactly once on the Dashboard page. It should manage and broadcast filter states to embedded regions, updating them in real-time. The section must persist filter states to URL query params or local state. The apply and reset buttons must function correctly. The component must integrate with the existing customer data model. Access is shared among Admin, Customer Success Manager, and Support personas. Page access: Admin, Customer Success Manager only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the DashboardSatisfaction section to display customer satisfaction metrics including Net Promoter Score (NPS), Customer Satisfaction Score (CSAT), and Customer Effort Score (CES). Each metric should show the current score, a trend indicator (up/down), and a mini sparkline for a 3-month historical trend. The section should be responsive, stacking vertically on mobile. Acceptance criteria: 1) The DashboardSatisfaction component must render on the Dashboard page for Admin and Customer Success Manager personas. 2) Each metric card must display the correct score, trend direction, and sparkline. 3) Hovering over a score card should show a tooltip with period comparison. 4) The design must match the provided CSS styles. Page access: Admin, Customer Success Manager only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the DashboardRenewals section to display upcoming customer renewals within the next 60 days. This section should include a header with the 'Upcoming Renewals (Next 60 Days)' title and a count badge. Each row should display the customer name, renewal date, MRR at risk, health score, and renewal probability with color-coded badges. The section should limit the display to 4-6 rows and include a 'View All Renewals' link to the /Renewals page. Clicking on a row should navigate to /Renewals?id=<customer.id>. Acceptance criteria: 1) The DashboardRenewals component must render on the Dashboard page for Admin and Customer Success Manager personas. 2) The section must display the correct number of upcoming renewals and sort them by renewal date. 3) Each row must be clickable and navigate to the correct renewal detail page. 4) The 'View All Renewals' link must navigate to the /Renewals page. 5) The design must match the provided CSS styles. Page access: Admin, Customer Success Manager only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the SubscriptionDetails section to display detailed information about the current subscription. This section should show the plan name 'Professional', team members used (12/15), billing cycle 'Monthly', renewal date 'September 3, 2026', and an auto-renew toggle. The toggle should allow users to enable or disable auto-renewal, updating the state accordingly. The section must be styled according to the provided CSS, ensuring the layout and design tokens are preserved. Acceptance criteria: The SubscriptionDetails must render exactly once on the Subscription page, displaying all subscription details accurately. The auto-renew toggle must function correctly, updating the state without backend integration. The design must match the provided CSS. Access is restricted to the Customer persona only. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the SubscriptionPlans section to display all available subscription plans. This section should include plan cards with pricing, features, and team member limits. Users should be able to select a plan and initiate an upgrade/downgrade workflow with a confirmation modal. The section must be styled according to the provided CSS, ensuring the layout and design tokens are preserved. Acceptance criteria: The SubscriptionPlans must render exactly once on the Subscription page, displaying all plans side-by-side. Users must be able to select a plan, triggering the confirmation modal. The design must match the provided CSS. Access is restricted to the Customer persona only. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the SupportFiltersAndNav section to provide filtering and navigation controls for support tickets. This section should include status tabs, priority filter, and sort options. Ensure the section integrates with the SupportTicketList to update the displayed tickets based on selected filters. Acceptance criteria: - The Support page must render the SupportFiltersAndNav component exactly once. - The component must provide status tabs, priority filter, and sort options, updating the ticket list accordingly. - The design must match the provided CSS, including responsive behavior. - The component must not require backend integration as it operates on frontend state. - Access is restricted to the Support persona only. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ProfileAccountSection for the Profile page. This section manages the user's core account information, allowing display and editing of personal details such as name, email, role, company, timezone, language, and avatar. It includes an edit mode with form validation, save/cancel actions, and success feedback. The section owns the profile_edit state and includes a ProfileHeader displaying the user's name and role. Acceptance criteria: 1) The Profile page must render the ProfileAccountSection component exactly once. 2) The section must display user details and allow editing with form validation. 3) The section must handle avatar uploads and provide feedback on save actions. 4) The section must be accessible only to the Customer persona. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ProfilePreferencesSection for the Profile page. This section manages user preferences and notification settings, including email and Slack notifications, dark mode toggle, session timeout, and data export frequency. Each preference has a toggle or selector with immediate or explicit save. The section owns the preferences_toggle state. Acceptance criteria: 1) The Profile page must render the ProfilePreferencesSection component exactly once. 2) The section must display preference options with toggles and selectors. 3) The section must save preference changes and show confirmation. 4) The section must be accessible only to the Customer persona. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ProfileIntegrationsSection for the Profile page. This section manages third-party service integrations, displaying a list of connected services such as Gmail, Slack, and Google Calendar. It includes connection status, last sync time, and action buttons to disconnect or reconnect services. The section uses `integration_management` state to handle the integration cards, which are expandable to show detailed information. Acceptance criteria: The ProfileIntegrationsSection must render exactly once on the Profile page, visible only to Customers. It must include all specified controls and interactions, preserve the design structure from the provided JSX and CSS, and integrate with backend endpoints for managing service connections. The section must not duplicate integration controls elsewhere. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ReportsGallery section for the Reports page. This section displays a grid or list of generated reports with metadata such as title, type, and generation date. Each report card includes action buttons for downloading, emailing, sharing, and deleting reports. The section supports filtering by report type and sorting by date. Implement the report generation form with type selector, date range picker, and customer filter toggle. Ensure the loading state and preview of generated reports are displayed correctly. Acceptance criteria: The Reports page must render the ReportsGallery component exactly once. The report cards must display the correct metadata and support all specified actions. The filtering and sorting controls must function as described. The report generation form must validate inputs and display a loading indicator during report generation. This section is accessible by Admin only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AnalyticsControls section for the Analytics page. This section includes a date-range picker, metric toggles for MRR, Churn, Health, and CSAT, and customer segment filters. Users should be able to select a date range, toggle metric visibility, and filter by customer segment. The section should include 'Apply Filters' and 'Clear' buttons to manage the filter state. Ensure the section is styled according to the provided CSS and is responsive. This section is accessible only by Admins. Acceptance criteria: - The Analytics page should render the AnalyticsControls component exactly once. - Users must be able to select a date range, toggle metrics, and filter by segment. - The 'Apply Filters' button must apply the selected filters. - The 'Clear' button must reset all filters. - The design must match the provided CSS, including responsiveness. - Access to this section must be restricted to Admins only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AnalyticsBreakdown section for the Analytics page. This section includes detailed breakdown tables for MRR by product/plan type, Health score distribution by customer segment, and Churn risk by ARR band. Tables should support sorting and be scrollable on mobile. Ensure the section is styled according to the provided CSS and is responsive. This section is accessible only by Admins. Acceptance criteria: - The Analytics page should render the AnalyticsBreakdown component exactly once. - Each table must display the correct data and support sorting by column headers. - Tables must be scrollable on mobile devices. - The design must match the provided CSS. - Access to this section must be restricted to Admins only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the InsightCard component to display individual insight details. This component should render a card with a title, summary, metric display, and a CTA link. The card should be styled according to the provided CSS, with dynamic tone-based styling for different insight categories. The component is used within both ChurnRiskInsights and RenewalForecastInsights sections. Acceptance criteria: 1) The InsightCard component must render correctly within its parent sections. 2) The card must display the correct data passed via props. 3) The design must match the provided CSS, including hover effects. 4) The CTA must navigate to the correct route as specified in the props. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the UsersTable section to display, manage, and edit user accounts with role and status control. This section includes a comprehensive data table with sortable columns for name, email, role, status, and last login. It supports row selection, sorting, inline role/status editing, bulk actions (delete), and user detail/edit modal. The section must manage all mutable user state and selection logic, including filtering by role and status, and searching by name or email. Acceptance criteria: The UsersTable must render exactly once on the Users page, displaying all users in a sortable, filterable data table. Inline role and status editing must be functional, with changes reflected in the table. Bulk actions and modals for editing and deleting users must be operational. The section must adhere to the design tokens and styles specified in the CSS. Access to this page is restricted to Admin persona only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the IntegrationsList section for the Integrations page. This section manages integration connections and configurations, displaying them as expandable cards. Each card includes service name, connection status, configuration details, and action buttons (Configure, Test Connection, Disconnect). The section owns the configuration form state and handles interactions such as expanding/collapsing details, editing configurations, testing connections, saving configurations, and disconnecting integrations. Acceptance criteria: The IntegrationsList must render exactly once on the Integrations page. It should display integration cards with correct details and support all specified interactions. The design must match the provided CSS, including responsive behavior. The section must manage its state independently and handle API interactions for testing and saving configurations. Access is restricted to Admin and Customer personas. Page access: Admin, Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the GettingStarted section for the Integrations page. This section provides setup instructions and best practices for integrations, including step-by-step guides for Email, Slack, and Calendar setup, troubleshooting tips, and a support contact link. The content is static and read-only, with collapsible accordion sections for each guide. Acceptance criteria: The GettingStarted section must render exactly once on the Integrations page. It should display all instructional content with collapsible functionality. The design must match the provided CSS, including animations for accordion transitions. The support link should navigate to the support page. Access is restricted to Admin and Customer personas. Page access: Admin, Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the MeetingsList section for the Meetings page. This section displays a list of meetings as cards, each showing customer name, meeting title, scheduled date/time, duration, and status. It includes filters for status and date range, and sort options. Clicking a card expands a detail drawer with full meeting info, participants, notes, and AI-generated summary for completed meetings. Ensure the section is responsive and maintains the design theme. Acceptance criteria: The MeetingsList must render exactly once on the Meetings page, displaying meeting cards with interactive filters and sort options. The detail drawer must expand on card click, showing complete meeting details. The section must be accessible to Customer Success Manager and Support personas only. Page access: Customer Success Manager, Support only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ScheduleNewMeeting section for the Meetings page. This section includes a form for scheduling a new meeting with fields for customer selection, meeting title, date/time, duration, participants, and notes. It must validate inputs and display errors. On submit, the form should add the meeting to records and close. Ensure the section is responsive and maintains the design theme. Acceptance criteria: The ScheduleNewMeeting form must render as a modal or bottom panel, allowing users to schedule a meeting with all required fields and validation. The form must submit successfully and reset on completion. The section must be accessible to Customer Success Manager and Support personas only. Page access: Customer Success Manager, Support only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the TasksList section for the Tasks page. This section displays a scrollable list of tasks with filtering and sorting capabilities. Each task row should show the title, assignee, due date, priority, and status, with inline action buttons for editing, reassigning, changing priority, marking complete, and deleting tasks. The section must support bulk selection and bulk status updates, and open a detail drawer on row click. Acceptance criteria: The Tasks page must render the TasksList component exactly once. The list must support filtering by status, priority, assignee, and due date, and sorting by due date, priority, assignee, and created date. The design must match the provided CSS, including responsive behavior. The section must be accessible by Customer Success Manager only. All task mutations must be handled within this component, maintaining a single source of truth for task data. Page access: Customer Success Manager only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the InsightsSuggestedActions section for the Insights page. This section displays a list of AI-generated suggested actions for customer success managers. Each action card includes customer name, action title, type, due date, AI confidence score, and status. Users can filter actions by priority, mark them complete, dismiss them, or expand for details. The section manages all mutable state for these interactions. Acceptance criteria: The Insights page must render the InsightsSuggestedActions component exactly once. The section must display action cards with all specified metadata and interactive controls. The design must match the provided CSS, including animations. The section must allow filtering, marking actions complete, dismissing, and expanding details. Access is restricted to Customer Success Managers only. Page access: Customer Success Manager only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the InsightsUpsellOpportunities section for the Insights page. This section displays AI-identified upsell and cross-sell opportunities, showing potential product upgrades or add-ons for each customer based on usage patterns and health scores. Each opportunity card should display the customer, opportunity type, estimated MRR impact, win probability, and supporting rationale. Users must be able to view details, sort opportunities by MRR or probability, create follow-up tasks, or dismiss opportunities. The section should manage its own workflow state using React state hooks. Acceptance criteria: The Insights page must render the InsightsUpsellOpportunities component exactly once. The component must display opportunity cards with interactive controls for sorting, task creation, and dismissal. The design must match the provided CSS, including animations for card transitions. The section must integrate with a backend endpoint to fetch and update opportunity data, ensuring correct status updates upon task creation or dismissal. Access is restricted to Customer Success Managers only. Page access: Customer Success Manager only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the LandingHero section for the Landing page. This section features a full-width animated hero with a 'living data stream' concept, showcasing customer data inputs flowing into an AI processor and transforming into insights. Use motion/react for animations, including hover states on the CTA button and scroll-triggered reveal animations. The section includes a headline, subheading, and a primary CTA button. Acceptance criteria: The LandingHero must render exactly once on the Landing page, displaying the animated data flow visualization, headline, subheading, and CTA button. The animations must be smooth and continuous, adhering to the design structure and theme. No backend integration is required for this section. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the LandingValue section for the Landing page. This section articulates the core benefits of gamma-an through 3-4 key value statements with supporting icons and concise copy. Implement scroll-linked card slide-in animations and hover effects using motion/react. Acceptance criteria: The LandingValue must render exactly once on the Landing page, displaying the value statement cards with icons and descriptions. The scroll-triggered animations and hover effects must function correctly, adhering to the design structure and theme. No backend integration is required for this section. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the LandingFeatures section for the Landing page. This section showcases use cases for different personas (Admin, Customer Success Manager, Support) through feature cards. Implement tab-driven persona card morphing with inner content slide animations using motion/react. Acceptance criteria: The LandingFeatures must render exactly once on the Landing page, displaying persona-specific feature cards with titles, descriptions, and icons. The tab-driven animations must function correctly, adhering to the design structure and theme. No backend integration is required for this section. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the LoginCard section for the Login page. This section includes a centered authentication form card with email and password inputs, a password visibility toggle, a 'Remember me' checkbox, a login submit button, error message display, a forgot password link, a social login divider with 'Continue with Google' and 'Continue with GitHub' buttons, and a sign-up link. The section manages authentication state and interactions such as entering email and password, toggling password visibility, submitting login, handling social logins, and navigating to password recovery or account creation. The form should validate inputs and display error messages appropriately. The login process should simulate an authentication flow with a loading state and redirect to the '/Dashboard' on successful login. The section should be accessible to Admin, Customer, Customer Success Manager, and Support personas. Acceptance criteria: The LoginCard component must render exactly once on the Login page. All controls and interactions must function as described, with the design structure and theme preserved. The backend endpoint for authentication must be integrated, and error handling must be verified. The page access must be shared among specified personas. Page access: shared by all personas (Admin, Customer, Customer Success Manager, Support). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the DashboardOpenTickets section to display a list of open support tickets sorted by priority. This section should include a header with the 'Open Tickets' title and a count badge showing the number of open tickets. Each ticket should display its ID, subject, associated customer name, priority badge (color-coded), and created date. The section should limit the display to 5-6 most recent tickets and include a 'View All' link to the /Tickets page. Clicking on a ticket row should navigate to /Tickets?id=<ticket.id>. Ensure the priority badges are color-coded as high (#E74C3C), medium (#F5A623), and low (#9B9B9B). Implement hover effects for row highlights. Acceptance criteria: 1) The DashboardOpenTickets component must render on the Dashboard page for Admin and Customer Success Manager personas. 2) The section must display the correct number of open tickets and sort them by priority. 3) Each ticket row must be clickable and navigate to the correct ticket detail page. 4) The 'View All' link must navigate to the /Tickets page. 5) The design must match the provided CSS styles. Page access: Admin, Customer Success Manager only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the BillingPaymentMethods section to manage payment methods for subscription billing. This section should display stored cards with details such as card brand, last four digits, and expiry date. It should allow users to set a default payment method, add new payment methods through a form, and remove outdated cards. The form should validate card number, expiry date, CVC, and cardholder name. The section should use motion effects for card interactions and ensure that the payment methods list updates dynamically. Acceptance criteria: The Subscription page must render the BillingPaymentMethods component exactly once. The component must display a list of payment methods with the ability to set a default, add, and remove cards. The design must match the provided CSS, including tilt effects on cards. The backend must support adding and removing payment methods, and setting a default method. Access is restricted to Customers only. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the BillingHistory section to display a list of past invoices with details such as invoice date, amount, status, and download links. The section should allow users to filter invoices by date range and sort them by date or amount. The design must include a responsive table layout with badges indicating payment status. Acceptance criteria: The Subscription page must render the BillingHistory component exactly once. The component must display a list of invoices with filtering and sorting capabilities. The design must match the provided CSS, including responsive adjustments. The backend must provide invoice data for display. Access is restricted to Customers only. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the SubscriptionActions section to provide account-level subscription actions. This section should include a cancel subscription button, a contact support link, and a manage licenses link. The cancel subscription button should trigger a confirmation workflow. The design must include danger zone styling for the cancel action. Acceptance criteria: The Subscription page must render the SubscriptionActions component exactly once. The component must provide links and buttons for subscription management actions. The design must match the provided CSS, including danger zone styling. The backend must handle subscription cancellation requests. Access is restricted to Customers only. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the SupportTicketDetails section to display detailed information about a selected support ticket. This section should include a ticket header with status and priority, customer information card, conversation thread, internal notes editor, and resolution actions. Ensure the section manages its own 'ticket_detail' state. Acceptance criteria: - The Support page must render the SupportTicketDetails component exactly once when a ticket is selected. - The component must display complete ticket information, allow status and priority updates, and provide internal notes editing and resolution actions. - The design must match the provided CSS, including responsive layouts. - The component must integrate with the Ticket Management API to update ticket details. - Access is restricted to the Support persona only. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ProfileSecuritySection for the Profile page. This section manages sensitive security settings and account protection, including two-factor authentication (2FA), active sessions management, password changes, and account deletion. It uses the `security_management` state to handle 2FA status, session lists, and modals for password change and account deletion. The section must display the 2FA status with a toggle button, list active sessions with device info, IP address, and last active time, and provide buttons to revoke individual or all sessions. It should also include a password change modal with form validation and an account deletion confirmation modal. Ensure the section is styled with danger zone styling for destructive actions. Acceptance criteria: The ProfileSecuritySection must render exactly once on the Profile page, visible only to Customers. It must include all specified controls and interactions, preserve the design structure from the provided JSX and CSS, and integrate with backend endpoints for session management and account updates. The section must not duplicate security controls elsewhere. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the TicketsList section for the Tickets page. This section is the primary state owner managing the complete ticket_workflow. It renders the left sidebar filter panel (TicketFilters) and the central list area with a table/list of filtered and sorted tickets. The section owns selectedTicketId, all filter state, sort field, and modal visibility. It displays columns such as checkbox (bulk select), status badge, priority badge, customer name, ticket subject, sentiment indicator, updated timestamp, and assignee avatar. It supports column sorting, infinite scroll/pagination, and an empty state. Clicking a row or row action opens the TicketDetailPanel modal as an embedded region managed by this section. Ensure the section integrates with the backend to fetch and update ticket data, and handles interactions like row selection, sorting, and modal operations. Acceptance Criteria: - The Tickets page must render the TicketsList component exactly once. - The TicketsList must display a filterable and sortable list of tickets with the specified columns and badges. - The TicketFilters sidebar must be collapsible on mobile and emit filter changes to the parent state. - The TicketDetailPanel modal must open upon row click, displaying detailed ticket information and allowing updates. - The section must integrate with the 'api.ticket' capability for backend data operations. - Access to the Tickets page is restricted to the Support persona only. Page access: Support only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AnalyticsOverview section for the Analytics page. This section displays KPI stat cards for MRR, Churn Rate, Average Health Score, and CSAT. Each card shows the current value, trend, and a mini trend indicator. The cards should be arranged in a responsive grid that adapts to the viewport size. Ensure the section is styled according to the provided CSS. This section is accessible only by Admins. Acceptance criteria: - The Analytics page should render the AnalyticsOverview component exactly once. - Each KPI card must display the correct metric value and trend. - The grid layout must be responsive, adapting to different screen sizes. - The design must match the provided CSS. - Access to this section must be restricted to Admins only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AnalyticsCharts section for the Analytics page. This section includes three primary charts: MRR trend line chart, Customer health score distribution chart, and Churn risk heatmap. Each chart should be interactive, with hover tooltips for data point details and legend toggles for series visibility. Ensure the section is styled according to the provided CSS and is responsive. This section is accessible only by Admins. Acceptance criteria: - The Analytics page should render the AnalyticsCharts component exactly once. - Each chart must display the correct data and support interactions like hover tooltips and legend toggles. - The layout must be responsive, adapting to different screen sizes. - The design must match the provided CSS. - Access to this section must be restricted to Admins only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. This section provides persistent navigation and user context, displaying the current user profile with an avatar and role badge. It includes primary navigation links (Dashboard, Customers, Renewals, Tasks, Insights) and admin-only secondary links (Analytics, Users, Integrations, Reports). The sidebar should be collapsible to a drawer on mobile devices and maintain a visual highlight of the current page. Ensure that admin-only sections are visible only when the user role is Admin. The sidebar should toggle open/close on mobile and close when a link is clicked. Acceptance criteria: The DashboardSidebar must render exactly once on the Dashboard page. It should display the user profile and role badge, and provide navigation links with role-based visibility. The sidebar must collapse to a drawer on mobile and maintain a responsive design. The current page should be highlighted in the navigation. The component must integrate with the existing authentication and RBAC middleware. Access is restricted to Admin, Customer Success Manager, and Support personas. Page access: Admin, Customer Success Manager only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the SubscriptionPageHeader section to display the subscription management page header. This section should include the page title 'Subscription', an account status badge indicating 'Active', and a renewal date display formatted as 'September 3, 2026'. The header should animate into view using a motion div with initial opacity 0 and y-offset 16, transitioning to opacity 1 and y-offset 0 over 0.4 seconds. The section must be styled according to the provided CSS, ensuring the layout and design tokens are preserved. Acceptance criteria: The SubscriptionPageHeader must render exactly once on the Subscription page, displaying the correct subscription plan name, status, and renewal date. The design must match the provided CSS, including animations. The section is read-only and does not require backend integration. Access is restricted to the Customer persona only. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the SupportTicketList section to display a list of support tickets with filtering, sorting, and selection capabilities. This section should render ticket rows showing ID, title, customer name, status badge, priority indicator, and last updated timestamp. Implement infinite scroll or pagination for large datasets. Ensure the section owns the 'ticket_workflow' state and does not duplicate state from sibling components. Include a 'New Ticket' button for quick ticket creation. Acceptance criteria: - The Support page must render the SupportTicketList component exactly once. - The component must display ticket metadata and support filtering by status and priority, sorting by date or priority, and selection of a ticket to view details. - The design must match the provided CSS, including hover and active states. - The component must integrate with the Ticket Management API to fetch and display tickets. - Access is restricted to the Support persona only. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ProfileSidebar section for the Profile page. This section provides a left navigation sidebar with links to Account, Preferences, Security, and Integrations. It should indicate the current active section and collapse to a drawer on mobile devices under 768px. The sidebar uses React state to manage the active section and mobile drawer state, and it employs the motion library for animations. Ensure the sidebar updates the URL hash and scrolls to the active section smoothly. Acceptance criteria: 1) The Profile page must render the ProfileSidebar component exactly once. 2) The sidebar must display navigation links with icons and highlight the active section. 3) The sidebar must collapse into a drawer on mobile devices and expand on larger screens. 4) The component must update the URL hash and scroll to the section on link click. 5) The sidebar must be accessible only to the Customer persona. Page access: Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the TicketsHeader section for the Tickets page. This section includes a page title, a primary CTA to create a new ticket, and a quick status summary displaying the count of open tickets, high-priority tickets, and unassigned tickets. The section should be mobile-responsive and include a breadcrumb for navigation. The create ticket button should link to '/Tickets?create=true'. The ticket counts should be dynamically calculated from the provided ticketData array. Ensure the design matches the provided CSS styles, including responsive adjustments for different screen sizes. This section is accessible only by the Support persona. Acceptance criteria: 1) The TicketsHeader component must render exactly once on the Tickets page. 2) The page title, breadcrumb, create ticket button, and ticket counts must be visible and styled according to the CSS. 3) The create ticket button must navigate to the correct URL when clicked. 4) The breadcrumb must allow navigation back to the Home page. 5) The section must be mobile-responsive as per the CSS media queries. 6) Access to this section must be restricted to the Support persona. Page access: Support only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the CustomersListPanel section on the Customers page. This section is the main operational workspace displaying a sortable, filterable table of all customer accounts. Each row should show customer name, subscription status, health score, MRR, and renewal date. Users can click a row to load the detail view, use filters to narrow by status, and sort by any column. Row actions include a quick-view button and edit link. The component should own the complete 'customer_selection_and_filter' workflow using a canonical React state/data source. Ensure the search input filters by name or email, and the add customer button triggers the new customer creation flow. Implement the detail panel to display full customer profiles with edit capabilities. Include loading skeletons and an empty state when no results match the filters. Acceptance criteria: - The Customers page must render the CustomersListPanel exactly once. - The table must support sorting by name, health score, MRR, and renewal date, and filtering by status (active, at-risk, churned). - The search input must filter customers by name or email. - The add customer button must open a form to add a new customer. - The detail panel must display customer details and support editing. - The section must be accessible by Admin, Customer Success Manager, and Support personas. Page access: Admin, Customer Success Manager, Support only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ReportsHeader section for the Reports page. This section includes a page title 'Reports', a subtitle describing the purpose of the page, and quick-action buttons for generating a new report, viewing recent reports, and accessing help documentation. The 'Generate Report' button should have hover and tap animations using the motion library. The 'View Recent Reports' button should smoothly scroll to the ReportsGallery section. Ensure the design tokens for colors, fonts, and spacing are applied as per the CSS provided. Acceptance criteria: The Reports page must render the ReportsHeader component exactly once. The page title, subtitle, and buttons must be visible and styled according to the provided CSS. The 'Generate Report' button must animate on hover and tap. The 'View Recent Reports' button must scroll to the ReportsGallery section. The 'Help & Docs' link must be functional. This section is accessible by Admin only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AnalyticsHeader section for the Analytics page. This section should display the page title 'Usage Analytics' and a brief description of available insights. It includes an export button to download analytics data as a CSV and a refresh button to update the analytics data. The export functionality should generate a CSV file with predefined metrics and trigger a download. The refresh button should call the provided onRefresh function. Ensure the section is styled according to the provided CSS, with responsive design adjustments for smaller screens. This section is accessible only by Admins. Acceptance criteria: - The Analytics page should render the AnalyticsHeader component exactly once. - The header must display the title 'Usage Analytics' and a description. - The export button must download a CSV file with the specified metrics. - The refresh button must trigger the onRefresh function. - The design must match the provided CSS, including responsiveness. - Access to this section must be restricted to Admins only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the ChurnRiskInsights section to display top churn risks and health decline alerts. This section should render up to 3 high-risk accounts and 8 accounts with declining health scores using the CHURN_INSIGHTS and HEALTH_TREND data arrays. Each insight card should include a summary, metric value, and a CTA to navigate to customer detail or risk management views. Ensure the section is styled according to the provided CSS, with a grid layout for insight cards and a health trend summary. The section is accessible only by Admins. Acceptance criteria: 1) The ChurnRiskInsights component must render exactly once on the Analytics page. 2) The section must display the correct number of insight cards and health trend segments. 3) The design must match the provided CSS, including responsive behavior. 4) The CTAs must navigate to the correct routes as specified in the JSX. 5) The section must be restricted to Admin access only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the RenewalForecastInsights section to display renewal revenue forecasts and upsell opportunities. This section should use the RENEWAL_INSIGHTS and TIMELINE data arrays to render insight cards and a 90-day forecast timeline. Each card should include a summary, metric value, and a CTA to navigate to the renewals pipeline or upsell opportunities. Ensure the section is styled according to the provided CSS, with a grid layout for cards and a timeline. The section is accessible only by Admins. Acceptance criteria: 1) The RenewalForecastInsights component must render exactly once on the Analytics page. 2) The section must display the correct number of insight cards and timeline segments. 3) The design must match the provided CSS, including responsive behavior. 4) The CTAs must navigate to the correct routes as specified in the JSX. 5) The section must be restricted to Admin access only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the UsersPageHeader section to introduce the Users management page and provide a user creation entry point. This section includes a page title, description, and an 'Invite User' button. The button should trigger a placeholder function for the invite user flow, which will be replaced with the actual modal or page. The section must use motion animations for button interactions (hover and tap effects). Ensure the design matches the provided CSS, including responsive adjustments for different screen sizes. Acceptance criteria: The UsersPageHeader must render exactly once on the Users page, displaying the title 'Users' and description 'Manage team members, roles, and access permissions.' The 'Invite User' button must be visible and interactive, logging 'Invite user clicked' to the console on click. The section must adhere to the design tokens and styles specified in the CSS. Access to this page is restricted to Admin persona only. Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the IntegrationHeader section for the Integrations page. This section displays the page title 'Integrations', a description of the page's purpose, and badges showing the count of connected and pending integrations. It includes a call-to-action button for adding new integrations. The component uses motion animations for smooth transitions. The counts are computed from the page_header state. Acceptance criteria: The IntegrationHeader must render exactly once on the Integrations page. It should display the title, description, connected and pending badges, and the 'Add Integration' button. The design must match the provided CSS, including animations. The section should read from the page_header state for counts. The 'Add Integration' button should navigate to the integration addition workflow. Access is restricted to Admin and Customer personas. This section depends on the Dashboard and Login pages. Page access: Admin, Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the RenewalsTable section for the Renewals page. This section is responsible for displaying a sortable table (or card grid on mobile) showing a list of renewals. The table includes columns for Customer Name, ARR, Renewal Probability, Due Date, Status badge, Health Score, Last Interaction, and Next Meeting. It supports row actions such as viewing details, scheduling meetings, auto-drafting emails, and updating status. The table state, including sort, filters, and selection, is managed within this section using React state hooks. Ensure the table is mobile-responsive, stacking filters vertically and collapsing advanced options. Implement the 'renewal_filtering_sorting' workflow, ensuring no duplication of status/health display in sibling sections. The section must be accessible only to the Customer Success Manager persona. Acceptance criteria: 1) The RenewalsTable component must render exactly once on the Renewals page. 2) The table must support sorting by multiple columns and filtering by status, health score, and due date range. 3) The design structure and theme must match the provided CSS. 4) Implement API integration for updating status and fetching renewal data. 5) Ensure the section is restricted to the Customer Success Manager persona. Page access: Customer Success Manager only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the MeetingsHeader section for the Meetings page. This section includes a page title, breadcrumb navigation, and a 'Schedule Meeting' CTA button. The breadcrumb should link back to the Dashboard. The CTA button should be styled with a '+' icon and open the ScheduleNewMeeting form when clicked. Ensure the header is responsive and maintains the design theme. Acceptance criteria: The MeetingsHeader must render exactly once on the Meetings page, displaying the title 'Meetings', breadcrumb navigation to 'Dashboard / Meetings', and a functional 'Schedule Meeting' button. The button must open the ScheduleNewMeeting form. The section must be accessible to Customer Success Manager and Support personas only. Page access: Customer Success Manager, Support only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the TasksActions section for the Tasks page. This section includes a top action bar with a 'Create Task' button, a 'Refresh/Sync' button, and an 'Export/Download' button. The 'Create Task' button should open a modal or inline form for task creation. The 'Refresh' button should trigger a state change to simulate data syncing, and the 'Export' button should simulate task list export. Ensure the buttons have hover and tap animations using the motion library. Acceptance criteria: The Tasks page must render the TasksActions component exactly once. The action bar must include the specified buttons with the described interactions and animations. The design must match the provided CSS, including responsive behavior. The section must be accessible by Customer Success Manager only. The component should not include task selection checkboxes or bulk actions. Page access: Customer Success Manager only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the InsightsHeader section for the Insights page. This section introduces the page with a title 'AI-Powered Insights' and a subtitle explaining AI-driven recommendations. It displays the last generated timestamp and includes a refresh button to update insights. The refresh button should show a loading state when clicked and update the timestamp upon completion. Ensure the section is styled according to the provided CSS, with animations for the title and metadata row. Acceptance criteria: The Insights page must render the InsightsHeader component exactly once. The header must display the title, subtitle, last generated timestamp, and a functional refresh button. The design must match the provided CSS, including animations. The refresh button must update the timestamp and show a loading state. Access is restricted to Customer Success Managers only. Page access: Customer Success Manager only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the InsightsAutoDraftedEmails section for the Insights page. This section displays a list of AI auto-drafted follow-up emails for customer engagement, including renewal reminders, upsell pitches, and churn prevention outreach. Each draft email card should show the subject, recipient customer, email type, AI confidence score, and current status. Users must be able to preview drafts, edit the content inline, send directly, or discard drafts. Implement filtering by email type and ensure all mutable state for email draft interactions is managed within this section. The section should use React state hooks for managing email lists, filters, and editing states. Acceptance criteria: The Insights page must render the InsightsAutoDraftedEmails component exactly once. The component must display email cards with interactive controls for preview, edit, send, and discard actions. The design must match the provided CSS, including animations for card transitions. The section must integrate with a backend endpoint to fetch and update email drafts, ensuring correct status updates upon sending or discarding. Access is restricted to Customer Success Managers only. Page access: Customer Success Manager only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.