114:"ExplicitChatIdProvider" 115:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$7c","$8d","$7f","$7e","$8e","$87","$82","$8f","$7d","$85","$90","$80","$91","$92","$84","$89","$93","$8a","$88","$94","$83","$95","$86","$96","$97"],"$114"] 116:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$7c","$8d","$7f","$7e","$8e","$87","$82","$8f","$7d","$85","$90","$80","$91","$92","$84","$89","$93","$8a","$88","$94","$83","$95","$86","$96","$97"],"SWRDataProvider"] 118:[] 119:[["b_8aidHp8mePM",null],["b_Byxatk58Rei",null],["b_FSP5ERxo0Zz",null]] 11a:[["b_8aidHp8mePM",{"templateVersionId":null,"templateCanonId":null}],["b_Byxatk58Rei",{"templateVersionId":null,"templateCanonId":null}],["b_FSP5ERxo0Zz",{"templateVersionId":null,"templateCanonId":null}]] 11b:[["b_YjzqRuldaK8","$D2025-04-23T23:06:57.692Z"],["b_MYIUXUsJS2B","$D2025-04-23T23:17:57.827Z"],["b_d9xEnHJKPQJ","$D2025-04-23T23:18:01.524Z"],["b_7DKWr8DnN49","$D2025-04-23T23:18:26.226Z"],["b_4d9dwSuVXp3","$D2025-04-23T23:18:48.179Z"],["b_OsAZN76Nxhq","$D2025-04-23T23:20:04.247Z"],["b_nDhX5jUbEoI","$D2025-04-23T23:20:50.806Z"],["b_JA3EkGX5rQN","$D2025-04-23T23:21:38.857Z"],["b_FFKLvVMdpIl","$D2025-04-23T23:22:26.089Z"],["b_DNnfoCKrDMV","$D2025-04-23T23:25:12.510Z"],["b_DzyRj0H9ZIF","$D2025-04-23T23:27:01.336Z"],["b_OiO8YVpLTyp","$D2025-04-23T23:30:01.807Z"],["b_h1xKKVlEbb0","$D2025-04-23T23:33:36.531Z"],["b_S5LLMzhWqP5","$D2025-04-23T23:41:03.908Z"],["b_PeAVJwAwU15","$D2025-04-23T23:45:05.783Z"],["b_lJvPQHUxNXA","$D2025-04-23T23:51:55.364Z"],["b_w9pRmRcFRIl","$D2025-04-23T23:56:33.678Z"],["b_ZrDn0pXpxZo","$D2025-04-24T00:05:40.455Z"],["b_443bH6xtU0Y","$D2025-04-24T00:16:06.634Z"],["b_cVaZGKjEBxq","$D2025-04-24T00:22:12.015Z"],["b_4AO63nM7EsW","$D2025-04-24T00:29:46.738Z"],["b_zN59prMvRMR","$D2025-04-24T01:03:14.402Z"],["b_aoMuaImRMdV","$D2025-04-24T01:07:45.303Z"],["b_sk0YqEm2yOf","$D2025-04-24T01:10:53.866Z"],["b_fZWKmjlmRlV","$D2025-04-24T01:12:30.135Z"],["b_8c7AtZwuWqx","$D2025-04-24T01:31:35.046Z"],["b_8aidHp8mePM","$D2025-08-19T12:42:28.051Z"],["b_Byxatk58Rei","$D2025-08-19T12:44:44.979Z"],["b_FSP5ERxo0Zz","$D2025-08-19T12:55:39.575Z"]] 11c:[["b_8aidHp8mePM",false],["b_Byxatk58Rei",false],["b_FSP5ERxo0Zz",false]] 11d:[["b_8aidHp8mePM","$undefined"],["b_Byxatk58Rei","$undefined"],["b_FSP5ERxo0Zz","$undefined"]] 11e:[["b_8aidHp8mePM",null],["b_Byxatk58Rei",null],["b_FSP5ERxo0Zz",null]] 11f:[["b_8aidHp8mePM",true],["b_Byxatk58Rei",true],["b_FSP5ERxo0Zz",true]] 120:[["b_8aidHp8mePM",true],["b_Byxatk58Rei",true],["b_FSP5ERxo0Zz",true]] 121:[] 122:T92bba,[V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isEdit="true" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]plaintext:file="public/mystical-forest-spirit.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mystical-forest-spirit-OwmJQxP0kLJ1XTWLWHt15UYnBzBzX4.png" isMerged="true" [V0_FILE]plaintext:file="public/detailed-waterways-map.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/detailed-waterways-map-xgbG97MsXqSA9I8WxYpn9iNsVnmF66.png" isMerged="true" [V0_FILE]typescriptreact:file="lib/changelog.ts" isEdit="true" isMerged="true" /** * AquaLink Database Changelog * * This file tracks all database schema changes and migrations. * * Format: * - Date: YYYY-MM-DD * - Author: Name * - Description: Brief description of changes * - SQL: The SQL commands executed */ export const changelog = [ { date: new Date().toISOString().split("T")[0], author: "AquaLink Team", description: "Initial database setup - Core tables creation", sql: "Created users, organizations, devices, sensor_readings, and alerts tables", }, { date: new Date().toISOString().split("T")[0], author: "AquaLink Team", description: "Alert system and authentication tables", sql: "Created alerts, alert_configurations, sessions, and password_resets tables", }, { date: new Date().toISOString().split("T")[0], author: "AquaLink Team", description: "Database seeding with initial data", sql: "Inserted sample organizations, users, devices, readings, and alerts", }, ] [V0_FILE]typescriptreact:file="hooks/use-readings.ts" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { api } from "@/lib/api" export function useReadings(deviceId: string, readingType?: string, limit?: number) { const [readings, setReadings] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { const fetchReadings = async () => { try { setLoading(true) const params: Record = { limit: String(limit || 100) } if (readingType) params.type = readingType const data = await api.readings.getByDevice(deviceId, params) setReadings(data) setError(null) } catch (err) { console.error("Error fetching readings:", err) setError(err instanceof Error ? err : new Error("Failed to fetch readings")) } finally { setLoading(false) } } if (deviceId) { fetchReadings() } }, [deviceId, readingType, limit]) return { readings, loading, error } } [V0_FILE]typescriptreact:file="components/dashboard/dashboard-stats.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import type { UserRole } from "@/lib/types" import { AlertTriangle, Droplet, Thermometer, Zap } from "lucide-react" import { useDevices } from "@/hooks/use-devices" import { useAlerts } from "@/hooks/use-alerts" import { Skeleton } from "@/components/ui/skeleton" interface DashboardStatsProps { userRole: UserRole } export function DashboardStats({ userRole }: DashboardStatsProps) { const { devices, loading: devicesLoading } = useDevices( userRole !== "admin" ? { ownerId: "1" } : undefined, // In a real app, this would be the actual user ID ) const { alerts, loading: alertsLoading } = useAlerts({ status: "warning,critical" }) // Calculate stats based on real data const activeAlerts = alerts.filter((alert) => alert.status !== "resolved").length const deviceCount = devices.length // Different stats based on user role const getStats = () => { if (userRole === "admin") { return [ { title: "Total Devices", value: devicesLoading ? "-" : deviceCount.toString(), icon: , }, { title: "Active Alerts", value: alertsLoading ? "-" : activeAlerts.toString(), icon: , }, { title: "Organizations", value: "3", // This would come from an API call in a real app icon: , }, { title: "Total Users", value: "3", // This would come from an API call in a real app icon: , }, ] } else if (userRole === "institution") { return [ { title: "Your Devices", value: devicesLoading ? "-" : deviceCount.toString(), icon: , }, { title: "Active Alerts", value: alertsLoading ? "-" : activeAlerts.toString(), icon: , }, { title: "Team Members", value: "1", // This would come from an API call in a real app icon: , }, { title: "Avg. Water Quality", value: "Good", // This would be calculated in a real app icon: , }, ] } else { // Farmer role return [ { title: "Your Devices", value: devicesLoading ? "-" : deviceCount.toString(), icon: , }, { title: "Active Alerts", value: alertsLoading ? "-" : activeAlerts.toString(), icon: , }, { title: "Water pH", value: "7.2", // This would come from an API call in a real app icon: , }, { title: "Temperature", value: "24°C", // This would come from an API call in a real app icon: , }, ] } } const stats = getStats() return (

