frontend: dashboard based on financial data

[grantfox-oss]

Type

Feature · Dashboard · Data Visualization

Difficulty

Medium

Track

Escrows · Analytics · Indexer · UI

Target repo

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

---

Overview

Create a Dashboard view based on the Trustless Work block:

https://blocks.trustlesswork.com/blocks/dashboard-dashboard-01

The dashboard must visualize financial data for escrows where the connected wallet is the receiver, using:

useGetEscrowsFromIndexerByRole

The dashboard must display charts showing:

• Total Released
• Total Balance
• Total Amount

The logic must correctly handle:

• Multi-release escrows → calculated based on milestones
• Single-release escrows → calculated based on the escrow as a whole

The implementation must strictly follow existing repository patterns and Trustless Work documentation.

---

User Personas

Service Provider / Freelancer

“I want to understand how much I’ve earned, how much has been released, and how much is still pending.”

Platform Operator

“I need a high-level financial overview of escrow activity.”

---

Required Links (Read First)

• Dashboard Block Reference
  https://blocks.trustlesswork.com/blocks/dashboard-dashboard-01

• Escrow React SDK – Indexer
  https://docs.trustlesswork.com/trustless-work/escrow-react-sdk/indexer/usegetescrowsfromindexerbyrole

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

---

Goal

Build a financial dashboard that:

• Retrieves escrows using the Trustless Work Indexer
• Filters by receiver role
• Calculates financial aggregates correctly
• Distinguishes between single-release and multi-release escrows
• Displays totals using structured charts
• Matches the UI/UX patterns of the referenced dashboard block

---

Scope

In Scope

• Fetch escrows using useGetEscrowsFromIndexerByRole
• Filter results by receiver role
• Compute:
  • Total Released
  • Total Balance
  • Total Amount
• Handle milestone-based calculations for multi-release escrows
• Render charts based on aggregated values
• Reuse existing dashboard layout and UI components

Out of Scope

• Backend changes
• Smart contract modifications
• Custom indexer logic
• API changes
• New financial metrics beyond those specified

---

Global Requirements

• Follow existing code patterns in the repository
• Follow existing UI/UX patterns
• Follow Trustless Work documentation
• Do not introduce architectural deviations
• Maintain clean typing and readable structure
• Ensure consistent financial formatting

---

Data Requirements

The implementation must:

• Use useGetEscrowsFromIndexerByRole exactly as documented
• Retrieve escrows where the connected wallet is the receiver
• Correctly differentiate between:
  • Multi-release escrows (milestone-based calculations)
  • Single-release escrows (escrow-level calculations)
• Aggregate financial values accurately
• Handle loading, empty, and error states properly

---

Financial Logic Requirements

Multi-Release Escrows

• Totals must be calculated based on individual milestones
• Released amounts must reflect milestone release states
• Remaining balance must reflect unreleased milestone amounts

Single-Release Escrows

• Totals must be calculated at the escrow level
• Released amount must reflect escrow release status
• Balance must reflect unreleased escrow funds

All calculations must be derived from indexer data and must not rely on assumptions outside documented behavior.

---

UI Requirements

The dashboard must:

• Be visually aligned with the referenced Dashboard Block
• Include structured charts for:
  • Total Released
  • Total Balance
  • Total Amount
• Present financial values clearly and consistently
• Follow existing spacing, typography, and card patterns
• Maintain readability and financial clarity

Charts must:

• Clearly differentiate values
• Use consistent formatting
• Avoid misleading representations

---

Component Responsibilities

Suggested name (you may choose a better one):

FinancialDashboardView

Responsibilities:

• Retrieve escrows using the indexer hook
• Filter by receiver role
• Aggregate financial metrics
• Distinguish single-release vs multi-release logic
• Render chart components
• Handle loading, empty, and error states

---

Functional Requirements

• Uses useGetEscrowsFromIndexerByRole correctly
• Filters escrows by receiver
• Correctly handles multi-release escrow calculations
• Correctly handles single-release escrow calculations
• Displays Total Released
• Displays Total Balance
• Displays Total Amount
• Matches existing dashboard UI patterns
• No smart contract changes
• No API changes
• Lint and typecheck must pass

---

Developer Workflow (Required)

• Create a new branch:

feature/financial-dashboard

• Open a PR into main
• Include screenshots showing:
  • Loading state
  • Empty state
  • Dashboard populated with data
  • Charts displaying correct totals

