# 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

### Backend Roadmap: Use Rust for memory-safe app, critically important for 

From a non‑developer perspective:
### 🖥️ Frontend: React 18, TypeScript
- **React 18:** A popular library for building interactive user interfaces. Think of it as the “engine” that makes buttons, forms, and dynamic content work smoothly.
- **TypeScript:** A programming language that adds safety checks. It’s like spell‑check for code, helping developers avoid mistakes before they happen.

### ⚡ Build Tool: Vite 6
- Vite is the tool that assembles everything together quickly. Imagine a super‑fast kitchen prep station that gets all ingredients ready so the chef (developer) can cook without delays.

### 🎨 Styling: Tailwind CSS 4
- Tailwind is a design system. Instead of manually writing styles, developers use pre‑made building blocks to make apps look polished. It’s like having a catalog of furniture pieces you can mix and match to decorate a room.

### 🔄 State Management: Zustand
- Zustand keeps track of the app’s “memory” — what the user is doing, what data is loaded, etc. Think of it as the notebook where the app writes down what’s happening so it doesn’t forget.

### 🛤️ Routing: React Router 7
- Routing decides what page you see when you click a link. It’s the GPS of the app, guiding you from one screen to another.

### 🧩 UI Components: Radix UI (shadcn/ui pattern)
- Radix UI provides ready‑made interface pieces (like menus, dialogs, sliders). The “shadcn/ui pattern” is a way of organizing them so they’re easy to reuse. It’s like IKEA furniture kits — standardized, reliable, and customizable.

### 🔍 Icons: Lucide React
- Lucide is a library of clean, modern icons (like arrows, hearts, or search magnifying glasses). It’s the visual garnish that makes apps feel intuitive.


## Quick Start (One-Line Install)

### From Web (on Raspberry Pi with network access)

```bash
# Option 1: Direct clone and run
git clone https://github.com/your-repo/tck_rtu.git /opt/tck_rtu
cd /opt/tck_rtu
./install_everything.sh

# Option 2: From custom web server
# Place install_everything.sh on your web server at:
# http://tckrtuiyo:3000/tck/tck_rtu/install_everything.sh
# Then run:
curl -sL http://tckrtuiyo:3000/tck/tck_rtu/install_everything.sh | bash

# Option 3: From GitHub raw (replace with actual repo URL)
curl -sL https://raw.githubusercontent.com/your-repo/main/install_everything.sh | bash
```

### Manual Install

```bash
# 1. Clone repository
git clone https://github.com/your-repo/tck_rtu.git /opt/tck_rtu
cd /opt/tck_rtu

# 2. Install Node.js (if not installed)
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
sudo apt-get install -y nodejs

# 3. Install dependencies
cd sample_interface
npm install

# 4. Run
cd ..
./start.sh
```

### Web Server Setup (for Option 2)

If you want to serve the install script from a local web server:

```bash
# Place the script in your web root
sudo cp install_everything.sh /var/www/html/tck/tck_rtu/

# Start nginx
sudo systemctl start nginx

# Or use Python
cd /var/www/html/tck/tck_rtu
python3 -m http.server 3000
```

Then access via: `http://<your-server>:3000/tck/tck_rtu/install_everything.sh`

## 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 |
|------|------|------------|
| 8888 | Kiosk | 1024x600 (fixed, for 7" touchscreen) |
| 9090 | Remote | Full HD (responsive, for PC access) |
| 5173 | Dev | Development server |

## 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