{stats.map((stat, index) => ( {stat.title} {stat.icon} {devicesLoading || alertsLoading ? ( ) : (

{stat.value}

)} ))}

) } [V0_FILE]typescriptreact:file="components/dashboard/recent-alerts.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { cn } from "@/lib/utils" import { AlertTriangle, CheckCircle, Clock, ThermometerIcon, Droplets, Waves } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { useAlerts } from "@/hooks/use-alerts" import { Skeleton } from "@/components/ui/skeleton" import { formatDistanceToNow } from "date-fns" interface RecentAlertsProps extends React.HTMLAttributes { fullPage?: boolean } export function RecentAlerts({ className, fullPage = false, ...props }: RecentAlertsProps) { const { alerts, loading, error, resolveAlert } = useAlerts({ limit: fullPage ? "50" : "3" }) // Function to get the appropriate icon for a parameter const getParameterIcon = (parameter: string) => { switch (parameter.toLowerCase()) { case "ph": return case "temperature": return case "dissolved_oxygen": return default: return } } // Function to format the timestamp const formatTimestamp = (timestamp: string) => { try { return formatDistanceToNow(new Date(timestamp), { addSuffix: true }) } catch (e) { return timestamp } } return (

Recent Alerts Monitor and respond to water quality issues

{!fullPage && ( )} {loading ? (

{[1, 2, 3].map((i) => (

))}

) : error ? (

Error loading alerts. Please try again.

) : alerts.length === 0 ? (

No alerts found.

) : (

{alerts.map((alert) => (

{alert.status === "critical" ? ( ) : alert.status === "warning" ? ( ) : ( )}

{alert.device_name || alert.device_id}

{getParameterIcon(alert.parameter)} {alert.parameter}: {alert.actual_value} ({alert.threshold_value})

{formatTimestamp(alert.created_at)}

{alert.status.charAt(0).toUpperCase() + alert.status.slice(1)}

))}

)} ) } [V0_FILE]typescriptreact:file="components/dashboard/device-list.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import type { UserRole } from "@/lib/types" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Battery, Signal, MoreHorizontal } from "lucide-react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { useDevices } from "@/hooks/use-devices" import { Skeleton } from "@/components/ui/skeleton" import { formatDistanceToNow } from "date-fns" interface DeviceListProps { userRole: UserRole } export function DeviceList({ userRole }: DeviceListProps) { // In a real app, we would filter by the actual user's organization or ownership const { devices, loading, error } = useDevices(userRole !== "admin" ? { ownerId: "1" } : undefined) // Function to format the last update timestamp const formatLastUpdate = (timestamp: string) => { if (!timestamp) return "Never" try { return formatDistanceToNow(new Date(timestamp), { addSuffix: true }) } catch (e) { return timestamp } } return (

Your Devices Monitor and manage your water quality sensors

{userRole === "admin" && } {loading ? (

) : error ? (

Error loading devices. Please try again.

) : devices.length === 0 ? (

No devices found.

) : ( Device Type Location Status Battery Signal Last Update Actions {devices.map((device) => ( {device.name} {device.type} {device.location} {device.status.charAt(0).toUpperCase() + device.status.slice(1)}

{device.battery_level}%

{device.signal_strength}

{formatLastUpdate(device.last_reading_at)} Actions View Details Edit Device View History Configure Alerts {userRole === "admin" && ( <> Delete Device )} ))}

)} ) } [V0_FILE]typescriptreact:file="components/dashboard/water-quality-charts.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { Line, LineChart, ResponsiveContainer, XAxis, YAxis, CartesianGrid } from "recharts" import { useReadings } from "@/hooks/use-readings" import { Skeleton } from "@/components/ui/skeleton" import { format } from "date-fns" export function WaterQualityCharts() { // In a real app, we would get the selected device from context or props const [selectedDeviceId, setSelectedDeviceId] = useState("1") // Default to first device // Fetch readings for each parameter const { readings: phReadings, loading: phLoading } = useReadings(selectedDeviceId, "pH", 24) const { readings: tempReadings, loading: tempLoading } = useReadings(selectedDeviceId, "temperature", 24) const { readings: oxygenReadings, loading: oxygenLoading } = useReadings(selectedDeviceId, "dissolved_oxygen", 24) // Format readings for charts const formatReadingsForChart = (readings: any[]) => { return readings .map((reading) => ({ time: format(new Date(reading.timestamp), "HH:mm"), value: Number.parseFloat(reading.reading_value), })) .reverse() // Most recent last } const phData = phLoading ? [] : formatReadingsForChart(phReadings) const temperatureData = tempLoading ? [] : formatReadingsForChart(tempReadings) const oxygenData = oxygenLoading ? [] : formatReadingsForChart(oxygenReadings) // Get current values const currentPh = phData.length > 0 ? phData[phData.length - 1].value : null const currentTemp = temperatureData.length > 0 ? temperatureData[temperatureData.length - 1].value : null const currentOxygen = oxygenData.length > 0 ? oxygenData[oxygenData.length - 1].value : null return ( Water Quality Trends Monitor key parameters over the last 24 hours pH Level Temperature Dissolved Oxygen {phLoading ? ( ) : phData.length === 0 ? (

