[V0_FILE]typescriptreact:file="components/games.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Gamepad2, Zap, Target, Brain, Trophy, Star, Play, BookOpen, Lightbulb } from "lucide-react" const games = [ { id: 1, title: "Energy Detective", description: "Find energy wasters in virtual homes", icon: Target, difficulty: "Easy", points: 150, duration: "5 min", category: "Detective", completed: false, progress: 0, }, { id: 2, title: "Power Plant Manager", description: "Balance energy production and consumption", icon: Zap, difficulty: "Medium", points: 300, duration: "10 min", category: "Strategy", completed: true, progress: 100, }, { id: 3, title: "Smart Home Challenge", description: "Optimize a smart home's energy usage", icon: Brain, difficulty: "Hard", points: 500, duration: "15 min", category: "Puzzle", completed: false, progress: 65, }, { id: 4, title: "Renewable Race", description: "Learn about solar, wind, and hydro power", icon: Trophy, difficulty: "Easy", points: 200, duration: "7 min", category: "Racing", completed: false, progress: 0, }, ] const quizzes = [ { id: 1, title: "Energy Basics Quiz", questions: 10, points: 100, icon: BookOpen, completed: true, score: 85, }, { id: 2, title: "Renewable Energy Quiz", questions: 15, points: 150, icon: Lightbulb, completed: false, score: null, }, { id: 3, title: "Home Efficiency Quiz", questions: 12, points: 120, icon: Target, completed: false, score: null, }, ] export default function Games() { return (

{/* Header */}

Energy Games

Learn while having fun!

{/* Player Stats */}

Total Points

1,250

Level

Progress to Level 8 750/1000 XP

{/* Interactive Games */}

Interactive Games

{games.map((game) => { const IconComponent = game.icon return (

{game.title}

{game.description}

{game.category} {game.difficulty}

{game.points} pts

{game.duration}

{game.progress > 0 && (

Progress {game.progress}%

)} ) })}

{/* Educational Quizzes */}

Knowledge Quizzes

{quizzes.map((quiz) => { const IconComponent = quiz.icon return (

{quiz.title}

{quiz.questions} questions • {quiz.points} points

{quiz.completed && (

Score: {quiz.score}%

)}

) })}

{/* Daily Challenge */} Daily Challenge Complete today's challenge for bonus points!

Energy Efficiency Master

Identify 5 ways to reduce energy consumption in a typical household

Double Points 400 pts

{/* Achievements */} Recent Achievements

Quiz Master

Completed 3 quizzes

Energy Detective

Found 10 energy wasters

) } [V0_FILE]typescriptreact:file="components/challenges.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Trophy, Target, Users, Flame, Leaf, Zap, Award, Clock } from "lucide-react" const activeChallenges = [ { id: 1, title: "Reduce AC Usage", description: "Use 20% less air conditioning this week", type: "weekly", progress: 65, target: 20, current: 13, unit: "%", reward: 500, timeLeft: "2 days", difficulty: "Medium", participants: 1247, icon: Flame, }, { id: 2, title: "Peak Hour Saver", description: "Avoid high consumption during peak hours (6-9 PM)", type: "daily", progress: 80, target: 7, current: 5.6, unit: "kW", reward: 200, timeLeft: "6 hours", difficulty: "Easy", participants: 892, icon: Clock, }, { id: 3, title: "Green Week", description: "Keep daily consumption under 25 kWh for 7 days", type: "weekly", progress: 43, target: 7, current: 3, unit: "days", reward: 750, timeLeft: "4 days", difficulty: "Hard", participants: 456, icon: Leaf, }, ] const completedChallenges = [ { id: 4, title: "Lights Out Challenge", description: "Reduce lighting consumption by 30%", reward: 300, completedDate: "2 days ago", rank: 23, participants: 1156, }, { id: 5, title: "Efficient Appliances", description: "Use energy-efficient settings for 5 days", reward: 400, completedDate: "1 week ago", rank: 15, participants: 789, }, ] const leaderboard = [ { rank: 1, name: "EcoWarrior", points: 2450, avatar: "🌟" }, { rank: 2, name: "GreenGuru", points: 2380, avatar: "🌱" }, { rank: 3, name: "PowerSaver", points: 2290, avatar: "⚡" }, { rank: 4, name: "You", points: 1250, avatar: "👤", isUser: true }, { rank: 5, name: "EcoFriend", points: 1180, avatar: "🌿" }, ] export default function Challenges() { return (

