[V0_FILE]typescriptreact:file="iot-dashboard.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { LineChart, Line, XAxis, YAxis, ResponsiveContainer, AreaChart, Area } from "recharts" import { Thermometer, Droplets, Lightbulb, Shield, AlertTriangle, Settings, Activity, Zap } from "lucide-react" // Mock data for demonstration const generateTimeSeriesData = () => { const now = new Date() return Array.from({ length: 24 }, (_, i) => ({ time: new Date(now.getTime() - (23 - i) * 60 * 60 * 1000).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", }), temperature: 20 + Math.sin(i * 0.5) * 5 + Math.random() * 2, humidity: 45 + Math.cos(i * 0.3) * 10 + Math.random() * 5, power: 50 + Math.sin(i * 0.2) * 30 + Math.random() * 10, })) } const devices = [ { id: 1, name: "Smart Thermostat", type: "Climate Control", status: "online", temperature: 22.5, humidity: 45, battery: 85, lastSeen: "2 min ago", icon: Thermometer, }, { id: 2, name: "Security Camera", type: "Security", status: "online", battery: 92, lastSeen: "1 min ago", icon: Shield, }, { id: 3, name: "Smart Lights", type: "Lighting", status: "online", brightness: 75, power: 12.5, lastSeen: "30 sec ago", icon: Lightbulb, }, { id: 4, name: "Moisture Sensor", type: "Garden", status: "offline", moisture: 35, battery: 15, lastSeen: "2 hours ago", icon: Droplets, }, ] const alerts = [ { id: 1, type: "warning", title: "Low Battery", message: "Moisture Sensor battery is below 20%", time: "5 min ago", }, { id: 2, type: "info", title: "Device Offline", message: "Moisture Sensor has been offline for 2 hours", time: "2 hours ago", }, ] export default function Component() { const [timeSeriesData, setTimeSeriesData] = useState(generateTimeSeriesData()) const [deviceStates, setDeviceStates] = useState({ thermostat: true, lights: true, camera: true, sensor: false, }) // Simulate real-time updates useEffect(() => { const interval = setInterval(() => { setTimeSeriesData(generateTimeSeriesData()) }, 30000) // Update every 30 seconds return () => clearInterval(interval) }, []) const toggleDevice = (deviceKey: string) => { setDeviceStates((prev) => ({ ...prev, [deviceKey]: !prev[deviceKey], })) } const getStatusColor = (status: string) => { switch (status) { case "online": return "bg-green-500" case "offline": return "bg-red-500" case "warning": return "bg-yellow-500" default: return "bg-gray-500" } } const getStatusBadge = (status: string) => { switch (status) { case "online": return Online case "offline": return Offline case "warning": return Warning default: return Unknown } } return (

{/* Header */}

IoT Dashboard

Monitor and control your connected devices

Live Data

{/* Alerts */} {alerts.length > 0 && (

{alerts.map((alert) => ( {alert.title} {alert.message} {alert.time} ))}

)} {/* Overview Cards */}

Total Devices

3 online, 1 offline

Avg Temperature

22.5°C

+2.1% from yesterday

Power Usage

45.2W

-5.2% from last hour

Alerts

1 warning, 1 info

Devices Analytics Controls

{devices.map((device) => { const IconComponent = device.icon return (

{device.name} {device.type}

Status {getStatusBadge(device.status)}

{device.temperature && (

Temperature {device.temperature}°C

)} {device.humidity && (

Humidity {device.humidity}%

)} {device.brightness && (

Brightness {device.brightness}%

)} {device.moisture && (

Moisture {device.moisture}%

)} {device.power && (

Power {device.power}W

)}

Battery {device.battery}%

div]:bg-red-500" : device.battery < 50 ? "[&>div]:bg-yellow-500" : "[&>div]:bg-green-500"}`} />

Last seen {device.lastSeen}

) })}

Temperature Trends 24-hour temperature monitoring } /> Humidity Levels 24-hour humidity monitoring } /> Power Consumption Real-time power usage across all devices } />

Smart Thermostat Climate control settings

Power toggleDevice("thermostat")} />

Target Temperature

22°C

Smart Lights Lighting control panel

Power toggleDevice("lights")} />

Brightness

75%

Security Camera Security system controls

