project-8127f014

Develop API endpoints for authentication, workspace management, project management, and task operations.

Create authentication service with JWT tokens and password hashing for secure user login.

As a frontend developer, implement the Navbar section for the Signup page. This includes a responsive header with a brand logo, navigation links to Home, Login, and Signup pages, and a hamburger menu for mobile view. The Navbar should change style on scroll and toggle the menu open/close state. Ensure links to restricted pages like Signup are conditionally shown based on the Owner persona access. Page access: Owner only.

As a frontend developer, implement the BillingCurrentPlanDisplay section to show the user's current subscription plan details. This includes displaying the plan name, billing cycle, next renewal date, and next billing amount. The section should also show a warning banner if the account status is 'Past Due'. This section is accessible only by Owners. Page access: Owner only.

As a frontend developer, implement the BillingCurrentPlanActions section to provide action buttons for upgrading, downgrading, changing billing cycle, and canceling the subscription. Each button should trigger an alert or confirmation dialog. This section is accessible only by Owners. Page access: Owner only.

As a frontend developer, implement the BillingPricingToggle section to allow users to toggle between monthly and annual pricing. The toggle should update the pricing display accordingly and highlight the active selection. This section is accessible only by Owners. Page access: Owner only.

As a frontend developer, implement the BillingPricingCards section to display available subscription plans. Each card should show the plan name, price, features, and a button to select the plan. Highlight the current and recommended plans with badges. This section is accessible only by Owners. Page access: Owner only.

As a frontend developer, implement the BillingPaymentMethod section to manage payment methods. Users should be able to set a default method, edit expiry dates, and delete methods. Include a button to add new payment methods. This section is accessible only by Owners. Page access: Owner only.

As a frontend developer, implement the BillingInvoiceFilters section to allow users to filter invoices by status, date range, and search terms. Include a clear filters button to reset all filters. This section is accessible only by Owners. Page access: Owner only.

As a frontend developer, implement the BillingUsageMetrics section to display usage metrics such as members, storage, API calls, and projects. Each metric should show current usage against limits and highlight when usage is approaching limits. This section is accessible only by Owners. Page access: Owner only.

Implement role-based access control for different user personas (Owner, Admin, Manager, Member, Guest).

Develop a shared API client service layer for frontend to interact with backend APIs.

As a frontend developer, implement the SignupHero section for the Signup page. This section includes a title, subtitle, and trust indicators with SVG icons. It highlights the benefits of using NexusFlow, such as enterprise-grade security and high uptime. Ensure the design is visually appealing and aligns with the overall theme of the page, accessible only to the Owner persona. Page access: Owner only.

As a frontend developer, implement the SignupFormCard component for the Signup page. This card contains a header with a title and subtitle, and a form element that accepts children components. It should be styled to match the page's theme and support form submission without validation errors. This section is accessible only to the Owner persona. Page access: Owner only.

As a frontend developer, implement the LoginHero section for the Login page. This section features a welcoming message with a title 'Welcome Back' and a subtitle prompting users to sign in to their NexusFlow account. It includes decorative elements like an accent and a glow effect. Ensure the design aligns with the overall theme of the platform. Page access: Admin, Guest, Manager, Member only.

As a frontend developer, implement the LoginFormFields section for the Login page. This form includes fields for email and password with validation, a toggle for password visibility, and a 'Remember me' checkbox. It handles input changes and displays error messages. Ensure accessibility features like aria attributes are correctly implemented. Page access: Admin, Guest, Manager, Member only.

As a frontend developer, implement the LoginSocialAuth section for the Login page. This component provides buttons for social login with providers like Google, GitHub, and Microsoft. It includes a loading spinner, error message display, and a divider with text. Ensure the buttons are styled with provider-specific colors and handle social login interactions. Page access: Admin, Guest, Manager, Member only.

As a frontend developer, implement the Footer section for the Login page. This component includes multiple sections with links to various pages like 'Features', 'Pricing', 'About', and 'Contact'. It also displays social media links and a copyright notice. Ensure the footer is consistent with the overall design and functionality across the platform. This component may already exist from the Landing page. Page access: Admin, Guest, Manager, Member only.

As a frontend developer, implement the OnboardingHeader section which displays a welcome message and workspace name. It includes a link to the help page. This section is accessible by the Owner persona only. Ensure the header is styled according to the provided CSS and integrates with the existing Navbar from the Signup page. Page access: Owner only.

As a frontend developer, implement the BillingInvoiceTable section to display a paginated and sortable table of invoices. The table should support filtering based on the selected filters and allow sorting by invoice number, date, and amount. This section is accessible only by Owners. Page access: Owner only.

Develop API endpoints for managing compliance settings, including data retention, encryption, and audit logging. Ensure endpoints support CRUD operations and are secured with role-based access control.