No pH data available

) : ( <> } />

Safe Range: 6.5 - 8.0

Current: {currentPh?.toFixed(1) || "N/A"}

)} {tempLoading ? ( ) : temperatureData.length === 0 ? (

No temperature data available

) : ( <> } />

Safe Range: 20°C - 28°C

Current: {currentTemp?.toFixed(1) || "N/A"}°C

)} {oxygenLoading ? ( ) : oxygenData.length === 0 ? (

No dissolved oxygen data available

) : ( <> } />

Safe Range: > 5 mg/L

Current: {currentOxygen?.toFixed(1) || "N/A"}{" "} mg/L

)} ) } [V0_FILE]typescriptreact:file="components/dashboard/device-map.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { cn } from "@/lib/utils" import { useEffect, useRef, useState } from "react" import { useDevices } from "@/hooks/use-devices" import { Skeleton } from "@/components/ui/skeleton" interface DeviceMapProps extends React.HTMLAttributes { fullPage?: boolean } export function DeviceMap({ className, fullPage = false, ...props }: DeviceMapProps) { const mapRef = useRef(null) const [mapLoaded, setMapLoaded] = useState(false) const { devices, loading } = useDevices() // This is a placeholder for the actual map implementation // In a real app, you would use Mapbox or Leaflet here useEffect(() => { if (mapRef.current && !mapLoaded && !loading) { // Simulate map loading const timer = setTimeout(() => { setMapLoaded(true) }, 500) return () => clearTimeout(timer) } }, [mapLoaded, loading]) return ( Device Map View all your water quality monitoring devices {loading ? ( ) : (

