init

package.json

@@ -3,18 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^19.0.0",
+    "framer-motion": "^12.12.1",
-    "react-dom": "^19.0.0",
+    "mongodb": "^6.3.0",
-    "next": "15.3.2"
+    "next": "14.1.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "recharts": "^2.12.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
+    "autoprefixer": "^10.4.17",
-    "tailwindcss": "^4"
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} 

src/app/api/solar-data/route.js

@@ -0,0 +1,63 @@
+import { MongoClient } from 'mongodb'
+
+const uri = process.env.MONGODB_URI
+const client = new MongoClient(uri)
+
+export async function GET(request) {
+  const { searchParams } = new URL(request.url)
+  const timeRange = searchParams.get('timeRange') || '1d'
+  const dataType = searchParams.get('dataType') || 'all'
+
+  try {
+    await client.connect()
+    const db = client.db('solar')
+    const collection = db.collection('solar_data')
+
+    const now = new Date()
+    let startDate = new Date()
+
+    switch (timeRange) {
+      case '1d':
+        startDate.setDate(now.getDate() - 1)
+        break
+      case '3d':
+        startDate.setDate(now.getDate() - 3)
+        break
+      case '1w':
+        startDate.setDate(now.getDate() - 7)
+        break
+      case '1m':
+        startDate.setMonth(now.getMonth() - 1)
+        break
+      default:
+        startDate.setDate(now.getDate() - 1)
+    }
+
+    let query = {
+      timestamp: { $gte: startDate }
+    }
+
+    if (dataType === 'day') {
+      query['$expr'] = {
+        $and: [
+          { $gte: [{ $hour: '$timestamp' }, 6] },
+          { $lt: [{ $hour: '$timestamp' }, 18] }
+        ]
+      }
+    } else if (dataType === 'night') {
+      query['$expr'] = {
+        $or: [
+          { $lt: [{ $hour: '$timestamp' }, 6] },
+          { $gte: [{ $hour: '$timestamp' }, 18] }
+        ]
+      }
+    }
+
+    const data = await collection.find(query).sort({ timestamp: 1 }).toArray()
+    return Response.json(data)
+  } catch (error) {
+    return Response.json({ error: error.message }, { status: 500 })
+  } finally {
+    await client.close()
+  }
+} 

src/app/globals.css

@@ -1,26 +1,218 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-:root {
+@layer base {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
+    --background: 0 0% 100%;
-    --foreground: #ededed;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
   }
 }
 
-body {
+@layer base {
-  background: var(--background);
+  * {
-  color: var(--foreground);
+    @apply border-border;
-  font-family: Arial, Helvetica, sans-serif;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient 8s ease infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(0.95);
+  }
+}
+
+.animate-pulse-slow {
+  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-10px) rotate(1deg);
+  }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 2s infinite linear;
+  background: linear-gradient(to right, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 100%);
+  background-size: 1000px 100%;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(31, 41, 55, 0.1);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(75, 85, 99, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(75, 85, 99, 0.7);
+}
+
+/* Glass effect */
+.glass {
+  background: rgba(31, 41, 55, 0.4);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(75, 85, 99, 0.2);
+}
+
+/* Card hover effects */
+.card-hover {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-hover:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+/* Neon glow effects */
+.neon-glow {
+  box-shadow: 0 0 5px rgba(59, 130, 246, 0.5),
+              0 0 20px rgba(59, 130, 246, 0.3),
+              0 0 40px rgba(59, 130, 246, 0.1);
+}
+
+.neon-glow:hover {
+  box-shadow: 0 0 10px rgba(59, 130, 246, 0.6),
+              0 0 30px rgba(59, 130, 246, 0.4),
+              0 0 60px rgba(59, 130, 246, 0.2);
+}
+
+/* Gradient text animation */
+.gradient-text {
+  background: linear-gradient(90deg, #3B82F6, #10B981, #3B82F6);
+  background-size: 200% auto;
+  color: transparent;
+  background-clip: text;
+  -webkit-background-clip: text;
+  animation: gradient 8s linear infinite;
+}
+
+/* Button hover effects */
+.button-hover {
+  transition: all 0.3s ease;
+}
+
+.button-hover:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* Chart animations */
+.chart-animate {
+  animation: chartFade 0.5s ease-out;
+}
+
+@keyframes chartFade {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Loading animation */
+.loading-dots::after {
+  content: '...';
+  animation: loadingDots 1.5s infinite;
+}
+
+@keyframes loadingDots {
+  0% { content: '.'; }
+  33% { content: '..'; }
+  66% { content: '...'; }
 }

src/app/layout.js

@@ -1,29 +1,17 @@
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter } from 'next/font/google'
-import "./globals.css";
+import './globals.css'
 
-const geistSans = Geist({
+const inter = Inter({ subsets: ['latin'] })
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
 
 export const metadata = {
-  title: "Create Next App",
+  title: 'Solar Management Dashboard',
-  description: "Generated by create next app",
+  description: 'Real-time solar system monitoring dashboard',
-};
+}
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body
+      <body className={inter.className}>{children}</body>
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
     </html>
-  );
+  )
 }