Recording toggleDevice("camera")} />

) } [V0_FILE]typescriptreact:file="components/zone-crud.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription } from "@/components/ui/alert" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Plus, Edit, Trash2, MoreHorizontal, Leaf, Ruler, Save, X, AlertTriangle, CheckCircle, Users, Radio, } from "lucide-react" interface Zone { id: string name: string description: string crop: string area: number altitude: number location: string coordinates: { lat: number; lng: number }[] status: "active" | "maintenance" | "inactive" color: string createdAt: string updatedAt: string stationCount: number } interface Station { id: string name: string zoneId: string coordinates: { lat: number; lng: number } status: "online" | "offline" | "warning" batteryLevel: number signalStrength: number lastUpdate: string sensorTypes: string[] } interface User { id: string name: string email: string role: "admin" | "gestor" | "viewer" status: "active" | "inactive" createdAt: string lastLogin: string } // Datos simulados const MOCK_ZONES: Zone[] = [ { id: "zone_1", name: "Parcela Norte - Maíz", description: "Zona principal de cultivo de maíz con sistema de riego tecnificado", crop: "Maíz", area: 25000, altitude: 3200, location: "Sector A, Comunidad Ñawpariy, Apurímac", coordinates: [ { lat: -13.634, lng: -72.8814 }, { lat: -13.635, lng: -72.88 }, { lat: -13.636, lng: -72.8795 }, { lat: -13.637, lng: -72.881 }, ], status: "active", color: "#10B981", createdAt: "2024-01-15", updatedAt: "2024-12-17", stationCount: 2, }, { id: "zone_2", name: "Parcela Sur - Quinua", description: "Cultivo orgánico de quinua certificada", crop: "Quinua", area: 18000, altitude: 3350, location: "Sector B, Comunidad Ñawpariy, Apurímac", coordinates: [ { lat: -13.644, lng: -72.8714 }, { lat: -13.643, lng: -72.87 }, { lat: -13.645, lng: -72.8695 }, { lat: -13.646, lng: -72.871 }, ], status: "active", color: "#F59E0B", createdAt: "2024-02-20", updatedAt: "2024-12-16", stationCount: 1, }, ] const MOCK_STATIONS: Station[] = [ { id: "station_1", name: "Estación Norte-01", zoneId: "zone_1", coordinates: { lat: -13.635, lng: -72.8807 }, status: "online", batteryLevel: 85, signalStrength: 92, lastUpdate: "2024-12-17 14:30:25", sensorTypes: ["Temperatura", "Humedad", "Viento", "Radiación", "Suelo"], }, { id: "station_2", name: "Estación Sur-01", zoneId: "zone_2", coordinates: { lat: -13.644, lng: -72.8702 }, status: "warning", batteryLevel: 25, signalStrength: 68, lastUpdate: "2024-12-17 14:25:10", sensorTypes: ["Temperatura", "Humedad", "Suelo"], }, ] const MOCK_USERS: User[] = [ { id: "user_1", name: "Dr. Carlos Mendoza", email: "carlos.mendoza@cesal.org", role: "admin", status: "active", createdAt: "2024-01-01", lastLogin: "2024-12-17 14:30:00", }, { id: "user_2", name: "Ing. María Torres", email: "maria.torres@cesal.org", role: "gestor", status: "active", createdAt: "2024-01-15", lastLogin: "2024-12-17 13:45:00", }, { id: "user_3", name: "Juan Pérez", email: "juan.perez@cesal.org", role: "viewer", status: "active", createdAt: "2024-02-01", lastLogin: "2024-12-16 16:20:00", }, ] export function ZoneCRUD() { // Estados para zonas const [zones, setZones] = useState(MOCK_ZONES) const [selectedZone, setSelectedZone] = useState(null) const [isZoneDialogOpen, setIsZoneDialogOpen] = useState(false) const [isEditingZone, setIsEditingZone] = useState(false) const [zoneForm, setZoneForm] = useState>({}) // Estados para estaciones const [stations, setStations] = useState(MOCK_STATIONS) const [selectedStation, setSelectedStation] = useState(null) const [isStationDialogOpen, setIsStationDialogOpen] = useState(false) const [isEditingStation, setIsEditingStation] = useState(false) const [stationForm, setStationForm] = useState>({}) // Estados para usuarios const [users, setUsers] = useState(MOCK_USERS) const [selectedUser, setSelectedUser] = useState(null) const [isUserDialogOpen, setIsUserDialogOpen] = useState(false) const [isEditingUser, setIsEditingUser] = useState(false) const [userForm, setUserForm] = useState>({}) const [activeTab, setActiveTab] = useState("zones") const [alert, setAlert] = useState<{ type: "success" | "error"; message: string } | null>(null) // Funciones para mostrar alertas const showAlert = (type: "success" | "error", message: string) => { setAlert({ type, message }) setTimeout(() => setAlert(null), 3000) } // CRUD para Zonas const handleCreateZone = () => { setZoneForm({ name: "", description: "", crop: "", area: 0, altitude: 3200, location: "", coordinates: [], status: "active", color: "#10B981", }) setIsEditingZone(false) setIsZoneDialogOpen(true) } const handleEditZone = (zone: Zone) => { setZoneForm(zone) setSelectedZone(zone) setIsEditingZone(true) setIsZoneDialogOpen(true) } const calculateArea = (coordinates: { lat: number; lng: number }[]) => { if (coordinates.length < 3) return 0 // Cálculo simplificado del área usando coordenadas GPS let area = 0 for (let i = 0; i < coordinates.length; i++) { const j = (i + 1) % coordinates.length area += (coordinates[j].lng - coordinates[i].lng) * (coordinates[j].lat + coordinates[i].lat) } return (Math.abs(area) * 111000 * 111000) / 2 // Conversión aproximada a m² } const handleSaveZone = () => { if (!zoneForm.name || !zoneForm.crop || !zoneForm.location) { showAlert("error", "Por favor completa todos los campos requeridos") return } if (!zoneForm.coordinates || zoneForm.coordinates.length < 3) { showAlert("error", "Necesitas al menos 3 coordenadas para crear una zona") return } const calculatedArea = calculateArea(zoneForm.coordinates) if (isEditingZone && selectedZone) { // Actualizar zona existente const updatedZone = { ...selectedZone, ...zoneForm, area: calculatedArea, updatedAt: new Date().toISOString().split("T")[0], } as Zone setZones(zones.map((z) => (z.id === selectedZone.id ? updatedZone : z))) showAlert("success", "Zona actualizada correctamente") } else { // Crear nueva zona const newZone: Zone = { id: `zone_${Date.now()}`, ...zoneForm, area: calculatedArea, createdAt: new Date().toISOString().split("T")[0], updatedAt: new Date().toISOString().split("T")[0], stationCount: 0, } as Zone setZones([...zones, newZone]) showAlert("success", "Zona creada correctamente") } setIsZoneDialogOpen(false) setZoneForm({}) setSelectedZone(null) } const handleDeleteZone = (zoneId: string) => { if (confirm("¿Estás seguro de que quieres eliminar esta zona?")) { setZones(zones.filter((z) => z.id !== zoneId)) // También eliminar estaciones asociadas setStations(stations.filter((s) => s.zoneId !== zoneId)) showAlert("success", "Zona eliminada correctamente") } } // CRUD para Estaciones const handleCreateStation = () => { setStationForm({ name: "", zoneId: "", coordinates: { lat: -13.635, lng: -72.881 }, status: "online", batteryLevel: 100, signalStrength: 100, sensorTypes: [], }) setIsEditingStation(false) setIsStationDialogOpen(true) } const handleEditStation = (station: Station) => { setStationForm(station) setSelectedStation(station) setIsEditingStation(true) setIsStationDialogOpen(true) } const handleSaveStation = () => { if (!stationForm.name || !stationForm.zoneId) { showAlert("error", "Por favor completa todos los campos requeridos") return } if (isEditingStation && selectedStation) { // Actualizar estación existente const updatedStation = { ...selectedStation, ...stationForm, } as Station setStations(stations.map((s) => (s.id === selectedStation.id ? updatedStation : s))) showAlert("success", "Estación actualizada correctamente") } else { // Crear nueva estación const newStation: Station = { id: `station_${Date.now()}`, ...stationForm, lastUpdate: new Date().toISOString().replace("T", " ").substring(0, 19), } as Station setStations([...stations, newStation]) // Actualizar contador de estaciones en la zona setZones(zones.map((z) => (z.id === newStation.zoneId ? { ...z, stationCount: z.stationCount + 1 } : z))) showAlert("success", "Estación creada correctamente") } setIsStationDialogOpen(false) setStationForm({}) setSelectedStation(null) } const handleDeleteStation = (stationId: string) => { if (confirm("¿Estás seguro de que quieres eliminar esta estación?")) { const station = stations.find((s) => s.id === stationId) setStations(stations.filter((s) => s.id !== stationId)) // Actualizar contador de estaciones en la zona if (station) { setZones( zones.map((z) => (z.id === station.zoneId ? { ...z, stationCount: Math.max(0, z.stationCount - 1) } : z)), ) } showAlert("success", "Estación eliminada correctamente") } } // CRUD para Usuarios const handleCreateUser = () => { setUserForm({ name: "", email: "", role: "viewer", status: "active", }) setIsEditingUser(false) setIsUserDialogOpen(true) } const handleEditUser = (user: User) => { setUserForm(user) setSelectedUser(user) setIsEditingUser(true) setIsUserDialogOpen(true) } const handleSaveUser = () => { if (!userForm.name || !userForm.email) { showAlert("error", "Por favor completa todos los campos requeridos") return } if (isEditingUser && selectedUser) { // Actualizar usuario existente const updatedUser = { ...selectedUser, ...userForm, } as User setUsers(users.map((u) => (u.id === selectedUser.id ? updatedUser : u))) showAlert("success", "Usuario actualizado correctamente") } else { // Crear nuevo usuario const newUser: User = { id: `user_${Date.now()}`, ...userForm, createdAt: new Date().toISOString().split("T")[0], lastLogin: "Nunca", } as User setUsers([...users, newUser]) showAlert("success", "Usuario creado correctamente") } setIsUserDialogOpen(false) setUserForm({}) setSelectedUser(null) } const handleDeleteUser = (userId: string) => { if (confirm("¿Estás seguro de que quieres eliminar este usuario?")) { setUsers(users.filter((u) => u.id !== userId)) showAlert("success", "Usuario eliminado correctamente") } } const getStatusBadge = (status: string, type: "zone" | "station" | "user") => { const colors = { zone: { active: "bg-green-100 text-green-800", maintenance: "bg-yellow-100 text-yellow-800", inactive: "bg-red-100 text-red-800", }, station: { online: "bg-green-100 text-green-800", warning: "bg-yellow-100 text-yellow-800", offline: "bg-red-100 text-red-800", }, user: { active: "bg-green-100 text-green-800", inactive: "bg-red-100 text-red-800", }, } const labels = { zone: { active: "Activa", maintenance: "Mantenimiento", inactive: "Inactiva", }, station: { online: "En Línea", warning: "Alerta", offline: "Desconectada", }, user: { active: "Activo", inactive: "Inactivo", }, } return ( {labels[type][status as keyof (typeof labels)[typeof type]]} ) } const getRoleBadge = (role: string) => { const colors = { admin: "bg-red-100 text-red-800", gestor: "bg-blue-100 text-blue-800", viewer: "bg-gray-100 text-gray-800", } const labels = { admin: "Administrador", gestor: "Gestor", viewer: "Visualizador", } return ( {labels[role as keyof typeof labels]} ) } return (

