[V0_FILE]typescriptreact:file="app/page.tsx" import SurveyForm from "@/components/survey-form" export default function Home() { return (

Upstart v0 Enterprise Productivity Survey

) } [V0_FILE]typescriptreact:file="components/survey-form.tsx" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { getQuestions } from "@/lib/questions" import { toast } from "@/components/ui/use-toast" export default function SurveyForm() { const [currentQuestion, setCurrentQuestion] = useState(0) const [answers, setAnswers] = useState({}) const [role, setRole] = useState("") const [questions, setQuestions] = useState(getQuestions("")) const router = useRouter() const handleAnswer = (answer: string | number) => { const newAnswers = { ...answers, [currentQuestion]: answer } setAnswers(newAnswers) if (currentQuestion === 0) { setRole(answer as string) setQuestions(getQuestions(answer as string)) } } const handleSubmit = async () => { // In a real application, you would send this data to your backend console.log("Submitting survey data:", { role, answers }) // Simulating an API call await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Survey submitted successfully", description: "Thank you for your feedback!", }) router.push("/dashboard") } const renderQuestion = () => { const question = questions[currentQuestion] switch (question.type) { case "select": return ( ) case "radio": return ( handleAnswer(value)} value={answers[currentQuestion] as string}> {question.options.map((option, index) => (

{option}

))} ) case "number": return ( handleAnswer(Number(e.target.value))} /> ) case "text": return ( handleAnswer(e.target.value)} /> ) case "textarea": return (

handleAnswer(e.target.value)} />
        )
      default:
        return null
    }
  }

return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle>{questions[currentQuestion].question}</CardTitle>
      </CardHeader>
      <CardContent>{renderQuestion()}</CardContent>
      <CardFooter className="flex justify-between">
        <Button
          variant="outline"
          onClick={() => setCurrentQuestion(Math.max(0, currentQuestion - 1))}
          disabled={currentQuestion === 0}
        >
          Previous
        </Button>
        {currentQuestion === questions.length - 1 ? (
          <Button onClick={handleSubmit}>Submit</Button>
        ) : (
          <Button onClick={() => setCurrentQuestion(currentQuestion + 1)} disabled={!answers[currentQuestion]}>
            Next
          </Button>
        )}
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescript:file="lib/questions.ts"
const commonQuestions = [
  {
    question: "What is your role at Upstart?",
    type: "select",
    options: ["Engineer", "Designer", "Product Manager"],
  },
  {
    question: "How many years of experience do you have in your current role?",
    type: "number",
  },
]

const engineerQuestions = [
  {
    question: "How many hours per week do you spend on code reviews?",
    type: "number",
  },
  {
    question: "On a scale of 1-5, how would you rate the efficiency of your current development workflow?",
    type: "radio",
    options: ["1", "2", "3", "4", "5"],
  },
  {
    question: "How many hours per week do you spend debugging code?",
    type: "number",
  },
  {
    question: "What percentage of your time is spent on writing new features vs. maintaining existing code?",
    type: "number",
  },
  {
    question: "How many hours per week do you estimate v0 could save you in your development tasks?",
    type: "number",
  },
  {
    question:
      "Which specific development tasks do you think v0 could help improve? (e.g., code generation, refactoring, documentation)",
    type: "textarea",
  },
]

const designerQuestions = [
  {
    question: "How many hours per week do you spend on creating design assets?",
    type: "number",
  },
  {
    question:
      "On a scale of 1-5, how would you rate the efficiency of your current design-to-development handoff process?",
    type: "radio",
    options: ["1", "2", "3", "4", "5"],
  },
  {
    question: "How many hours per week do you spend on design revisions based on feedback?",
    type: "number",
  },
  {
    question: "What percentage of your time is spent on creative tasks vs. repetitive design work?",
    type: "number",
  },
  {
    question: "How many hours per week do you estimate v0 could save you in your design tasks?",
    type: "number",
  },
  {
    question:
      "Which specific design tasks do you think v0 could help improve? (e.g., asset creation, prototyping, design system management)",
    type: "textarea",
  },
]

const productManagerQuestions = [
  {
    question: "How many hours per week do you spend on creating and managing product documentation?",
    type: "number",
  },
  {
    question: "On a scale of 1-5, how would you rate the efficiency of your current product development process?",
    type: "radio",
    options: ["1", "2", "3", "4", "5"],
  },
  {
    question:
      "How many hours per week do you spend on coordinating between different teams (design, engineering, stakeholders)?",
    type: "number",
  },
  {
    question: "What percentage of your time is spent on strategic planning vs. day-to-day project management?",
    type: "number",
  },
  {
    question: "How many hours per week do you estimate v0 could save you in your product management tasks?",
    type: "number",
  },
  {
    question:
      "Which specific product management tasks do you think v0 could help improve? (e.g., requirement gathering, user story creation, roadmap planning)",
    type: "textarea",
  },
]

