feat: add reusable Contract Activity Timeline

[hardeyshorlar12]

Overview

Adds a reusable Contract Activity Timeline that surfaces significant contract lifecycle events (creation, escrow funding, milestone submission/approval, payments, disputes) in chronological order. The component fetches from the existing /api/activity audit trail and is wired into the contract detail page.

Related Issue

Closes #215

Changes

Contract Activity Timeline

• [MODIFY] components/ActivityTimeline.tsx

  • Reusable client timeline with contractId (API fetch) or controlled events props.
  • Chronological ascending order, precise timestamps, and transaction-hash display from metadata.
  • Color-coded event icons for contract, escrow, milestone, payment, and dispute actions.
  • Loading skeleton, empty state, error retry, and load-more pagination.
  • Native title tooltips on truncated transaction hashes and raw timestamps.

• [MODIFY] app/dashboard/contracts/[id]/page.tsx

  • Renders ActivityTimeline for the open contract so clients and freelancers see the audit trail in context.

• [ADD] __tests__/ActivityTimeline.test.tsx

  • Unit coverage for chronological sorting, tx-hash extraction, empty/loading states, controlled render, and contractId fetch.

Verification Results

Implemented via GitHub Contents/Git API (no local clone).
Acceptance criteria mapping:
- Chronological ordering — sortEventsChronologically (oldest first)
- Event timestamps — formatEventTimestamp with date + time
- Transaction hash (where applicable) — extractTransactionHash from metadata aliases
- Reusable timeline component — ActivityTimeline with contractId / events props
- Responsive design — stacked layout with sm: breakpoints
- Empty state — friendly "No activity yet" message
- Loading state — skeleton loaders while fetching
Unit tests added in __tests__/ActivityTimeline.test.tsx

Acceptance Criteria	Status
Chronological ordering	Implemented (ascending by createdAt)
Event timestamps	Implemented (locale date/time)
Transaction hash where applicable	Implemented (metadata txHash / transactionHash / hash)
Reusable timeline component	Implemented on contract detail page
Responsive design	Implemented (mobile-first flex layout)
Empty state	Implemented
Loading state	Implemented (skeleton)

Closes #215

[drips-wave]

@hardeyshorlar12 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits