feat: Phase 1 Foundation & Dashboard implementation

- Core infrastructure: Zustand store, API client with mock fallback
- Mode detection: Port 8080 (kiosk) / 9090 (remote)
- Dashboard components: RainfallCard, ClockDisplay, CommStatus
- Header components: VoltageDisplay, BatteryStatus, LoginIndicator
- Data polling with visibility awareness
- Bundle size: ~100KB gzipped

Also adds README.md and WIKI.md documentation

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 (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <Info className="w-6 h-6 text-blue-400" />
+        <h1 className="text-2xl font-bold text-white">Station Information</h1>
+      </div>
+
+      <Card className="bg-gray-900 border-gray-700">
+        <CardHeader>
+          <CardTitle className="text-white">Station Details</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-4">
+            {stationInfo.map((info) => (
+              <div key={info.label} className="p-3 bg-gray-800 rounded">
+                <div className="text-xs text-gray-400 mb-1">{info.label}</div>
+                <div className="text-sm text-white font-semibold">{info.value}</div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}