project-ContractPILOT

Develop API resources and services for managing contracts, visits, billing, and user authentication.

As a frontend developer, implement the Navbar section for the Login page. This component includes navigation links to Dashboard, Contracts, Schedule, Renewals, and Billing, and a Sign In link. Ensure that links to restricted pages are conditionally shown based on persona access. This component may already exist from the Landing page and should be reused if possible. Page access: shared by all personas (Administrative Staff, Service Company Manager, Technician).

As a Backend Developer, create API endpoints for managing contracts, including creation, updating, deletion, and retrieval of contract details. Ensure endpoints are secured with appropriate authorization checks.

As a Backend Developer, create API endpoints for managing visits, including scheduling, updating status, and retrieving visit details. Ensure endpoints are secured with appropriate authorization checks.

As a Backend Developer, create API endpoints for managing billing, including invoice generation, payment processing, and retrieval of billing details. Ensure endpoints are secured with appropriate authorization checks.

As a Backend Developer, create API endpoints for managing contract renewals, including sending reminders and updating renewal status. Ensure endpoints are secured with appropriate authorization checks.

Implement authentication and role-based access control for different personas: Service Company Manager, Technician, and Administrative Staff.

Set up background jobs for renewal reminders and notifications for scheduled visits.

Develop the API client and service layer for frontend to interact with backend services.

As a frontend developer, implement the LoginCard section for the Login page. This component displays a heading, subheading, and an error message if provided. It wraps child components such as LoginInputs and LoginActions. Page access: shared by all personas (Administrative Staff, Service Company Manager, Technician).

As a frontend developer, implement the Footer section for the Login page. This component includes columns for Product, Company, and Support links, and a footer bottom with copyright information. This component may already exist from the Landing page and should be reused if possible. Page access: shared by all personas (Administrative Staff, Service Company Manager, Technician).

As a frontend developer, implement the DashboardHeader section which displays the current date, a welcome message for the Service Company Manager, and action buttons for creating a new contract, scheduling a visit, and viewing reports. Ensure the date is formatted correctly for the 'en-AE' locale. This section is accessible only by the Service Company Manager. Page access: Service Company Manager only.

As a frontend developer, implement the ContractsHeader section which includes breadcrumb navigation, a title, subtitle, and a 'Create New Contract' button with an SVG icon. This section is accessible by Administrative Staff and Service Company Manager. Ensure the breadcrumb reflects the current page context and the button is styled according to the design. This section depends on the Login page implementation. Page access: Administrative Staff, Service Company Manager only.

As a Tech Lead, verify the end-to-end integration between the Contract frontend implementation and the Contract 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 Visit frontend implementation and the Visit 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 Billing frontend implementation and the Billing 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 Renewal frontend implementation and the Renewal backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

Ensure API endpoints are secured with appropriate authorization checks based on user roles.

Implement the routing shell for the application, ensuring protected routes based on user roles.

As a frontend developer, implement the LoginInputs section for the Login page. This component includes input fields for email and password, a toggle button to show/hide the password, and a checkbox for 'Remember me'. It manages state for email, password, and remember using props. Page access: shared by all personas (Administrative Staff, Service Company Manager, Technician).

As a frontend developer, implement the LoginActions section for the Login page. This component includes a Sign In button that triggers the onSignIn function and displays a loading state. It also provides links for 'Forgot password?' and 'Sign up'. Page access: shared by all personas (Administrative Staff, Service Company Manager, Technician).

As a frontend developer, implement the LoginDivider section for the Login page. This component visually separates the traditional login inputs from social login options with a line and text 'or continue with'. Page access: shared by all personas (Administrative Staff, Service Company Manager, Technician).

As a frontend developer, implement the QuickStats section which displays key statistics such as Total Active Contracts, Pending Renewals, Upcoming Visits, and Monthly Billing Total. Each stat card should be clickable, navigating to the respective page. This section is accessible only by the Service Company Manager. Page access: Service Company Manager only.

