feat: implement action-oriented list view for consignment workflow #257

[mushrafmim]

Summary

This PR introduces an action-oriented Action List View for the consignment workflow in the Trader App. The goal is to provide a simplified, user-friendly interface that prioritizes immediate tasks (Ready/In-Progress) while grouping upcoming and completed steps into organized, collapsible sections. This reduces cognitive load for traders compared to the full graph visualization.

Type of Change

• New feature (non-breaking change which adds functionality)

Changes Made

• New Components:
  • ActionListView: Main container that groups workflow nodes into "Action Required", "Upcoming Tasks", and "Process History".
  • ActionCard: An individual task card displaying the task name, type icon, description, and status badges, with primary actions (Start/View).
  • CollapsibleSection: A reusable component to hide/show secondary workflow groups.
• Screen Updates:
  • Updated ConsignmentDetailScreen to include a viewMode toggle (list vs graph).
  • Improved the "Next Steps" footer with more context-aware messaging and icons.
  • Refined the Item Details and Progress bar UI for better clarity.
• Styling:
  • Added custom-scrollbar utility classes in index.css for a cleaner scroll experience in the list view.
  • Applied Radix UI theme consistent colors and transitions for interactive elements.

Testing

• I have tested this change locally
• I have added unit tests for new functionality
• I have tested edge cases (e.g., all tasks completed, no tasks available)
• All existing tests pass

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have checked that there are no merge conflicts

Related Issues

Closes #257

Screenshots/Demo

Screen.Recording.2026-03-19.at.09.09.34.mov

• List View: Displays high-priority tasks at the top, followed by collapsible upcoming and history sections.
• Graph View: Retains the visual flow for users who need full context.
• Toggle: A smooth switch between views via the header controls.

Additional Notes

The implementation follows the progressive disclosure strategy:

1. Action-First: READY and IN_PROGRESS tasks are always expanded.
2. Simplified Icons: Task types (Forms, Payments, Events) use distinct Radix icons.
3. Empty States: Clear feedback when the process is complete or waiting for updates.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience in the Trader App's consignment workflow by introducing a simplified, action-oriented list view. This new interface streamlines task management, making it easier for traders to identify and act on critical steps, while still retaining the detailed graph visualization for those who need it. The changes aim to improve usability and efficiency by presenting information in a more digestible format.

Highlights

• New Action-Oriented List View: Introduced an 'Action List View' for the consignment workflow, prioritizing immediate tasks (Ready/In-Progress) and grouping others into collapsible sections to reduce cognitive load.
• New UI Components: Added three new React components: ActionListView for the main list interface, ActionCard for individual task display, and CollapsibleSection for organizing workflow groups.
• Screen Updates and Enhancements: Updated the ConsignmentDetailScreen to include a viewMode toggle (list vs. graph), improved the 'Next Steps' footer with more context-aware messaging, and refined the Item Details and Progress bar UI.
• Styling Improvements: Implemented custom-scrollbar utility classes in index.css for a cleaner scroll experience and applied Radix UI theme consistent colors and transitions for interactive elements.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new action-oriented list view for the consignment workflow, which is a great enhancement for user experience. The changes include several new React components and updates to the main consignment detail screen. My review focuses on improving the implementation of these new components, addressing a critical issue with dynamic Tailwind CSS classes that could break production builds, enhancing cross-browser compatibility for UI elements, and refactoring some parts of the code for better clarity and correctness.

[sthanikan2000]

@mushrafmim Rebase this before merge