I'll help you build this comprehensive Blood Supply Chain Management System UI. This is a substantial project with multiple pages and components, so let me start by exploring the codebase and then create a detailed implementation plan.

Now let me explore the current project structure:

Now let me create a comprehensive implementation plan:

Let me start building the Blood Supply Chain Management System. First, I'll generate design inspiration to ensure we create a visually compelling healthcare interface.

Now I'll start building. The design inspiration shows a modern, clean healthcare dashboard aesthetic. I'll begin with Task 1: Setting up the project styling and theme.

Now I'll create the tailwind config and update the globals.css with a healthcare-themed color scheme inspired by the design brief - clean, professional, with medical red (#e63946) as the primary color.

Now I'll create the types and mock data for the blood supply chain system:

Now I'll move to Task 2: Build layout components. Let me create the navbar and sidebar:

Now I'll create the authentication pages. First, the login page with wallet connection:

Now I'll create the dashboard page. Let me first create some card components:

Now let me create the main dashboard page:

Now let me create the transaction table component:

Now let me create the Donations page:

Now let me create the Donors page:

Now let me create the Hospitals page:

Now let me create the Inventory page:

Now let me create the Transactions page and Settings page:

Now let me create the home/landing page and wire up routing:

Now let me update the main layout to add proper metadata:

Now let me move to the final task and update the todo list:

I've successfully built the complete Blood Supply Chain Management System UI. Here's a summary of what I've created:

Complete Blood Supply Chain Management System

Project Structure & Design

• Theme: Professional healthcare red (#e63946) with clean white cards and gray accents
• Typography: Geist sans-serif font family with responsive sizing
• Color System: Red primary brand color with secondary neutrals, perfect for a trusted medical application

Pages Built (9 total)

1. Home Page - Landing page with features, stats, and CTAs
2. Login Page - Split layout with wallet connection and email login
3. Signup Page - Role-based signup with hospital/blood bank organization fields
4. Dashboard - Overview with stats cards, quick actions, and recent transactions
5. Donations - Manage blood donations with registration form and tracking table
6. Donors - Browse and connect with verified blood donors
7. Hospitals - Hospital network management and connection
8. Inventory - Blood stock management with expiry alerts and low stock warnings
9. Transactions - Complete transaction history with filtering and export
10. Settings - Account management, security, and notification preferences

Core Components Created

• Navbar - Sticky navigation with wallet display and notifications
• Sidebar - Role-based navigation with mobile responsiveness
• Dashboard Layout - Reusable wrapper combining navbar, sidebar, and content
• Stat Card - Displays KPIs with icons and trend indicators
• Action Card - Quick action tiles for common operations
• Transaction Table - Reusable table with status badges and blood type indicators

Data & Types

• Complete TypeScript interfaces for Users, Transactions, Donations, and Inventory
• Mock data with realistic users, transactions, and blockchain addresses
• Dashboard statistics and role-based functionality

The application features a clean, professional design with full mobile responsiveness, intuitive navigation, and all the essential pages needed for a blood supply chain management system. The UI is production-ready and prepared for backend integration.