src/app/page.js

@@ -1,103 +1,144 @@
-import Image from "next/image";
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Card } from '@/components/ui/card'
+import { BatteryStatus } from '@/components/BatteryStatus'
+import { PowerStats } from '@/components/PowerStats'
+import { SystemStatus } from '@/components/SystemStatus'
+import { SolarChart } from '@/components/SolarChart'
+import { LastRefresh } from '@/components/LastRefresh'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { motion, AnimatePresence } from 'framer-motion'
+
+export default function Dashboard() {
+  const [data, setData] = useState([])
+  const [timeRange, setTimeRange] = useState('1d')
+  const [loading, setLoading] = useState(true)
+
+  const fetchData = async () => {
+    try {
+      const response = await fetch(`/api/solar-data?timeRange=${timeRange}`)
+      const newData = await response.json()
+      setData(newData)
+    } catch (error) {
+      console.error('Error fetching data:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchData()
+    const interval = setInterval(fetchData, 20000)
+    return () => clearInterval(interval)
+  }, [timeRange])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
+        <motion.div
+          initial={{ scale: 0.5, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ duration: 0.5 }}
+          className="relative"
+        >
+          <div className="w-32 h-32 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-24 h-24 border-4 border-emerald-500 border-t-transparent rounded-full animate-spin" style={{ animationDirection: 'reverse' }}></div>
+          </div>
+        </motion.div>
+      </div>
+    )
+  }
+
+  const latestData = data[data.length - 1]?.data || {}
+  const lastUpdateTime = data[data.length - 1]?.timestamp?.$date || data[data.length - 1]?.timestamp
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1
+      }
+    }
+  }
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5
+      }
+    }
+  }
 
-export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+      <div className="max-w-[1400px] mx-auto p-4 sm:p-6 space-y-6">
-        <Image
+        <div className="flex flex-col items-center">
-          className="dark:invert"
+          <motion.div 
-          src="/next.svg"
+            initial={{ y: -20, opacity: 0 }}
-          alt="Next.js logo"
+            animate={{ y: 0, opacity: 1 }}
-          width={180}
+            transition={{ duration: 0.5 }}
-          height={38}
+            className="text-center mb-4"
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              src/app/page.js
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
           >
-            <Image
+            <h1 className="text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-400 via-emerald-400 to-blue-400 bg-clip-text text-transparent animate-gradient mb-4">
-              className="dark:invert"
+              Solar Management Dashboard
-              src="/vercel.svg"
+            </h1>
-              alt="Vercel logomark"
+            <p className="text-gray-400 text-lg">Real-time monitoring of your solar system</p>
-              width={20}
+          </motion.div>
-              height={20}
+          {lastUpdateTime && <LastRefresh timestamp={lastUpdateTime} />}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
         </div>
-      </main>
+
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
+        <motion.div 
-        <a
+          variants={containerVariants}
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          initial="hidden"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          animate="visible"
-          target="_blank"
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6"
-          rel="noopener noreferrer"
         >