Develop API endpoints for managing storage settings, including quota limits, storage usage, and file management. Ensure endpoints support CRUD operations and are secured with role-based access control.

Develop API endpoints for managing notifications, including in-app and email notifications. Ensure endpoints support CRUD operations and are secured with role-based access control.

Develop API endpoints for managing calendar events, including personal, team, and project calendars. Ensure endpoints support CRUD operations and are secured with role-based access control.

Develop API endpoints for generating and exporting reports, including productivity and performance insights. Ensure endpoints support CRUD operations and are secured with role-based access control.

Develop API endpoints for managing user profiles, including skills, availability, and notification preferences. Ensure endpoints support CRUD operations and are secured with role-based access control.

Develop API endpoints for managing automation rules and recurring tasks. Ensure endpoints support CRUD operations and are secured with role-based access control.

Develop API endpoints for managing file uploads, previews, and version history. Ensure endpoints support CRUD operations and are secured with role-based access control.

Develop API endpoints for managing integrations with external services such as calendars, email, and cloud storage. Ensure endpoints support CRUD operations and are secured with role-based access control.

Implement global state management for authentication and workspace context.

Develop integration tests for critical API workflows including user registration, workspace creation, and task management.

As a frontend developer, implement the SignupFormInputs component for the Signup page. This component includes input fields for email, password, confirm password, and workspace name, with error handling and password strength indicators. It should support toggling password visibility and display validation errors. This section is accessible only to the Owner persona. Page access: Owner only.

As a frontend developer, implement the SignupFormAgreement component for the Signup page. This component includes checkboxes for agreeing to terms of service and opting into marketing communications. It should handle state changes and display errors if terms are not agreed upon. This section is accessible only to the Owner persona. Page access: Owner only.

As a frontend developer, implement the SignupFormActions component for the Signup page. This component includes a submit button with loading state, error display, and social signup options with SVG icons for Google, GitHub, and Microsoft. It should handle form submission and display errors appropriately. This section is accessible only to the Owner persona. Page access: Owner only.

As a frontend developer, implement the OnboardingProgressIndicator section which visually represents the user's progress through the onboarding steps. It highlights the current step and marks completed steps with a checkmark icon. This section is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the OnboardingStepContainer section which provides a container for each onboarding step, displaying the step title and description. This section is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the OnboardingWorkspaceSetupForm section which allows the Owner persona to input workspace name and description. It includes validation for required fields and displays error messages. This section is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the OnboardingBrandingForm section which allows the Owner persona to upload a company logo and input company name. It includes drag-and-drop functionality for the logo upload and validation for image files. This section is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the OnboardingInviteTeamForm section which allows the Owner persona to invite team members by email. It includes validation for email format and prevents duplicate entries. This section is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the OnboardingProjectSetupForm section which allows the Owner persona to set up a new project with a name, description, and template selection. It includes validation for required fields. This section is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the OnboardingSettingsConfigForm section which allows the Owner persona to configure notifications and integrations settings. It includes toggle switches for each setting. This section is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the OnboardingStepNavigation section which provides navigation controls for the onboarding process, including Previous, Skip, and Next buttons. It handles navigation logic and button states. This section is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the DashboardSidebar section which includes navigation items such as Dashboard, Projects, Team, Calendar, Reports, and Settings. It also features quick actions like Create Task, Invite Member, and View Activity. The sidebar should be collapsible, with an open/close state managed by the 'open' prop and 'onClose' callback. Ensure that navigation links to restricted pages are conditionally shown based on persona access. Page access: shared by all personas (Admin, Guest, Manager, Member, Owner).

As a Tech Lead, verify the end-to-end integration between the Automation frontend implementation and the Automation backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a Tech Lead, verify the end-to-end integration between the File Management frontend implementation and the File Management backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a Tech Lead, verify the end-to-end integration between the Integration frontend implementation and the Integration backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

Set up CI/CD pipeline for automated testing, building, and deployment of the application.

As a frontend developer, implement the DashboardHeader section which includes breadcrumb navigation and action buttons for creating tasks, inviting members, and accessing settings. Ensure the header is responsive and integrates seamlessly with the rest of the dashboard layout. Page access: shared by all personas (Admin, Guest, Manager, Member, Owner).

As a frontend developer, implement the DashboardWelcome section which greets the user with a personalized message and displays onboarding progress. It also includes an announcement area for new features. Ensure the section is styled according to the design and is responsive. Page access: shared by all personas (Admin, Guest, Manager, Member, Owner).

