# Stock Bot Web Dashboard

A modern React web dashboard for the Stock Bot trading system.

## Features

- **Modern UI**: Built with React 18 and TypeScript
- **Tailwind CSS**: For beautiful, responsive styling  
- **Headless UI**: Accessible components for dialogs and interactions
- **Heroicons**: Beautiful SVG icons
- **Responsive Design**: Works on desktop and mobile
- **Side Navigation**: Clean navigation with mobile-responsive sidebar

## Tech Stack

- **React 18** with TypeScript
- **Vite** for fast development and building
- **Tailwind CSS** for styling
- **Headless UI** for accessible components
- **Heroicons** for icons
- **Bun** for package management

## Getting Started

### Prerequisites

- Bun (for package management)
- Node.js 18+

### Installation

```bash
# Install dependencies
bun install

# Start development server
bun run dev

# Build for production
bun run build

# Preview production build
bun run preview
```

## Available Scripts

- `bun run dev` - Start development server
- `bun run build` - Build for production
- `bun run preview` - Preview production build
- `bun run lint` - Run ESLint
- `bun run type-check` - Run TypeScript type checking

## Project Structure

```
src/
├── App.tsx           # Main app component with sidebar navigation
├── main.tsx          # React app entry point
└── index.css         # Global styles with Tailwind directives
```

## Dashboard Features

The dashboard includes:

- **Responsive Sidebar**: Navigation that works on desktop and mobile
- **Dashboard Overview**: Portfolio value, returns, and active strategies
- **Navigation Sections**:
  - Dashboard (current page)
  - Portfolio
  - Analytics  
  - Reports
  - Settings

## Development

The app is set up with:

- TypeScript for type safety
- ESLint for code quality
- Tailwind CSS for utility-first styling
- Headless UI for accessible components
- Hot module replacement for fast development

## Integration

This web app is part of the larger Stock Bot system and will integrate with:

- Data Service (for market data)
- Portfolio Service (for portfolio management)
- Strategy Service (for trading strategies)
- Execution Service (for trade execution)

The web dashboard will communicate with these services via REST APIs to provide a complete trading dashboard experience.