frontend: progress bar based on approved or released milestones

[grantfox-oss]

Type

Reusable Component · UI Logic · Escrow Visualization

Difficulty

Medium

Track

Escrows · Milestones · UI Components

Target repo

https://github.com/Trustless-Work/clonable-backoffice

---

Overview

Create a Progress Indicator component based on the Trustless Work block:

https://blocks.trustlesswork.com/blocks/indicators-balance-progress

The component must render a progress bar based on an escrow’s milestones.

The progress must be calculated dynamically depending on a required prop:

"released" | "approved"

The component must calculate progress as a ratio between:

• Total milestones
• Milestones matching the selected state

Example:

If an escrow has 10 milestones:

• If mode is "released" → progress is based on how many milestones are released
• If mode is "approved" → progress is based on how many milestones are approved

---

Important Constraints

• For "released" mode → the escrow MUST be multi-release
• For "approved" mode → the escrow may be single-release or multi-release

This must be validated internally and handled safely.

---

User Personas

Service Provider / Freelancer

“How much of this escrow has been completed or released?”

Client / Buyer

“How many milestones have been approved so far?”

---

Required Links (Read First)

• Progress Indicator Block Reference
  https://blocks.trustlesswork.com/blocks/indicators-balance-progress

• Trustless Work Docs
  https://docs.trustlesswork.com/

---

Goal

Build a reusable progress bar component that:

• Receives an escrow object
• Receives a required mode prop: "released" | "approved"
• Calculates progress based on milestone states
• Validates release rules based on escrow type
• Follows the UI structure of the referenced block
• Can be embedded across different escrow views

---

Scope

In Scope

• Create a reusable progress bar component
• Accept escrow data as input
• Accept a required mode prop: "released" | "approved"
• Compute progress based on milestone count
• Enforce multi-release requirement for "released" mode
• Match visual structure of the reference block

Out of Scope

• Backend changes
• Smart contract modifications
• API changes
• Indexer modifications
• Financial calculations beyond milestone counting

---

Global Requirements

• Follow existing code patterns in the repository
• Follow existing UI/UX patterns
• Follow Trustless Work documentation
• Maintain strict typing
• Avoid duplicated logic
• Do not introduce architectural inconsistencies

---

Functional Requirements

The component must:

• Receive an escrow object

• Receive a required prop:

  • "released"
  • "approved"

• Detect total number of milestones

• Count milestones matching the selected mode

• Compute progress as:

  matching milestones / total milestones

• Render a progress bar reflecting the calculated percentage

---

Validation Rules

Mode: "released"

• Escrow must be multi-release
• If escrow is single-release:
  • The component must safely handle the case
  • Must not produce incorrect progress
  • Must not break rendering

Mode: "approved"

• Escrow may be single-release or multi-release
• Progress is calculated based on milestone approval states

---

UI Requirements

The component must:

• Visually follow the referenced balance-progress block
• Display:
  • A progress bar
  • A percentage indicator
  • Optional textual indicator (e.g., “3 of 10 milestones”)
• Maintain consistent spacing and typography
• Match existing color patterns for status indicators

The design must prioritize:

• Clarity
• Readability
• Accurate visual representation

---

Component Responsibilities

Suggested name (you may choose a better one):

EscrowMilestoneProgress

Responsibilities:

• Accept escrow data
• Accept mode prop
• Validate release rules
• Compute progress
• Render progress bar
• Remain reusable across different views

---

Edge Cases

• Escrow with zero milestones
• Escrow single-release used in "released" mode
• All milestones completed
• No milestones completed
• Partially completed milestones

The component must handle all cases safely without runtime errors.

---

Testing (Required)

Local Testing

• Test with multi-release escrow:

  • Multiple released milestones
  • Partial release
  • Fully released

• Test with single-release escrow:

  • Approved milestones
  • Attempted "released" mode

• Validate progress percentages manually

---

Learning Outcomes (Why This Task Exists)

By completing this task, contributors will learn:

• How milestone states impact escrow visualization
• How multi-release logic differs from single-release
• How to design safe reusable UI components
• How to enforce business rules at the UI layer
• How to align implementation with Trustless Work documentation

---

Acceptance Criteria

• Component follows existing repository patterns
• Component matches the referenced block visually
• Progress is correctly calculated
• "released" mode only works correctly for multi-release escrows
• "approved" mode works for both escrow types
• Edge cases are handled safely
• Component is reusable
• Lint and typecheck pass

---

Notes for Contributors

This task focuses on correct milestone logic and reusable UI design.

Be precise in calculations.
Do not assume milestone states.
Follow Trustless Work documentation strictly.
Ensure safe behavior for invalid combinations.

[Luluameh]

Hi 👋 I’d like to work on Frontend: Progress bar based on approved or released milestones for clonable-backoffice.

I’ll implement a reusable EscrowMilestoneProgress component that:

Accepts an escrow object

Requires a mode: "released" | "approved" prop

Dynamically computes progress as:
matchingMilestones / totalMilestones

Safely validates multi-release requirements for "released" mode

Handles edge cases (zero milestones, single-release in released mode, full/partial states)

Strictly follows repository typing and architectural patterns

Matches the visual structure of the Trustless Work progress indicator block

I’ll ensure:

No duplicated logic

Safe UI behavior for invalid combinations

Strict TypeScript typing

Accurate percentage calculation

Clean reusable structure for embedding across escrow views

Lint and typecheck pass

I’ll test locally against:

Multi-release (partial + full release)

Single-release (approved mode + safe released mode handling)

Edge cases (0 milestones, all completed, none completed)

ETA: 24HRS.

[big14way]

gm gm i can tackle this please assign me

[Sandijigs]

hi My name is Sandra.
I have reviewed the issue and understand what needs to be done
I am a fullstack software/ Blockchain Engineer with over 6years of experience web2 experience(Fullstack) and 2 year web3 experience (JavaScript,TypeScript, Rust ,Python, Soroban,Solidity,(Backend, frontend, Mobile and smart contracts) ). I have contributed to several projects in the stellar ecosystem. . please Assign this Issue to me

[gelluisaac]

I’m interested in tackling this! I have a strong background in smart contract development and full-stack systems, so I'm well-equipped to handle the requirements here. Could you please assign this to me?

[Jopsan-gm]

Hello maintainers 👋

I’ve reviewed this issue and the relevant parts of the codebase. I’m a junior full-stack developer with hands-on experience contributing to real-world open source projects across both Web2 and Web3 contexts. My work includes JavaScript/TypeScript-based stacks, React on the frontend, Node.js on the backend, as well as contributing to blockchain-related repositories, including smart contract logic and protocol-level features.

I’m comfortable reading and understanding existing codebases, reasoning about on-chain and off-chain interactions, and delivering clean, focused implementations aligned with the project’s conventions. I’m used to working through GitHub workflows, iterating based on feedback, and prioritizing maintainability and clarity.

This issue aligns well with my experience, and I believe I can provide a solid and reliable solution. If it’s still available, I’d be happy to take it.

[legend4tech]

Hi, I’m Legend4Tech, a full-stack developer and a former fellow at OnlyDust. I came across this issue and I’m really interested in working on it. I have experience across both frontend and backend development, and I enjoy digging into problems, understanding the context, and delivering clean, well-structured solutions.

I’d be happy to contribute and collaborate with the maintainers to get this resolved. Please let me know if you’d like me to proceed or if there are any specific guidelines I should follow.

[KaruG1999]

Hi team, I'm Karen, a full-stack developer. I'd love to build this component. I can easily implement the UI from the reference block and handle the core logic for the 'released' vs 'approved' modes. To keep it robust, I'll make sure to safely handle the edge cases so the component never breaks the render

[Emmzyemms]

I’d like to work on this frontend issue. I have experience with Web3 UI integration, wallet connections, and responsive React-based interfaces.
I can start immediately. Thanks!

[estyemma]

I’d like to work on this frontend issue. I have experience with Web3 UI integration, wallet connections, and responsive React-based interfaces.
I can start immediately. Thanks!

[Michaelkingsdev]

I am Michael Kings, a seasoned full-stack developer with extensive experience in blockchain technology. I have a passion for building responsive and interactive user interfaces, and my backend logic is top-notch. With 4 years of experience, I am confident that I can tackle this issue.
Please assign it to me.

[YAustinXYZ]

Can I be asigned?