# TCK RTU - Rainfall Monitoring Web Interface

A modern, web-based interface for Base Station/Real-Time Unit (RTU) monitoring rainfall and related sensors. Designed for 7" capacitive touchscreen display (1024x600) on Raspberry Pi Zero 2 W/3B, running via Chromium Kiosk Mode.

## Features

- Real-time rainfall monitoring (Today, Hourly, MAR Accumulation, Yearly Accumulation)
- Solar and battery voltage monitoring with status indicators
- Station information display (ID, version, communication status)
- Dual-mode display:
  - **Kiosk mode** (port 8080): 1024x600 for local 7" touchscreen
  - **Remote mode** (port 9090): Full HD responsive for PC access
- Touch-friendly UI with 44px+ touch targets
- Modern React/TypeScript architecture with Zustand state management

## Tech Stack

- **Frontend**: React 18, TypeScript
- **Build Tool**: Vite 6
- **Styling**: Tailwind CSS 4
- **State Management**: Zustand
- **Routing**: React Router 7
- **UI Components**: Radix UI (shadcn/ui pattern)
- **Icons**: Lucide React

## Getting Started

### Prerequisites

- Node.js 18+
- npm or pnpm

### Installation

```bash
cd sample_interface
npm install
```

### Development

```bash
npm run dev
```

### Build

```bash
npm run build
```

### Preview Production Build

```bash
npm run preview
```

## Project Structure

```
sample_interface/
├── src/
│   ├── app/
│   │   ├── api/           # API client with mock fallback
│   │   ├── components/    # React components
│   │   │   ├── ui/        # shadcn/ui components
│   │   │   └── views/     # Page views
│   │   ├── hooks/         # Custom React hooks
│   │   ├── stores/        # Zustand stores
│   │   ├── routes.ts      # Route definitions
│   │   └── App.tsx        # App root
│   ├── styles/            # CSS files
│   └── test/             # Test setup
├── index.html            # Entry HTML
├── vite.config.ts        # Vite configuration
└── package.json
```

## Display Modes

The app detects display mode by port:

| Port | Mode | Resolution |
|------|------|------------|
| 8080 | Kiosk | 1024x600 (fixed) |
| 9090 | Remote | Full HD (responsive) |

## Bundle Size

- **Target**: < 170KB gzipped
- **Limit**: < 200KB gzipped
- **Current**: ~100KB gzipped

## Testing

```bash
npm run test        # Run tests once
npm run test:watch  # Run tests in watch mode
```

## Phase Status

| Phase | Status | Description |
|-------|--------|-------------|
| 1 | ✅ Complete | Foundation & Dashboard |
| 2 | 🔜 Pending | Settings Framework |
| 3 | 🔜 Pending | Data Management & Network Stack |

## License

Private - TCK Project