{/* Header */}

Energy Challenges

Compete and save energy together!

{/* User Stats */}

Challenge Points

1,250

Global Rank

Completed

Active

85%

Success Rate

{/* Active Challenges */}

Active Challenges

{activeChallenges.map((challenge) => { const IconComponent = challenge.icon return (

{challenge.title}

{challenge.description}

{challenge.type} {challenge.difficulty}

{challenge.participants}

{challenge.reward} pts

{challenge.timeLeft} left

Progress: {challenge.current} {challenge.unit} / {challenge.target} {challenge.unit} {challenge.progress}%

) })}

{/* Leaderboard */} Leaderboard Top energy savers this month

{leaderboard.map((user) => (

{user.rank}

{user.avatar}

{user.name}

{user.points.toLocaleString()}

points

))}

{/* Completed Challenges */}

Recent Completions

{completedChallenges.map((challenge) => (

{challenge.title}

{challenge.description}

Rank #{challenge.rank} {challenge.completedDate}

+{challenge.reward} pts

))}

{/* Suggested Challenges */} Suggested for You Based on your energy usage patterns

Weekend Energy Saver

Reduce weekend consumption by 15%

Smart Thermostat Challenge

Optimize heating/cooling for 1 week

) } [V0_FILE]typescriptreact:file="lib/billing-calculator.ts" // Tunisia Energy Billing Calculator const ENERGY_PRICES = [ [50, 0.062], [100, 0.096], [200, 0.176], [300, 0.218], [500, 0.341], [Number.POSITIVE_INFINITY, 0.414], ] as const const POWER_FLOW = 3.0 const LIGHTING_RATE = 0.7 const BILLING_MONTHS = 4 const CL_RATE = 0.005 const FTE_RATE = 0.005 const MAX_RTT = 3.5 export function calculateTotalBill(totalConsumption: number) { if (totalConsumption <= 0) { return null } const avgMonthly = totalConsumption / 4 // Electricity cost const price = ENERGY_PRICES.find(([limit]) => avgMonthly <= limit)?.[1] || 0.414 const electricity = totalConsumption * price // VAT const tvaRate = avgMonthly <= 300 ? 0.07 : 0.13 const electricityTva = electricity * tvaRate // Lighting tax (with 19% VAT) const lightingTax = POWER_FLOW * BILLING_MONTHS * LIGHTING_RATE const lightingTva = lightingTax * 0.19 // Other taxes const contributionCl = totalConsumption * CL_RATE const fte = totalConsumption * FTE_RATE const rtt = Math.min(avgMonthly > 25 ? 1.4 + Math.max(avgMonthly - 150, 0) * 0.004 : 0, MAX_RTT) * BILLING_MONTHS const total = electricity + lightingTax + contributionCl + fte + rtt + electricityTva + lightingTva return { electricity, electricityTva, lightingTax, lightingTva, contributionCl, fte, rtt, total, avgMonthly, tvaRate, } } export function calculateBillBreakdown(consumption: number) { const result = calculateTotalBill(consumption) if (!result) return null return { subtotal: result.electricity, taxes: result.electricityTva + result.lightingTva + result.contributionCl + result.fte + result.rtt + result.lightingTax, total: result.total, details: result, } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Zap, TrendingUp, GamepadIcon, Trophy, Home } from "lucide-react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import Dashboard from "@/components/dashboard" import Equipment from "@/components/equipment" import BillPrediction from "@/components/bill-prediction" import Games from "@/components/games" import Challenges from "@/components/challenges" export default function VoltisenseApp() { const [activeTab, setActiveTab] = useState("dashboard") return (

{/* Header - Updated to match blue design */}

9:41

📶 📶

Hello 👋

You will find all details here

{/* Content */}

{/* Bottom Navigation - Updated to match design */} Home Devices Bills Games Challenges

) } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isEdit="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Line, LineChart, Bar, BarChart, XAxis, YAxis, ResponsiveContainer } from "recharts" import { Zap } from "lucide-react" const realTimeData = [ { time: "Sept 1", consumption: 2.1 }, { time: "Sept 3", consumption: 1.8 }, { time: "Sept 5", consumption: 3.2 }, { time: "Sept 7", consumption: 2.8 }, { time: "Sept 9", consumption: 4.1 }, ] const weeklyData = [ { day: "Mon", consumption: 25.2 }, { day: "Tue", consumption: 18.7 }, { day: "Wed", consumption: 32.1 }, { day: "Thu", consumption: 15.8 }, { day: "Fri", consumption: 28.3 }, { day: "Sat", consumption: 35.1 }, { day: "Sun", consumption: 23.2 }, ] export default function Dashboard() { return (