-          <Image
+          <motion.div variants={itemVariants} className="h-full">
-            aria-hidden
+            <BatteryStatus data={latestData} />
-            src="/file.svg"
+          </motion.div>
-            alt="File icon"
+          <motion.div variants={itemVariants} className="h-full">
-            width={16}
+            <PowerStats data={latestData} />
-            height={16}
+          </motion.div>
-          />
+          <motion.div variants={itemVariants} className="h-full">
-          Learn
+            <SystemStatus data={latestData} />
-        </a>
+          </motion.div>
-        <a
+        </motion.div>
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+        <motion.div 
-          target="_blank"
+          variants={containerVariants}
-          rel="noopener noreferrer"
+          initial="hidden"
+          animate="visible"
+          className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6"
         >
-          <Image
+          <motion.div variants={itemVariants} className="h-full">
-            aria-hidden
+            <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-blue-500/10">
-            src="/window.svg"
+              <SolarChart data={data} type="power" />
-            alt="Window icon"
+            </Card>
-            width={16}
+          </motion.div>
-            height={16}
+          <motion.div variants={itemVariants} className="h-full">
-          />
+            <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-emerald-500/10">
-          Examples
+              <SolarChart data={data} type="battery" />
-        </a>
+            </Card>
-        <a
+          </motion.div>
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          <motion.div variants={itemVariants} className="h-full">
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-purple-500/10">
-          target="_blank"
+              <SolarChart data={data} type="voltage" />
-          rel="noopener noreferrer"
+            </Card>
-        >
+          </motion.div>
-          <Image
+          <motion.div variants={itemVariants} className="h-full">
-            aria-hidden
+            <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-red-500/10">
-            src="/globe.svg"
+              <SolarChart data={data} type="temperature" />
-            alt="Globe icon"
+            </Card>
-            width={16}
+          </motion.div>
-            height={16}
+        </motion.div>
-          />
+      </div>
-          Go to nextjs.org →
-        </a>
-      </footer>
     </div>
-  );
+  )
 }
