sonic-1

As a Backend Developer, I want to implement JWT-based authentication for the API to secure user access.

As a Backend Developer, I want to implement a notification service to handle alerts and reminders for users.

As a frontend developer, implement the LoginFormCard section for the Login page. This component includes form fields for email and password with validation logic, a 'Remember Me' checkbox, and a submit button. It uses state hooks to manage form data, loading state, and error messages. Implement client-side validation for email format and password length, and display error messages accordingly. Page access: shared by all personas (Accountant (View Only), Admin, Customer Support, Director, Marketing, Sales Executive, Sales Manager, Telecaller). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the LoginAltMethods section for the Login page. This component provides alternative login methods using buttons for Google and Microsoft authentication. It includes SVG icons for each provider and a link to the registration page. Ensure the layout is responsive and visually consistent with the design. Page access: shared by all personas (Accountant (View Only), Admin, Customer Support, Director, Marketing, Sales Executive, Sales Manager, Telecaller). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the Footer section for the Login page. This component includes branding elements and links to the Privacy Policy and Terms of Service. Ensure the footer is consistent with the overall site design and is responsive across different devices. Page access: shared by all personas (Accountant (View Only), Admin, Customer Support, Director, Marketing, Sales Executive, Sales Manager, Telecaller). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the DashboardSidebar section which includes a collapsible sidebar with navigation links to various sections such as Dashboard, Leads, Pipeline, and more. The sidebar should toggle its collapsed state using a button. Ensure that links to restricted pages like Analytics and Bookings are conditionally shown based on the user's persona. The sidebar also displays the user's role as 'Admin'. This section depends on the Navbar from the Login page. Page access: Accountant (View Only), Admin, Director, Marketing, Sales 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 CustomerHeader section which displays the customer's avatar, name, status, contact information, and action buttons for editing the profile. This section includes SVG icons for phone, email, and location, and buttons with SVG icons for editing the profile. Ensure the layout is responsive and matches the design specifications. This section is accessible by Customer Support ONLY. Page access: Customer 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 LeadsHeader section which displays the total number of leads and includes a button to capture a new lead. The button triggers the onCaptureLead function. This section is accessible by Sales Executive and Sales Manager personas. Ensure the component integrates with the existing Navbar from the Login page. Page access: Sales Executive, Sales 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 FollowupsHeader section for the Follow-ups page. This section includes a breadcrumb navigation, a title displaying 'Follow-ups', a subtitle showing the total count of follow-ups, a search input with a clear button, and a view toggle between 'list' and 'calendar' modes. It also features a button to create a new follow-up. Ensure that the search input updates the searchQuery state and the view toggle updates the viewMode state. This section is accessible by Sales Executive and Telecaller personas. Page access: Sales Executive, Telecaller only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a Backend Developer, create API endpoints for managing bookings, including CRUD operations, discount approvals, payment plans, and registration dates. Ensure endpoints are secure and follow RESTful conventions.

As a Backend Developer, create API endpoints for managing site visits, including scheduling, feedback, GPS check-in, and visit outcomes. Ensure endpoints are secure and follow RESTful conventions.

As a Backend Developer, create API endpoints for managing follow-ups, including scheduling, reminders, and status updates. Ensure endpoints are secure and follow RESTful conventions.

As a Backend Developer, create API endpoints for managing tasks, including CRUD operations, priority settings, and status updates. Ensure endpoints are secure and follow RESTful conventions.

As a Backend Developer, create API endpoints for managing notifications, including CRUD operations and delivery preferences. Ensure endpoints are secure and follow RESTful conventions.

As a Data Engineer, create database migrations for new entities such as Bookings, Site Visits, Follow-ups, Tasks, and Notifications. Ensure migrations are versioned and reversible.

As a Backend Developer, I want to implement role-based access control to manage permissions for different user roles.

