As a Frontend Developer, implement the shared Navbar component from its approved JSX/CSS design and reuse it across all declared pages without duplicating local variants.
Implementation contract:
- Outcome: Implement Shared Navbar
- Owned behavior:
- As a Frontend Developer, implement the shared Navbar component from its approved JSX/CSS design and reuse it across all declared pages without duplicating local variants.
- Implement shared design sections: LandingCTA, Navbar.
Acceptance criteria:
- The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions.
- The shared Navbar component renders once and is reused by every declared consuming page.
As a Frontend Developer, implement the shared Footer component from its approved JSX/CSS design and reuse it across all declared pages without duplicating local variants.
Implementation contract:
- Outcome: Implement Shared Footer
- Owned behavior:
- As a Frontend Developer, implement the shared Footer component from its approved JSX/CSS design and reuse it across all declared pages without duplicating local variants.
- Implement shared design sections: Footer.
Acceptance criteria:
- The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions.
- The shared Footer component renders once and is reused by every declared consuming page.
As a Frontend Developer, implement the approved Landing page design and the task-owned sections below.
Implementation contract:
- Outcome: Implement Landing page
- Requirement sources:
- src-368da4240093a66c
- src-164b31d5fc4d3fa7
- src-4d25bc4d2861e671
- src-290d8b744644602f
- src-c5be6d2974fe6922
- src-d4b6f3ab142af274
- src-049a63f2fa5b76e6
- src-6573d8cbe57a7646
- src-daedaa431f98cf2e
- src-4bd393ccb1251506
- src-fce177aeb8a4068f
- src-a3191820bc6d1703
- 1 additional source record(s) are retained in the structured implementation contract.
- Owned behavior:
- visible and interactive behavior owned by these sections
Acceptance criteria:
- The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions.
- The page must render exactly once when accessed by Befree Internal Users.
- The hero section must display the product name and core value proposition clearly, with a functional 'Sign In' button navigating to the login page.
- The value proposition section must articulate the benefits with clear visual hierarchy and consistent grid layout.
- The workflow section must accurately depict the seven-step pipeline with responsive layout adjustments.
- All sections must adhere to the design structure and theme, including typography, color, and layout.
Depends on:#7#6
Waiting for dependencies
As a Frontend Developer, implement the approved Login page design and the task-owned sections below.
Implementation contract:
- Outcome: Implement Login page
- Requirement sources:
- src-376a1c4fe2670919
- src-290d8b744644602f
- src-c5be6d2974fe6922
- src-d4b6f3ab142af274
- src-049a63f2fa5b76e6
- src-6573d8cbe57a7646
- src-daedaa431f98cf2e
- src-4bd393ccb1251506
- src-fce177aeb8a4068f
- src-a3191820bc6d1703
- src-111e13142c2f1fda
- Owned behavior:
- focus email field
- focus password field
- toggle password visibility
- validate fields on blur
- submit sign-in form
- show loading state
- show inline validation/error
- show success confirmation
- Interfaces:
- defaultAuthenticate function
- State transitions:
- idle to loading on submit
- loading to success/error on result
- Failure and safety behavior:
- local-only error state on failed sign-in
Acceptance criteria:
- The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions.
- LoginAccessPanel renders once
- Email and password fields validate on blur
- Show/hide toggle functions
- Submit button shows loading spinner
- Error/success messages display correctly
Depends on:#6#7
Waiting for dependencies
As a Frontend Developer, implement the approved Dashboard page design and the task-owned sections below.
Implementation contract:
- Outcome: Implement Dashboard page
- Requirement sources:
- src-bf6f1f68ab81245b
- src-fe1fb25919ee9b67
- src-ca82f26431a4c9ea
- src-290d8b744644602f
- src-c5be6d2974fe6922
- src-d4b6f3ab142af274
- src-049a63f2fa5b76e6
- src-6573d8cbe57a7646
- src-daedaa431f98cf2e
- src-4bd393ccb1251506
- src-fce177aeb8a4068f
- src-a3191820bc6d1703
- 1 additional source record(s) are retained in the structured implementation contract.
- Owned behavior:
- Display welcome message
- Show processing metrics
- Provide quick actions
- Interfaces:
- identity.authorization
- identity.access.management
Acceptance criteria:
- The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions.
- Dashboard page renders once for authenticated users
- Welcome message, system status, and orientation text displayed
- Processing metrics show accurate counts and progress
- Quick actions provide functional navigation
- Design adheres to specified theme and layout
Depends on:#7#6
Waiting for dependencies
As a Frontend Developer, implement the approved Document Sets page design and the task-owned sections below.
Implementation contract:
- Outcome: Implement Document Sets page
- Requirement sources:
- src-320d8c5806f5f88d
- src-bfd869869fc95d51
- src-44f7113f58399891
- src-a5d025151af93728
- src-8c0e3c5dc524dac0
- src-8bd529cad111dcc7
- src-8476ec0b22087628
- src-27226e81eac043e6
- src-6c7aeba0370d17ac
- src-290d8b744644602f
- src-c5be6d2974fe6922
- src-d4b6f3ab142af274
- 7 additional source record(s) are retained in the structured implementation contract.
- Owned behavior:
- Display page title and workflow purpose
- List supported document types and formats
- Provide file and document constraints
- visible and interactive behavior owned by these sections
- Display recent submission history and context
- List recent document set submissions
- Show submission metadata (date, document count, status)
- Provide navigation to view or manage past submissions
- Interfaces:
- consumed API, data, or event contracts
- State transitions:
- material source-backed transition with its trigger and observable result
- Failure and safety behavior:
- source-backed failure behavior owned by this task
Acceptance criteria:
- The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions.
- Document Sets page renders with DocumentSetPageHeader
- Page title, purpose statement, document types, file formats, and guidelines are visible
- Help link navigates to documentation
- Access restricted to Befree Internal Users
- observable task-owned checks
- The 'Recent Submissions' section must render exactly once on the Document Sets page
- The table must support sorting by date and status
- Status badges must use the correct color scheme and labels
- The section must handle empty states gracefully
- Provide navigation links to view or resubmit document sets
Depends on:#6#7
Waiting for dependencies
As a Frontend Developer, implement the approved Configuration page design and the task-owned sections below.
Implementation contract:
- Outcome: Implement Configuration page
- Requirement sources:
- src-8892ffafec7743ba
- src-a30e4dba48197745
- src-ddd26dc46bb5c487
- src-6cfb12a3980d60e9
- src-290d8b744644602f
- src-c5be6d2974fe6922
- src-d4b6f3ab142af274
- src-049a63f2fa5b76e6
- src-6573d8cbe57a7646
- src-daedaa431f98cf2e
- src-4bd393ccb1251506
- src-fce177aeb8a4068f
- 2 additional source record(s) are retained in the structured implementation contract.
- Owned behavior:
- visible and interactive behavior owned by these sections
- Review configuration items
- Expand/collapse item details
- Check off reviewed items
- Accept affirmation
- Submit sign-off confirmation
- Handle submission success/error state
- Navigate back to dashboard
- State transitions:
- Toggle checkbox for each item
- Expand item details
- Collapse item details
- Track completion state
- Failure and safety behavior:
- Sign-off could not be recorded. Please try again.
Acceptance criteria:
- The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions.
- Configuration page renders with ConfigurationHeader and ConfigurationSummary sections
- Header uses Fira Sans Bold for title and Source Sans Pro for subtitle
- Summary grid displays four configuration cards with correct item counts and status labels
- Page is accessible only to Befree Internal Users
- Render the ConfigurationSignOff section once on the Configuration page
- Display and manage the checklist with interactive checkboxes and expandable details
- Ensure the confirmation button is enabled only when all items are reviewed and affirmed
- Submit sign-off data and handle success/error states
- Provide navigation back to the dashboard
- Maintain the design structure and theme as per the provided CSS
Depends on:#7#6
Waiting for dependencies
As a Frontend Developer, implement the approved Help page design and the task-owned sections below.
Implementation contract:
- Outcome: Implement Help page
- Requirement sources:
- src-9c696c2970361836
- src-258fd402ca846754
- src-4174a995f230c61c
- src-290d8b744644602f
- src-c5be6d2974fe6922
- src-d4b6f3ab142af274
- src-049a63f2fa5b76e6
- src-6573d8cbe57a7646
- src-daedaa431f98cf2e
- src-4bd393ccb1251506
- src-fce177aeb8a4068f
- src-a3191820bc6d1703
- 1 additional source record(s) are retained in the structured implementation contract.
- Owned behavior:
- static grid layout
- accordion interaction
- form submission and history tracking
Acceptance criteria:
- The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions.
- Help page renders with all sections visible and functional
- HelpHandoverDocumentation grid layout and typography match design contract
- HelpQuickAnswers accordion expands and collapses correctly
- HelpSupportContact form validates inputs, submits requests, and displays history accurately
- Access restricted to Befree Internal Users
Depends on:#6#7
Waiting for dependencies
As a Frontend Developer, implement the approved Review Queue page design and the task-owned sections below.
Implementation contract:
- Outcome: Implement Review Queue Header
- Requirement sources:
- src-7662a1ee3863871e
- src-62a83180897bf180
- src-290d8b744644602f
- src-c5be6d2974fe6922
- src-d4b6f3ab142af274
- src-049a63f2fa5b76e6
- src-6573d8cbe57a7646
- src-daedaa431f98cf2e
- src-4bd393ccb1251506
- src-fce177aeb8a4068f
- src-a3191820bc6d1703
- src-111e13142c2f1fda
- Owned behavior:
- Display page title and workflow purpose
- Show summary statistics and flag category breakdown
- Provide guidance on queue resolution
Acceptance criteria:
- The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions.
- The Review Queue page must render the ReviewQueueHeader component exactly once.
- The component must display the page title 'Review Queue', an introductory paragraph, and summary metrics for flagged documents.
- The design must adhere to the specified typographic hierarchy and color scheme.
- The section must be responsive, with metrics displayed inline on desktop and stacked on mobile.
- Access is restricted to Befree Internal Users.
Depends on:#6#7
Waiting for dependencies
As a Frontend Developer, implement the approved Review Queue page design and the task-owned sections below.
Implementation contract:
- Outcome: Implement Review Queue page
- Requirement sources:
- src-49a862243e08ed90
- src-a978f3c11592420c
- src-27226e81eac043e6
- src-6c7aeba0370d17ac
- src-290d8b744644602f
- src-c5be6d2974fe6922
- src-d4b6f3ab142af274
- src-049a63f2fa5b76e6
- src-6573d8cbe57a7646
- src-daedaa431f98cf2e
- src-4bd393ccb1251506
- src-fce177aeb8a4068f
- 2 additional source record(s) are retained in the structured implementation contract.
- Owned behavior:
- Render paginated or scrollable list of flagged documents
- Filter documents by flag reason/category
- Sort documents by submission date or status
- Select document and display inline details
- Provide quick-action link to Data Review page
- Interfaces:
- consumed API, data, or event contracts
- State transitions:
- Filter and sort state changes
- Document selection state change
- Failure and safety behavior:
- Handle empty and loading states
Acceptance criteria:
- The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions.
- observable task-owned checks
Depends on:#6#7
Waiting for dependencies
As a Frontend Developer, implement the approved Data Review page design and the task-owned sections below.
Implementation contract:
- Outcome: Implement Data Review page
- Requirement sources:
- src-39036daf75efe6b4
- src-1ff47f0c3bff8a4c
- src-27226e81eac043e6
- src-6c7aeba0370d17ac
- src-290d8b744644602f
- src-c5be6d2974fe6922
- src-d4b6f3ab142af274
- src-049a63f2fa5b76e6
- src-6573d8cbe57a7646
- src-daedaa431f98cf2e
- src-4bd393ccb1251506
- src-fce177aeb8a4068f
- 2 additional source record(s) are retained in the structured implementation contract.
- Owned behavior:
- document navigation via docId
- breadcrumb navigation
- edit extracted field value
- recategorise field between income and deduction
- flag field for follow-up
- view source location for a field
- navigate document pages
- zoom document preview
- confirm and finalize document
- Interfaces:
- consumed API, data, or event contracts
- State transitions:
- document status update upon confirmation
- Failure and safety behavior:
- validation warning for empty fields or flagged fields
Acceptance criteria:
- The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions.
- Data Review page renders with DataReviewDocumentQueue and DataReviewContextBar
- Document queue displays documents with pictograms and status chips
- Navigation via docId route parameter works
- Context bar shows breadcrumb, document set name, filename, and summary counts
- Design structure and theme match provided styles
- Page access restricted to Befree Internal Users
- Render DataReviewExtractionWorkspace section once
- Interactive elements function as described
- Design structure and theme maintained
- Backend integration for document status update
- Access restricted to Befree Internal Users
Depends on:#7#6
Waiting for dependencies
As a Frontend Developer, implement the approved Output page design and the task-owned sections below.
Implementation contract:
- Outcome: Implement Output page
- Requirement sources:
- src-7569b3e8becb362d
- src-0b48adb508dd8f74
- src-f9654d3fcf666e91
- src-8c321808dfabcea0
- src-290d8b744644602f
- src-c5be6d2974fe6922
- src-d4b6f3ab142af274
- src-049a63f2fa5b76e6
- src-6573d8cbe57a7646
- src-daedaa431f98cf2e
- src-4bd393ccb1251506
- src-fce177aeb8a4068f
- 2 additional source record(s) are retained in the structured implementation contract.
- Owned behavior:
- Display document set metadata
- Tabular data display with sorting and filtering
- format selection
- generation initiation
- progress tracking
- error handling
- download delivery
- Interfaces:
- exportFormat
- generationStatus
- generatedFile
- downloadReady
- errorMessage
- State transitions:
- idle to generating
- generating to success
- generating to error
- Failure and safety behavior:
- generation error with retry guidance
Acceptance criteria:
- The task-owned behavior is implemented and verified without undeclared mocks or downstream assumptions.
- Output page renders once
- Correct metadata and workflow stage displayed
- Data table allows sorting and filtering
- Design structure and theme maintained
- Access restricted to Befree Internal Users
- Output page renders with both sections functional
- Export format selection and generation process works
- Summary reflects data state accurately
Depends on:#7#6
Waiting for dependencies
No comments yet. Be the first!