+

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 (
+    <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-emerald-500/10">
+      <h2 className="text-xl sm:text-2xl font-semibold mb-4 text-white">Battery Status</h2>
+      <div className="flex flex-col h-[calc(100%-3rem)]">
+        <div className="relative mb-4">
+          <div className="flex justify-between mb-2">
+            <span className="text-sm font-medium text-gray-300">Battery Level</span>
+            <span className="text-sm font-medium text-gray-300">{batteryLevel}%</span>
+          </div>
+          <div className="relative h-10 bg-gray-700/50 rounded-full overflow-hidden">
+            <motion.div
+              className={`absolute inset-0 bg-gradient-to-r ${getBatteryGradient(batteryLevel)}`}
+              initial={{ width: 0 }}
+              animate={{ width: `${batteryLevel}%` }}
+              transition={{ duration: 1, ease: "easeOut" }}
+            />
+            <motion.div
+              className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent"
+              animate={{
+                x: ["0%", "100%"],
+              }}
+              transition={{
+                duration: 2,
+                repeat: Infinity,
+                ease: "linear",
+              }}
+              style={{
+                width: "50%",
+                height: "100%",
+                background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)",
+              }}
+            />
+            {isCharging && (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <motion.svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className="w-6 h-6 text-white/80"
+                  initial={{ scale: 0.8, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <path fillRule="evenodd" d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z" clipRule="evenodd" />
+                </motion.svg>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-3 flex-grow">
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">Main Voltage</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{batteryVoltage}</p>
+              <p className="text-sm font-medium text-blue-400">V</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">SCC Voltage</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{batteryVoltageFromScc}</p>
+              <p className="text-sm font-medium text-blue-400">V</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">Charging Current</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{chargingCurrent}</p>
+              <p className="text-sm font-medium text-emerald-400">A</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">Discharge Current</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{batteryDischargeCurrent}</p>
+              <p className="text-sm font-medium text-emerald-400">A</p>
+            </div>
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-2 mt-4">
+          <div className="flex items-center gap-2">
+            <div className={`w-3 h-3 rounded-full ${isCharging ? 'bg-emerald-500 animate-pulse' : 'bg-gray-400'}`} />
+            <span className="text-sm text-gray-300">{isCharging ? 'Charging' : 'Not Charging'}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className={`w-3 h-3 rounded-full ${isChargingToFloat ? 'bg-emerald-500' : 'bg-gray-400'}`} />
+            <span className="text-sm text-gray-300">Float Mode</span>
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
+} 

src/components/LastRefresh.js

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react'
+import { motion } from 'framer-motion'
+
+export function LastRefresh({ timestamp }) {
+  const [relativeTime, setRelativeTime] = useState('')
+
+  useEffect(() => {
+    const updateRelativeTime = () => {
+      const now = new Date()
+      const lastRefresh = new Date(timestamp)
+      const diffInSeconds = Math.floor((now - lastRefresh) / 1000)
+
+      if (diffInSeconds < 60) {
+        setRelativeTime(`${diffInSeconds} seconds ago`)
+      } else if (diffInSeconds < 3600) {
+        const minutes = Math.floor(diffInSeconds / 60)
+        setRelativeTime(`${minutes} minute${minutes > 1 ? 's' : ''} ago`)
+      } else {
+        const hours = Math.floor(diffInSeconds / 3600)
+        setRelativeTime(`${hours} hour${hours > 1 ? 's' : ''} ago`)
+      }
+    }
+
+    updateRelativeTime()
+    const interval = setInterval(updateRelativeTime, 1000)
+    return () => clearInterval(interval)
+  }, [timestamp])
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="flex items-center gap-2 text-sm text-gray-400"
+    >
+      <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+      <span>Last updated {relativeTime}</span>
+    </motion.div>
+  )
+} 

src/components/PowerStats.js

@@ -0,0 +1,102 @@
+import { Card } from '@/components/ui/card'
+
+export function PowerStats({ data }) {
+  const acInputVoltage = data.ac_input_voltage || 0
+  const acInputFrequency = data.ac_input_frequency || 0
+  const acOutputVoltage = data.ac_output_voltage || 0
+  const acOutputFrequency = data.ac_output_frequency || 0
+  const acOutputApparentPower = data.ac_output_apparent_power || 0
+  const acOutputActivePower = data.ac_output_active_power || 0
+  const acOutputLoad = data.ac_output_load || 0
+  const busVoltage = data.bus_voltage || 0
+  const pvInputVoltage = data.pv_input_voltage || 0
+  const pvInputCurrent = data.pv_input_current_for_battery || 0
+  const pvInputPower = data.pv_input_power || 0
+
+  return (
+    <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-blue-500/10">
+      <h2 className="text-xl sm:text-2xl font-semibold mb-4 text-white">Power Statistics</h2>
+      <div className="flex flex-col h-[calc(100%-3rem)]">
+        <div className="grid grid-cols-2 gap-3 flex-grow">
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">AC Input Voltage</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{acInputVoltage}</p>
+              <p className="text-sm font-medium text-blue-400">V</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">AC Input Frequency</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{acInputFrequency}</p>
+              <p className="text-sm font-medium text-purple-400">Hz</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">AC Output Voltage</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{acOutputVoltage}</p>
+              <p className="text-sm font-medium text-blue-400">V</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">AC Output Frequency</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{acOutputFrequency}</p>
+              <p className="text-sm font-medium text-purple-400">Hz</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">AC Apparent Power</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{acOutputApparentPower}</p>
+              <p className="text-sm font-medium text-amber-400">VA</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">AC Active Power</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{acOutputActivePower}</p>
+              <p className="text-sm font-medium text-amber-400">W</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">AC Output Load</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{acOutputLoad}</p>
+              <p className="text-sm font-medium text-amber-400">%</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">Bus Voltage</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{busVoltage}</p>
+              <p className="text-sm font-medium text-blue-400">V</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">PV Input Voltage</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{pvInputVoltage}</p>
+              <p className="text-sm font-medium text-blue-400">V</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <p className="text-sm text-gray-400">PV Input Current</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{pvInputCurrent}</p>
+              <p className="text-sm font-medium text-emerald-400">A</p>
+            </div>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm col-span-2">
+            <p className="text-sm text-gray-400">PV Input Power</p>
+            <div className="flex items-baseline gap-1">
+              <p className="text-lg font-semibold text-white">{pvInputPower}</p>
+              <p className="text-sm font-medium text-amber-400">W</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
+} 

src/components/SolarChart.js

@@ -0,0 +1,249 @@
+import { Card } from '@/components/ui/card'
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'
+import { useState } from 'react'
+
+export function SolarChart({ data, type }) {
+  const [interval, setInterval] = useState('today')
+
+  const getFilteredData = (data) => {
+    const now = new Date()
+    const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const startOfYesterday = new Date(startOfDay)
+    startOfYesterday.setDate(startOfDay.getDate() - 1)
+    const startOfWeek = new Date(startOfDay)
+    startOfWeek.setDate(startOfDay.getDate() - 7)
+    const startOfMonth = new Date(startOfDay)
+    startOfMonth.setMonth(startOfDay.getMonth() - 1)
+
+    let startTime
+    switch (interval) {
+      case 'today':
+        startTime = startOfDay
+        break
+      case 'yesterday':
+        startTime = startOfYesterday
+        break
+      case 'week':
+        startTime = startOfWeek
+        break
+      case 'month':
+        startTime = startOfMonth
+        break
+      default:
+        startTime = startOfDay
+    }
+
+    return data.filter(item => {
+      const dateStr = item.timestamp.$date || item.timestamp
+      const date = new Date(dateStr)
+      return date >= startTime && date <= now
+    })
+  }
+
+  const formatData = (data) => {
+    return getFilteredData(data).map(item => {
+      // Handle both MongoDB date format and regular date string
+      const dateStr = item.timestamp.$date || item.timestamp
+      const date = new Date(dateStr)
+      
+      // Check if date is valid
+      if (isNaN(date.getTime())) {
+        console.error('Invalid date:', dateStr)
+        return null
+      }
+
+      return {
+        timestamp: date.toLocaleString('en-US', {
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          hour12: true
+        }),
+        batteryLevel: item.data.battery_capacity,
+        batteryVoltage: item.data.battery_voltage,
+        batteryVoltageFromScc: item.data.battery_voltage_from_scc,
+        chargingCurrent: item.data.battery_charging_current,
+        batteryDischargeCurrent: item.data.battery_discharge_current,
+        pvInputPower: item.data.pv_input_power,
+        acOutputPower: item.data.ac_output_active_power,
+        acOutputApparentPower: item.data.ac_output_apparent_power,
+        acOutputLoad: item.data.ac_output_load,
+        inverterTemp: item.data.inverter_heat_sink_temperature,
+        pvInputVoltage: item.data.pv_input_voltage,
+        acInputVoltage: item.data.ac_input_voltage,
+        acOutputVoltage: item.data.ac_output_voltage,
+        busVoltage: item.data.bus_voltage
+      }
+    }).filter(Boolean) // Remove any null entries from invalid dates
+  }
+
+  const getChartConfig = () => {
+    switch(type) {
+      case 'power':
+        return {
+          lines: [
+            { key: 'pvInputPower', name: 'PV Input Power (W)', color: '#10B981' },
+            { key: 'acOutputPower', name: 'AC Output Power (W)', color: '#3B82F6' },
+            { key: 'acOutputApparentPower', name: 'AC Apparent Power (VA)', color: '#F59E0B' },
+            { key: 'acOutputLoad', name: 'AC Output Load (%)', color: '#EF4444' }
+          ]
+        }
+      case 'battery':
+        return {
+          lines: [
+            { key: 'batteryLevel', name: 'Battery Level (%)', color: '#10B981' },
+            { key: 'batteryVoltage', name: 'Battery Voltage (V)', color: '#3B82F6' },
+            { key: 'batteryVoltageFromScc', name: 'SCC Battery Voltage (V)', color: '#8B5CF6' },
+            { key: 'chargingCurrent', name: 'Charging Current (A)', color: '#F59E0B' },
+            { key: 'batteryDischargeCurrent', name: 'Discharge Current (A)', color: '#EF4444' }
+          ]
+        }
+      case 'voltage':
+        return {
+          lines: [
+            { key: 'pvInputVoltage', name: 'PV Input Voltage (V)', color: '#10B981' },
+            { key: 'acInputVoltage', name: 'AC Input Voltage (V)', color: '#3B82F6' },
+            { key: 'acOutputVoltage', name: 'AC Output Voltage (V)', color: '#8B5CF6' },
+            { key: 'busVoltage', name: 'Bus Voltage (V)', color: '#F59E0B' }
+          ]
+        }
+      case 'temperature':
+        return {
+          lines: [
+            { key: 'inverterTemp', name: 'Inverter Temperature (°C)', color: '#EF4444' }
+          ]
+        }
+      default:
+        return {
+          lines: []
+        }
+    }
+  }
+
+  const config = getChartConfig()
+  const formattedData = formatData(data)
+
+  const getChartTitle = () => {
+    switch(type) {
+      case 'power':
+        return 'Power Statistics'
+      case 'battery':
+        return 'Battery Statistics'
+      case 'voltage':
+        return 'Voltage Statistics'
+      case 'temperature':
+        return 'Temperature Statistics'
+      default:
+        return 'Statistics'
+    }
+  }
+
+  return (
+    <div className="h-full">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
+        <h2 className="text-xl sm:text-2xl font-semibold text-white">{getChartTitle()}</h2>
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={() => setInterval('today')}
+            className={`px-3 py-1 text-sm rounded-md transition-colors ${
+              interval === 'today'
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            }`}
+          >
+            Today
+          </button>
+          <button
+            onClick={() => setInterval('yesterday')}
+            className={`px-3 py-1 text-sm rounded-md transition-colors ${
+              interval === 'yesterday'
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            }`}
+          >
+            Yesterday
+          </button>
+          <button
+            onClick={() => setInterval('week')}
+            className={`px-3 py-1 text-sm rounded-md transition-colors ${
+              interval === 'week'
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            }`}
+          >
+            Week
+          </button>
+          <button
+            onClick={() => setInterval('month')}
+            className={`px-3 py-1 text-sm rounded-md transition-colors ${
+              interval === 'month'
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            }`}
+          >
+            Month
+          </button>
+        </div>
+      </div>
+      <div className="h-[400px] w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={formattedData} margin={{ top: 10, right: 20, left: 0, bottom: 10 }}>
+            <defs>
+              {config.lines.map(line => (
+                <linearGradient key={line.key} id={`gradient-${line.key}`} x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor={line.color} stopOpacity={0.3}/>
+                  <stop offset="95%" stopColor={line.color} stopOpacity={0}/>
+                </linearGradient>
+              ))}
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke="#374151" opacity={0.1} />
+            <XAxis 
+              dataKey="timestamp" 
+              stroke="#6B7280"
+              tick={{ fill: '#6B7280', fontSize: 11 }}
+              tickLine={{ stroke: '#6B7280' }}
+            />
+            <YAxis 
+              stroke="#6B7280"
+              tick={{ fill: '#6B7280', fontSize: 11 }}
+              tickLine={{ stroke: '#6B7280' }}
+            />
+            <Tooltip 
+              contentStyle={{ 
+                backgroundColor: '#1F2937',
+                border: 'none',
+                borderRadius: '0.5rem',
+                color: '#F3F4F6',
+                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                fontSize: '11px'
+              }}
+              labelStyle={{ color: '#F3F4F6', fontSize: '11px' }}
+            />
+            <Legend 
+              wrapperStyle={{ 
+                paddingTop: '0.5rem',
+                color: '#6B7280',
+                fontSize: '10px'
+              }}
+            />
+            {config.lines.map(line => (
+              <Line
+                key={line.key}
+                type="monotone"
+                dataKey={line.key}
+                name={line.name}
+                stroke={line.color}
+                strokeWidth={2}
+                dot={false}
+                activeDot={{ r: 6, fill: line.color }}
+                animationDuration={1500}
+                animationBegin={0}
+              />
+            ))}
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+} 

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 (
+    <Card className="h-full p-4 sm:p-6 bg-gray-800/50 backdrop-blur-sm border-gray-700 hover:bg-gray-800/70 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-2xl hover:shadow-purple-500/10">
+      <h2 className="text-xl sm:text-2xl font-semibold mb-4 text-white">System Status</h2>
+      <div className="flex flex-col h-[calc(100%-3rem)]">
+        <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm mb-4">
+          <p className="text-sm text-gray-400">Inverter Temperature</p>
+          <p className={`text-lg font-semibold ${getTemperatureColor(inverterTemp)}`}>{inverterTemp}°C</p>
+        </div>
+        <div className="grid grid-cols-2 gap-3 flex-grow">
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <div className="flex items-center gap-2">
+              <div className={`w-3 h-3 rounded-full ${isLoadOn ? 'bg-emerald-500' : 'bg-gray-400'}`} />
+              <span className="text-sm text-gray-300">Load Status</span>
+            </div>
+            <p className="text-lg font-semibold text-white mt-2">{isLoadOn ? 'On' : 'Off'}</p>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <div className="flex items-center gap-2">
+              <div className={`w-3 h-3 rounded-full ${isSystemOn ? 'bg-emerald-500' : 'bg-gray-400'}`} />
+              <span className="text-sm text-gray-300">System Status</span>
+            </div>
+            <p className="text-lg font-semibold text-white mt-2">{isSystemOn ? 'On' : 'Off'}</p>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <div className="flex items-center gap-2">
+              <div className={`w-3 h-3 rounded-full ${isSccCharging ? 'bg-emerald-500' : 'bg-gray-400'}`} />
+              <span className="text-sm text-gray-300">SCC Charging</span>
+            </div>
+            <p className="text-lg font-semibold text-white mt-2">{isSccCharging ? 'Active' : 'Inactive'}</p>
+          </div>
+          <div className="bg-gray-700/50 p-3 rounded-lg backdrop-blur-sm">
+            <div className="flex items-center gap-2">
+              <div className={`w-3 h-3 rounded-full ${isAcCharging ? 'bg-emerald-500' : 'bg-gray-400'}`} />
+              <span className="text-sm text-gray-300">AC Charging</span>
+            </div>
+            <p className="text-lg font-semibold text-white mt-2">{isAcCharging ? 'Active' : 'Inactive'}</p>
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
+} 

src/components/ui/button.js

@@ -0,0 +1,14 @@
+import * as React from "react"
+
+const Button = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <button
+      ref={ref}
+      className={`inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 ${className}`}
+      {...props}
+    />
+  )
+})
+Button.displayName = "Button"
+
+export { Button } 

src/components/ui/card.js

@@ -0,0 +1,12 @@
+import * as React from "react"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+export { Card } 

src/components/ui/progress.js

@@ -0,0 +1,17 @@
+import * as React from "react"
+
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`relative h-2 w-full overflow-hidden rounded-full bg-gray-200 ${className}`}
+    {...props}
+  >
+    <div
+      className="h-full w-full flex-1 transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </div>
+))
+Progress.displayName = "Progress"
+
+export { Progress } 

src/components/ui/select.js

@@ -0,0 +1,54 @@
+import * as React from "react"
+
+const Select = React.forwardRef(({ children, ...props }, ref) => (
+  <select
+    ref={ref}
+    className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+    {...props}
+  >
+    {children}
+  </select>
+))
+Select.displayName = "Select"
+
+const SelectTrigger = React.forwardRef(({ children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+    {...props}
+  >
+    {children}
+  </div>
+))
+SelectTrigger.displayName = "SelectTrigger"
+
+const SelectValue = React.forwardRef(({ children, ...props }, ref) => (
+  <span ref={ref} className="text-sm" {...props}>
+    {children}
+  </span>
+))
+SelectValue.displayName = "SelectValue"
+
+const SelectContent = React.forwardRef(({ children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className="relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+    {...props}
+  >
+    {children}
+  </div>
+))
+SelectContent.displayName = "SelectContent"
+
+const SelectItem = React.forwardRef(({ children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+    {...props}
+  >
+    {children}
+  </div>
+))
+SelectItem.displayName = "SelectItem"
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } 

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: [],
+}