# Network Scanner Frontend

A modern, React-based frontend for the Network Scanner visualization tool.

## Features

- 🗺️ **Interactive Network Map** - Visualize network topology with react-flow
- 📊 **Real-time Updates** - WebSocket integration for live scan progress
- 🖥️ **Host Management** - Browse, search, and view detailed host information
- 🔍 **Scan Control** - Start, monitor, and manage network scans
- 📱 **Responsive Design** - Works on desktop and mobile devices
- 🎨 **Modern UI** - Built with TailwindCSS and Lucide icons

## Tech Stack

- **React 18** - UI framework
- **TypeScript** - Type safety
- **Vite** - Build tool
- **React Flow** - Network diagram visualization
- **React Router** - Navigation
- **Axios** - HTTP client
- **TailwindCSS** - Styling
- **Lucide React** - Icons

## Quick Start

### Install Dependencies

```bash
npm install
```

### Development Server

```bash
npm run dev
```

The application will be available at `http://localhost:3000`

### Build for Production

```bash
npm run build
```

### Preview Production Build

```bash
npm run preview
```

## Configuration

Create a `.env` file in the root directory:

```env
VITE_API_URL=http://localhost:8000
VITE_WS_URL=ws://localhost:8000
```

## Project Structure

```
frontend/
├── src/
│   ├── components/         # React components
│   │   ├── Layout.tsx      # Main layout with navigation
│   │   ├── ScanForm.tsx    # Scan configuration form
│   │   ├── NetworkMap.tsx  # Network topology visualization
│   │   ├── HostNode.tsx    # Custom node for network map
│   │   └── HostDetails.tsx # Host detail modal
│   ├── pages/              # Page components
│   │   ├── Dashboard.tsx   # Main dashboard
│   │   ├── NetworkPage.tsx # Network map view
│   │   ├── HostsPage.tsx   # Hosts table view
│   │   └── ScansPage.tsx   # Scans list view
│   ├── hooks/              # Custom React hooks
│   │   ├── useScans.ts     # Scan data management
│   │   ├── useHosts.ts     # Host data management
│   │   ├── useTopology.ts  # Topology data management
│   │   └── useWebSocket.ts # WebSocket connection
│   ├── services/           # API services
│   │   ├── api.ts          # REST API client
│   │   └── websocket.ts    # WebSocket client
│   ├── types/              # TypeScript types
│   │   └── api.ts          # API type definitions
│   ├── utils/              # Utility functions
│   │   └── helpers.ts      # Helper functions
│   ├── App.tsx             # Main app component
│   ├── main.tsx            # Entry point
│   └── index.css           # Global styles
├── public/                 # Static assets
├── index.html              # HTML template
├── package.json            # Dependencies
├── tsconfig.json           # TypeScript config
├── vite.config.ts          # Vite config
├── tailwind.config.js      # Tailwind config
└── README.md               # This file
```

## Usage

### Dashboard

The dashboard provides an overview of your network:
- Statistics cards showing total hosts, active hosts, services, and scans
- Quick scan form to start new scans
- Recent scans list with progress indicators
- Common services overview

### Network Map

Interactive network topology visualization:
- Pan and zoom the diagram
- Click nodes to view host details
- Color-coded by host type (gateway, server, workstation, device)
- Real-time updates as scans discover new hosts
- Export diagram (PNG/SVG)

### Hosts

Browse all discovered hosts:
- Searchable table view
- Filter by status
- Click any host to view details
- View services running on each host

### Scans

Manage network scans:
- View all scans with status and progress
- Cancel running scans
- View scan results and errors

## API Integration

The frontend communicates with the backend API at `http://localhost:8000`:

- **REST API**: `/api/*` endpoints for data operations
- **WebSocket**: `/api/ws` for real-time updates

## Development

### Code Style

- ESLint for linting
- TypeScript for type checking
- Prettier recommended for formatting

### Building

```bash
npm run build
```

Output will be in the `dist/` directory.

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT

## Author

DevAgent - Full-stack Development AI