As a frontend developer, implement the DashboardStats section which displays key statistics such as Total Tasks, Tasks Due Today, Completed This Week, and Team Members. Each stat card should show an icon, value, and trend indicator. Ensure the section is responsive and visually aligns with the dashboard theme. Page access: shared by all personas (Admin, Guest, Manager, Member, Owner).

As a frontend developer, implement the DashboardProjects section which allows users to view and filter active projects. It includes search functionality and status filtering. Each project card displays the project name, status, progress, and team members. Ensure the section is interactive and responsive. Page access: shared by all personas (Admin, Guest, Manager, Member, Owner).

As a frontend developer, implement the DashboardTeam section which displays team workload information. It includes member avatars, roles, task counts, and capacity bars. Ensure the section is styled according to the design and is responsive. Note that this section is accessible by Managers only. Page access: shared by all personas (Admin, Guest, Manager, Member, Owner).

As a frontend developer, implement the DashboardActivity section which displays recent activities grouped by time periods such as Today, Yesterday, and This Week. Each activity includes user actions, targets, and timestamps. Ensure the section is interactive and responsive. Page access: shared by all personas (Admin, Guest, Manager, Member, Owner).

As a frontend developer, implement the WorkspaceSidebar section which includes a collapsible sidebar with menu items such as Settings, Members, Integrations, Security, Billing, and Audit Logs. The sidebar should toggle open/close with a hamburger button and display workspace information like name and plan. Ensure that links to restricted pages like Audit Logs and Billing are conditionally shown based on persona access. This section depends on the DashboardSidebar from the Dashboard page. Page access: Admin, Owner only.

As a frontend developer, implement the ProjectsHeader section for the Projects page. This section includes a sticky header that becomes fixed when scrolling past a certain point, using the IntersectionObserver API. It features breadcrumb navigation linking back to the Dashboard and a 'Create Project' button with an SVG icon that triggers the onCreateProject callback. This page is accessible by Manager and Owner personas. Page access: Manager, Owner only.

As a frontend developer, implement the ReportsPageHeader section which includes a breadcrumb navigation, a title, a subtitle, and action buttons for refreshing data, scheduling reports, and accessing help. The refresh button triggers a state change to show a spinning icon while refreshing. This section is accessible by Admin, Manager, and Owner personas. Ensure breadcrumb links to restricted pages are conditionally shown. Page access: Admin, Manager, Owner only.

As a frontend developer, implement the ProjectsViewToggle section for the Projects page. This section provides a toggle for switching between 'Grid', 'List', and 'Board' views, using buttons styled as radio buttons. The active view is highlighted, and the onViewChange callback is triggered on selection. This page is accessible by Manager and Owner personas. Page access: Manager, Owner only.

As a frontend developer, implement the ProjectsStatusFilter section for the Projects page. This section allows filtering projects by status ('All', 'Active', 'Archived') using buttons styled as radio buttons. The active filter is highlighted, and the onFilterChange callback is triggered on selection. The section also displays counts for each status. This page is accessible by Manager and Owner personas. Page access: Manager, Owner only.

As a frontend developer, implement the ProjectsSortSearch section for the Projects page. This section includes a dropdown for sorting projects by 'Name', 'Created', 'Due Date', or 'Progress', and a search input with a clear button. The onSortChange and onSearchChange callbacks are triggered on interaction. This page is accessible by Manager and Owner personas. Page access: Manager, Owner only.

As a frontend developer, implement the ProjectsGrid section for the Projects page. This section displays projects in a grid format with cards showing project status, name, description, and a progress bar. Each card includes a menu for quick actions like 'View Details', 'Edit', 'Duplicate', 'Archive', and 'Delete'. The onQuickAction callback is triggered on action selection. This page is accessible by Manager and Owner personas. Page access: Manager, Owner only.

As a frontend developer, implement the ProjectsEmptyState section for the Projects page. This section displays a message and icon when no projects are found, with different content based on whether filters are applied. It includes a 'Create Project' button that triggers the onCreateProject callback. This page is accessible by Manager and Owner personas. Page access: Manager, Owner only.

As a frontend developer, implement the ProjectsTemplates section for the Projects page. This section displays a list of project templates in a carousel format, with each template showing an icon, name, description, setup time, and task count. Users can toggle the visibility of the templates and use a template via the onUseTemplate callback. This page is accessible by Manager and Owner personas. Page access: Manager, Owner only.

As a frontend developer, implement the ReportsFilterBar section which allows users to filter reports by date range, project, team, status, and priority. It includes a mobile toggle for filter visibility and displays an active filter count. This section is accessible by Admin, Manager, and Owner personas. Page access: Admin, Manager, Owner only.

As a frontend developer, implement the ReportsSummaryCards section which displays summary cards for various metrics such as total tasks completed, on-time delivery rate, and team productivity score. Each card includes a sparkline chart to show trends. This section is accessible by Admin, Manager, and Owner personas. Page access: Admin, Manager, Owner only.