{!mapLoaded ? (

Loading map...

) : (

{/* Device markers - in a real app, these would be positioned based on lat/long */} {devices.map((device) => { // Calculate position based on latitude and longitude // This is a simplified example - in a real app, you would use proper map projection const left = `${((Number.parseFloat(device.longitude) - 36.7) / 0.3) * 100}%` const top = `${((Number.parseFloat(device.latitude) + 1.4) / 0.3) * 100}%` return (

) })}

Normal

Warning

Alert

)}

)} ) } [V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" import { useRouter } from "next/navigation" import { api } from "@/lib/api" import type { UserRole } from "@/lib/types" interface User { id: number email: string firstName: string lastName: string role: UserRole organizationId: number | null } interface Session { token: string expiresAt: string } interface AuthContextType { user: User | null session: Session | null isLoading: boolean login: (email: string, password: string) => Promise register: (userData: RegisterData) => Promise logout: () => Promise } interface RegisterData { email: string password: string firstName: string lastName: string role: UserRole organizationId?: number phoneNumber?: string language?: string } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const [session, setSession] = useState(null) const [isLoading, setIsLoading] = useState(true) const router = useRouter() // Load user from localStorage on initial render useEffect(() => { const loadUserFromStorage = () => { try { const storedUser = localStorage.getItem("user") const storedSession = localStorage.getItem("session") if (storedUser && storedSession) { setUser(JSON.parse(storedUser)) setSession(JSON.parse(storedSession)) } } catch (error) { console.error("Error loading user from storage:", error) } finally { setIsLoading(false) } } loadUserFromStorage() }, []) // Login function const login = async (email: string, password: string): Promise => { try { setIsLoading(true) const response = await api.auth.login(email, password) // Save user and session to state and localStorage setUser(response.user) setSession(response.session) localStorage.setItem("user", JSON.stringify(response.user)) localStorage.setItem("session", JSON.stringify(response.session)) return true } catch (error) { console.error("Login error:", error) return false } finally { setIsLoading(false) } } // Register function const register = async (userData: RegisterData): Promise => { try { setIsLoading(true) await api.auth.register(userData) return true } catch (error) { console.error("Registration error:", error) return false } finally { setIsLoading(false) } } // Logout function const logout = async (): Promise => { try { setIsLoading(true) if (session) { await api.auth.logout() } } catch (error) { console.error("Logout error:", error) } finally { // Clear user data regardless of API success setUser(null) setSession(null) localStorage.removeItem("user") localStorage.removeItem("session") setIsLoading(false) router.push("/login") } } return ( {children} ) } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="components/auth/protected-route.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/contexts/auth-context" import { Loader2 } from "lucide-react" interface ProtectedRouteProps { children: React.ReactNode allowedRoles?: string[] } export function ProtectedRoute({ children, allowedRoles }: ProtectedRouteProps) { const { user, isLoading } = useAuth() const router = useRouter() useEffect(() => { if (!isLoading && !user) { router.push("/login") } else if (!isLoading && user && allowedRoles && !allowedRoles.includes(user.role)) { // Redirect to dashboard if user doesn't have the required role router.push("/") } }, [user, isLoading, router, allowedRoles]) if (isLoading) { return (

) } if (!user) { return null } if (allowedRoles && !allowedRoles.includes(user.role)) { return null } return <>{children} } [V0_FILE]typescriptreact:file="app/forgot-password/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Loader2 } from "lucide-react" export default function ForgotPasswordPage() { const [email, setEmail] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const [error, setError] = useState("") const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setError("") setIsSubmitting(true) try { // In a real app, this would call an API endpoint to send a password reset email // For now, we'll just simulate a successful submission await new Promise((resolve) => setTimeout(resolve, 1000)) setIsSubmitted(true) } catch (err) { setError("An error occurred. Please try again.") console.error("Forgot password error:", err) } finally { setIsSubmitting(false) } } return (