As a frontend developer, implement the UpcomingVisits section which lists scheduled visits for the next 7 days. Each visit card should display customer details, location, date and time, technician, and status with appropriate color coding. This section is accessible only by the Service Company Manager. Page access: Service Company Manager only.

As a frontend developer, implement the RenewalAlerts section which displays a table of contracts expiring in the next 30 days. Each row should show contract ID, customer, expiry date, days remaining, and actions for renewal. Urgent renewals should be highlighted. This section is accessible only by the Service Company Manager. Page access: Service Company Manager only.

As a frontend developer, implement the BillingSummary section which displays metrics such as Pending Invoices, Outstanding Amount, and Average Days Overdue. Include a link to view all billing details. This section is accessible only by the Service Company Manager. Page access: Service Company Manager only.

As a frontend developer, implement the RecentInvoices section which displays a table of recent invoices with details such as invoice number, customer, amount, date issued, and status. Status should be color-coded. This section is accessible only by the Service Company Manager. Page access: Service Company Manager only.

As a frontend developer, implement the QuickActions section which provides buttons for primary actions like creating a new contract, scheduling a visit, sending renewal reminders, generating invoices, and reporting breakdowns. Include secondary actions for exporting data and accessing settings. This section is accessible only by the Service Company Manager. Page access: Service Company Manager only.

As a frontend developer, implement the ContractsSearchBar section which includes a search input field with a placeholder and an SVG search icon. The input should handle changes via the onChange prop. This section is accessible by Administrative Staff and Service Company Manager. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the ContractsFilterPanel section which includes multiple filter controls for status, customer, service type, and date range. It should support clearing filters and display active filters with removable chips. This section is accessible by Administrative Staff and Service Company Manager. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the ContractsTableWrapper section which includes a table with sortable columns, checkboxes for row selection, and formatted currency and date values. It should also integrate with the ContractsRowActions component for row-specific actions. This section is accessible by Administrative Staff and Service Company Manager. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the ContractsPageSize section which includes a dropdown to select the number of rows per page. The dropdown should update the page size via the onChange prop. This section is accessible by Administrative Staff and Service Company Manager. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the ContractsNavigation section which includes pagination controls to navigate through pages of contracts. It should display the current range of contracts being viewed and allow navigation between pages. This section is accessible by Administrative Staff and Service Company Manager. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the SchedulePageHeader section which includes a breadcrumb navigation linking to the Dashboard, a page title 'Technician Schedule', a subtitle, and a 'Create New Visit' button. This section is accessible by Service Company Manager and Technician personas. Ensure breadcrumb links are conditionally shown based on persona access. This section depends on the DashboardHeader from the Dashboard page. Page access: Service Company Manager, Technician only.

As a frontend developer, implement the RenewalsHeader section which includes a breadcrumb navigation and titles for the Renewals page. This section should display a breadcrumb trail with links to 'Dashboard' and the current page 'Renewals', a main title 'Renewal Reminders', and a subtitle 'View and manage upcoming contract renewals'. This section is accessible only by the Service Company Manager persona. Ensure that it integrates with the DashboardHeader from the Dashboard page. Page access: Service Company Manager only.

As a frontend developer, implement the BillingHeader section which includes a breadcrumb navigation, a title, and a description. This section is accessible by Administrative Staff and Service Company Manager. It should establish a page-level dependency on the Contracts page by including task IDs from the Contracts page. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the BreakdownsHeader section which includes a header with a badge labeled 'Smart Tracking', a title 'Breakdown Analysis & Tracking', a descriptive paragraph, and an 'Export Report' button. This section is accessible by Service Company Manager and Technician personas. Ensure the export button is styled with the 'btn-accent' class. This section depends on the DashboardHeader from the Dashboard page. Page access: Service Company Manager, Technician only.