As a frontend developer, implement the ReportsCompletionTimeline section which displays a timeline chart of task completions over weeks. It includes controls for zooming and panning the timeline. This section is accessible by Admin, Manager, and Owner personas. Page access: Admin, Manager, Owner only.

As a frontend developer, implement the ReportsStatusDistribution section which displays a pie chart of task statuses. Users can click on slices to highlight them and view percentage details. This section is accessible by Admin, Manager, and Owner personas. Page access: Admin, Manager, Owner only.

As a frontend developer, implement the ReportsWorkloadChart section which displays a bar chart of team workload. It includes sorting functionality and tooltips for detailed information. This section is accessible by Admin, Manager, and Owner personas. Page access: Admin, Manager, Owner only.

As a frontend developer, implement the ReportsDeliveryMetrics section which displays a gauge chart for on-time delivery metrics. It includes a toggle for detailed view showing on-time and late task counts. This section is accessible by Admin, Manager, and Owner personas. Page access: Admin, Manager, Owner only.

As a frontend developer, implement the ReportsCycleTimeChart section which displays a line chart comparing cycle times of two teams against a target. It includes a toggle for comparing teams. This section is accessible by Admin, Manager, and Owner personas. Page access: Admin, Manager, Owner only.

As a frontend developer, implement the ReportsTaskBreakdown section which displays a paginated table of tasks with sorting and CSV export functionality. This section is accessible by Admin, Manager, and Owner personas. Page access: Admin, Manager, Owner only.

As a frontend developer, implement the MembersPageHeader section for the Members page. This section includes a breadcrumb navigation, a title 'Team Members', and displays statistics such as active members, pending invites, and total capacity. The stats are currently hardcoded and should be replaced with API data in the future. This page is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the BoardHeader section for the Board page. This section includes a breadcrumb navigation using the BREADCRUMB_TRAIL array, a project title display from PROJECT_META, and interactive buttons for marking the project as a favorite and toggling project information visibility. The section uses state hooks to manage the favorite status and info panel visibility. Ensure that links to restricted pages are conditionally shown based on the user's persona. This section is accessible by Manager, Member, and Owner personas. Page access: Manager, Member, Owner only.

As a frontend developer, implement the UsersPageTitle section to display the title 'Users & Members' and a description 'Manage your workspace team, roles, and access.' It should also show the total number of workspace members using a badge. This section is accessible by Admin only and depends on the Workspace page implementation. Page access: Admin only.

As a frontend developer, implement the TimelinePageHeader section which includes breadcrumb navigation links to 'Workspace' and 'Projects', and a title 'Project Timeline'. It also features action buttons for adding milestones and tasks, and options to export or print the timeline. This section is accessible by Managers only and should conditionally render links based on persona access. Page access: Manager only.

As a Tech Lead, verify the end-to-end integration between the Reports frontend implementation and the Reports backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a frontend developer, implement the MembersInviteForm section for the Members page. This section includes a title 'Invite New Members' and a description about sending email invitations. It serves as a container for the invite fields and actions. This page is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the MembersListHeader section for the Members page. This section includes search, filter, and sort controls for the member list, with state management for search input, active filter, and sort key. This page is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the PendingInvitesHeader section for the Members page. This section displays a title 'Pending Invitations' and a badge showing the count of pending invites. This page is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the BoardViewSwitcher section for the Board page. This section allows users to switch between different board views (Kanban, List, Calendar, Timeline) using the VIEW_MODES array. It includes interactive tabs with icons and a dynamic indicator that adjusts based on the active view. The section uses state hooks and layout effects to manage the active view and indicator positioning. This section is accessible by Manager, Member, and Owner personas. Page access: Manager, Member, Owner only.

As a frontend developer, implement the BoardSearch section for the Board page. This section provides a search input for filtering tasks by name, description, or ID using the SAMPLE_TASKS array. It includes a clear button and handles keyboard events for clearing the search. The section uses state hooks and memoization to manage the search query and results. This section is accessible by Manager, Member, and Owner personas. Page access: Manager, Member, Owner only.

As a frontend developer, implement the BoardQuickFilters section for the Board page. This section provides quick filter options for tasks, such as 'My Tasks', 'Assigned to Me', and 'Due Today', using the QUICK_FILTERS array. It includes interactive list items that highlight when active. This section is accessible by Manager, Member, and Owner personas. Page access: Manager, Member, Owner only.

As a frontend developer, implement the BoardFilterBar section for the Board page. This section allows users to filter tasks by various criteria such as 'Assignee', 'Priority', and 'Due Date' using the FILTER_GROUPS array. It includes dropdown menus for grouping and sorting tasks, and a modal for advanced filter options. The section uses state hooks and refs to manage filter states and interactions. This section is accessible by Manager, Member, and Owner personas. Page access: Manager, Member, Owner only.

