[Bug]: ordering checked and unchecked to-do.

[Jk-karunadu]

Issue: Ordering of Checked and Unchecked To-Dos

Bug Summary

When the to-do list is displayed, the ordering of checked (completed) and unchecked (incomplete) to-dos does not function as expected. The list should consistently show incomplete items at the top and completed items at the bottom. However, due to the current sorting logic, completed items can appear mixed in with incomplete items after reloading or updating the list.

Steps to Reproduce

1. Load the to-do list application.
2. Observe the initial order of items displayed.
3. Mark some items as completed (checked).
4. Add a new item to the list.
5. Reload the page and observe the order of the items again.
6. Check for consistent ordering: incomplete items should be at the top, and completed items should be at the bottom.

Expected Behavior

• Incomplete (unchecked) items should always appear at the top of the list.
• Completed (checked) items should always appear at the bottom of the list.
• Newly added items should be displayed at the top among the incomplete items.

Actual Behavior

• The order of items can be inconsistent, with completed items appearing among the incomplete ones, especially after actions like adding or updating items or reloading the page.

Impact

This bug affects user experience, as it can lead to confusion when users expect a clear visual distinction between completed and incomplete tasks.

Suggested Fix

Implement a consistent sorting function that ensures:

• Incomplete items are sorted first.
• Completed items are sorted last.
• Newly added items are positioned at the top among the incomplete tasks.

This fix should be applied in the component handling the rendering of the to-do list, particularly in the logic that processes both fetched data and user actions (adding, updating, or removing items).