Skip to content

feat(tasks): add defer task functionality and UI components#167

Merged
iamitprakash merged 6 commits intodevelopfrom
feat/deferred-task
Aug 4, 2025
Merged

feat(tasks): add defer task functionality and UI components#167
iamitprakash merged 6 commits intodevelopfrom
feat/deferred-task

Conversation

@AnujChhikara
Copy link
Contributor

@AnujChhikara AnujChhikara commented Jul 29, 2025

Date: 29 July 2025

Developer Name: @AnujChhikara


Issue Ticket Number

Description

  • Implemented deferTask API method to handle task deferral.
  • Created DeferredTaskButton component for deferring tasks in the UI.
  • Updated CreateEditTodoDialog to include the defer button when editing tasks.
  • Added DashboardDeferredTable component to display deferred tasks.
  • Introduced new tab for deferred tasks in the dashboard.
  • Defined DeferTaskReqDto type for request payload.

Documentation Updated?

  • Yes
  • No

Under Feature Flag

  • Yes
  • No

Database Changes

  • Yes
  • No

Breaking Changes

  • Yes
  • No

Development Tested?

  • Yes
  • No

Screenshots

Screenshot 1
defer-f.mp4

Test Coverage

Screenshot 1

Additional Notes

Description by Korbit AI

What change is being made?

Add functionality to defer tasks along with the associated UI components, API methods, and handling logic for managing deferred tasks.

Why are these changes being made?

This change addresses the need to manage tasks that users want to temporarily defer without marking them as complete. The addition of a defer option helps ensure tasks that aren’t currently actionable aren't cluttering active task lists, while still being tracked. The approach aligns with existing task management conventions by introducing a dedicated UI and API handling for deferred tasks, with clear sections for viewing and managing them separately within the application.

Is this description stale? Ask me to generate a new description by commenting /korbit-generate-pr-description

@coderabbitai
Copy link

coderabbitai bot commented Jul 29, 2025

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Summary by CodeRabbit

  • New Features

    • Added a "Deferred" tab to the dashboard for viewing tasks that have been deferred.
    • Introduced the ability to defer a task to a later date directly from the edit dialog using a new button.
    • Added a dedicated table to display deferred tasks in the dashboard.
  • Enhancements

    • Improved the edit dialog layout to accommodate the new defer functionality.
  • Bug Fixes

    • Handled invalid tab and status combinations in the dashboard to prevent errors.

Walkthrough

This change introduces a "Deferred" task feature to the dashboard. It adds a new API method and request type for deferring tasks, updates the UI to allow users to defer tasks via a dialog, incorporates a new dashboard tab and table for deferred tasks, and updates utility and constant files to support the new functionality.

Changes

Cohort / File(s) Change Summary
API Support for Deferring Tasks
api/tasks/tasks.api.ts, api/tasks/tasks.types.ts
Adds a deferredTask method to the API for deferring tasks, and introduces the DeferTaskReqDto type for the request payload.
Deferred Task Button Component
components/deferred-task-button.tsx
Adds a new DeferredTaskButton React component that provides UI and logic for deferring a task, including date selection, API call, and feedback via toast notifications.
Create/Edit Todo Dialog Enhancements
components/create-edit-todo-dialog.tsx
Updates the dialog header to flex layout and conditionally renders the DeferredTaskButton in edit mode, passing the current todo data as props.
Todo Utility Update
lib/todo-util.ts
Modifies getDefaultTodoFormData to include a taskId property in the returned object, enabling easier integration with defer functionality.
Dashboard Deferred Tasks Table
modules/dashboard/components/dashboard-deferred-table.tsx
Introduces a new DashboardDeferredTable component that fetches and displays deferred tasks, handling errors and loading states, and integrating with the main dashboard UI.
Dashboard Tabs Integration
modules/dashboard/components/dashboard-tabs.tsx
Adds a "Deferred" tab to the dashboard, integrates the new deferred table, and updates tab change handling for consistent URL query management.
Dashboard Tab Constants
modules/dashboard/constants/index.ts
Adds a Deferred member to the DashboardTasksTableTabs enum to support the new tab in the dashboard.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CreateEditDialog
    participant DeferredTaskButton
    participant TasksApi
    participant DashboardDeferredTable

    User->>CreateEditDialog: Opens dialog in edit mode
    CreateEditDialog->>DeferredTaskButton: Renders with todo data
    User->>DeferredTaskButton: Clicks "Defer" button
    DeferredTaskButton->>DeferredTaskButton: Opens date picker dialog
    User->>DeferredTaskButton: Selects defer date and confirms
    DeferredTaskButton->>TasksApi: PATCH /v1/tasks/{taskId}?action=defer
    TasksApi-->>DeferredTaskButton: Returns updated task data
    DeferredTaskButton->>DashboardDeferredTable: Triggers query invalidation
    DashboardDeferredTable->>TasksApi: Fetches deferred tasks
    TasksApi-->>DashboardDeferredTable: Returns deferred tasks
    DashboardDeferredTable->>User: Renders updated deferred tasks table
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

  • iamitprakash
  • prakashchoudhary07

Poem

A rabbit deferred a task one day,
With a click and a date, it hopped away.
Now in the dashboard, a new tab appears,
For tasks postponed, not lost to the years.
With buttons and tables, the UI feels neat—
Deferring your chores is now quite a treat!
🐇✨

✨ Finishing Touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/deferred-task

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@AnujChhikara AnujChhikara self-assigned this Jul 29, 2025
Copy link

@korbit-ai korbit-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.
Category Issue Status
Readability Redundant flex direction class ▹ view
Design Debug Statement in Production Code ▹ view
Functionality Missing Data Validation for Defer Button ▹ view
Error Handling Generic Error Handling Without Context ▹ view
Functionality Questionable Done Status Restriction ▹ view
Functionality Imprecise date comparison ▹ view
Functionality Inconsistent Return Type for Single Task Operation ▹ view
Files scanned
File Path Reviewed
modules/dashboard/constants/index.ts
modules/dashboard/components/dashboard-deferred-table.tsx
lib/todo-util.ts
api/tasks/tasks.types.ts
components/create-edit-todo-dialog.tsx
api/tasks/tasks.api.ts
modules/dashboard/components/dashboard-tabs.tsx
components/deferred-task-button.tsx

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

- Implemented `deferTask` API method to handle task deferral.
- Created `DeferredTaskButton` component for deferring tasks in the UI.
- Updated `CreateEditTodoDialog` to include the defer button when editing tasks.
- Added `DashboardDeferredTable` to display deferred tasks in the dashboard.
- Introduced new `Deferred` tab in the dashboard for better task management.
- Defined `DeferTaskReqDto` type for request payload structure.
- Updated `deferTask` API method to return `TTask` type.
- Introduced `TDeferredDetails` type to encapsulate deferral information.
- Modified `DeferredTaskButton` component to reflect 'Todo' terminology.
- Enhanced `TodoListTable` and `TodoListTableHeader` components to support deferred tasks display.
- Cleaned up unused console logs in `DashboardDeferredTable` component.
- Introduced DEFERRED status in TASK_STATUS_ENUM for better task categorization.
- Updated TASK_STATUS_TO_TEXT_MAP to include text representation for DEFERRED status.
- Enhanced TodoStatusTable component to visually differentiate DEFERRED tasks in the UI.
- Integrated `DeferredTaskButton` into `CreateEditTodoForm` for deferring tasks.
- Updated `CreateEditTodoDialog` to remove the deferred button when in create mode.
- Improved state management for the deferred task modal.
- Adjusted `EditTodoButton` to invalidate queries for deferred tasks upon editing.
@iamitprakash iamitprakash merged commit 46c6405 into develop Aug 4, 2025
3 checks passed
@iamitprakash iamitprakash deleted the feat/deferred-task branch August 4, 2025 18:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants