# Zanzibar Digital Freezone - Yew WASM App

A modern web application built with Yew and WebAssembly, porting the Zanzibar Digital Freezone platform from Actix MVC to a client-side WASM application.

## 🎯 Project Overview

**Motto**: "Convenience, Safety and Privacy"

This project is a UI-first port of the Zanzibar Digital Freezone platform, focusing on replicating the exact visual design and user experience of the original Actix MVC application while leveraging modern WASM technology.

## ✨ Features

### Core Platform Features
- **Home Dashboard** - 5 feature cards showcasing platform benefits
- **Governance** - Proposal management and voting system
- **Flows** - Business process management
- **Contracts** - Digital contract management and signatures
- **Digital Assets** - Asset tokenization and management
- **DeFi Platform** - 7-tab DeFi interface (Overview, Providing/Receiving, Liquidity, Staking, Swap, Collateral, Lending/Borrowing)
- **Companies** - Entity management and registration
- **Marketplace** - Asset trading platform
- **Calendar** - Event management system

### Technical Features
- **Responsive Design** - Mobile-first Bootstrap 5.3.3 layout
- **Authentication** - Session-based login system
- **Client-side Routing** - Browser history integration
- **Local Storage** - Persistent authentication state
- **Component Architecture** - Modular Yew components

## 🏗️ Architecture

```
┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Header        │    │   Sidebar        │    │   Main Content  │
│   - Logo        │    │   - Navigation   │    │   - Views       │
│   - User Menu   │    │   - Active State │    │   - Components  │
└─────────────────┘    └──────────────────┘    └─────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                           Footer                                │
│              "Convenience, Safety and Privacy"                  │
└─────────────────────────────────────────────────────────────────┘
```

## 🚀 Quick Start

### Prerequisites
- Rust (latest stable)
- Trunk (WASM build tool)
- Modern web browser

### Installation

1. **Install Rust and WASM target**:
   ```bash
   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
   rustup target add wasm32-unknown-unknown
   ```

2. **Install Trunk**:
   ```bash
   cargo install trunk wasm-bindgen-cli
   ```

3. **Clone and run**:
   ```bash
   cd zanzibar_freezone_app
   trunk serve
   ```

4. **Open browser**:
   Navigate to `http://localhost:8080`

### Demo Login
- **Email**: `admin@zanzibar.tf`
- **Password**: `admin123`

## 📁 Project Structure

```
zanzibar_freezone_app/
├── src/
│   ├── app.rs                    # Main application component
│   ├── lib.rs                    # WASM entry point
│   ├── components/               # Reusable UI components
│   │   ├── layout/              # Header, Sidebar, Footer
│   │   ├── forms/               # Login and other forms
│   │   └── cards/               # Feature cards
│   ├── views/                   # Main application views
│   │   ├── home_view.rs         # Dashboard with 5 cards
│   │   ├── login_view.rs        # Authentication
│   │   └── placeholder_view.rs  # Placeholder for other sections
│   └── routing/                 # Client-side routing
├── static/
│   └── css/
│       └── main.css             # Custom styles + Bootstrap
├── index.html                   # HTML template
├── Cargo.toml                   # Rust dependencies
└── Trunk.toml                   # Build configuration
```

## 🎨 UI Components

### Layout Components
- **Header**: Fixed top navigation with user menu
- **Sidebar**: Collapsible navigation with active states
- **Footer**: Three-column layout with links

### Feature Cards (Home Page)
1. 🤝 **Frictionless Collaboration** (Primary Blue)
2. 💱 **Frictionless Banking** (Success Green)
3. 📈 **Tax Efficiency** (Info Blue)
4. 🌍 **Global Ecommerce** (Warning Yellow)
5. 🛡️ **Clear Regulations** (Danger Red)

### Navigation Items
- 🏠 Home
- 👥 Governance
- 📊 Flows
- 📄 Contracts
- 🪙 Digital Assets
- 🏦 DeFi Platform
- 🏢 Companies
- 🛒 Marketplace
- 📅 Calendar

## 🔧 Development

### Build Commands
```bash
# Development server with hot reload
trunk serve

# Production build
trunk build --release

# Clean build artifacts
trunk clean
```

### Code Organization
- **Components**: Reusable UI elements following Yew patterns
- **Views**: Page-level components for each section
- **Routing**: Client-side navigation with browser history
- **Styling**: Bootstrap 5.3.3 + custom CSS for exact visual fidelity

## 📱 Responsive Design

### Desktop (≥768px)
- Fixed sidebar (240px width)
- Full header with navigation links
- Three-column footer layout

### Mobile (<768px)
- Collapsible sidebar with slide animation
- Hamburger menu in header
- Stacked footer layout
- Touch-friendly navigation

## 🔐 Authentication

### Current Implementation
- Simple mock authentication for demo
- Session persistence via LocalStorage
- Automatic redirect to login when not authenticated

### Future Enhancements
- Integration with backend authentication API
- JWT token management
- Role-based access control
- Multi-factor authentication

## 🎯 Implementation Status

### ✅ Completed (Phase 1)
- [x] Project structure and build system
- [x] Bootstrap 5.3.3 integration
- [x] Responsive layout components (Header, Sidebar, Footer)
- [x] Home view with 5 feature cards
- [x] Login form and authentication UI
- [x] Client-side routing
- [x] Mobile responsive design
- [x] Navigation state management

### 🚧 In Progress (Phase 2)
- [ ] Business logic for each section
- [ ] API integration
- [ ] Data models and services
- [ ] Form validation and error handling
- [ ] Advanced state management

### 📋 Planned (Phase 3)
- [ ] Real backend integration
- [ ] Database connectivity
- [ ] File upload and management
- [ ] Real-time updates
- [ ] Advanced DeFi functionality

## 🌐 Browser Support

- Chrome/Chromium 80+
- Firefox 74+
- Safari 13.1+
- Edge 80+

## 📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

## 📞 Support

For questions or support, please contact the development team or visit our documentation at [info.ourworld.tf/zdfz](https://info.ourworld.tf/zdfz).

---

**Zanzibar Digital Freezone** - Convenience, Safety and Privacy