Add empty state illustration and message when no proposals exist

[thegreatfeez]

Frontend — Dashboard

Summary

When the multisig has no active proposals, the dashboard shows a bare grey text line that gives no guidance on what to do next. Replacing it with a proper empty state — an icon, a short message, and a prompt to create the first proposal — makes the app feel finished and helps new users take action immediately.

Background

DashboardPage.tsx already handles the zero-proposals case with a simple paragraph: "No active proposals" (around line 44). The component already receives an onCreateProposal callback prop that opens the create-proposal modal when called. No new props, hooks, or contract reads are needed — the empty state is a pure UI improvement within the existing conditional branch. The project uses Tailwind for all styling and has no icon library installed, so any illustration should be an inline SVG or a Unicode/emoji symbol.

What Needs to Be Done

1. In frontend/src/pages/DashboardPage.tsx, replace the plain <p>No active proposals</p> with a centred empty-state block. The block should contain a small decorative icon (inline SVG or a large Unicode symbol), a short heading such as "No active proposals", a one-line sub-text explaining what a proposal is or what to do, and a button labelled "Create proposal" that calls the existing onCreateProposal prop.

2. Style the new block to be visually centred in the proposals area, with generous vertical padding so it occupies roughly the same vertical space as two or three ProposalCard placeholders would.

Acceptance Criteria

• When there are no active proposals, the empty state block is visible instead of the plain text message
• The empty state contains an icon or illustration, a heading, a sub-text line, and a "Create proposal" button
• Clicking "Create proposal" in the empty state opens the create-proposal modal (same behaviour as the existing "+ New" button in the header)
• When proposals are present, the empty state is not rendered
• The project builds with no TypeScript errors

Files to Look At

• frontend/src/pages/DashboardPage.tsx — the empty-state branch is around line 44; onCreateProposal prop is already available in this component

Difficulty: Easy

[mosharraftimes2018-dev]

@mosharraftimes2018-dev has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @mosharraftimes2018-dev to this issue.

[DANTE-1903]

@DANTE-1903 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would love to be assigned to this issue. The current "No active proposals" text baseline provides minimal visual context and fails to guide new users toward their next logical action when a multisig wallet is empty. To resolve this, I will refactor the conditional rendering branch around line 44 in frontend/src/pages/DashboardPage.tsx into a beautifully centered, accessible empty-state layout block.

I will construct this new component using native Tailwind CSS formatting with generous vertical padding to emulate the space of multiple active proposal cards. The layout will bundle a lightweight, inline SVG icon (avoiding any external library overhead), a bold heading, an informative subtext string, and an immediate "Create proposal" action button wired directly to the component's existing onCreateProposal callback prop. I'll make sure the block functions perfectly on both mobile and desktop viewpoints, hides cleanly once a live proposal state is populated, and compiles with zero TypeScript errors. I can deliver this clean UI improvement within a few hours of assignment.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @DANTE-1903 to this issue.

[drips-wave]

Congratulations, @mosharraftimes2018-dev! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @mosharraftimes2018-dev: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