---

Testing (Required)

Local Testing

• Run the app locally
• Connect a wallet with receiver escrows
• Verify correct aggregation for:
  • Single-release escrows
  • Multi-release escrows
• Validate financial totals manually against raw data
• Verify visual consistency

Edge Cases

• No escrows returned
• Only single-release escrows
• Only multi-release escrows
• Mixed escrow types
• Partially released milestones

---

Learning Outcomes (Why This Task Exists)

By completing this task, contributors will learn:

• How to use the Trustless Work Indexer hook
• How multi-release escrow logic differs from single-release
• How milestone states impact financial aggregation
• How to build accurate financial dashboards
• How to maintain architectural and UI consistency

---

Acceptance Criteria

• Escrows are fetched using the official indexer hook
• Results are filtered by receiver role
• Multi-release escrows are calculated based on milestones
• Single-release escrows are calculated at escrow level
• Total Released, Total Balance, and Total Amount are accurate
• The dashboard matches existing UI patterns
• Loading and empty states are handled correctly
• Code follows repository standards
• Lint and typecheck pass

---

Notes for Contributors

This task focuses on financial accuracy, correct aggregation logic, and UI consistency.

Be precise.
Be consistent.
Follow Trustless Work documentation strictly.
Avoid assumptions in financial calculations.

[Agbeleshe]

Hello, can I handle this? Yes, I’d like to work on this issue. I am a proficient Next.js/React frontend developer with strong experience building analytics dashboards and financial visualizations using structured data pipelines and SDK-driven hooks in repositories hosted on GitHub. I have hands-on experience implementing chart-based dashboards, handling aggregation logic for financial datasets, and maintaining strict alignment with external documentation and existing repository architecture. I’m comfortable working with indexer-driven data sources and building reusable dashboard components that follow established UI patterns from Trustless Work.

To tackle this, I will implement the financial dashboard view for Trustless-Work’s clonable-backoffice by integrating the useGetEscrowsFromIndexerByRole hook to fetch escrows where the connected wallet is the receiver. I will build a clean aggregation layer that separates single-release escrows (calculated at escrow level) from multi-release escrows (calculated from milestone states) to compute Total Released, Total Balance, and Total Amount accurately based strictly on indexer data. I will then render structured charts aligned with the referenced dashboard block while reusing existing layout and card components, and handle loading, empty, and error states consistently with repository patterns. Finally, I will validate calculations against raw indexer data, ensure lint/typecheck compliance, and include the required screenshots demonstrating correct financial visualization across different escrow scenarios.

[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

[FabianSanchezD]

Hey TW team! I'm Fabian, full-stack web3 dev.

Really interested in contributing to the backoffice of TW, and I have the experience to solve this issue! I'll make the dashboard based on the financial data.

My ETA is less than 2 days. Thanks!

[Luluameh]

Hi 👋 I’d like to work on Frontend: Dashboard Based on Financial Data (clonable-backoffice).

I’ll implement a FinancialDashboardView that strictly follows Trustless Work documentation and existing repository patterns.

My approach:

Data Layer

Use useGetEscrowsFromIndexerByRole exactly as documented

Filter escrows where the connected wallet is the receiver

Maintain strict typing and avoid undocumented assumptions

Financial Aggregation Logic

Distinguish clearly between multi-release and single-release escrows

Multi-release → calculate totals based on milestone states

Single-release → calculate totals at escrow level

Compute:

Total Released

Total Balance

Total Amount

Validate all totals manually against raw indexer data

UI Layer

Follow the referenced Dashboard Block structure

Reuse existing dashboard layout and UI patterns

Render structured charts for the three financial metrics

Implement proper loading, empty, and error states

Ensure clean financial formatting and readability

I will:

Create feature/financial-dashboard branch

Include screenshots (loading, empty, populated states)

Test with single-release, multi-release, and mixed escrows

Ensure lint and check pass

ETA: 8-12hr.

[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.

[KevinLatino]

Hi, I’m Kevin Latino, a software engineer with proven contributions on OnlyDust. I would approach this by strictly following the existing repository patterns and Trustless Work documentation, using useGetEscrowsFromIndexerByRole as specified, implementing clear aggregation utilities to separate single-release and multi-release logic, and building a reusable FinancialDashboardView that produces accurate, well-formatted totals and charts. I’d like to take ownership of this feature and start contributing more actively to Trustless Work.

ETA: 2–3 days