As a frontend developer, implement the DocHero section for the Documentation page. This section includes a headline, subheadline, and description about the system documentation and SRD. It also features an SVG accent element for visual enhancement. Ensure the section is styled according to the provided CSS and is accessible to all personas: Administrative Staff, Service Company Manager, and Technician. Page access: Administrative Staff only.

Create integration tests for critical workflows such as contract management, visit scheduling, and billing.

As a frontend developer, implement the SocialLogin section for the Login page. This component includes buttons for signing in with Google and Microsoft, each with respective icons. Page access: shared by all personas (Administrative Staff, Service Company Manager, Technician).

As a frontend developer, implement the ContractsRowActions section which includes buttons for viewing, editing, renewing, and deleting contracts. Each button should have an SVG icon and trigger respective actions. This section is accessible by Administrative Staff and Service Company Manager. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the RenewalsStatsPanel section which displays key statistics about renewals. This section includes cards showing 'Total Pending Renewals', 'Due This Month', 'Overdue Renewals', and 'Renewed This Month', each with a value and color-coded styling. This section is accessible only by the Service Company Manager persona. Page access: Service Company Manager only.

As a frontend developer, implement the RenewalsFilterBar section which provides filtering options for renewals. This section includes dropdowns for filtering by 'Status', 'Priority', and 'Sort by', as well as date range inputs for 'Renewal Date'. This section is accessible only by the Service Company Manager persona. Page access: Service Company Manager only.

As a frontend developer, implement the RenewalsListCards section which displays a list of renewal cards. Each card shows details such as status, contract name, customer, renewal date, and contract value. The cards are styled based on the renewal status. This section is accessible only by the Service Company Manager persona. Page access: Service Company Manager only.

As a frontend developer, implement the RenewalsNavigation section which provides pagination controls for the renewals list. This section includes information about the current page, total items, and controls for navigating between pages. This section is accessible only by the Service Company Manager persona. Page access: Service Company Manager only.

As a frontend developer, implement the BillingOverview section which displays financial statistics using a grid layout. Each card shows a label, value, and meta information. This section is accessible by Administrative Staff and Service Company Manager. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the SubscriptionManagement section which allows users to view and edit their subscription plan details. This section includes interactive elements such as buttons to toggle an edit panel and dropdowns for selecting plans and billing cycles. It is accessible by Administrative Staff and Service Company Manager. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the PaymentMethods section which allows users to manage their payment methods. This section includes functionality to add, delete, and set default payment methods. It is accessible by Administrative Staff and Service Company Manager. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the InvoiceTable section which displays a sortable table of invoices. Users can sort by date or amount and view invoice details. This section is accessible by Administrative Staff and Service Company Manager. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the InvoiceFilters section which allows users to filter invoices by status and apply quick filters. It includes pagination controls. This section is accessible by Administrative Staff and Service Company Manager. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the BillingCTA section which provides support contact information and a FAQ section. Users can toggle FAQ answers. This section is accessible by Administrative Staff and Service Company Manager. Page access: Administrative Staff, Service Company Manager only.

As a frontend developer, implement the DocTableOfContents section for the Documentation page. This section includes a collapsible navigation menu with links to various document sections. It uses state hooks to manage the active section and collapse state, and a scroll event listener to update the active link based on the user's scroll position. Ensure the section is styled according to the provided CSS and is accessible to all personas. Page access: Administrative Staff only.

As a frontend developer, implement the DocIntroduction section for the Documentation page. This section provides an overview of the system requirements for ContractPilot AMC, including its purpose and scope. Ensure the section is styled according to the provided CSS and is accessible to all personas. Page access: Administrative Staff only.

As a frontend developer, implement the DocSystemOverview section for the Documentation page. This section provides a detailed overview of the ContractPilot AMC system, highlighting its features and benefits for service companies. Ensure the section is styled according to the provided CSS and is accessible to all personas. Page access: Administrative Staff only.