As a frontend developer, implement the ReportsPageHeader section which includes a header element with a title and description. The title 'Reports' and description provide context about the types of reports available, tailored for user roles to guide decision-making. This section is accessible by Accountant (View Only), Admin, Director, Marketing, and Sales Manager. Ensure the header styling matches the design specifications in ReportsPageHeader.css. Page access: Accountant (View Only), Admin, Director, Marketing, Sales 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 UsersPageHeader section which includes a breadcrumb navigation, a title displaying the total number of users, a search input for filtering users by name, email, or role, and buttons for adding a new user and toggling the Activity Logs sidebar. This section is accessible by Admin only and should integrate with the existing dashboard dependencies. 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 SettingsNav section which includes a mobile-responsive navigation menu with items such as 'Company Details', 'Projects', 'Lead Sources', and more. The component uses state to manage mobile menu visibility and handles navigation clicks to update the active section. This section is accessible by Admin only and should include conditional rendering for restricted access. 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 NotificationsHeader section which displays the title 'Notifications' and shows the number of unread notifications. It includes buttons for marking all notifications as read and clearing all notifications, each with SVG icons. The section should handle button states based on the unreadCount prop. This section is accessible by Customer Support ONLY and must include dependencies from the Customer page. Page access: Customer 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 TasksHeader section which includes breadcrumb navigation, a title, a description, and task statistics. The breadcrumb shows the path 'Home / Tasks' with the 'Tasks' item active. The title 'Tasks' and description provide context for task management. Task statistics display counts for 'Active', 'Overdue', and 'Completed' tasks. This section is accessible by Customer Support, Sales Executive, Sales Manager, and Telecaller. Page access: Customer Support, Sales Executive, Sales Manager, Telecaller 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 CommunicationHeader section which includes a header with a title and subtitle, a button to log interactions with an SVG icon, and search and filter controls for communications. This section is accessible by Customer Support, Sales Executive, and Telecaller personas. Ensure the button triggers the onLogInteraction function. The search input and filter dropdowns should be styled according to the provided CSS. Page access: Customer Support, Sales Executive, Telecaller 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 PipelineHeader section for the Pipeline page. This section includes a breadcrumb navigation to the Dashboard, a title and subtitle for the Sales Pipeline, and a set of action buttons. The action buttons allow users to toggle between 'Visual' and 'List' view modes using a state hook, refresh the pipeline data, and export the pipeline data. Ensure the view toggle buttons visually indicate the active mode. Page access: Director, Sales Executive, Sales 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 AnalyticsPageHeader section for the Analytics Page. This section includes a header with a title and subtitle, date range selection buttons, and a 'Generate Report' button with an SVG icon. The date range buttons update the selected range state when clicked. This section is accessible only by the Marketing persona. Ensure that the component integrates with the existing styles and layout. Page access: Marketing 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 MarketingHero section which includes an animated headline and a call-to-action button that scrolls to the LeadSourceMetrics section. The section uses IntersectionObserver to reveal content when it enters the viewport. Ensure the animation and scroll functionality are smooth. This section is accessible by the Director persona only. Page access: Director 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 CalendarSidebar section which includes a toggleable sidebar with filters for different reminder types (call, meeting, WhatsApp, SMS, email), a mini calendar display, and a date picker for jumping to specific dates. The sidebar should be accessible only to the Telecaller persona and should include functionality to toggle filters and update the UI accordingly. Page access: Telecaller only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a Tech Lead, verify the end-to-end integration between the Bookings frontend implementation and the Bookings 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 Follow-ups frontend implementation and the Follow-ups 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 Backend Developer, I want to create API endpoints for managing leads, including CRUD operations and lead assignment.

As a Backend Developer, I want to create API endpoints for managing the sales pipeline stages and transitions.

