Global Timesheet Page Development

Objective

Build a Global Timesheet Page in a Flutter app using DDD architecture. The page integrates ~8 APIs to display and manage timesheet data. It should follow the provided UI design (refer to the screenshot) with reusable bottom navigation and app bar components.

Scope of Work

1. UI Integration

• Implement the Timesheet page as per the given design.
• Ensure bottom navigation bar and app bar are reused from existing components.
• Support filtering, adding time, approving/rejecting timesheets, and viewing details.
• Responsive design for both mobile & tablet views.

1. API Integration (8 APIs)

• APIs for fetching member timesheets, weekly data, adding time, approving/rejecting timesheets, filtering, etc.
• All APIs to be integrated with proper error handling and loading states.
• Implement token-based authentication (if applicable).

1. DDD Architecture Requirements

• DTO Layer: Map API request/response to Data Transfer Objects.
• Domain Layer: Create domain entities and value objects.
• Application Layer: Implement services & use cases with dependency injection.
• Presentation Layer:
• State management with Bloc + Freezed for immutability.
• Separate UI widgets for each reusable component (e.g., TimesheetList, AddTimeModal, FilterModal).

1. Validation

• Time entry fields must not be empty.
• Date selection must be valid and not in the future.
• Task names should have a minimum length (e.g., 3 chars).
• Approve/Reject must require at least one day selected.

1. Error Handling

• Display proper error messages for API failures.
• Offline handling: Show cached data if available, else show a retry option.

Acceptance Criteria

• Timesheet data loads from APIs with correct mapping to UI.
• Add Time form validates inputs and successfully posts data via API.
• Approve/Reject workflow works with appropriate success/failure messages.
• Filter functionality correctly filters timesheet data.
• Bloc states implemented for loading, success, error, and empty states.
• DTO and Domain objects cover all required API fields.
• Reusable widgets implemented for common components.
• Code follows DDD architecture principles and passes code review.

Validation Checklist

• Input validations for time, date, and task fields.
• API response validation: Required fields must be present.
• UI validation: Matches design for all states (loading, error, empty).
• Form validation: Prevent submission with invalid data.
• Filter dropdowns must handle empty/no data gracefully.

Expected Dev Testing Points

• ✅ Check timesheet list API loads correctly.
• ✅ Add Time API posts correct data and refreshes the list.
• ✅ Approve/Reject API sends correct payload and updates UI.
• ✅ Error states (e.g., 400, 401, 500) show appropriate UI messages.
• ✅ Offline mode shows cached data or retry option.
• ✅ All Bloc states tested: initial, loading, success, error.
• ✅ UI responsiveness tested for small & large screens.
• ✅ Cross-verify with API response logs for data correctness.