+
+ );
+}
+
+export default function App() {
+ return
+
+ );
+}
diff --git a/sample_interface/src/app/components/ClockDisplay.tsx b/sample_interface/src/app/components/ClockDisplay.tsx
new file mode 100644
index 000000000..df2e3a26c
--- /dev/null
+++ b/sample_interface/src/app/components/ClockDisplay.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { Clock as ClockIcon } from 'lucide-react';
+
+export function ClockDisplay() {
+ const [currentTime, setCurrentTime] = useState(new Date());
+
+ useEffect(() => {
+ const timer = setInterval(() => {
+ setCurrentTime(new Date());
+ }, 1000);
+
+ return () => clearInterval(timer);
+ }, []);
+
+ const formatTime = (date: Date) => {
+ return date.toLocaleTimeString('en-US', {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ hour12: false,
+ });
+ };
+
+ const formatDate = (date: Date) => {
+ return date.toLocaleDateString('en-CA');
+ };
+
+ return (
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/CommStatus.tsx b/sample_interface/src/app/components/CommStatus.tsx
new file mode 100644
index 000000000..6a7290800
--- /dev/null
+++ b/sample_interface/src/app/components/CommStatus.tsx
@@ -0,0 +1,45 @@
+import { Signal } from 'lucide-react';
+
+interface CommStatusProps {
+ asu: number;
+ dBm: number;
+ percentage: number;
+}
+
+function getSignalQuality(percentage: number): 'good' | 'fair' | 'poor' {
+ if (percentage >= 60) return 'good';
+ if (percentage >= 30) return 'fair';
+ return 'poor';
+}
+
+const qualityColors = {
+ good: 'text-green-400',
+ fair: 'text-yellow-400',
+ poor: 'text-red-400',
+};
+
+export function CommStatus({ asu, dBm, percentage }: CommStatusProps) {
+ const quality = getSignalQuality(percentage);
+ const colorClass = qualityColors[quality];
+
+ return (
+
+
+ {formatTime(currentTime)}
+
+
+ {formatDate(currentTime)}
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/DashboardLayout.tsx b/sample_interface/src/app/components/DashboardLayout.tsx
new file mode 100644
index 000000000..fa9a3b83f
--- /dev/null
+++ b/sample_interface/src/app/components/DashboardLayout.tsx
@@ -0,0 +1,27 @@
+import { useState } from "react";
+import { Outlet } from "react-router";
+import { Sidebar } from "./Sidebar";
+import { Header } from "./Header";
+import { NavigationButtons } from "./NavigationButtons";
+
+export function DashboardLayout() {
+ const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+
+ return (
+
+
+
+ Comm:
+
+ {percentage}%
+
+
+
+ {asu}ASU / {dBm}dBm
+
+
+ setSidebarCollapsed(!sidebarCollapsed)}
+ />
+
+ );
+}
\ No newline at end of file
diff --git a/sample_interface/src/app/components/Header.tsx b/sample_interface/src/app/components/Header.tsx
new file mode 100644
index 000000000..aa4cf7c84
--- /dev/null
+++ b/sample_interface/src/app/components/Header.tsx
@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+import { Wifi, WifiOff } from "lucide-react";
+import { useSensorStore } from "../stores/sensorStore";
+import { VoltageDisplay } from "./VoltageDisplay";
+import { BatteryStatus } from "./BatteryStatus";
+import { LoginIndicator } from "./LoginIndicator";
+
+export function Header() {
+ const [currentTime, setCurrentTime] = useState(new Date());
+
+ const { data } = useSensorStore();
+ const isOnline = data.communication.percentage > 0;
+ const isLoggedIn = false;
+
+ useEffect(() => {
+ const timer = setInterval(() => {
+ setCurrentTime(new Date());
+ }, 1000);
+
+ return () => clearInterval(timer);
+ }, []);
+
+ const formatTime = (date: Date) => {
+ return date.toLocaleTimeString("en-US", {
+ hour: "2-digit",
+ minute: "2-digit",
+ second: "2-digit",
+ hour12: false
+ });
+ };
+
+ const formatDate = (date: Date) => {
+ return date.toLocaleDateString("en-CA"); // YYYY-MM-DD format
+ };
+
+ return (
+
+
+
+
+
+
+
+ {/* Logo */}
+
+ );
+}
diff --git a/sample_interface/src/app/components/LoginIndicator.tsx b/sample_interface/src/app/components/LoginIndicator.tsx
new file mode 100644
index 000000000..a38033301
--- /dev/null
+++ b/sample_interface/src/app/components/LoginIndicator.tsx
@@ -0,0 +1,22 @@
+import { User } from 'lucide-react';
+
+interface LoginIndicatorProps {
+ isLoggedIn: boolean;
+ className?: string;
+}
+
+export function LoginIndicator({ isLoggedIn, className = '' }: LoginIndicatorProps) {
+ return (
+
+
+
+
+ DS
+
+ Data Station
+
+ {/* Time */}
+
+
+ Time:
+ {formatTime(currentTime)}
+
+
+ {/* Date */}
+
+ Date:
+ {formatDate(currentTime)}
+
+
+ {/* Station ID */}
+
+ Station:
+ {data.station.id}
+
+
+ {/* Comm Status */}
+
+ {isOnline ? (
+ <>
+
+
+ {/* Version */}
+
+ Ver:
+ {data.station.version}
+
+
+ {/* Login Status */}
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/NavigationButtons.tsx b/sample_interface/src/app/components/NavigationButtons.tsx
new file mode 100644
index 000000000..24769deb1
--- /dev/null
+++ b/sample_interface/src/app/components/NavigationButtons.tsx
@@ -0,0 +1,39 @@
+import { ChevronUp, ChevronDown } from "lucide-react";
+import { Button } from "./ui/button";
+
+export function NavigationButtons() {
+ const scrollAmount = 300; // pixels to scroll
+
+ const scrollUp = () => {
+ const panel = document.getElementById("details-panel");
+ if (panel) {
+ panel.scrollBy({ top: -scrollAmount, behavior: "smooth" });
+ }
+ };
+
+ const scrollDown = () => {
+ const panel = document.getElementById("details-panel");
+ if (panel) {
+ panel.scrollBy({ top: scrollAmount, behavior: "smooth" });
+ }
+ };
+
+ return (
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/RainfallCard.tsx b/sample_interface/src/app/components/RainfallCard.tsx
new file mode 100644
index 000000000..b99a5144e
--- /dev/null
+++ b/sample_interface/src/app/components/RainfallCard.tsx
@@ -0,0 +1,62 @@
+import { CloudRain } from 'lucide-react';
+
+type CardVariant = 'today' | 'hourly' | 'monthly' | 'yearly';
+
+interface RainfallCardProps {
+ label: string;
+ value: number;
+ variant: CardVariant;
+}
+
+const variantStyles: Record
+
+ );
+}
diff --git a/sample_interface/src/app/components/Sidebar.tsx b/sample_interface/src/app/components/Sidebar.tsx
new file mode 100644
index 000000000..0b8f3cfaa
--- /dev/null
+++ b/sample_interface/src/app/components/Sidebar.tsx
@@ -0,0 +1,193 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router";
+import {
+ Home,
+ BarChart3,
+ Settings,
+ Wrench,
+ Gauge,
+ HardDrive,
+ LogIn,
+ ChevronRight,
+ ChevronDown
+} from "lucide-react";
+
+interface SidebarProps {
+ collapsed: boolean;
+ onToggle: () => void;
+}
+
+interface MenuItem {
+ id: string;
+ label: string;
+ icon: React.ReactNode;
+ path?: string;
+ children?: SubMenuItem[];
+}
+
+interface SubMenuItem {
+ id: string;
+ label: string;
+ path: string;
+}
+
+const menuItems: MenuItem[] = [
+ {
+ id: "home",
+ label: "HOME",
+ icon:
+
+
+ {formattedValue}
+
+ mm
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/VoltageDisplay.tsx b/sample_interface/src/app/components/VoltageDisplay.tsx
new file mode 100644
index 000000000..3567e3a65
--- /dev/null
+++ b/sample_interface/src/app/components/VoltageDisplay.tsx
@@ -0,0 +1,23 @@
+import { Zap } from 'lucide-react';
+
+interface VoltageDisplayProps {
+ label: string;
+ voltage: number;
+ className?: string;
+}
+
+export function VoltageDisplay({ label, voltage, className = '' }: VoltageDisplayProps) {
+ const formattedVoltage = voltage.toFixed(1);
+
+ return (
+
+ {!collapsed && MENU}
+
+
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/figma/ImageWithFallback.tsx b/sample_interface/src/app/components/figma/ImageWithFallback.tsx
new file mode 100644
index 000000000..0e26139be
--- /dev/null
+++ b/sample_interface/src/app/components/figma/ImageWithFallback.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+ 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes
+
+ ) : (
+
+ 
+
+ {children}
+
+ {children}
+
+
+
+
+ );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselPrevious({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps
+
+ {children}
+
+
+
+ {mockFiles.map((file) => (
+
+ ))}
+
+
+
+
+
+ {/* Right Column: File Content */}
+
+ {selectedFile.name}
+
+
+
+
+
+
+
+
+
+ {mockFileContent}
+
+
+
+
+ Size: {selectedFile.size}
+ Modified: {selectedFile.date}
+ Lines: 10
+
+
+
+
+ GPRS Configuration
+
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/views/GraphView.tsx b/sample_interface/src/app/components/views/GraphView.tsx
new file mode 100644
index 000000000..9b6b5402d
--- /dev/null
+++ b/sample_interface/src/app/components/views/GraphView.tsx
@@ -0,0 +1,51 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { BarChart3 } from "lucide-react";
+
+export function GraphView() {
+ return (
+
+
+
+ GPRS Setting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Data Visualization
+
+
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/views/LevelSettingView.tsx b/sample_interface/src/app/components/views/LevelSettingView.tsx
new file mode 100644
index 000000000..9a9a10666
--- /dev/null
+++ b/sample_interface/src/app/components/views/LevelSettingView.tsx
@@ -0,0 +1,78 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { Label } from "../ui/label";
+import { Switch } from "../ui/switch";
+import { Gauge } from "lucide-react";
+
+export function LevelSettingView() {
+ return (
+
+
+
+ Graph View
+
+ Chart visualization area
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 24h
+ Time Range
+
+
+ 156
+ Data Points
+
+
+ 12.5
+ Avg Value
+
+
+
+ Water Level Configuration
+
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/views/LoginView.tsx b/sample_interface/src/app/components/views/LoginView.tsx
new file mode 100644
index 000000000..1244ab1f6
--- /dev/null
+++ b/sample_interface/src/app/components/views/LoginView.tsx
@@ -0,0 +1,61 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { Label } from "../ui/label";
+import { LogIn } from "lucide-react";
+
+export function LoginView() {
+ return (
+
+
+
+ Level Setting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Login to Data Station
+
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/views/MobileSettingView.tsx b/sample_interface/src/app/components/views/MobileSettingView.tsx
new file mode 100644
index 000000000..e2ea91378
--- /dev/null
+++ b/sample_interface/src/app/components/views/MobileSettingView.tsx
@@ -0,0 +1,70 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { Label } from "../ui/label";
+import { Switch } from "../ui/switch";
+import { Smartphone } from "lucide-react";
+
+export function MobileSettingView() {
+ return (
+
+
+
+
+ Enter your credentials to access the system
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Forgot password?
+
+
+
+
+
+
+ Default credentials: admin / admin
+
+
+
+
+ Mobile Configuration
+
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/views/NetworkSetupView.tsx b/sample_interface/src/app/components/views/NetworkSetupView.tsx
new file mode 100644
index 000000000..02eebcffc
--- /dev/null
+++ b/sample_interface/src/app/components/views/NetworkSetupView.tsx
@@ -0,0 +1,69 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { Label } from "../ui/label";
+import { Switch } from "../ui/switch";
+import { Network } from "lucide-react";
+
+export function NetworkSetupView() {
+ return (
+
+
+
+ Mobile Setting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Network Configuration
+
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/views/RainfallSettingView.tsx b/sample_interface/src/app/components/views/RainfallSettingView.tsx
new file mode 100644
index 000000000..a2e0f4097
--- /dev/null
+++ b/sample_interface/src/app/components/views/RainfallSettingView.tsx
@@ -0,0 +1,69 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { Label } from "../ui/label";
+import { Switch } from "../ui/switch";
+import { CloudRain } from "lucide-react";
+
+export function RainfallSettingView() {
+ return (
+
+
+
+ Network Setup
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Rainfall Configuration
+
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/views/RainfallView.tsx b/sample_interface/src/app/components/views/RainfallView.tsx
new file mode 100644
index 000000000..4b420f0aa
--- /dev/null
+++ b/sample_interface/src/app/components/views/RainfallView.tsx
@@ -0,0 +1,65 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Droplets } from "lucide-react";
+import { useSensorStore } from "../../stores/sensorStore";
+import { RainfallCard } from "../RainfallCard";
+import { ClockDisplay } from "../ClockDisplay";
+import { CommStatus } from "../CommStatus";
+import { useDisplayMode } from "../../hooks/useDisplayMode";
+
+export function RainfallView() {
+ const { data } = useSensorStore();
+ const displayMode = useDisplayMode();
+
+ const rainfallItems = [
+ { label: "Today", value: data.rainfall.today, variant: 'today' as const },
+ { label: "Hourly", value: data.rainfall.hourly, variant: 'hourly' as const },
+ { label: "MAR Acc", value: data.rainfall.monthlyAcc, variant: 'monthly' as const },
+ { label: "Yearly Acc", value: data.rainfall.yearlyAcc, variant: 'yearly' as const },
+ ];
+
+ const isKiosk = displayMode === 'kiosk';
+
+ return (
+
+
+
+ Rainfall Setting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Last Update
+
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/views/SettingView.tsx b/sample_interface/src/app/components/views/SettingView.tsx
new file mode 100644
index 000000000..bc76a119a
--- /dev/null
+++ b/sample_interface/src/app/components/views/SettingView.tsx
@@ -0,0 +1,76 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Button } from "../ui/button";
+import { Switch } from "../ui/switch";
+import { Label } from "../ui/label";
+import { Settings } from "lucide-react";
+
+export function SettingView() {
+ return (
+
+
+
+
+
+
+ + Rainfall Monitor +
+
+
+
+ {rainfallItems.map((item) => (
+
+
+ + {new Date(data.timestamp).toLocaleString()} +
+
+
+
+ Display Settings
+
+
+
+
+
+
+
+ System Settings
+
+
+
+
+
+
+
+ System Actions
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/views/SirenSettingView.tsx b/sample_interface/src/app/components/views/SirenSettingView.tsx
new file mode 100644
index 000000000..98cb6b3d5
--- /dev/null
+++ b/sample_interface/src/app/components/views/SirenSettingView.tsx
@@ -0,0 +1,71 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { Label } from "../ui/label";
+import { Switch } from "../ui/switch";
+import { Bell } from "lucide-react";
+
+export function SirenSettingView() {
+ return (
+
+
+
+ Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Siren Configuration
+
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/components/views/StationInfoView.tsx b/sample_interface/src/app/components/views/StationInfoView.tsx
new file mode 100644
index 000000000..ff2cf096c
--- /dev/null
+++ b/sample_interface/src/app/components/views/StationInfoView.tsx
@@ -0,0 +1,40 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Info } from "lucide-react";
+
+export function StationInfoView() {
+ const stationInfo = [
+ { label: "Station ID", value: "STN-001" },
+ { label: "Location", value: "North Sector A" },
+ { label: "Latitude", value: "14.5995° N" },
+ { label: "Longitude", value: "120.9842° E" },
+ { label: "Altitude", value: "15 m" },
+ { label: "Installation Date", value: "2024-01-15" },
+ { label: "Last Maintenance", value: "2026-02-20" },
+ { label: "Serial Number", value: "DS-2024-001-A" },
+ ];
+
+ return (
+
+
+
+ SIREN Setting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Station Details
+
+
+
+
+
+ );
+}
diff --git a/sample_interface/src/app/hooks/useDisplayMode.ts b/sample_interface/src/app/hooks/useDisplayMode.ts
new file mode 100644
index 000000000..c96971840
--- /dev/null
+++ b/sample_interface/src/app/hooks/useDisplayMode.ts
@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+
+export type DisplayMode = 'kiosk' | 'remote';
+
+export function useDisplayMode(): DisplayMode {
+ return useMemo(() => {
+ if (typeof window === 'undefined') {
+ return 'kiosk';
+ }
+
+ const port = window.location.port;
+
+ if (port === '9090') {
+ return 'remote';
+ }
+
+ return 'kiosk';
+ }, []);
+}
+
+export function getDisplayMode(): DisplayMode {
+ if (typeof window === 'undefined') {
+ return 'kiosk';
+ }
+
+ const port = window.location.port;
+
+ if (port === '9090') {
+ return 'remote';
+ }
+
+ return 'kiosk';
+}
diff --git a/sample_interface/src/app/hooks/useSensorPolling.ts b/sample_interface/src/app/hooks/useSensorPolling.ts
new file mode 100644
index 000000000..fcb6224d3
--- /dev/null
+++ b/sample_interface/src/app/hooks/useSensorPolling.ts
@@ -0,0 +1,106 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { useSensorStore } from '../stores/sensorStore';
+import { fetchSensorData } from '../api/client';
+
+interface UseSensorPollingOptions {
+ interval?: number;
+ enabled?: boolean;
+}
+
+export function useSensorPolling(options: UseSensorPollingOptions = {}) {
+ const {
+ interval = 5000,
+ enabled = true
+ } = options;
+
+ const setSensorData = useSensorStore((state) => state.setSensorData);
+ const setIsPolling = useSensorStore((state) => state.setIsPolling);
+ const setError = useSensorStore((state) => state.setError);
+
+ const abortControllerRef = useRef
+
+
+ Station Information
+
+ {stationInfo.map((info) => (
+
+
+
+ ))}
+ {info.label}
+ {info.value}
+