-
-
-
- Get started by editing{" "}
-
- src/app/page.js -- . -
- - - Save and see your changes instantly. - -
-
+
- );
+ )
}
+
diff --git a/src/components/BatteryStatus.js b/src/components/BatteryStatus.js
new file mode 100644
index 0000000..0985763
--- /dev/null
+++ b/src/components/BatteryStatus.js
@@ -0,0 +1,118 @@
+import { Card } from '@/components/ui/card'
+import { Progress } from '@/components/ui/progress'
+import { motion } from 'framer-motion'
+
+export function BatteryStatus({ data }) {
+ const batteryLevel = data.battery_capacity || 0
+ const batteryVoltage = data.battery_voltage || 0
+ const chargingCurrent = data.battery_charging_current || 0
+ const isCharging = data.is_charging_on === 1
+ const isChargingToFloat = data.is_charging_to_float === 1
+ const batteryVoltageFromScc = data.battery_voltage_from_scc || 0
+ const batteryDischargeCurrent = data.battery_discharge_current || 0
+
+ const getBatteryColor = (level) => {
+ if (level >= 80) return 'bg-emerald-500'
+ if (level >= 40) return 'bg-yellow-500'
+ return 'bg-red-500'
+ }
+
+ const getBatteryGradient = (level) => {
+ if (level >= 80) return 'from-emerald-500 to-emerald-400'
+ if (level >= 40) return 'from-yellow-500 to-yellow-400'
+ return 'from-red-500 to-red-400'
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+ {lastUpdateTime &&
-
-
+ + Solar Management Dashboard +
+Real-time monitoring of your solar system
+Battery Status
+
+
+
+
+
+ Battery Level
+ {batteryLevel}%
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ Main Voltage
+
+
+ {batteryVoltage}
+V
+
+
+ SCC Voltage
+
+
+ {batteryVoltageFromScc}
+V
+
+
+ Charging Current
+
+
+ {chargingCurrent}
+A
+
+
+ Discharge Current
+
+
+ {batteryDischargeCurrent}
+A
+
+
+
+
+ {isCharging ? 'Charging' : 'Not Charging'}
+
+
+
+ Float Mode
+
+ Power Statistics
+
+
+
+
+
+
+ AC Input Voltage
+
+
+ {acInputVoltage}
+V
+
+
+ AC Input Frequency
+
+
+ {acInputFrequency}
+Hz
+
+
+ AC Output Voltage
+
+
+ {acOutputVoltage}
+V
+
+
+ AC Output Frequency
+
+
+ {acOutputFrequency}
+Hz
+
+
+ AC Apparent Power
+
+
+ {acOutputApparentPower}
+VA
+
+
+ AC Active Power
+
+
+ {acOutputActivePower}
+W
+
+
+ AC Output Load
+
+
+ {acOutputLoad}
+%
+
+
+ Bus Voltage
+
+
+ {busVoltage}
+V
+
+
+ PV Input Voltage
+
+
+ {pvInputVoltage}
+V
+
+
+ PV Input Current
+
+
+ {pvInputCurrent}
+A
+
+
+ PV Input Power
+
+
+ {pvInputPower}
+W
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/SystemStatus.js b/src/components/SystemStatus.js
new file mode 100644
index 0000000..8a01420
--- /dev/null
+++ b/src/components/SystemStatus.js
@@ -0,0 +1,57 @@
+import { Card } from '@/components/ui/card'
+
+export function SystemStatus({ data }) {
+ const inverterTemp = data.inverter_heat_sink_temperature || 0
+ const isLoadOn = data.is_load_on === 1
+ const isSystemOn = data.is_switched_on === 1
+ const isSccCharging = data.is_scc_charging_on === 1
+ const isAcCharging = data.is_ac_charging_on === 1
+
+ const getTemperatureColor = (temp) => {
+ if (temp >= 60) return 'text-red-500'
+ if (temp >= 45) return 'text-yellow-500'
+ return 'text-emerald-500'
+ }
+
+ return (
+
+
+ {getChartTitle()}
+
+
+
+
+
+
+
+
+
+
+ {config.lines.map(line => (
+
+
+
+
+ ))}
+
+
+
+
+ System Status
+
+
+
+
+ Inverter Temperature
+{inverterTemp}°C
+
+
+
+
+
+
+ Load Status
+
+ {isLoadOn ? 'On' : 'Off'}
+
+
+
+
+ System Status
+
+ {isSystemOn ? 'On' : 'Off'}
+
+
+
+
+ SCC Charging
+
+ {isSccCharging ? 'Active' : 'Inactive'}
+
+
+
+
+ AC Charging
+
+ {isAcCharging ? 'Active' : 'Inactive'}
+
+
+
+))
+Progress.displayName = "Progress"
+
+export { Progress }
\ No newline at end of file
diff --git a/src/components/ui/select.js b/src/components/ui/select.js
new file mode 100644
index 0000000..610a370
--- /dev/null
+++ b/src/components/ui/select.js
@@ -0,0 +1,54 @@
+import * as React from "react"
+
+const Select = React.forwardRef(({ children, ...props }, ref) => (
+
+))
+Select.displayName = "Select"
+
+const SelectTrigger = React.forwardRef(({ children, ...props }, ref) => (
+
+ {children}
+
+))
+SelectTrigger.displayName = "SelectTrigger"
+
+const SelectValue = React.forwardRef(({ children, ...props }, ref) => (
+
+ {children}
+
+))
+SelectValue.displayName = "SelectValue"
+
+const SelectContent = React.forwardRef(({ children, ...props }, ref) => (
+
+ {children}
+
+))
+SelectContent.displayName = "SelectContent"
+
+const SelectItem = React.forwardRef(({ children, ...props }, ref) => (
+
+ {children}
+
+))
+SelectItem.displayName = "SelectItem"
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..c753c5f
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,48 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+ ],
+ theme: {
+ 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))",
+ },
+ },
+ },
+ },
+ plugins: [],
+}
\ No newline at end of file