Skip to content

Dashboard Shell UI & Merchant Setup Flow#204

Open
aabxtract wants to merge 3 commits into
ZyntariHQ:mainfrom
aabxtract:main
Open

Dashboard Shell UI & Merchant Setup Flow#204
aabxtract wants to merge 3 commits into
ZyntariHQ:mainfrom
aabxtract:main

Conversation

@aabxtract

Copy link
Copy Markdown

Overview

This PR introduces a major visual overhaul of the Invoisio dashboard shell to provide a premium, dynamic merchant workspace, along with a complete backend setup flow for merchants to configure their payout and profile details securely.

What's Changed

🎨 Frontend: Premium Dashboard Shell

Transformed the basic scaffolding into a responsive, polished UI with dark-mode styling and fluid micro-animations.

  • Design System (globals.css): Introduced 40+ CSS tokens defining a deep navy palette, glassmorphism (backdrop-filter: blur), and comprehensive keyframe animations.
  • Collapsible Sidebar (sidebar.tsx): Upgraded to support a smooth toggle between full (260px) and icon-only (72px) modes. Added a slide-in mobile drawer with a backdrop.
  • Wallet-Aware Header (header.tsx): Rebuilt using glassmorphism. Includes breadcrumbs, a Stellar Testnet status badge, a pulsing auth status pill, and a responsive wallet balance card showing XLM/USDC with fiat equivalents.
  • Dynamic Layout (dashboard-layout.tsx): Engineered with a unified SidebarProvider context that adjusts main content padding automatically based on the sidebar's collapse state.
  • Polished Loading State (require-auth.tsx): Replaced the basic spinner with a customized shimmer skeleton that mimics the exact layout of the dashboard shell to prevent layout shift.

⚙️ Backend: Merchant Setup Flow

Enabled campaign contributors to test against realistic account data by establishing the merchant setup/profile lifecycle.

  • Schema Upgrades (schema.prisma): Added businessEmail, preferredAsset, and payoutWallet fields to the Merchant model. Applied database migrations successfully.
  • Strict Validation (is-stellar-public-key.validator.ts): Built a custom class-validator decorator utilizing @stellar/stellar-sdk's StrKey.isValidEd25519PublicKey. This securely rejects malformed or invalid Stellar addresses at the routing boundary.
  • Profile Endpoints (merchant.controller.ts):
    • GET /merchants/:merchantId/profile: Fetch the current profile.
    • PATCH /merchants/:merchantId/profile: Update configurations (using UpdateMerchantProfileDto).
    • Protected using existing JwtAuthGuard and RBAC decorators.
  • Module Registration (merchant.module.ts): Wired up the isolated MerchantModule directly into AppModule so the application can finally serve these endpoints.

Testing Instructions

  1. Run npm install in both /web and /backend.
  2. Apply migrations locally via npx prisma migrate dev.
  3. In /web, view the dashboard across desktop (1440px), tablet (768px), and mobile (375px) breakpoints to verify the sidebar collapse and hamburger drawer.
  4. Using an API client (like Postman), attempt a PATCH to the profile endpoint with an invalid payoutWallet (e.g., "G123INVALID") and ensure it returns a 400 Bad Request. Pass a valid Ed25519 public key and ensure it returns 200 OK.

closes #152
closes #157

aabxtract and others added 3 commits June 19, 2026 13:33
…ilities

feat: create dashboard layout with authentication and sidebar navigation

feat: implement dashboard overview page with recent invoices and wallet information

feat: add settings page for managing merchant account and webhook configuration

feat: create reusable dashboard layout and navigation components

feat: implement header component displaying wallet status and balance

feat: add sidebar navigation for easy access to dashboard sections

feat: create custom hook for fetching merchant wallet information
@Cedarich

Cedarich commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

@aabxtract please resolve merge conflicts

Also fix failing workflow

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build merchant onboarding and profile endpoints Build authenticated merchant dashboard shell

2 participants