[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --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: 142.1 76.2% 36.3%; --primary-foreground: 355.7 100% 97.3%; --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: 142.1 76.2% 36.3%; --radius: 0.75rem; } .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: 142.1 70.6% 45.3%; --primary-foreground: 144.9 80.4% 10%; --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: 142.4 71.8% 29.2%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], 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")], } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" 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 ThemeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap 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", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true" "use client" import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( {children} )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( {children} )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/usage-chart.tsx" isMerged="true" "use client" import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip, Cell, PieChart, Pie, Legend } from "recharts" type UsageChartProps = { data: Array<{ name?: string time?: number percentage: number [key: string]: any }> type: "app" | "time" } const COLORS = ["#4ade80", "#60a5fa", "#f97316", "#a78bfa", "#f43f5e"] export function UsageChart({ data, type }: UsageChartProps) { if (type === "app") { return (
`${value}h`} /> [`${value} hours`, "Time"]} cursor={{ fill: "rgba(0, 0, 0, 0.05)" }} /> {data.map((_, index) => ( ))}
) } return (
`${name}: ${(percent * 100).toFixed(0)}%`} > {data.map((_, index) => ( ))} [`${value}%`, "Percentage"]} />
) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return
} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) // Update the title metadata export const metadata: Metadata = { title: "EC.reDucerr - Sustainable Device Usage", description: "Track and improve your digital sustainability footprint", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/mobile-nav.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import Link from "next/link" import { Menu, X, Home, BarChart2, Lightbulb, User } from "lucide-react" import { Button } from "@/components/ui/button" import { ThemeToggle } from "@/components/theme-toggle" export function MobileNav() { const [isOpen, setIsOpen] = useState(false) return (

EC.reDucerr

Dashboard Analytics Recommendations Profile

{isOpen && (

setIsOpen(false)}> Dashboard setIsOpen(false)} > Analytics setIsOpen(false)} > Recommendations setIsOpen(false)} > Profile

)}
) } [V0_FILE]typescriptreact:file="components/data-input-form.tsx" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" type FormData = { dailyScreenTime: number weeklyScreenTime: number dailyEnergyConsumption: number socialMediaTime: number productivityTime: number entertainmentTime: number otherTime: number morningUsage: number afternoonUsage: number eveningUsage: number nightUsage: number } type DataInputFormProps = { onSubmit: (data: FormData) => void } export function DataInputForm({ onSubmit }: DataInputFormProps) { const [formData, setFormData] = useState({ dailyScreenTime: 5.2, weeklyScreenTime: 36.4, dailyEnergyConsumption: 0.8, socialMediaTime: 2.5, productivityTime: 1.2, entertainmentTime: 1.0, otherTime: 0.5, morningUsage: 15, afternoonUsage: 30, eveningUsage: 40, nightUsage: 15, }) const handleChange = (field: keyof FormData, value: number) => { setFormData((prev) => ({ ...prev, [field]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSubmit(formData) } // Calculate total app usage time const totalAppTime = formData.socialMediaTime + formData.productivityTime + formData.entertainmentTime + formData.otherTime // Calculate total time of day percentages const totalTimeOfDay = formData.morningUsage + formData.afternoonUsage + formData.eveningUsage + formData.nightUsage return (
Enter Your Device Usage Data Provide information about your device usage to get personalized sustainability insights

Screen Time

Daily Screen Time (hours)
handleChange("dailyScreenTime", Number.parseFloat(e.target.value) || 0)} /> hours

Weekly Screen Time (hours)
handleChange("weeklyScreenTime", Number.parseFloat(e.target.value) || 0)} /> hours

Energy Consumption

Daily Energy Consumption (kWh)
handleChange("dailyEnergyConsumption", Number.parseFloat(e.target.value) || 0)} /> kWh

App Usage Breakdown (hours)

Social Media
handleChange("socialMediaTime", Number.parseFloat(e.target.value) || 0)} /> hours

Productivity
handleChange("productivityTime", Number.parseFloat(e.target.value) || 0)} /> hours

Entertainment
handleChange("entertainmentTime", Number.parseFloat(e.target.value) || 0)} /> hours

Other
handleChange("otherTime", Number.parseFloat(e.target.value) || 0)} /> hours

{totalAppTime !== formData.dailyScreenTime && (
Note: Your app usage total ({totalAppTime.toFixed(1)} hours) doesn't match your daily screen time ( {formData.dailyScreenTime.toFixed(1)} hours).
)}

Usage by Time of Day (%)

Morning (6am-12pm)
handleChange("morningUsage", Number.parseInt(e.target.value) || 0)} /> %

Afternoon (12pm-6pm)
handleChange("afternoonUsage", Number.parseInt(e.target.value) || 0)} /> %

Evening (6pm-12am)
handleChange("eveningUsage", Number.parseInt(e.target.value) || 0)} /> %

Night (12am-6am)
handleChange("nightUsage", Number.parseInt(e.target.value) || 0)} /> %

{totalTimeOfDay !== 100 && (
Note: Your time of day percentages should add up to 100% (currently {totalTimeOfDay}%).
)}

) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/select.tsx" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Download, Printer, Mail, Clock, Battery, Calendar, Lightbulb } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { recommendations } from "@/lib/utils" import { UsageChart } from "@/components/usage-chart" import { RecommendationsList } from "@/components/recommendations-list" import { DataInputForm } from "@/components/data-input-form" // Define the type for our usage data type UsageData = { screenTime: { daily: number weekly: number baseline: number } energyConsumption: { daily: number baseline: number } appUsage: Array<{ name: string time: number percentage: number }> timeOfDay: Array<{ time: string percentage: number }> sustainabilityScore: number } export function Dashboard() { const [activeTab, setActiveTab] = useState<"input" | "overview" | "recommendations">("input") const [usageData, setUsageData] = useState(null) const handleFormSubmit = (formData: any) => { // Calculate percentages for app usage const totalAppTime = formData.socialMediaTime + formData.productivityTime + formData.entertainmentTime + formData.otherTime const appUsage = [ { name: "Social Media", time: formData.socialMediaTime, percentage: Math.round((formData.socialMediaTime / totalAppTime) * 100), }, { name: "Productivity", time: formData.productivityTime, percentage: Math.round((formData.productivityTime / totalAppTime) * 100), }, { name: "Entertainment", time: formData.entertainmentTime, percentage: Math.round((formData.entertainmentTime / totalAppTime) * 100), }, { name: "Other", time: formData.otherTime, percentage: Math.round((formData.otherTime / totalAppTime) * 100), }, ] const timeOfDay = [ { time: "Morning", percentage: formData.morningUsage }, { time: "Afternoon", percentage: formData.afternoonUsage }, { time: "Evening", percentage: formData.eveningUsage }, { time: "Night", percentage: formData.nightUsage }, ] // Calculate sustainability score based on usage patterns // This is a simplified calculation - in a real app, this would be more sophisticated const screenTimeScore = Math.max(0, 100 - (formData.dailyScreenTime / 4) * 25) const energyScore = Math.max(0, 100 - (formData.dailyEnergyConsumption / 0.6) * 25) const nightUsageScore = Math.max(0, 100 - (formData.nightUsage / 10) * 25) const sustainabilityScore = Math.round((screenTimeScore + energyScore + nightUsageScore) / 3) // Set the usage data setUsageData({ screenTime: { daily: formData.dailyScreenTime, weekly: formData.weeklyScreenTime, baseline: 4, // Recommended daily limit }, energyConsumption: { daily: formData.dailyEnergyConsumption, baseline: 0.6, // Average daily consumption }, appUsage, timeOfDay, sustainabilityScore, }) // Switch to the overview tab setActiveTab("overview") } const handleExportPDF = () => { // In a real app, this would generate and download a PDF alert("PDF export functionality would be implemented here") } const handlePrint = () => { window.print() } const handleShareEmail = () => { // In a real app, this would open an email sharing dialog window.location.href = `mailto:?subject=My EC.reDucerr Sustainability Report&body=Check out my device usage sustainability report!` } return (

Your Sustainability Dashboard

Track your device usage and get personalized recommendations to reduce energy consumption.