As a frontend developer, implement the BoardSavedViews section for the Board page. This section displays a list of saved views with interactive elements for selecting and managing views. It includes a 3D accent geometry rendered using @react-three/fiber and @react-three/drei. The section uses state hooks and callbacks to handle view selection and menu interactions. This section is accessible by Manager, Member, and Owner personas. Page access: Manager, Member, Owner only.

As a frontend developer, implement the KanbanBoard section for the Board page. This section displays tasks in a Kanban-style board with columns for different task statuses. It includes drag-and-drop functionality for moving tasks between columns. The section uses state hooks and refs to manage task data and interactions. This section is accessible by Manager, Member, and Owner personas. Page access: Manager, Member, Owner only.

As a frontend developer, implement the UsersControls section to provide user management controls including search, role and status filters, view mode toggle, and an invite button. This section should allow Admins to search users by name or email, filter by role and status, and toggle between table and card views. Page access: Admin only.

As a frontend developer, implement the TimelineDateRangeControl section which allows users to select a date range using start and end date inputs. It includes preset buttons for 'This Week', 'This Month', and 'This Quarter', and zoom controls. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the TimelineViewAndFilterBar section which provides toggle buttons for switching between 'Gantt' and 'List' views. It includes filters for task status and assignee, a search input, and a clear filters button. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the TimelineStatusSummary section which provides an overview of task statuses with counts and date range. It displays badges for each status and the total number of tasks. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the TaskDetailHeader section which includes editable task titles using a state hook for title management. The section features breadcrumb navigation and action buttons for editing, sharing, and navigating back. This section is accessible by Guest, Member, and Owner personas. Page access: Guest, Member, Owner only.

As a frontend developer, implement the PermissionsPageHeader section using React and Three.js. This section includes a decorative 3D accent using the Canvas component from @react-three/fiber, with orbiting rings animated via useFrame. It also features breadcrumb navigation and a header with action buttons. This section is accessible by Admin ONLY and should include page-level dependencies from the Users page. Page access: Admin only.

As a frontend developer, implement the TeamPageHeader section for the Team page. This section includes breadcrumb navigation, action buttons for adding members, exporting reports, and accessing settings. It displays the team name, member count, and member avatars with dynamic background colors. Ensure that the 'Add Member', 'Export Report', and 'Settings' buttons trigger the appropriate callbacks. This section is accessible by Managers only and should include page-level dependencies from the Timeline page. Page access: Manager only.

As a frontend developer, implement the MembersInviteFields section for the Members page. This section includes input fields for email addresses and role selection, with validation for email format and message length. It uses state hooks to manage form data and errors. This page is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the MembersListTable section for the Members page. This section displays a sortable table of members with columns for name, email, role, join date, and last active. It uses state to manage sorting direction and key. This page is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the KanbanTaskColumn section for the Board page. This section represents a single column in the Kanban board, displaying tasks with drag-and-drop support. It includes 3D status orbs rendered using @react-three/fiber. The section uses state hooks and callbacks to manage task interactions. This section is accessible by Manager, Member, and Owner personas. Page access: Manager, Member, Owner only.

As a frontend developer, implement the UsersTable section to display users in a table or card view based on the selected view mode. It should support selecting users, changing roles, and removing users. This section is accessible by Admin only. Page access: Admin only.

As a frontend developer, implement the UsersInviteModal section to allow Admins to invite new users by entering email addresses, selecting a role, and optionally adding a personal message. This modal should handle form submission and close actions. Page access: Admin only.

As a frontend developer, implement the TimelineGanttChart section which displays tasks and milestones over a timeline. It calculates dimensions based on the date range and tasks, and dynamically adjusts the chart size. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the TaskDetailProperties section which allows users to update task status, priority, assignees, and due dates. This section uses state hooks for managing form inputs and includes interactive elements like dropdowns and buttons. Accessible by Guest, Member, and Owner personas. Page access: Guest, Member, Owner only.

As a frontend developer, implement the TaskDetailDescriptionEditor section which provides a markdown-supported text area for editing task descriptions. It includes state management for content and editing modes, with auto-resizing text areas. Accessible by Guest, Member, and Owner personas. Page access: Guest, Member, Owner only.

As a frontend developer, implement the TaskDetailSubtasks section which displays and manages a list of subtasks with completion toggles and progress tracking. It uses state hooks for managing the subtask list and includes interactive elements for adding new subtasks. Accessible by Guest, Member, and Owner personas. Page access: Guest, Member, Owner only.