{/* Energy Consumption Card - Matching uploaded design */}

Energy consumption

117.22 kWh

{/* Time Period Selector */}

Daily Weekly Monthly

{/* Chart */}

{/* Y-axis labels */}

500W

400W

200W

{/* Energy Cons Section */}

Energy Cons

178.43 kWh

Week 📅

{/* Weekly Bar Chart */}

{/* Summary Cards */}

Energy

178.43 kWh

💰 Savings

178.43 Dt

) } [V0_FILE]typescriptreact:file="components/bill-prediction.tsx" isEdit="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Line, LineChart, CartesianGrid, XAxis, YAxis, Area, AreaChart } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { TrendingUp, TrendingDown, Calendar, AlertTriangle, Receipt } from "lucide-react" import { calculateTotalBill } from "@/lib/billing-calculator" const monthlyPrediction = [ { month: "Jan", actual: 281.5, predicted: 290.3, consumption: 712 }, { month: "Feb", actual: 239.8, predicted: 248.1, consumption: 598 }, { month: "Mar", actual: 301.3, predicted: 309.0, consumption: 756 }, { month: "Apr", actual: 259.2, predicted: 267.8, consumption: 642 }, { month: "May", actual: 341.8, predicted: 353.2, consumption: 823 }, { month: "Jun", actual: null, predicted: 395.2, consumption: 892 }, { month: "Jul", actual: null, predicted: 425.4, consumption: 945 }, { month: "Aug", actual: null, predicted: 405.6, consumption: 912 }, ] const dailyTrend = [ { day: 1, cost: 10.1, consumption: 28.5 }, { day: 2, cost: 8.8, consumption: 24.2 }, { day: 3, cost: 12.9, consumption: 35.1 }, { day: 4, cost: 11.3, consumption: 31.2 }, { day: 5, cost: 15.1, consumption: 42.3 }, { day: 6, cost: 12.3, consumption: 33.8 }, { day: 7, cost: 10.7, consumption: 29.6 }, { day: 8, cost: 13.2, consumption: 36.4 }, { day: 9, cost: 11.9, consumption: 32.7 }, { day: 10, cost: 14.2, consumption: 39.1 }, { day: 11, cost: 11.6, consumption: 31.9 }, { day: 12, cost: 12.9, consumption: 35.5 }, { day: 13, cost: 12.3, consumption: 33.8 }, { day: 14, cost: 13.5, consumption: 37.2 }, { day: 15, cost: 14.5, consumption: 40.1 }, ] export default function BillPrediction() { const currentMonthProgress = 48 // 15 days out of 31 const currentConsumption = 892 // kWh for 4 months const billCalculation = calculateTotalBill(currentConsumption) const estimatedBill = billCalculation?.total || 0 const lastMonthBill = 341.8 const difference = estimatedBill - lastMonthBill const percentageChange = ((difference / lastMonthBill) * 100).toFixed(1) return (

{/* Header */}

Bill Prediction

Tunisia STEG billing system calculation

{/* Current Month Prediction */}

Estimated 4-Month Bill

{estimatedBill.toFixed(1)} TND

{difference > 0 ? : } {difference > 0 ? "+" : ""} {percentageChange}%

{/* Bill Breakdown */} {billCalculation && ( Tunisia STEG Bill Breakdown Based on {currentConsumption} kWh consumption (4 months)

Electricity Cost: {billCalculation.electricity.toFixed(2)} TND

Electricity VAT ({(billCalculation.tvaRate * 100).toFixed(0)}%): {billCalculation.electricityTva.toFixed(2)} TND

Lighting Tax: {billCalculation.lightingTax.toFixed(2)} TND

Lighting VAT (19%): {billCalculation.lightingTva.toFixed(2)} TND

CL Contribution: {billCalculation.contributionCl.toFixed(2)} TND

FTE: {billCalculation.fte.toFixed(2)} TND

RTT: {billCalculation.rtt.toFixed(2)} TND

Total: {billCalculation.total.toFixed(2)} TND

Average Monthly: {billCalculation.avgMonthly.toFixed(1)} kWh • Rate:{" "} {(billCalculation.electricity / currentConsumption).toFixed(3)} TND/kWh

)} {/* Month Progress */} Billing Period Progress

