Skip to content

UI Components

This directory contains reusable UI components designed for the REC Verifiable Credentials Platform. These components are built with Tailwind CSS and structured for easy conversion to React components.

File: main-navigation.html

The main navigation component provides a comprehensive navigation system for the platform that matches the exact structure shown in the screenshot, including:

  • Sidebar Navigation: Left sidebar with logo and main navigation items
  • Top Navigation Bar: Horizontal navigation with platform name, main links, notifications, and user profile
  • Secondary Navigation: Section-specific tabs for contextual navigation
  • Dropdown Menus: Support for Credentials and Settings dropdowns

Navigation Mapping: - Main Navigation: Dashboard, Credentials, Verification, Reports, Settings - Credentials Sub-Navigation: Issue Credentials, Manage Credentials, Disclosure Requests, Verification Results - Sidebar Navigation: Dashboard, Credentials (Issue, Manage, Request Disclosure), Verification, Reports, Settings

Tailwind Classes: - Sidebar: w-64 bg-blue-800 text-white flex flex-col - Top Nav: bg-white shadow-sm flex justify-between items-center px-4 py-3 border-b - Secondary Nav: -mb-px flex space-x-8 - Active Tab: border-blue-500 text-blue-600 whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm

React Props: - activeMainNav (string): Current active main navigation item - activeSecondaryNav (string): Current active secondary tab - expandedSidebarItems (array): Array of expanded sidebar dropdown items - user (object): User information object - hasNotifications (boolean): Boolean to show notification indicator

Usage Example: 

<!-- Include the navigation component at the top of your page -->
<nav class="bg-white shadow" data-component="main-navigation">
  <!-- Component content -->
</nav>

<!-- Update active states based on current page -->
<a href="#" class="border-blue-500 text-gray-900" data-nav-item="dashboard" data-active="true">
  Dashboard
</a>

How to Use Components

  1. Copy the HTML: Copy the component HTML from the respective file
  2. Update Data Attributes: Modify data attributes to match your specific use case
  3. Customize Content: Replace placeholder content with actual data
  4. Set Active States: Update active states for navigation items as needed

When converting to React, use the data attributes as a guide for component props.

Organization Onboarding Components

Organization Registration Form

File: ../organization-onboarding/registration-form.html

A comprehensive organization registration form that collects basic information, address details, contact information, and administrator account setup.

Tailwind Classes: - Form Container: bg-white shadow rounded-lg px-6 py-8 - Form Sections: space-y-8 - Input Fields: mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-rec-blue focus:border-rec-blue sm:text-sm - Progress Bar: flex items-center py-4 - Action Buttons: px-6 py-2 text-sm font-medium text-white bg-rec-blue border border-transparent rounded-md hover:bg-blue-700

React Props: - organizationData (object): Pre-filled organization information - onSubmit (function): Form submission handler - onSaveDraft (function): Save draft handler - isLoading (boolean): Loading state for form submission

KYB Verification Form

File: ../organization-onboarding/kyb-verification.html

Know Your Business verification form with document upload capabilities and compliance information collection.

Tailwind Classes: - Upload Areas: border-2 border-dashed border-gray-300 rounded-lg p-6 hover:border-gray-400 transition-colors - Info Alerts: bg-blue-50 border border-blue-200 rounded-md p-4 - Warning Alerts: bg-yellow-50 border border-yellow-200 rounded-md p-4 - File Input: sr-only (screen reader only)

React Props: - uploadedDocuments (object): Object containing uploaded document information - onFileUpload (function): File upload handler - onSubmit (function): Form submission handler - maxFileSize (number): Maximum file size in MB - acceptedFormats (array): Array of accepted file formats

Setup Complete Screen

File: ../organization-onboarding/setup-complete.html

Success screen displayed after completing organization registration and KYB verification, showing status and next steps.

Tailwind Classes: - Success Icon: mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-6 - Status Cards: bg-green-50 border border-green-200 rounded-lg p-6 (complete), bg-yellow-50 border border-yellow-200 rounded-lg p-6 (pending) - Status Badges: inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 - Next Steps: bg-blue-50 border border-blue-200 rounded-lg p-6 text-left

React Props: - organizationId (string): Generated organization ID - registrationDate (string): Registration completion date - contactEmail (string): Organization contact email - kybStatus (string): KYB verification status ('pending', 'approved', 'rejected') - onGoToDashboard (function): Dashboard navigation handler - onDownloadGuide (function): Setup guide download handler - onContactSupport (function): Support contact handler

Progress Bar Component

Component: data-component="progress-bar"

Multi-step progress indicator used across all onboarding screens.

Tailwind Classes: - Container: flex items-center py-4 - Step Complete: flex items-center text-sm font-medium text-green-600 - Step Active: flex items-center text-sm font-medium text-rec-blue - Step Inactive: flex items-center text-sm font-medium text-gray-400 - Progress Line: flex-1 mx-4 h-1 bg-gray-200 rounded - Progress Fill: h-1 bg-rec-blue rounded (with dynamic width)

React Props: - currentStep (number): Current active step (1-3) - completedSteps (array): Array of completed step numbers - stepLabels (array): Array of step label strings

Status Card Component

Component: data-component="status-card"

Reusable status display card used in the setup complete screen.

Tailwind Classes: - Success Card: bg-green-50 border border-green-200 rounded-lg p-6 - Pending Card: bg-yellow-50 border border-yellow-200 rounded-lg p-6 - Icon Container: flex items-center justify-center w-12 h-12 bg-green-100 rounded-lg mx-auto mb-4

React Props: - status (string): Status type ('success', 'pending', 'warning', 'error') - title (string): Card title - description (string): Card description - icon (string): Icon identifier - badge (object): Badge configuration with text and style

The organization onboarding process follows this navigation flow:

  1. Registration Form → KYB Verification (via "Continue to KYB Verification" button)
  2. KYB Verification → Registration Form (via "Back" button)
  3. KYB Verification → Setup Complete (via "Submit for Review" button)
  4. Setup Complete → Dashboard (via "Go to Dashboard" button)

Each screen includes proper navigation links and maintains consistent progress indication throughout the flow.