As a frontend developer, implement the ReportsFilterBar section which includes interactive filter controls for reports. This section uses state to manage filter values and includes buttons for toggling visibility, resetting filters, and exporting reports. The filter fields include Name, Phone, Project, Budget, and City. Ensure the component is styled according to ReportsFilterBar.css and supports dynamic interaction. This section is accessible by Accountant (View Only), Admin, Director, Marketing, and Sales Manager. Page access: Accountant (View Only), Admin, Director, Marketing, Sales 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 ReportsTabs section which provides tabbed navigation for different report types. The component should render buttons for each tab, highlighting the active tab based on the activeTab prop. Ensure the component is styled according to ReportsTabs.css and supports dynamic tab switching. This section is accessible by Accountant (View Only), Admin, Director, Marketing, and Sales Manager. Page access: Accountant (View Only), Admin, Director, Marketing, Sales 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 UsersTable section which displays a paginated list of users with functionalities for sorting, filtering by role, branch, and status, and selecting multiple rows. This section includes state management for selected rows, sorting, and pagination. It 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 RoleManagementModal section which allows Admins to manage user roles. This modal includes a dropdown for selecting roles, displays role descriptions, and manages permissions based on the selected role. It 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 BranchAccessModal section which allows Admins to manage branch access for users. This modal includes functionalities for selecting, deselecting, and saving branch access. It 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 ActivityLogsSidebar section which displays a searchable and filterable list of user activity logs. This sidebar can be toggled open or closed and includes options for exporting logs. It 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 SettingsPageHeader section which displays the title 'Settings' and a subtitle describing the management capabilities of the page. It includes a help button that provides access to documentation. 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 CompanyDetailsForm section which allows Admin users to update company information such as name, address, phone, email, website, and timezone. The form includes file upload functionality for a company logo with validation for file size. 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 ProjectsListTable section which displays a paginated list of projects with details such as name, location, description, and status. It includes actions for editing and deleting projects. 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 LeadSourcesListTable section which displays a paginated list of lead sources with details such as name, description, and status. It includes a toggle button to activate or deactivate each source. 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 CustomFieldsListTable section which displays a paginated list of custom fields with details such as name, type, section, and whether they are required. It includes actions for deleting fields. 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 TasksFiltersPanel section which includes a collapsible panel with filters for searching tasks, filtering by status, priority, and advanced options. The panel uses state to toggle visibility and integrates components like TasksSearchInput, TasksStatusFilter, TasksPriorityFilter, and TasksAdvancedFilters. This section is accessible by Customer Support, Sales Executive, Sales Manager, and Telecaller. Page access: Customer Support, Sales Executive, Sales Manager, Telecaller 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 TasksActionsBar component which includes actions for creating new tasks and sorting/viewing tasks. It integrates the TasksCreateButton and TasksSortAndView components. This section is accessible by Customer Support, Sales Executive, Sales Manager, and Telecaller. Page access: Customer Support, Sales Executive, Sales Manager, Telecaller 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 CommunicationTimeline section which displays a timeline of communication events grouped by date. Each event includes details such as type, contact, direction, time, duration, summary, notes, and attachments. The section uses state to manage expanded items and icons for different communication types. This section is accessible by Customer Support, Sales Executive, and Telecaller personas. Page access: Customer Support, Sales Executive, Telecaller 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 LogInteractionForm section which allows users to log new interactions. The form includes fields for interaction type, contact, date, time, direction, and duration. It features an autocomplete dropdown for contacts and updates parent components on form data changes. This section is accessible by Customer Support, Sales Executive, and Telecaller personas. Page access: Customer Support, Sales Executive, Telecaller 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 PipelineFilters section for the Pipeline page. This section allows users to filter leads by salesperson, source, project, date range, budget, and search terms. It uses state hooks to manage filter values and active tags. Implement functions to apply and clear filters, and to remove individual filter tags. Ensure the UI reflects active filters with tags. Page access: Director, Sales Executive, Sales 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 PipelineStages section for the Pipeline page. This section displays active and lost lead stages with expandable details for each stage. Use state hooks to manage expanded stages and toggle visibility of lost stages. Ensure the UI accurately reflects the total active leads and provides a visual representation of each stage's color. Page access: Director, Sales Executive, Sales 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 PipelineMetrics section for the Pipeline page. This section displays key metrics such as total pipeline leads, conversion rate, average deal value, and more. It includes a grid of metric cards and a lead distribution chart by stage. Ensure the metrics reflect changes with appropriate icons and trend indicators. Page access: Director, Sales Executive, Sales 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 PipelineLeadDetails section for the Pipeline page. This section displays detailed information about each lead, including name, contact details, source, project, budget, stage, assigned salesperson, date, and priority. Use state hooks to manage lead data and ensure the UI reflects priority and stage colors accurately. Page access: Director, Sales Executive, Sales 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 LeadSourceMetrics section for the Analytics Page. This section displays a bar chart of lead sources with animated growth on reveal, using Intersection Observer for lazy loading. It includes lead counts and trend indicators for each source. This section is accessible only by the Marketing persona. Page access: Marketing 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 CostAndConversionMetrics section for the Analytics Page. This section includes cards displaying cost per lead and conversion rate, each with a sparkline chart. The sparklines are generated using SVG elements. This section is accessible only by the Marketing persona. Page access: Marketing 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 CampaignPerformanceChart section for the Analytics Page. This section displays a bar chart comparing campaign performance metrics such as ROI, leads, and conversion rates. It highlights the best-performing campaign. This section is accessible only by the Marketing persona. Page access: Marketing 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 TimeSeriesTrends section for the Analytics Page. This section includes a line chart displaying performance trends over time, with toggleable series for different metrics. The chart uses SVG for rendering. This section is accessible only by the Marketing persona. Page access: Marketing 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 AnalyticsFiltersAndExport section for the Analytics Page. This section provides filters for campaigns, lead sources, and teams, along with date range inputs. It includes a reset button and export functionality with format selection. This section is accessible only by the Marketing persona. Page access: Marketing 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 LeadSourceMetrics section which displays a bar chart of lead sources with dynamic growth animations. The section uses IntersectionObserver to reveal content when it enters the viewport. Ensure the chart accurately reflects the data and trends. This section is accessible by the Director persona only. Page access: Director 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 CampaignROISection which displays ROI metrics for various campaigns. The section includes a dropdown to filter data by time period and uses IntersectionObserver for reveal animations. Ensure the data is presented clearly and the UI is responsive. This section is accessible by the Director persona only. Page access: Director 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 ConversionFunnelInsights section which visualizes the conversion funnel stages with dynamic bar animations. The section uses IntersectionObserver to reveal content when it enters the viewport. Ensure the funnel accurately represents the data and is visually engaging. This section is accessible by the Director persona only. Page access: Director 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 CostPerLeadAnalysis section which displays a comparative analysis of cost per lead across different sources. The section uses IntersectionObserver for reveal animations and includes a dropdown to filter data by time period. Ensure the data is accurate and the UI is intuitive. This section is accessible by the Director persona only. Page access: Director 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 BestPerformingCampaigns section which lists campaigns sorted by ROI or conversions. The section includes a dropdown for sorting and uses IntersectionObserver for reveal animations. Ensure the list is sortable and the UI is responsive. This section is accessible by the Director persona only. Page access: Director 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 AnalyticsReportsCTA section which provides buttons to generate various reports. The section uses IntersectionObserver for reveal animations and includes buttons with SVG icons. Ensure the buttons are functional and the UI is visually appealing. This section is accessible by the Director persona only. Page access: Director 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 CalendarHeader section which includes navigation buttons to switch between months, a view toggle to switch between month, week, day, and agenda views, and a search input for finding events. The header also includes a button to create new events. This section is accessible only to the Telecaller persona. Page access: Telecaller 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 EventsUpcoming section which lists upcoming events with details such as type, title, time, assigned person, and status. Each event card should include actions to reschedule or mark the event as complete. This section is accessible only to the Telecaller persona. Page access: Telecaller 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 EventsOverdue section which lists overdue events with details such as type, title, overdue time, assigned person, and status. Each event card should include actions to snooze, reschedule, or mark the event as complete. This section is accessible only to the Telecaller persona. Page access: Telecaller 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 BookingsPageHeader section which includes a header with title and subtitle, action buttons for exporting and creating new bookings, and a metrics display showing total bookings, total revenue, pending approvals, and in-progress bookings. It also includes a search input for filtering bookings by various criteria. This section is accessible by Accountant (View Only), Director, and Sales Manager. Ensure that the export and new booking buttons trigger appropriate actions. Page access: Accountant (View Only), Director, Sales 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 SiteVisitsPageHeader section which includes a header with page title, breadcrumb navigation, and action buttons for scheduling visits and exporting data. It also contains filter controls for date, executive, outcome, and vehicle. This section is accessible by Sales Executive ONLY and must include conditional rendering for restricted access. Ensure integration with the Pipeline page as per the dependency. Page access: Sales Executive 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 CampaignsHeader section which includes a page title, subtitle, a date range selector, and a button to create a new campaign. This section is accessible only by the Marketing persona and should include conditional rendering for restricted access. Ensure the date range selector has options for 'Today', 'Last 7 days', 'Last 30 days', 'This Month', and 'Custom Range'. The 'Create New Campaign' button should be styled as a primary button. Page access: Marketing only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a QA Engineer, I want to verify the lead management API endpoints to ensure they meet the functional requirements.