Current period (4 months) Month 2 of 4

{(estimatedBill * 0.5).toFixed(1)} TND

Estimated so far

{(estimatedBill * 0.5).toFixed(1)} TND

Remaining estimate

{/* Charts */} Monthly Trend Daily Costs Monthly Prediction vs Actual STEG billing predictions vs actual bills } /> Daily Cost Trend Daily energy costs this month } /> {/* Insights & Recommendations */} STEG Billing Insights

Tier Analysis

Your average monthly consumption ({billCalculation?.avgMonthly.toFixed(1)} kWh) puts you in the{" "} {billCalculation?.avgMonthly && billCalculation.avgMonthly > 300 ? "high" : "standard"} VAT tier ( {(billCalculation?.tvaRate || 0) * 100}%).

Optimization Tip

Reducing consumption by 50 kWh could save you approximately{" "} {( (calculateTotalBill(currentConsumption)?.total || 0) - (calculateTotalBill(currentConsumption - 50)?.total || 0) ).toFixed(1)}{" "} TND.

STEG Rate Structure

Tunisia uses a tiered pricing system. Your current rate is{" "} {((billCalculation?.electricity || 0) / currentConsumption).toFixed(3)} TND/kWh.

) } [V0_FILE]typescriptreact:file="components/equipment.tsx" isEdit="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Switch } from "@/components/ui/switch" import { Refrigerator, Tv, Lightbulb, Wind, Microwave, Laptop, WashingMachine, Thermometer } from "lucide-react" import { calculateTotalBill } from "@/lib/billing-calculator" const equipmentData = [ { id: 1, name: "Air Conditioner", icon: Wind, consumption: 2.8, percentage: 35, status: "on", monthlyUsage: 252, // kWh per 4 months cost: 0, }, { id: 2, name: "Refrigerator", icon: Refrigerator, consumption: 0.8, percentage: 10, status: "on", monthlyUsage: 576, // kWh per 4 months cost: 0, }, { id: 3, name: "TV", icon: Tv, consumption: 0.3, percentage: 4, status: "on", monthlyUsage: 252, // kWh per 4 months cost: 0, }, { id: 4, name: "LED Lights", icon: Lightbulb, consumption: 0.2, percentage: 3, status: "on", monthlyUsage: 144, // kWh per 4 months cost: 0, }, { id: 5, name: "Microwave", icon: Microwave, consumption: 0.0, percentage: 0, status: "off", monthlyUsage: 15, // kWh per 4 months cost: 0, }, { id: 6, name: "Laptop", icon: Laptop, consumption: 0.1, percentage: 1, status: "on", monthlyUsage: 36, // kWh per 4 months cost: 0, }, { id: 7, name: "Washing Machine", icon: WashingMachine, consumption: 0.0, percentage: 0, status: "off", monthlyUsage: 63, // kWh per 4 months cost: 0, }, { id: 8, name: "Water Heater", icon: Thermometer, consumption: 1.2, percentage: 15, status: "on", monthlyUsage: 108, // kWh per 4 months cost: 0, }, ] // Calculate costs for each equipment equipmentData.forEach((equipment) => { const billResult = calculateTotalBill(equipment.monthlyUsage) equipment.cost = billResult?.total || 0 }) export default function Equipment() { const totalConsumption = equipmentData.reduce((sum, eq) => sum + (eq.status === "on" ? eq.monthlyUsage : 0), 0) const totalBill = calculateTotalBill(totalConsumption) return (

{/* Header */}

Equipment Monitor

Track individual device consumption with STEG billing

{/* Total Consumption */}

Total Active Consumption (4 months)

{totalConsumption} kWh

Estimated Bill: {totalBill?.total.toFixed(1)} TND

8 devices connected

{/* Equipment List */}

{equipmentData.map((equipment) => { const IconComponent = equipment.icon return (

{equipment.name}

{equipment.status === "on" ? `${equipment.consumption} kW` : "Off"}

{equipment.percentage}%

Usage contribution {equipment.percentage}%

4-Month Usage: {equipment.monthlyUsage} kWh {equipment.cost.toFixed(1)} TND

) })}

{/* Summary */} 4-Month Summary

Active Devices

{totalBill?.total.toFixed(1)} TND

Total STEG Bill

) }