AquaLink

Reset your password Enter your email address and we'll send you a link to reset your password {isSubmitted ? ( If an account exists with the email {email}, you will receive a password reset link shortly.

Return to login

) : ( )}

) } [V0_FILE]typescriptreact:file="app/devices/page.tsx" isEdit="true" isMerged="true" import { DevicesPage } from "@/components/devices/devices-page" import { ProtectedRoute } from "@/components/auth/protected-route" export default function Devices() { return ( ) } [V0_FILE]typescriptreact:file="components/devices/devices-page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { DashboardHeader } from "@/components/dashboard/dashboard-header" import { DeviceList } from "@/components/devices/device-list" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" import { AddDeviceDialog } from "@/components/devices/add-device-dialog" import { useAuth } from "@/contexts/auth-context" import type { UserRole } from "@/lib/types" export function DevicesPage() { const { user } = useAuth() // Use the user's role from auth context, but allow switching for demo purposes const [userRole, setUserRole] = useState(user?.role || "farmer") const [isAddDeviceOpen, setIsAddDeviceOpen] = useState(false) const [refreshTrigger, setRefreshTrigger] = useState(0) const refreshDevices = () => { setRefreshTrigger((prev) => prev + 1) } return (

Devices

{(userRole === "admin" || userRole === "institution") && ( )}

) } [V0_FILE]typescriptreact:file="components/devices/device-list.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import type { UserRole } from "@/lib/types" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Battery, Signal, MoreHorizontal, Search, Filter } from "lucide-react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { useDevices } from "@/hooks/use-devices" import { Skeleton } from "@/components/ui/skeleton" import { formatDistanceToNow } from "date-fns" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select" import { EditDeviceDialog } from "./edit-device-dialog" import { DeviceDetailsDialog } from "./device-details-dialog" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog" import { toast } from "@/components/ui/use-toast" interface DeviceListProps { userRole: UserRole refreshTrigger?: number } export function DeviceList({ userRole, refreshTrigger = 0 }: DeviceListProps) { const [searchTerm, setSearchTerm] = useState("") const [statusFilter, setStatusFilter] = useState(null) const [typeFilter, setTypeFilter] = useState(null) const [selectedDevice, setSelectedDevice] = useState(null) const [isEditOpen, setIsEditOpen] = useState(false) const [isDetailsOpen, setIsDetailsOpen] = useState(false) const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false) // In a real app, we would filter by the actual user's organization or ownership const { devices, loading, error, refetch } = useDevices( userRole !== "admin" ? { ownerId: "1" } : undefined, refreshTrigger, ) // Function to format the last update timestamp const formatLastUpdate = (timestamp: string) => { if (!timestamp) return "Never" try { return formatDistanceToNow(new Date(timestamp), { addSuffix: true }) } catch (e) { return timestamp } } // Filter devices based on search term and filters const filteredDevices = devices.filter((device) => { const matchesSearch = searchTerm === "" || device.name.toLowerCase().includes(searchTerm.toLowerCase()) || device.device_id.toLowerCase().includes(searchTerm.toLowerCase()) || device.location?.toLowerCase().includes(searchTerm.toLowerCase()) const matchesStatus = statusFilter === null || device.status === statusFilter const matchesType = typeFilter === null || device.type === typeFilter return matchesSearch && matchesStatus && matchesType }) // Get unique device types for filter const deviceTypes = Array.from(new Set(devices.map((device) => device.type))) // Handle device deletion const handleDeleteDevice = async () => { if (!selectedDevice) return try { // In a real app, this would call an API endpoint to delete the device // await api.devices.delete(selectedDevice) // For now, we'll just simulate a successful deletion await new Promise((resolve) => setTimeout(resolve, 500)) toast({ title: "Device deleted", description: "The device has been successfully deleted.", }) refetch() } catch (error) { console.error("Error deleting device:", error) toast({ title: "Error", description: "Failed to delete the device. Please try again.", variant: "destructive", }) } finally { setIsDeleteDialogOpen(false) } } return ( <>

Your Devices Monitor and manage your water quality sensors

setSearchTerm(e.target.value)} />

