'use client' import { useState, useEffect } from 'react' import { Card, CardContent, CardFooter, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Leaf, Droplets, Package, CircleDollarSign, Trash2, Globe, TreesIcon as Tree, Download, Share2, Mail, X, Code } from 'lucide-react' import { Progress } from "@/components/ui/progress" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { jsPDF } from "jspdf" import 'jspdf-autotable' import { Checkbox } from "@/components/ui/checkbox" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function SustainabilityCalculator() { const [monthlyConsumption, setMonthlyConsumption] = useState(100) const [customInput, setCustomInput] = useState('') const [targetSavings, setTargetSavings] = useState('') const [calculatedSheets, setCalculatedSheets] = useState(0) const [websiteUrl, setWebsiteUrl] = useState('') const [websiteAnalysis, setWebsiteAnalysis] = useState(null) const [averageConsumption, setAverageConsumption] = useState(0) const [plasticWaste, setPlasticWaste] = useState(0) const [isHighScore, setIsHighScore] = useState(false) const [historicalData, setHistoricalData] = useState([]) const [selectedHistoricalData, setSelectedHistoricalData] = useState([]) const [isAnalyzing, setIsAnalyzing] = useState(false) const [analyzeError, setAnalyzeError] = useState(null) const [embedWidth, setEmbedWidth] = useState('100%') const [embedHeight, setEmbedHeight] = useState('600') const [embedTheme, setEmbedTheme] = useState('light') // Sustainability metrics (example values, adjust as needed) const packagingSavedPerSheet = 0.005 const carbonSavedPerSheet = 0.01 const waterSavedPerSheet = 10 const costSavingsPerSheet = 0.02 const plasticWastePerSheet = 0.1 useEffect(() => { if (customInput !== '') { setMonthlyConsumption(Number(customInput)) } }, [customInput]) useEffect(() => { if (targetSavings !== '') { setCalculatedSheets(Math.ceil(Number(targetSavings) / costSavingsPerSheet)) } }, [targetSavings]) useEffect(() => { setPlasticWaste(monthlyConsumption * plasticWastePerSheet) }, [monthlyConsumption]) const packagingSaved = monthlyConsumption * packagingSavedPerSheet const carbonSaved = monthlyConsumption * carbonSavedPerSheet const waterSaved = monthlyConsumption * waterSavedPerSheet const totalSavings = monthlyConsumption * costSavingsPerSheet const analyzeWebsite = async () => { setIsAnalyzing(true) setAnalyzeError(null) try { // Simulating an API call with mock data await new Promise(resolve => setTimeout(resolve, 1500)) // Simulate network delay const mockData = { bytes: Math.floor(Math.random() * 5000000) + 1000000, forms: Math.floor(Math.random() * 5), score: Math.floor(Math.random() * 100), words: Math.floor(Math.random() * 10000) + 1000, hosting: ['AWS', 'Google Cloud', 'DigitalOcean', 'Heroku'][Math.floor(Math.random() * 4)], green_hosting: Math.random() > 0.5, co2: (Math.random() * 2).toFixed(2) } const analysis = { pagesA4: Math.round(mockData.bytes / 3000), forms: mockData.forms, digitalAlternatives: Math.round(mockData.score / 20), contentQuantity: mockData.words, sustainabilitySolutions: Math.round(mockData.score / 25), hostingProvider: mockData.hosting, hostingSustainabilityScore: mockData.green_hosting ? 80 : 40, carbonFootprint: mockData.co2, overallScore: mockData.score, alternativesExplanation: getDigitalAlternativesExplanation(mockData.score) } setWebsiteAnalysis(analysis) const score = calculateScore(analysis) setIsHighScore(score > 80) } catch (error) { console.error('Error analyzing website:', error) setAnalyzeError('Failed to analyze website. Please try again.') } finally { setIsAnalyzing(false) } } const getDigitalAlternativesExplanation = (score) => { const alternatives = [] if (score > 80) alternatives.push('Efficient content delivery networks') if (score > 60) alternatives.push('Optimized image compression') if (score > 40) alternatives.push('Minimized JavaScript usage') if (score > 20) alternatives.push('Responsive design for mobile devices') return alternatives.join(', ') } const calculateScore = (analysis) => { if (!analysis) return 0 return analysis.overallScore || 0 } const getScoreColor = (score) => { if (score < 33) return 'bg-red-500' if (score < 66) return 'bg-orange-500' return 'bg-green-500' } const exportToPDF = () => { const doc = new jsPDF() // Add header doc.setFontSize(24) doc.setTextColor(76, 175, 80) // Green color doc.text('PrintLess EcoMetrix', 20, 20) doc.setFontSize(16) doc.setTextColor(0, 0, 0) // Black color doc.text('Sustainability Report', 20, 30) // Add website analysis results doc.setFontSize(14) doc.setTextColor(63, 81, 181) // Indigo color doc.text('Website Analysis Results', 20, 45) const tableData = [ ['Metric', 'Value'], ['Equivalent A4 Pages', websiteAnalysis.pagesA4], ['Forms Found', websiteAnalysis.forms], ['Digital Alternatives', websiteAnalysis.digitalAlternatives], ['Content Quantity', `${websiteAnalysis.contentQuantity} words`], ['Sustainability Solutions', websiteAnalysis.sustainabilitySolutions], ['Hosting Provider', websiteAnalysis.hostingProvider], ['Hosting Sustainability Score', `${websiteAnalysis.hostingSustainabilityScore}/100`], ['Carbon Footprint', `${websiteAnalysis.carbonFootprint} g CO2`], ] doc.autoTable({ startY: 50, head: [tableData[0]], body: tableData.slice(1), theme: 'grid', styles: { fontSize: 10, cellPadding: 2 }, headStyles: { fillColor: [76, 175, 80], textColor: 255 }, }) // Add sustainability score const score = calculateScore(websiteAnalysis) doc.setFontSize(14) doc.setTextColor(63, 81, 181) // Indigo color doc.text(`Sustainability Score: ${score.toFixed(2)}%`, 20, doc.lastAutoTable.finalY + 20) // Add icons and metrics const icons = [Package, Leaf, Droplets, CircleDollarSign, Trash2, Globe] const metrics = [ { title: 'Packaging Saved', value: `${packagingSaved.toFixed(2)} grams` }, { title: 'Carbon Reduced', value: `${carbonSaved.toFixed(2)} kg CO₂` }, { title: 'Water Saved', value: `${waterSaved.toFixed(2)} liters` }, { title: 'Cost Savings', value: `$${totalSavings.toFixed(2)}` }, { title: 'Plastic Waste Reduced', value: `${plasticWaste.toFixed(2)} grams` }, { title: 'Digital Alternatives', value: websiteAnalysis.alternativesExplanation }, ] let yOffset = doc.lastAutoTable.finalY + 30 metrics.forEach((metric, index) => { const icon = icons[index] doc.addImage(icon, 'PNG', 20, yOffset, 8, 8) doc.setFontSize(12) doc.setTextColor(0, 0, 0) // Black color doc.text(metric.title, 32, yOffset + 4) doc.setFontSize(10) doc.setTextColor(100, 100, 100) // Gray color doc.text(metric.value, 32, yOffset + 12) yOffset += 20 }) // Add summary report doc.setFontSize(14) doc.setTextColor(63, 81, 181) // Indigo color doc.text('Summary Report', 20, yOffset + 20) doc.setFontSize(10) doc.setTextColor(0, 0, 0) // Black color const summary = `Your website ${websiteUrl} has achieved a sustainability score of ${score.toFixed(2)}%. ` + `This ${score > 66 ? 'excellent' : score > 33 ? 'good' : 'needs improvement'} score indicates that ` + `your website is ${score > 66 ? 'well-optimized' : score > 33 ? 'moderately optimized' : 'not well-optimized'} for sustainability. ` + `Key areas for improvement include ${websiteAnalysis.alternativesExplanation.toLowerCase()}. ` + `By implementing these changes, you can significantly reduce your website's environmental impact and improve its performance.` const splitSummary = doc.splitTextToSize(summary, 170) doc.text(splitSummary, 20, yOffset + 30) // Add footer doc.setFontSize(8) doc.setTextColor(100, 100, 100) // Gray color doc.text('Powered by PrintLess EcoMetrix - https://myherb.co.il', 20, 285) doc.save('sustainability-report.pdf') } const shareResults = () => { const text = `Check out my website's sustainability score: ${calculateScore(websiteAnalysis).toFixed(2)}%!` const url = `https://printless-ecometrix.com/share?url=${encodeURIComponent(websiteUrl)}&score=${calculateScore(websiteAnalysis)}` const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}&title=${encodeURIComponent(text)}&summary=${encodeURIComponent(getShareSummary())}` window.open(linkedInUrl, '_blank') saveCurrentData() } const getShareSummary = () => { return ` Website: ${websiteUrl} Sustainability Score: ${calculateScore(websiteAnalysis).toFixed(2)}% Packaging Saved: ${packagingSaved.toFixed(2)} grams Carbon Reduced: ${carbonSaved.toFixed(2)} kg CO₂ Water Saved: ${waterSaved.toFixed(2)} liters Cost Savings: $${totalSavings.toFixed(2)} Plastic Waste Reduced: ${plasticWaste.toFixed(2)} grams Digital Alternatives: ${websiteAnalysis.alternativesExplanation} ` } const sendEmail = () => { const subject = 'Website Sustainability Analysis Results' const body = getShareSummary() window.location.href = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}` } const saveCurrentData = () => { const newData = { date: new Date().toISOString(), websiteUrl, consumption: monthlyConsumption, savings: totalSavings, plasticWaste, sustainabilityScore: calculateScore(websiteAnalysis) } setHistoricalData(prev => [...prev, newData]) } const removeHistoricalData = (index) => { setHistoricalData(prev => prev.filter((_, i) => i !== index)) } const removeSelectedHistoricalData = () => { setHistoricalData(prev => prev.filter((_, i) => !selectedHistoricalData.includes(i))) setSelectedHistoricalData([]) } const exportHistoricalData = () => { const doc = new jsPDF() doc.setFontSize(20) doc.text('Historical Sustainability Data', 20, 20) const tableData = historicalData.map(data => [ new Date(data.date).toLocaleDateString(), data.websiteUrl, data.consumption, `$${data.savings.toFixed(2)}`, `${data.plasticWaste.toFixed(2)} g`, `${data.sustainabilityScore.toFixed(2)}%` ]) doc.autoTable({ startY: 30, head: [['Date', 'Website', 'Consumption (sheets)', 'Savings', 'Plastic Waste', 'Sustainability Score']], body: tableData, }) doc.setFontSize(10) doc.text('Powered by PrintLess EcoMetrix - https://myherb.co.il', 20, 280) doc.save('historical-sustainability-data.pdf') } const getEmbedCode = () => { const currentUrl = typeof window !== 'undefined' ? window.location.origin : 'https://example.com' const embedUrl = new URL(`${currentUrl}/embed`) embedUrl.searchParams.append('theme', embedTheme) return `

` } return ( PrintLess EcoMetrix Comprehensive Sustainability Calculator Calculate by Sheets Calculate by Savings Analyze Website

Monthly Paper Consumption (A4 sheets)

{ setMonthlyConsumption(value[0]) setCustomInput(value[0].toString()) }} className="flex-grow" /> setCustomInput(e.target.value)} className="w-20" />

{monthlyConsumption} A4 sheets

Target Cost Savings ($)

setTargetSavings(e.target.value)} className="flex-grow" />

{calculatedSheets} A4 sheets required to save ${targetSavings}

Website URL

setWebsiteUrl(e.target.value)} className="flex-grow" placeholder="https://example.com" />

{analyzeError && (

{analyzeError}

)}

{websiteAnalysis && (

Website Analysis Results

Sustainability Score

{calculateScore(websiteAnalysis).toFixed(2)}%

{calculateScore(websiteAnalysis) < 33 ? 'Needs Improvement' : calculateScore(websiteAnalysis) < 66 ? 'Good' : 'Excellent'}

Metric Value Equivalent A4 Pages {websiteAnalysis.pagesA4} Forms Found {websiteAnalysis.forms} Digital Alternatives {websiteAnalysis.digitalAlternatives} Content Quantity {websiteAnalysis.contentQuantity} words

Metric Value Sustainability Solutions {websiteAnalysis.sustainabilitySolutions} Hosting Provider {websiteAnalysis.hostingProvider} Hosting Sustainability Score {websiteAnalysis.hostingSustainabilityScore}/100 Carbon Footprint {websiteAnalysis.carbonFootprint} g CO2

Digital Alternatives

{websiteAnalysis.alternativesExplanation}

{isHighScore && (

Congratulations on your excellent sustainability score!

)}

} title="Packaging Saved" value={packagingSaved.toFixed(2)} unit="grams" comparison={packagingSaved - (averageConsumption * packagingSavedPerSheet)} />

} title="Carbon Reduced" value={carbonSaved.toFixed(2)} unit="kg CO₂" comparison={carbonSaved - (averageConsumption * carbonSavedPerSheet)} />

} title="Water Saved" value={waterSaved.toFixed(2)} unit="liters" comparison={waterSaved - (averageConsumption * waterSavedPerSheet)} />

} title="Cost Savings" value={totalSavings.toFixed(2)} unit="$" comparison={totalSavings - (averageConsumption * costSavingsPerSheet)} />

} title="Plastic Waste Reduced" value={plasticWaste.toFixed(2)} unit="grams" comparison={plasticWaste - (averageConsumption * plasticWastePerSheet)} />

} title="Digital Alternatives" value={websiteAnalysis ? websiteAnalysis.digitalAlternatives : '-'} unit="solutions" />

Your Environmental Impact

By reducing paper consumption, you're not only saving money but also contributing to a more sustainable future! Every sheet counts towards a greener planet.

Version Beta v0.19


            
              
                Embed PrintLess EcoMetrix
                
                  Customize and copy the embed code to integrate the PrintLess EcoMetrix calculator on your website or whiteboard.
                
              
              
                
                  
                    Width
                     setEmbedWidth(e.target.value)}
                      placeholder="e.g., 100%, 500px"
                    />
                  
                  
                    Height
                     setEmbedHeight(e.target.value)}
                      placeholder="e.g., 600"
                    />
                  
                  
                    Theme
                    
                  
                  
                
                
                  Preview
                  
                    
                  
                
              
                              {getEmbedCode()}


          
            Powered by myHerb.co.il


  )
}

function SavingsCard({ icon, title, value, unit, comparison }) {
  return (
    
      {icon}
      {title}
      
        {value} {unit}
      
      {comparison !== undefined && (
         0 ? 'text-green-500' : comparison < 0 ? 'text-red-500' : 'text-gray-500'}`}>
          {comparison > 0 ? '+' : ''}{comparison.toFixed(2)} {unit} vs avg
        
      )}
    
  )
}

function HistoricalDataDisplay({ data, onRemove, selectedData, setSelectedData }) {
  return (
    
      Historical Data
      
          
            Select
            Date
            Website
            Consumption (sheets)
            Savings ($)
            Plastic Waste (g)
            Sustainability Score
            Actions
          
        
          {data.map((entry, index) => (
            
              
                 {
                    setSelectedData(
                      checked
                        ? [...selectedData, index]
                        : selectedData.filter((i) => i !== index)
                    )
                  }}
                />
              
              {new Date(entry.date).toLocaleDateString()}
              {entry.websiteUrl}
              {entry.consumption}
              ${entry.savings.toFixed(2)}
              {entry.plasticWaste.toFixed(2)}
              {entry.sustainabilityScore.toFixed(2)}%
              
                
              
            
          ))}
        
        
        
      
    
  )
}

About

About