As a frontend developer, implement the TaskDetailDependencies section which displays tasks that block or are blocked by the current task. It includes expandable sections and status badges for each dependency. Accessible by Guest, Member, and Owner personas. Page access: Guest, Member, Owner only.

As a frontend developer, implement the TaskDetailAttachments section which allows users to upload and manage file attachments. It includes drag-and-drop functionality and file action buttons. Accessible by Guest, Member, and Owner personas. Page access: Guest, Member, Owner only.

As a frontend developer, implement the TaskDetailActivity section which displays a timeline of task-related activities with filtering options. It uses dummy data for activity entries and includes user avatars and action descriptions. Accessible by Guest, Member, and Owner personas. Page access: Guest, Member, Owner only.

As a frontend developer, implement the TaskDetailCommentInput section which provides a text area for adding comments with markdown and @mention support. It includes a toolbar for additional actions and a submit button. Accessible by Guest, Member, and Owner personas. Page access: Guest, Member, Owner only.

As a frontend developer, implement the TaskDetailCommentList section which displays a list of comments with nested replies. It includes like buttons and reply actions for each comment. Accessible by Guest, Member, and Owner personas. Page access: Guest, Member, Owner only.

As a frontend developer, implement the TeamStatsOverview section for the Team page. This section displays team statistics such as active members, average workload, completion rate, and team velocity. It includes a period selector to switch between week, month, and quarter views, updating the statistics accordingly. Ensure the trend indicators are displayed with appropriate icons and colors based on the trend type. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the TeamMembersHeader section for the Team page. This section provides controls for searching, filtering by role and status, and sorting team members. It includes input fields and dropdowns for these functionalities, with appropriate event handlers for changes. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the TeamWorkloadPanel section for the Team page. This section displays workload distribution among team members, with filters for skills and projects. It includes a visual representation of workload bars with color coding based on thresholds. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the TeamPerformanceCharts section for the Team page. This section displays line charts for team velocity and burndown, with period selectors for week, month, and quarter. Ensure the charts are responsive and accurately reflect the data for each period. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the PageHeader section for the Organization page. This section includes a breadcrumb navigation with links to the Dashboard and the current page, 'Organization Settings'. It displays the organization name 'Acme Corp' and an account status badge. There are two buttons for exporting settings and viewing the audit log. Note that the audit log is accessible by Admin ONLY. This section depends on the Permissions page task ID for proper integration. Page access: Admin only.

As a frontend developer, implement the NotificationsHeader section which displays the title 'Notifications' and a badge showing the number of unread notifications. It includes a 'Mark all as read' button that is disabled when there are no unread notifications, and a 'Settings' button with an SVG icon. This section is accessible by Guest persona only. Page access: Guest only.

As a frontend developer, implement the CalendarPageHeader section which includes navigation buttons for previous, next, and today, and displays the current month, week, or day based on the active view. This section is accessible by Manager and Member personas and must include task IDs from the Task Detail page to establish page-level dependency. Page access: Manager, Member only.

As a frontend developer, implement the ProfileHeader section for the Profile page. This section includes a user avatar upload feature using a file input and FileReader API to display the uploaded image. It also displays user information such as name, email, and role, with an option to edit the photo and download the profile. This section is accessible by Members only. Page access: Member only.

As a frontend developer, implement the MembersInviteAction section for the Members page. This section includes a button to send invitations, with loading state and feedback messages for success or error. It simulates an API call with a timeout. This page is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the MembersListActions section for the Members page. This section provides a dropdown menu for actions like edit, remove, and resend invite, with confirmation dialogs. It uses state to manage dropdown visibility and confirmation state. This page is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the MembersListPagination section for the Members page. This section includes pagination controls with page size options and navigation buttons, managing current page and page size state. This page is accessible by the Owner persona only. Page access: Owner only.

As a frontend developer, implement the KanbanTaskCard section for the Board page. This section displays individual task cards within a Kanban column, featuring task details such as title, priority, due date, and assignees. It includes drag-and-drop functionality and quick action buttons for task management. The section uses state hooks to manage drag state. This section is accessible by Manager, Member, and Owner personas. Page access: Manager, Member, Owner only.

As a frontend developer, implement the UsersBulkActions section to provide bulk actions for selected users, including changing roles and removing users. This section should be accessible by Admin only. Page access: Admin only.