As a frontend developer, implement the ReportsTableContainer section which displays data tables for various report types. This component uses state and memoization to manage sorting, pagination, and filtering of report data. It dynamically renders columns and data based on the active tab and applied filters. Ensure the component is styled according to ReportsTableContainer.css and supports efficient data handling. This section is accessible by Accountant (View Only), Admin, Director, Marketing, and Sales Manager. Page access: Accountant (View Only), Admin, Director, Marketing, Sales 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 CompanyDetailsSubmit section which provides 'Save Changes' and 'Cancel' buttons for the CompanyDetailsForm. It includes feedback messages for successful saves and a loading spinner during the save process. 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 ProjectsAddButton section which provides a button to open a modal form for adding new projects. The form includes fields for project name, location, description, and status with validation for required fields. 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 LeadSourcesAddButton section which provides a button to open a modal form for adding new lead sources. The form includes fields for source name and description with validation for required fields. 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 TasksSearchInput component which allows users to search tasks by entering a search term. The component includes a search icon, input field, and a clear button that resets the search term. This section is accessible by Customer Support, Sales Executive, Sales Manager, and Telecaller. Page access: Customer Support, Sales Executive, Sales Manager, Telecaller 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 TasksStatusFilter component which allows users to filter tasks by status. The component includes checkboxes for 'To Do', 'In Progress', 'Done', and 'Overdue' statuses, each with a color indicator and count. This section is accessible by Customer Support, Sales Executive, Sales Manager, and Telecaller. Page access: Customer Support, Sales Executive, Sales Manager, Telecaller 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 TasksPriorityFilter component which allows users to filter tasks by priority. The component includes checkboxes for 'High', 'Medium', and 'Low' priorities, each with a color badge and count. This section is accessible by Customer Support, Sales Executive, Sales Manager, and Telecaller. Page access: Customer Support, Sales Executive, Sales Manager, Telecaller 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 TasksAdvancedFilters component which allows users to apply advanced filters such as assignee and due date range. The component includes dropdowns for selecting team members and date inputs for specifying date ranges. A 'Clear All Filters' button resets all selections. This section is accessible by Customer Support, Sales Executive, Sales Manager, and Telecaller. Page access: Customer Support, Sales Executive, Sales Manager, Telecaller 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 TasksCreateButton component which allows users to open a modal for creating new tasks. The button toggles the visibility of a modal that includes fields for task title, description, priority, due date, assignee, and category. This section is accessible by Customer Support, Sales Executive, Sales Manager, and Telecaller. Page access: Customer Support, Sales Executive, Sales Manager, Telecaller 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 TasksSortAndView component which allows users to sort tasks by various criteria and toggle between list and grid views. The component includes a dropdown for sorting options and buttons for view mode selection. This section is accessible by Customer Support, Sales Executive, Sales Manager, and Telecaller. Page access: Customer Support, Sales Executive, Sales Manager, Telecaller 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 LogInteractionAttachments section which allows users to add notes and upload attachments related to an interaction. The section manages state for notes and files, and provides functionality to add and remove files. This section is accessible by Customer Support, Sales Executive, and Telecaller personas. Page access: Customer Support, Sales Executive, Telecaller 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 LogInteractionActions section which provides action buttons for saving or canceling an interaction log. It displays error messages if any and triggers onSave and onCancel functions. This section is accessible by Customer Support, Sales Executive, and Telecaller personas. Page access: Customer Support, Sales Executive, Telecaller 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 CalendarGridMonth section which displays a grid of days for the current month. Each day cell should show events with color-coded dots based on event type (call, meeting, WhatsApp, SMS, email) and highlight overdue events. The grid should allow selecting a date to view more details. This section is accessible only to the Telecaller persona. Page access: Telecaller 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 CalendarGridWeek section which displays a weekly view with time slots from 8 AM to 6 PM. Events should be displayed in their respective time slots with color coding based on event type. This section is accessible only to the Telecaller persona. Page access: Telecaller 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 CalendarGridDay section which displays a daily view with time slots from 8 AM to 8 PM. Events should be displayed in their respective time slots with color coding based on event type. This section is accessible only to the Telecaller persona. Page access: Telecaller 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 SiteVisitsList section which displays a table of site visits with columns for date, time, executive, vehicle, guests, pickup location, GPS check-in status, and outcome. It includes action buttons for viewing, editing, completing, and deleting visits. This section is accessible by Sales Executive ONLY. Page access: Sales Executive 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 SiteVisitsScheduleForm section which allows users to schedule new site visits. The form includes fields for lead selection, date, time, executive, vehicle, pickup location, guest count, guest names, and notes. It also includes validation for required fields. This section is accessible by Sales Executive ONLY. Page access: Sales Executive 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 CampaignsFilterBar section which includes search functionality, status and channel filters, sorting options, and a clear filters button. This section uses state hooks to manage the search input, status filter, channel filter, and sort order. Ensure the clear filters button resets all filters to their default values. This section is accessible only by the Marketing persona. Page access: Marketing 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 CampaignsListTable section which displays a table of campaigns with columns for campaign name, channel, status, start and end dates, leads, CPL, ROI, and actions. The table should include action buttons for viewing, editing, pausing/resuming, archiving, and deleting campaigns. Use a helper function to apply status-specific classes for styling. This section is accessible only by the Marketing persona. Page access: Marketing 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 CampaignsMetricsPanel section which displays key metrics such as active campaigns, total spend, total leads, average ROI, and more. Each metric is displayed in a card with an icon and color-coded border. This section is accessible only by the Marketing persona. Page access: Marketing 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 CampaignsPerformanceChart section which displays a performance chart with options for line, bar, and area chart types. The chart visualizes monthly leads, spend, and ROI data. Include buttons to toggle between chart types and ensure the chart scales correctly. This section is accessible only by the Marketing persona. Page access: Marketing 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 CampaignsROIComparison section which includes a bar chart for ROI by campaign and a pie chart for ROI by channel. The section also displays a list of the top five campaigns with their ROI and trend indicators. This section is accessible only by the Marketing persona. Page access: Marketing only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a Tech Lead, verify the end-to-end integration between the Tasks frontend implementation and the Tasks 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 SiteVisitDetailModal section which provides a detailed view of a site visit. It includes tabs for details, photos, GPS check-in, and feedback. The modal allows editing visit details, uploading photos, updating GPS data, and submitting feedback. This section is accessible by Sales Executive ONLY. Page access: Sales Executive 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 CampaignsListPagination section which provides pagination controls for navigating through campaign results. Include buttons for previous and next page navigation, and a dropdown to select the number of results per page. The pagination should update the current page state and display the correct range of campaigns. This section is accessible only by the Marketing persona. Page access: Marketing only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a Tech Lead, verify the end-to-end integration between the Site Visits frontend implementation and the Site Visits 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 SiteVisitPhotoGallery section which allows users to view and manage photos related to a site visit. It includes functionality for uploading new photos, deleting existing ones, and viewing photos in a lightbox. This section is accessible by Sales Executive ONLY. Page access: Sales Executive 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 SiteVisitGpsCheckIn section which allows users to capture or manually enter GPS coordinates for a site visit. It includes functionality for confirming GPS check-in status and displaying the timestamp of the check-in. This section is accessible by Sales Executive ONLY. Page access: Sales Executive 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 SiteVisitFeedbackForm section which allows users to submit feedback, select visit outcomes, and add post-visit notes. This section is accessible by Sales Executive ONLY. Page access: Sales Executive only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.