{/* Header */}

Gestión del Sistema

Administra zonas, estaciones y usuarios

{/* Alertas */} {alert && ( {alert.type === "success" ? : } {alert.message} )} {/* Tabs */} Zonas ({zones.length}) Estaciones ({stations.length}) Usuarios ({users.length}) {/* Tab de Zonas */}

Gestión de Zonas

Zona Cultivo Área Estaciones Estado Actualizada Acciones {zones.map((zone) => (

{zone.name}

{zone.location}

{zone.crop}

{(zone.area / 10000).toFixed(1)} ha

{zone.stationCount}

{getStatusBadge(zone.status, "zone")} {zone.updatedAt} Acciones handleEditZone(zone)}> Editar handleDeleteZone(zone.id)} className="text-red-600"> Eliminar ))}

{/* Tab de Estaciones */}

Gestión de Estaciones

Estación Zona Estado Batería Señal Última Actualización Acciones {stations.map((station) => { const zone = zones.find((z) => z.id === station.zoneId) return (

{station.name}

{station.coordinates.lat.toFixed(4)}°, {station.coordinates.lng.toFixed(4)}°

{zone?.name || "Sin zona"}

{getStatusBadge(station.status, "station")}

50 ? "bg-green-500" : station.batteryLevel > 20 ? "bg-yellow-500" : "bg-red-500" }`} >

{station.batteryLevel}%

70 ? "bg-green-500" : station.signalStrength > 40 ? "bg-yellow-500" : "bg-red-500" }`} >

{station.signalStrength}%

{station.lastUpdate} Acciones handleEditStation(station)}> Editar handleDeleteStation(station.id)} className="text-red-600" > Eliminar ) })}

{/* Tab de Usuarios */}

Gestión de Usuarios

Usuario Email Rol Estado Último Acceso Creado Acciones {users.map((user) => (

{user.name}

{user.email} {getRoleBadge(user.role)} {getStatusBadge(user.status, "user")} {user.lastLogin} {user.createdAt} Acciones handleEditUser(user)}> Editar handleDeleteUser(user.id)} className="text-red-600"> Eliminar ))}

{/* Dialog para Zonas */}