As a frontend developer, implement the TimelineTaskInteractions section which provides a modal for task details including status, assignee, start and due dates, and progress. It includes actions for editing, logging time, and commenting. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the TeamMembersList section for the Team page. This section displays a paginated list of team members, showing their avatars, names, roles, statuses, tasks, and skills. It includes pagination controls and supports rendering custom actions for each member. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the TeamWorkloadLegend component for the Team page. This component provides a legend for workload distribution colors and includes actions for rebalancing workload and exporting workload reports. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the TeamPerformanceKPIs section for the Team page. This section displays key performance indicators such as tasks per member, deadline hit rate, and quality score, with trends for each KPI. Include period selectors for week, month, and quarter. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the NotificationsTabs section which allows switching between 'Inbox' and 'Archive' tabs. Each tab displays a count of notifications if greater than zero. The active tab is highlighted. This section is accessible by Guest persona only. Page access: Guest only.

As a frontend developer, implement the NotificationsListContainer section which displays groups of notifications. If there are no notifications, it shows a message 'No notifications yet'. Each group is labeled by date and contains notification cards. This section is accessible by Guest persona only. Page access: Guest only.

As a frontend developer, implement the ProfilePersonal section for the Profile page. This section allows Members to edit personal information such as first name, last name, email, phone, job title, department, and bio. It includes form validation for required fields and email format, with save and cancel functionality. Page access: Member only.

As a frontend developer, implement the ProfileSkills section for the Profile page. This section allows Members to manage their skills and expertise, including adding new skills with proficiency levels, removing skills, and saving changes. It features a skill suggestion list and input validation. Page access: Member only.

As a frontend developer, implement the ProfileWorkingHours section for the Profile page. This section allows Members to set their working hours for each day of the week, with time inputs for start and end times. It includes save and cancel functionality to manage changes. Page access: Member only.

As a frontend developer, implement the ProfileTimeZone section for the Profile page. This section allows Members to select their timezone from a dropdown list and displays the current time in the selected timezone. It includes a save button to confirm changes. Page access: Member only.

As a frontend developer, implement the ProfileOutOfOffice section for the Profile page. This section allows Members to set out-of-office dates with optional reasons and a reminder toggle. It includes save and cancel functionality to manage the out-of-office status. Page access: Member only.

As a frontend developer, implement the ProfileAvailabilityStatus section for the Profile page. This section allows Members to select their availability status from predefined options, each with a distinct color indicator. It includes a save button to confirm the selected status. Page access: Member only.

As a frontend developer, implement the ProfileNotificationFrequency section for the Profile page. This section allows Members to choose their notification frequency from options like Immediate, Daily Digest, and Weekly Digest. It includes a save button to confirm the selected frequency. Page access: Member only.

As a frontend developer, implement the ProfileNotificationTypes section for the Profile page. This section allows Members to toggle notification types such as Mentions, Task Assignments, and Comments. It includes a save button to confirm the selected preferences. Page access: Member only.

As a frontend developer, implement the AuditLogsPageHeader section which includes a title, subtitle, and action buttons for date selection, CSV export, and refresh. This section is accessible only by Admins and should conditionally render based on user role. Ensure the date quick-select dropdown and buttons are styled according to the design. This section depends on the Organization page implementation. Page access: Admin only.

As a Tech Lead, verify the end-to-end integration between the Calendar frontend implementation and the Calendar backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a Tech Lead, verify the end-to-end integration between the Profile frontend implementation and the Profile backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a frontend developer, implement the UsersRoleModal section to allow Admins to change the roles of selected users. This modal should display affected users and handle role updates and close actions. Page access: Admin only.

As a frontend developer, implement the UsersRemoveModal section to allow Admins to remove or deactivate selected users. This modal should display affected users and handle removal or deactivation actions. Page access: Admin only.

As a frontend developer, implement the TeamMembersActions component for the Team page. This component provides action buttons for editing, messaging, removing, and viewing performance of a team member. Ensure each button triggers the correct callback with the member ID. This section is accessible by Managers only. Page access: Manager only.

As a frontend developer, implement the NotificationCard component which displays individual notifications with user avatars, message, summary, and a timestamp. It supports toggling expansion to show more details and includes an unread indicator. This section is accessible by Guest persona only. Page access: Guest only.

As a frontend developer, implement the AuditLogsFilterUser section which allows Admins to filter logs by user and action type. This component includes a dropdown for user selection with search functionality and checkboxes for action types. Ensure the dropdown closes when clicking outside and maintains state for selected users and actions. Page access: Admin only.

As a frontend developer, implement the AuditLogsFilterActionBar section which provides filtering options for date range, resource type, and status. This section includes date inputs, checkboxes for resource types, and toggle buttons for status. Ensure the Apply and Reset buttons function correctly to update the filters. Page access: Admin only.

As a frontend developer, implement the AuditLogsTable section which displays filtered audit logs in a sortable table format. This component should handle sorting by timestamp and user, and support expanding rows to show detailed log information. Ensure the table updates based on the applied filters and pagination settings. Page access: Admin only.