{loading ? (

) : error ? (

Error loading devices. Please try again.

) : filteredDevices.length === 0 ? (

No devices found.

) : (

Device Type Location Status Battery Signal Last Update Actions {filteredDevices.map((device) => ( {device.name} {device.type} {device.location} {device.status.charAt(0).toUpperCase() + device.status.slice(1)}

{device.battery_level}%

{device.signal_strength}

{formatLastUpdate(device.last_reading_at)} Actions { setSelectedDevice(device.id) setIsDetailsOpen(true) }} > View Details { setSelectedDevice(device.id) setIsEditOpen(true) }} > Edit Device View History Configure Alerts {(userRole === "admin" || userRole === "institution") && ( <> { setSelectedDevice(device.id) setIsDeleteDialogOpen(true) }} > Delete Device )} ))}

)} {/* Edit Device Dialog */} {selectedDevice && ( )} {/* Device Details Dialog */} {selectedDevice && ( )} {/* Delete Confirmation Dialog */} Are you sure you want to delete this device? This action cannot be undone. This will permanently delete the device and all associated data. Cancel Delete ) } [V0_FILE]typescriptreact:file="components/devices/add-device-dialog.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { toast } from "@/components/ui/use-toast" import { Loader2 } from "lucide-react" import type { UserRole } from "@/lib/types" interface AddDeviceDialogProps { open: boolean onOpenChange: (open: boolean) => void onDeviceAdded: () => void userRole: UserRole userId: number organizationId: number } export function AddDeviceDialog({ open, onOpenChange, onDeviceAdded, userRole, userId, organizationId, }: AddDeviceDialogProps) { const [formData, setFormData] = useState({ device_id: "", name: "", type: "Aquaculture", location: "", latitude: "", longitude: "", firmware_version: "v1.2.0", }) const [isSubmitting, setIsSubmitting] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { // Validate required fields if (!formData.device_id || !formData.name || !formData.type) { toast({ title: "Validation Error", description: "Please fill in all required fields.", variant: "destructive", }) return } // In a real app, this would call the API to create the device // await api.devices.create({ // ...formData, // organization_id: organizationId, // owner_id: userId, // }) // For now, we'll just simulate a successful creation await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Device Added", description: "The device has been successfully added.", }) // Reset form and close dialog setFormData({ device_id: "", name: "", type: "Aquaculture", location: "", latitude: "", longitude: "", firmware_version: "v1.2.0", }) onOpenChange(false) onDeviceAdded() } catch (error) { console.error("Error adding device:", error) toast({ title: "Error", description: "Failed to add the device. Please try again.", variant: "destructive", }) } finally { setIsSubmitting(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/devices/edit-device-dialog.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { toast } from "@/components/ui/use-toast" import { Loader2 } from "lucide-react" import { useDevices } from "@/hooks/use-devices" interface EditDeviceDialogProps { open: boolean onOpenChange: (open: boolean) => void deviceId: number onDeviceUpdated: () => void } export function EditDeviceDialog({ open, onOpenChange, deviceId, onDeviceUpdated }: EditDeviceDialogProps) { const [formData, setFormData] = useState({ device_id: "", name: "", type: "", location: "", latitude: "", longitude: "", firmware_version: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [isLoading, setIsLoading] = useState(true) // Fetch device details const { devices } = useDevices() useEffect(() => { if (open && deviceId && devices.length > 0) { const device = devices.find((d) => d.id === deviceId) if (device) { setFormData({ device_id: device.device_id, name: device.name, type: device.type, location: device.location || "", latitude: device.latitude || "", longitude: device.longitude || "", firmware_version: device.firmware_version || "", }) setIsLoading(false) } } }, [open, deviceId, devices]) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { // Validate required fields if (!formData.device_id || !formData.name || !formData.type) { toast({ title: "Validation Error", description: "Please fill in all required fields.", variant: "destructive", }) return } // In a real app, this would call the API to update the device // await api.devices.update(deviceId, formData) // For now, we'll just simulate a successful update await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Device Updated", description: "The device has been successfully updated.", }) onOpenChange(false) onDeviceUpdated() } catch (error) { console.error("Error updating device:", error) toast({ title: "Error", description: "Failed to update the device. Please try again.", variant: "destructive", }) } finally { setIsSubmitting(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/devices/device-details-dialog.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Loader2, MapPin, Cpu, Battery, Signal, Calendar, Clock } from "lucide-react" import { useDevices } from "@/hooks/use-devices" import { format } from "date-fns" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { WaterQualityCharts } from "@/components/dashboard/water-quality-charts" import { RecentAlerts } from "@/components/dashboard/recent-alerts" interface DeviceDetailsDialogProps { open: boolean onOpenChange: (open: boolean) => void deviceId: number } export function DeviceDetailsDialog({ open, onOpenChange, deviceId }: DeviceDetailsDialogProps) { const [isLoading, setIsLoading] = useState(true) const [device, setDevice] = useState(null) // Fetch device details const { devices } = useDevices() useEffect(() => { if (open && deviceId && devices.length > 0) { const foundDevice = devices.find((d) => d.id === deviceId) if (foundDevice) { setDevice(foundDevice) setIsLoading(false) } } }, [open, deviceId, devices]) // Format date const formatDate = (dateString: string) => { if (!dateString) return "N/A" try { return format(new Date(dateString), "PPP p") } catch (e) { return dateString } } return ( ) } [V0_FILE]typescriptreact:file="hooks/use-devices.ts" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" import { api } from "@/lib/api" import type { Device } from "@/lib/types" export function useDevices(params?: Record, refreshTrigger = 0) { const [devices, setDevices] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const fetchDevices = useCallback(async () => { try { setLoading(true) const data = await api.devices.getAll(params) setDevices(data) setError(null) } catch (err) { console.error("Error fetching devices:", err) setError(err instanceof Error ? err : new Error("Failed to fetch devices")) } finally { setLoading(false) } }, [params]) useEffect(() => { fetchDevices() }, [fetchDevices, refreshTrigger]) return { devices, loading, error, refetch: fetchDevices } } [V0_FILE]typescriptreact:file="components/ui/use-toast.tsx" isEdit="true" isMerged="true" // Simplified version of the toast component import { useToast as useToastOriginal } from "@/components/ui/toast" export { ToastProvider, ToastViewport } from "@/components/ui/toast" export { Toast, ToastClose, ToastDescription, ToastTitle } from "@/components/ui/toast" export const toast = { title: (title: string, description?: string) => { const { toast } = useToastOriginal() return toast({ title, description }) }, description: (description: string) => { const { toast } = useToastOriginal() return toast({ description }) }, error: (title: string, description?: string) => { const { toast } = useToastOriginal() return toast({ title, description, variant: "destructive" }) }, success: (title: string, description?: string) => { const { toast } = useToastOriginal() return toast({ title, description }) }, } export { useToastOriginal as useToast } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Toast.displayName = ToastPrimitives.Root.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName interface UseToastReturn { toast: (props: { title: string; description?: string; variant?: "default" | "destructive" }) => void } function useToast(): UseToastReturn { const toast = (props: { title: string; description?: string; variant?: "default" | "destructive" }) => { console.log("Toast:", props) } return { toast } } export { useToast, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose } [V0_FILE]typescriptreact:file="app/alerts/page.tsx" isEdit="true" isMerged="true" import { AlertsPage } from "@/components/alerts/alerts-page" import { ProtectedRoute } from "@/components/auth/protected-route" export default function Alerts() { return ( ) } [V0_FILE]typescriptreact:file="components/alerts/alert-list.tsx" isEdit="true" isMerged="true" "use client" import { useState } 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 { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Clock, Filter, Search, ThermometerIcon, Droplets, Waves } from "lucide-react" import { useAlerts } from "@/hooks/use-alerts" import { Skeleton } from "@/components/ui/skeleton" import { formatDistanceToNow } from "date-fns" import { AlertDetailsDialog } from "./alert-details-dialog" import { AlertResolutionDialog } from "./alert-resolution-dialog" import type { UserRole } from "@/lib/types" interface AlertListProps { status: "active" | "resolved" | "all" userRole: UserRole refreshTrigger?: number onAlertResolved: () => void userId: number } export function AlertList({ status, userRole, refreshTrigger = 0, onAlertResolved, userId }: AlertListProps) { const [searchTerm, setSearchTerm] = useState("") const [parameterFilter, setParameterFilter] = useState(null) const [severityFilter, setSeverityFilter] = useState(null) const [selectedAlert, setSelectedAlert] = useState(null) const [isDetailsOpen, setIsDetailsOpen] = useState(false) const [isResolutionOpen, setIsResolutionOpen] = useState(false) // Determine API status filter based on component status prop const apiStatusFilter = status === "active" ? "warning,critical" : status === "resolved" ? "resolved" : undefined // In a real app, we would filter by the actual user's organization const { alerts, loading, error, resolveAlert } = useAlerts( { ...(apiStatusFilter ? { status: apiStatusFilter } : {}), ...(userRole !== "admin" ? { organizationId: "1" } : {}), }, refreshTrigger, ) // Filter alerts based on search term and filters const filteredAlerts = alerts.filter((alert) => { const matchesSearch = searchTerm === "" || alert.device_name?.toLowerCase().includes(searchTerm.toLowerCase()) || alert.parameter.toLowerCase().includes(searchTerm.toLowerCase()) const matchesParameter = parameterFilter === null || alert.parameter === parameterFilter const matchesSeverity = severityFilter === null || alert.status === severityFilter return matchesSearch && matchesParameter && matchesSeverity }) // Get unique parameters for filter const parameters = Array.from(new Set(alerts.map((alert) => alert.parameter))) // Function to get the appropriate icon for a parameter const getParameterIcon = (parameter: string) => { switch (parameter.toLowerCase()) { case "ph": return case "temperature": return case "dissolved_oxygen": return default: return } } // Function to format the timestamp const formatTimestamp = (timestamp: string) => { try { return formatDistanceToNow(new Date(timestamp), { addSuffix: true }) } catch (e) { return timestamp } } return ( <> {status === "active" ? "Active Alerts" : status === "resolved" ? "Resolved Alerts" : "All Alerts"} {status === "active" ? "View and manage active water quality alerts" : status === "resolved" ? "View previously resolved alerts" : "View all water quality alerts"}