{usageData && (

)}
{activeTab === "input" && } {activeTab === "overview" && usageData && (
Daily Screen Time
{usageData.screenTime.daily} hours

{usageData.screenTime.daily > usageData.screenTime.baseline ? `${((usageData.screenTime.daily / usageData.screenTime.baseline - 1) * 100).toFixed(0)}% above` : `${((1 - usageData.screenTime.daily / usageData.screenTime.baseline) * 100).toFixed(0)}% below`}{" "} recommended

Energy Consumption
{usageData.energyConsumption.daily} kWh

{usageData.energyConsumption.daily > usageData.energyConsumption.baseline ? `${((usageData.energyConsumption.daily / usageData.energyConsumption.baseline - 1) * 100).toFixed(0)}% above` : `${((1 - usageData.energyConsumption.daily / usageData.energyConsumption.baseline) * 100).toFixed(0)}% below`}{" "} average

Weekly Usage
{usageData.screenTime.weekly} hours

{usageData.screenTime.weekly > usageData.screenTime.baseline * 7 ? `${((usageData.screenTime.weekly / (usageData.screenTime.baseline * 7) - 1) * 100).toFixed(0)}% above` : `${((1 - usageData.screenTime.weekly / (usageData.screenTime.baseline * 7)) * 100).toFixed(0)}% below`}{" "} recommended

Sustainability Score
{usageData.sustainabilityScore}/100

{usageData.sustainabilityScore >= 80 ? "Excellent" : usageData.sustainabilityScore >= 60 ? "Good" : usageData.sustainabilityScore >= 40 ? "Average" : "Needs improvement"}

App Usage Breakdown Time spent on different app categories Usage by Time of Day When you use your device most
)} {activeTab === "recommendations" && usageData && }
) } [V0_FILE]typescriptreact:file="components/recommendations-list.tsx" isEdit="true" isQuickEdit="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" type Recommendation = { title: string description: string impact: "low" | "medium" | "high" } type RecommendationsListProps = { recommendations: Recommendation[] } export function RecommendationsList({ recommendations }: RecommendationsListProps) { return (
{recommendations.map((recommendation, index) => (
{recommendation.title} {recommendation.impact} impact
{recommendation.description}
Implementing this recommendation could help reduce your energy consumption and improve your sustainability score.
))}
) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import { MobileNav } from "@/components/mobile-nav" import { Dashboard } from "@/components/dashboard" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isQuickEdit="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } // Mock data for the dashboard export const mockUsageData = { screenTime: { daily: 5.2, // hours weekly: 36.4, // hours monthly: 156, // hours baseline: 4, // hours (recommended daily limit) }, energyConsumption: { daily: 0.8, // kWh weekly: 5.6, // kWh monthly: 24, // kWh baseline: 0.6, // kWh (average daily consumption) }, appUsage: [ { name: "Social Media", time: 2.5, percentage: 48 }, { name: "Productivity", time: 1.2, percentage: 23 }, { name: "Entertainment", time: 1.0, percentage: 19 }, { name: "Other", time: 0.5, percentage: 10 }, ], timeOfDay: [ { time: "Morning", percentage: 15 }, { time: "Afternoon", percentage: 30 }, { time: "Evening", percentage: 40 }, { time: "Night", percentage: 15 }, ], sustainabilityScore: 68, // out of 100 } // Recommendations based on usage patterns export const recommendations = [ { title: "Reduce Screen Brightness", description: "Lowering your screen brightness by 30% can save up to 15% of battery power.", impact: "high", }, { title: "Set App Time Limits", description: "Configure time limits for social media apps to reduce overall screen time.", impact: "high", }, { title: "Enable Dark Mode", description: "Using dark mode can reduce power consumption on OLED screens by up to 30%.", impact: "medium", }, { title: "Schedule Digital Detox", description: "Set aside 2 hours each day as a 'no-screen' period to reduce overall usage.", impact: "high", }, { title: "Use Wi-Fi Instead of Mobile Data", description: "Wi-Fi consumes less battery than cellular data connections.", impact: "medium", }, { title: "Optimize Night Usage", description: "Reduce late-night device usage to improve sleep quality and save energy.", impact: "high", }, { title: "Uninstall Unused Apps", description: "Remove apps you rarely use to reduce background processes and save battery.", impact: "low", }, { title: "Use Battery Saver Mode", description: "Enable battery saver mode when your battery is below 50% to extend usage time.", impact: "medium", }, { title: "Disable Unnecessary Notifications", description: "Turn off notifications for non-essential apps to reduce screen wake-ups.", impact: "medium", }, { title: "Adjust Auto-Lock Time", description: "Set your screen to lock after 30 seconds of inactivity to save power.", impact: "low", }, ]

About

About