As a frontend developer, implement the StorageHeader section which includes a breadcrumb navigation, a title 'Storage Management', and a help button with an SVG icon. The section also displays the last updated date dynamically. This section is accessible by Admin ONLY and should include dependencies from the Audit Logs page. Page access: Admin only.

As a frontend developer, implement the NotificationDetailExpanded component which shows detailed information about a notification, including a link to an associated item if available. It includes actions like 'View in Project' and 'Mark as Read'. This section is accessible by Guest persona only. Page access: Guest only.

As a frontend developer, implement the NotificationsActionBar component which provides actions for notifications such as marking as read/unread, snoozing, and dismissing. It includes a snooze dropdown with options for different durations. This section is accessible by Guest persona only. Page access: Guest only.

As a frontend developer, implement the AuditLogsPagination section which manages the pagination of audit logs. This component should display the current page, total pages, and allow navigation between pages. Ensure the rows per page selector updates the pagination state correctly. Page access: Admin only.

As a frontend developer, implement the StorageMetrics section which displays the total used storage, quota limit, and remaining storage in GB. This section is accessible by Admin ONLY. Page access: Admin only.

As a frontend developer, implement the StorageTrend section which includes a 30-day usage trend chart with interactive tooltips on hover. The chart uses SVG elements and displays a trend indicator. This section is accessible by Admin ONLY. Page access: Admin only.

As a frontend developer, implement the StorageBreakdownChart section which displays a bar chart of storage categories with interactive tooltips on hover. The chart segments are color-coded and represent different storage categories. This section is accessible by Admin ONLY. Page access: Admin only.

As a frontend developer, implement the StorageBreakdownDetails section which includes a sortable table displaying detailed information about storage categories. Users can sort by category, size, percentage, and last modified date. This section is accessible by Admin ONLY. Page access: Admin only.

As a frontend developer, implement the FileListRecent section which displays a paginated list of recent files with actions for deletion. The list includes file name, size, owner, upload date, and type with icons. This section is accessible by Admin ONLY. Page access: Admin only.

As a frontend developer, implement the FileLargeItems section which displays a list of large files exceeding a certain threshold with actions for deletion and moving. The list includes file name, size, owner, upload date, and type with icons. This section is accessible by Admin ONLY. Page access: Admin only.

As a frontend developer, implement the QuotaLimits section which allows admins to set and save workspace quota, per-user file size limit, API limit, and preview limit. This section includes input fields and save buttons for each limit. This section is accessible by Admin ONLY. Page access: Admin only.

As a frontend developer, implement the RetentionPolicy section which allows admins to configure data retention period, archival age, and auto-archive settings. The section includes dropdowns and toggles for configuration. This section is accessible by Admin ONLY. Page access: Admin only.

As a frontend developer, implement the CompliancePageHeader section which includes a breadcrumb navigation linking to the Admin dashboard, a title and subtitle describing compliance management, and a status badge indicating compliance status. This section is accessible by Admins only and must include the dependency on the Storage page header task. Page access: Admin only.

As a Tech Lead, verify the end-to-end integration between the Storage frontend implementation and the Storage backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a Tech Lead, verify the end-to-end integration between the Notifications frontend implementation and the Notifications backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a frontend developer, implement the ComplianceCertifications section which displays a list of certifications with icons, status badges, and descriptions. This section is accessible by Admins only and includes dynamic rendering of certification data. Page access: Admin only.

As a frontend developer, implement the EncryptionSettings section which allows Admins to toggle encryption settings for data at rest and in transit. This section includes state management for toggles and save/cancel actions. Page access: Admin only.

As a frontend developer, implement the AuthenticationSettings section which allows Admins to configure multi-factor authentication and IP whitelist settings. This section includes state management for toggles and save/cancel actions. Page access: Admin only.

As a frontend developer, implement the AuditLoggingSettings section which allows Admins to configure audit logging levels and session timeout policies. This section includes state management for select inputs and save/cancel actions. Page access: Admin only.

As a frontend developer, implement the DataResidencySettings section which allows Admins to select the primary data region for storage. This section includes state management for select inputs and save/cancel actions. Page access: Admin only.

As a frontend developer, implement the DataRetentionConfig section which allows Admins to configure data retention periods and view current storage usage. This section includes state management for select inputs and save/cancel actions. Page access: Admin only.

As a frontend developer, implement the AutoDeletionSettings section which allows Admins to configure automatic data deletion and manage backup retention. This section includes state management for toggles and save/cancel actions. Page access: Admin only.

As a frontend developer, implement the RoleBasedAccessControl section which allows Admins to manage roles and permissions for different resources. This section includes state management for role configurations and save/cancel actions. Page access: Admin only.

As a Tech Lead, verify the end-to-end integration between the Compliance frontend implementation and the Compliance backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.