setSearchTerm(e.target.value)} />

{/* The SelectItem value prop must not be an empty string */} {loading ? (

) : error ? (

Error loading alerts. Please try again.

) : filteredAlerts.length === 0 ? (

No alerts found.

) : (

Status Device Parameter Value Threshold Time Actions {filteredAlerts.map((alert) => ( {alert.status.charAt(0).toUpperCase() + alert.status.slice(1)} {alert.device_name}

{getParameterIcon(alert.parameter)} {alert.parameter}

{alert.actual_value} {alert.threshold_value}

{formatTimestamp(alert.created_at)}

{alert.status !== "resolved" && ( )}

))}

)} {/* Alert Details Dialog */} {selectedAlert && ( )} {/* Alert Resolution Dialog */} {selectedAlert && ( )} ) } [V0_FILE]typescriptreact:file="components/alerts/alert-details-dialog.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Loader2, AlertTriangle, CheckCircle, ThermometerIcon, Droplets, Waves } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { format } from "date-fns" import { useAlerts } from "@/hooks/use-alerts" import type { Alert } from "@/lib/types" interface AlertDetailsDialogProps { open: boolean onOpenChange: (open: boolean) => void alertId: number } export function AlertDetailsDialog({ open, onOpenChange, alertId }: AlertDetailsDialogProps) { const [isLoading, setIsLoading] = useState(true) const [alert, setAlert] = useState(null) // Fetch alert details const { alerts } = useAlerts() useEffect(() => { if (open && alertId && alerts.length > 0) { const foundAlert = alerts.find((a) => a.id === alertId) if (foundAlert) { setAlert(foundAlert) setIsLoading(false) } } }, [open, alertId, alerts]) // Function to get the appropriate icon for a parameter const getParameterIcon = (parameter: string) => { switch (parameter?.toLowerCase()) { case "ph": return case "temperature": return case "dissolved_oxygen": return default: return } } // Format date const formatDate = (dateString: string) => { if (!dateString) return "N/A" try { return format(new Date(dateString), "PPP p") } catch (e) { return dateString } } return ( ) } [V0_FILE]typescriptreact:file="components/alerts/alert-resolution-dialog.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Loader2, AlertTriangle } from "lucide-react" import { useAlerts } from "@/hooks/use-alerts" import { toast } from "@/components/ui/use-toast" import type { Alert } from "@/lib/types" interface AlertResolutionDialogProps { open: boolean onOpenChange: (open: boolean) => void alertId: number userId: number onAlertResolved: () => void } export function AlertResolutionDialog({ open, onOpenChange, alertId, userId, onAlertResolved, }: AlertResolutionDialogProps) { const [isLoading, setIsLoading] = useState(true) const [alert, setAlert] = useState(null) const [notes, setNotes] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) // Fetch alert details const { alerts, resolveAlert } = useAlerts() useEffect(() => { if (open && alertId && alerts.length > 0) { const foundAlert = alerts.find((a) => a.id === alertId) if (foundAlert) { setAlert(foundAlert) setIsLoading(false) } } }, [open, alertId, alerts]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { const success = await resolveAlert(alertId.toString(), userId, notes) if (success) { toast({ title: "Alert Resolved", description: "The alert has been successfully resolved.", }) onOpenChange(false) onAlertResolved() } else { toast({ title: "Error", description: "Failed to resolve the alert. Please try again.", variant: "destructive", }) } } catch (error) { console.error("Error resolving alert:", error) toast({ title: "Error", description: "An unexpected error occurred. Please try again.", variant: "destructive", }) } finally { setIsSubmitting(false) } } return (

Devices

Device Information

Status

Alert Information

Resolution Notes