export const getQuestions = (role: string) => {
  switch (role) {
    case "Engineer":
      return [...commonQuestions, ...engineerQuestions]
    case "Designer":
      return [...commonQuestions, ...designerQuestions]
    case "Product Manager":
      return [...commonQuestions, ...productManagerQuestions]
    default:
      return commonQuestions
  }
}

[V0_FILE]typescriptreact:file="components/roi-calculator.tsx"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { calculateROI } from "@/lib/calculate-roi"
import ResultsVisualization from "./results-visualization"

export default function ROICalculator({ answers, role }) {
  const roi = calculateROI(answers, role)

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Estimated ROI for v0 Enterprise - {role}</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-2xl font-bold">{roi.totalROI}%</p>
          <p>Estimated time saved per week: {roi.timeSaved} hours</p>
          <p>Estimated cost savings per year: ${roi.costSavings}</p>
          <p>Productivity improvement: {roi.productivityImprovement}%</p>
        </CardContent>
      </Card>
      <ResultsVisualization data={roi} role={role} />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/results-visualization.tsx"
"use client"

import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip, Legend } from "recharts"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function ResultsVisualization({ data }) {
  const chartData = [
    { name: "Time Saved (hrs/week)", value: data.totalTimeSaved },
    { name: "Cost Savings ($)", value: data.totalCostSavings },
    { name: "Productivity Improvement (%)", value: data.averageProductivityImprovement },
    { name: "High-Value Task (%)", value: data.averageHighValueTaskPercentage },
  ]

return (
    <Card>
      <CardHeader>
        <CardTitle>Aggregate Survey Results</CardTitle>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={chartData}>
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="value" fill="#8884d8" />
          </BarChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx"
"use client"

import type React from "react"

import { Inter } from "next/font/google"
import "./globals.css"
import Navbar from "@/components/navbar"
import { useState } from "react"

const inter = Inter({ subsets: ["latin"] })

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const [userRole, setUserRole] = useState("Engineer")

return (
    <html lang="en">
      <body className={inter.className}>
        <Navbar userRole={userRole} />
        <main className="container mx-auto px-4 py-8">{children}</main>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/navbar.tsx"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"

type NavbarProps = {
  userRole: string
}

export default function Navbar({ userRole }: NavbarProps) {
  const pathname = usePathname()

return (
    <nav className="bg-gray-800 text-white">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center">
            <Link href="/" className="text-xl font-bold">
              Upstart v0 Enterprise ROI
            </Link>
          </div>
          <div className="flex space-x-4">
            <Link
              href="/"
              className={cn(
                "px-3 py-2 rounded-md text-sm font-medium",
                pathname === "/" ? "bg-gray-900" : "hover:bg-gray-700",
              )}
            >
              Survey
            </Link>
            <Link
              href="/dashboard"
              className={cn(
                "px-3 py-2 rounded-md text-sm font-medium",
                userRole === "PoC Lead/Sponsor"
                  ? pathname === "/dashboard"
                    ? "bg-gray-900"
                    : "hover:bg-gray-700"
                  : "opacity-50 cursor-not-allowed",
              )}
              onClick={(e) => {
                if (userRole !== "PoC Lead/Sponsor") {
                  e.preventDefault()
                }
              }}
            >
              Dashboard
            </Link>
          </div>
        </div>
      </div>
    </nav>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx"
import Dashboard from "@/components/dashboard"

export default function DashboardPage() {
  return (
    <div>
      <h1 className="text-3xl font-bold mb-6">v0 Enterprise ROI Dashboard</h1>
      <Dashboard />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import ResultsVisualization from "./results-visualization"
import { calculateAggregateROI } from "@/lib/calculate-roi"

// This would typically come from an API or database
const mockSurveyData = [
  { role: "Engineer", timeSaved: 10, productivityImprovement: 30, highValueTaskPercentage: 70 },
  { role: "Designer", timeSaved: 8, productivityImprovement: 25, highValueTaskPercentage: 65 },
  { role: "Product Manager", timeSaved: 12, productivityImprovement: 35, highValueTaskPercentage: 75 },
  { role: "Engineer", timeSaved: 15, productivityImprovement: 40, highValueTaskPercentage: 80 },
  { role: "Designer", timeSaved: 7, productivityImprovement: 20, highValueTaskPercentage: 60 },
]

export default function Dashboard() {
  const [aggregateData, setAggregateData] = useState(null)

useEffect(() => {
    // In a real application, you would fetch this data from an API
    const data = calculateAggregateROI(mockSurveyData)
    setAggregateData(data)
  }, [])

if (!aggregateData) {
    return <div>Loading...</div>
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Aggregate ROI Estimates</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-2xl font-bold">Total ROI: {aggregateData.totalROI}%</p>
          <p>Based on an annual investment of $250,000 for v0 Enterprise</p>
          <p>Total time saved per week: {aggregateData.totalTimeSaved.toFixed(1)} hours</p>
          <p>Total estimated cost savings per year: ${aggregateData.totalCostSavings.toLocaleString()}</p>
          <p>Average productivity improvement: {aggregateData.averageProductivityImprovement}%</p>
          <p>Net value: ${(aggregateData.totalCostSavings - 250000).toLocaleString()} per year</p>
          <p>Total survey responses: {aggregateData.totalResponses}</p>
        </CardContent>
      </Card>
      <ResultsVisualization data={aggregateData} />
    </div>
  )
}

[V0_FILE]typescriptreact:file="lib/calculate-roi.ts" isQuickEdit="true"
const ANNUAL_INVESTMENT = 250000
const WEEKS_PER_YEAR = 52

export function calculateROI(answers, role) {
  const hourlyRate =
    {
      Engineer: 150,
      Designer: 120,
      "Product Manager": 140,
    }[role] || 100

let timeSaved = 0
  let productivityImprovement = 0

switch (role) {
    case "Engineer":
      timeSaved = (answers[4] || 0) + (answers[5] || 0) // Code review + debugging time
      productivityImprovement = (answers[3] - 1) * 25 // Convert 1-5 scale to 0-100%
      break
    case "Designer":
      timeSaved = (answers[4] || 0) + (answers[5] || 0) // Asset creation + revision time
      productivityImprovement = (answers[3] - 1) * 25 // Convert 1-5 scale to 0-100%
      break
    case "Product Manager":
      timeSaved = (answers[4] || 0) + (answers[5] || 0) // Documentation + coordination time
      productivityImprovement = (answers[3] - 1) * 25 // Convert 1-5 scale to 0-100%
      break
  }

const costSavings = timeSaved * hourlyRate * WEEKS_PER_YEAR
  const totalROI = ((costSavings - ANNUAL_INVESTMENT) / ANNUAL_INVESTMENT) * 100

return {
    timeSaved,
    costSavings,
    totalROI: Math.round(totalROI * 100) / 100, // Round to 2 decimal places
    productivityImprovement,
    highValueTaskPercentage: answers[6] || 0, // Percentage of time spent on high-value tasks
  }
}

export function calculateAggregateROI(surveyData) {
  const totalResponses = surveyData.length
  const roleData = {
    Engineer: { count: 0, timeSaved: 0, productivityImprovement: 0, highValueTaskPercentage: 0 },
    Designer: { count: 0, timeSaved: 0, productivityImprovement: 0, highValueTaskPercentage: 0 },
    "Product Manager": { count: 0, timeSaved: 0, productivityImprovement: 0, highValueTaskPercentage: 0 },
  }

surveyData.forEach((response) => {
    roleData[response.role].count++
    roleData[response.role].timeSaved += response.timeSaved
    roleData[response.role].productivityImprovement += response.productivityImprovement
    roleData[response.role].highValueTaskPercentage += response.highValueTaskPercentage
  })

const hourlyRates = {
    Engineer: 150,
    Designer: 120,
    "Product Manager": 140,
  }

let totalTimeSaved = 0
  let totalCostSavings = 0
  let totalProductivityImprovement = 0
  let totalHighValueTaskPercentage = 0

for (const [role, data] of Object.entries(roleData)) {
    if (data.count > 0) {
      const averageTimeSaved = data.timeSaved / data.count
      totalTimeSaved += averageTimeSaved * data.count
      totalCostSavings += averageTimeSaved * hourlyRates[role] * WEEKS_PER_YEAR * data.count
      totalProductivityImprovement += data.productivityImprovement
      totalHighValueTaskPercentage += data.highValueTaskPercentage
    }
  }

const averageTimeSaved = totalTimeSaved / totalResponses
  const averageProductivityImprovement = totalProductivityImprovement / totalResponses
  const averageHighValueTaskPercentage = totalHighValueTaskPercentage / totalResponses

const totalROI = ((totalCostSavings - ANNUAL_INVESTMENT) / ANNUAL_INVESTMENT) * 100

return {
    totalROI: Math.round(totalROI * 100) / 100,
    totalTimeSaved: Math.round(totalTimeSaved * 10) / 10,
    averageTimeSaved: Math.round(averageTimeSaved * 10) / 10,
    totalCostSavings: Math.round(totalCostSavings),
    averageProductivityImprovement: Math.round(averageProductivityImprovement * 10) / 10,
    averageHighValueTaskPercentage: Math.round(averageHighValueTaskPercentage * 10) / 10,
    totalResponses,
    roleData,
  }
}
</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This