# Web

This directory contains all web-based frontends for KosmoConnect.

## Structure

```
web/
├── dashboard/            # Public weather dashboard
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── Dockerfile
├── messaging/            # Subscriber web-to-mesh messaging client
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── Dockerfile
├── admin/                # Administrative panel
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── Dockerfile
└── shared/               # Shared UI components, hooks, styles
    ├── components/
    ├── hooks/
    └── styles/
```

## Dashboard

A public-facing weather visualization app.

**Tech Stack**: React + Vite + MapLibre GL  
**Features**:
- Interactive map showing all active enviro-nodes
- Live sensor readings inside node popups
- Auto-refreshing node locations and health
- Mobile-responsive dark theme
- No login required for basic viewing

See [`dashboard/README.md`](./dashboard/README.md) for run instructions.

## Messaging Client

A subscriber-only app for sending and receiving mesh messages.

**Tech Stack**: React + Vite  
**Features**:
- Inbox with threaded conversations
- Compose message to any node (network plan) or linked nodes (node plan)
- Auto-refreshing replies and delivery status indicators
- Dev-mode user switcher for testing subscription tiers

See [`messaging/README.md`](./messaging/README.md) for run instructions.

## Admin Panel

An internal tool for network operators.

**Tech Stack**: React + Vite + TanStack Table  
**Features**:
- Node onboarding wizard
- Subscriber search and management
- Network-wide message broadcast
- System metrics and logs
- Invoice and payout overview

## Design System

- **Colors**: Dark theme primary (slate/zinc), accent color TBD by Church of Kosmo branding
- **Typography**: Inter or system-ui stack
- **Icons**: Lucide React
- **Component Library**: Headless UI + Tailwind CSS