As a frontend developer, implement the DocFunctionalRequirements section for the Documentation page. This section lists functional requirements as user stories, displayed in a grid format with icons. Ensure the section is styled according to the provided CSS and is accessible to all personas. Page access: Administrative Staff only.

As a frontend developer, implement the DocUserPersonas section for the Documentation page. This section displays user personas with icons, descriptions, and responsibilities in a grid format. Ensure the section is styled according to the provided CSS and is accessible to all personas. Page access: Administrative Staff only.

As a frontend developer, implement the DocCoreFlows section for the Documentation page. This section outlines core user flows for different personas, using a timeline format with steps and arrows. Ensure the section is styled according to the provided CSS and is accessible to all personas. Page access: Administrative Staff only.

As a frontend developer, implement the DocColorPalette section for the Documentation page. This section displays color swatches with names, hex codes, and usage descriptions. It includes functionality to copy hex codes to the clipboard. Ensure the section is styled according to the provided CSS and is accessible to all personas. Page access: Administrative Staff only.

As a frontend developer, implement the DocTypography section for the Documentation page. This section showcases typography samples for headings and body text, including font family, weight, and line-height details. It also covers accessibility considerations. Ensure the section is styled according to the provided CSS and is accessible to all personas. Page access: Administrative Staff only.

As a frontend developer, implement the VisitsHeader section which includes breadcrumb navigation and a header displaying the technician's name and role. It also shows the sync status with a tooltip indicating the last sync time. This section is accessible by Technicians only and must include conditional navigation links based on persona access. Page access: Technician only.

As a frontend developer, implement the CustomersHeader section which includes a header with a title, subtitle, and an 'Add Customer' button. It also features a search input with a search icon and a filter toggle button. This section is accessible only by Administrative Staff and should include conditional logic to ensure restricted access. This section depends on the Billing page tasks to ensure proper integration. Page access: Administrative Staff only.

As a frontend developer, implement the VisitsFilters section which provides filtering options for visit status, date, and sorting. It includes interactive buttons and a dropdown for sorting, with state management for filter selections. This section is accessible by Technicians only. Page access: Technician only.

As a frontend developer, implement the VisitsList section which displays a list of visits with status color coding and badges for visit type. It includes interactive elements for selecting visits and buttons for starting or viewing details of a visit. This section is accessible by Technicians only. Page access: Technician only.

As a frontend developer, implement the CustomersTable section which displays a list of customers with details such as name, contact person, phone, email, status, and last contact date. It includes functionality for selecting customers, sorting by columns, and displaying status labels. This section is accessible only by Administrative Staff. Page access: Administrative Staff only.

As a frontend developer, implement the CommunicationForm section which allows sending communications via email, SMS, or in-app messages. It includes a channel selector, recipient selection, and fields for subject and message content. The form handles submission with a mock alert. This section is accessible only by Administrative Staff. Page access: Administrative Staff only.

As a frontend developer, implement the VisitDetailPanel section which shows detailed information about a selected visit. It includes expandable sections for customer details, address, service scope, and equipment. This section is accessible by Technicians only. Page access: Technician only.

As a frontend developer, implement the VisitStatusUpdate section which allows technicians to start or complete a visit. It includes a modal form for submitting a completion summary. This section is accessible by Technicians only. Page access: Technician only.

As a frontend developer, implement the VisitReportIssue section which allows technicians to report issues during a visit. It includes a form for issue type, description, severity, and photo attachment. This section is accessible by Technicians only. Page access: Technician only.

As a frontend developer, implement the CustomersPagination section which manages pagination for the customer list. It includes controls for navigating between pages, selecting the number of entries per page, and displaying the current range of entries. This section is accessible only by Administrative Staff. Page access: Administrative Staff only.

As a frontend developer, implement the CommunicationHistory section which displays a timeline of past communications. It includes message previews, status indicators, and the ability to expand messages for full details. This section is accessible only by Administrative Staff. Page access: Administrative Staff only.