Skip to content

Feature/invoice UI refinements - #541

Open
Tukura11 wants to merge 4 commits into
Stellar-split:mainfrom
Tukura11:feature/invoice-ui-refinements
Open

Feature/invoice UI refinements#541
Tukura11 wants to merge 4 commits into
Stellar-split:mainfrom
Tukura11:feature/invoice-ui-refinements

Conversation

@Tukura11

Copy link
Copy Markdown

Summary

Centralize invoice status badge styling, add skeleton loaders for recipient lists, introduce empty state illustrations, and implement a sticky
summary sidebar on the invoice detail page.

Changes

#490 — Invoice Status Badge Color System with Semantic Design Tokens

  • Create src/lib/invoiceStatus.ts with centralized STATUS_CONFIG
  • Refactor StatusBadge to consume semantic tokens
  • All status colors update in one place

#491 — Skeleton Loader for Recipient List

  • Create RecipientListSkeleton matching table structure
  • Show 3 skeleton rows during load to prevent layout shift

#492 — Empty State Illustrations for Zero-Data Views

  • Create EmptyState component with SVG illustrations
  • Support light/dark mode via inline SVG

#493 — Invoice Summary Sticky Sidebar on Detail Page

  • Create InvoiceSummaryPanel with totals and status
  • Grid layout: grid-cols-1 lg:grid-cols-[1fr_320px]
  • Sticky on lg+, scrolls below on mobile

Closes #490, Closes #491, Closes #492, Closes #493

Tukura11 added 4 commits July 28, 2026 18:52
…llar-split#490)

Create STATUS_CONFIG in src/lib/invoiceStatus.ts with label, colorClass, and icon for each status. Refactor StatusBadge to consume this single source of truth instead of inline STYLES and ICON maps.

Closes Stellar-split#490
…tellar-split#491)

Create RecipientListSkeleton component matching RecipientPayoutTracker table structure. Show 3 skeleton rows during loading to prevent layout shift when recipient data loads.

Closes Stellar-split#491
…-split#492)

Create EmptyState component that accepts illustration (ReactNode), heading, description, and optional action props. Add three inline SVG illustrations: EmptyInvoices, EmptySearch, EmptyRecipients. Supports both light and dark modes via inline SVG color classes.

Closes Stellar-split#492
…t#493)

Create InvoiceSummaryPanel component showing total, funded, remaining amounts, status badge, and action button. Refactor invoice detail page into CSS grid layout with grid-cols-1 lg:grid-cols-[1fr_320px]. Summary panel is sticky on lg+ screens and scrolls below content on mobile.

Closes Stellar-split#493
@vercel

vercel Bot commented Jul 28, 2026

Copy link
Copy Markdown

@Tukura11 is attempting to deploy a commit to the kingsman-99's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Jul 28, 2026

Copy link
Copy Markdown

@Tukura11 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant