From ad7ef21029daf9668782f3dd5d65666d14ec064a Mon Sep 17 00:00:00 2001
From: Jen Breese-Kauth <jbreese@stanford.edu>
Date: Mon, 4 May 2026 13:54:38 -0700
Subject: [PATCH 1/4] IFDM-145: Initial commit

---
 .../present-value-calculator-v2/page.tsx      | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/interactives/present-value-calculator-v2/page.tsx b/app/interactives/present-value-calculator-v2/page.tsx
index c126665..2b7d3b0 100644
--- a/app/interactives/present-value-calculator-v2/page.tsx
+++ b/app/interactives/present-value-calculator-v2/page.tsx
@@ -96,8 +96,8 @@ export default function PresentValueCalculator() {
 
         <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
           <TabsList className="grid w-full grid-cols-2 mb-8 p-0">
-            <TabsTrigger value="single">Single Amount</TabsTrigger>
-            <TabsTrigger value="series">Payment Series</TabsTrigger>
+            <TabsTrigger value="single">Single amount</TabsTrigger>
+            <TabsTrigger value="series">Payment series</TabsTrigger>
           </TabsList>
 
           {/* Single Amount Tab */}
@@ -105,8 +105,9 @@ export default function PresentValueCalculator() {
             <div className="flex flex-col md:flex-row flex-grow space-between gap-5">
               <div className="w-full md:w-1/2 space-y-6 bg-transparent">
                 {/* Future Value Input */}
+                <p>Enter a future value to calculate what it is worth today.</p>
                 <div className="space-y-2">
-                  <Label htmlFor="future-value" className="text-sm font-medium text-foreground">
+                  <Label htmlFor="future-value" className="block font-semibold text-foreground mb-2">
                     Future value
                   </Label>
                   <Input
@@ -137,8 +138,8 @@ export default function PresentValueCalculator() {
 
                 {/* Time Period Input */}
                 <div className="space-y-2">
-                  <Label htmlFor="time-period" className="text-sm font-medium text-foreground">
-                    Number of payments (10 years)
+                  <Label htmlFor="time-period" className="block font-semibold text-foreground mb-2">
+                    Number of compounding periods
                   </Label>
                   <Input
                     id="time-period"
@@ -150,11 +151,12 @@ export default function PresentValueCalculator() {
                     step={1}
                     className="bg-white border-1 w-full rounded-md shadow-sm py-2 px-3"
                   />
+                  <p>10 quarterly periods = 2 years and 6 months.</p>
                 </div>
 
                 {/* Compounding Frequency */}
                 <div className="space-y-2">
-                  <Label className="text-sm font-medium text-foreground">Compounding frequency</Label>
+                  <Label className="block font-semibold text-foreground mb-2">Compounding frequency</Label>
                   <Select
                     value={compoundingFrequency}
                     onValueChange={(value) => setCompoundingFrequency(value as CompoundingFrequency)}
@@ -224,8 +226,9 @@ export default function PresentValueCalculator() {
 
               <div className="bg-transparent w-full md:w-1/2 space-y-6">                
                 {/* Payment Amount Input */}
+                <p>Enter a payment amount and number of payments to calculate their value today.</p>
                 <div className="space-y-2">
-                  <Label htmlFor="payment-amount" className="text-sm font-medium text-foreground">
+                  <Label htmlFor="payment-amount" className="block font-semibold text-foreground mb-2">
                     Payment amount ($)
                   </Label>
                   <Input
@@ -239,7 +242,7 @@ export default function PresentValueCalculator() {
 
                 {/* Interest Rate Input */}
                 <div className="space-y-2">
-                  <Label htmlFor="payment-interest-rate" className="text-sm font-medium text-foreground">
+                  <Label htmlFor="payment-interest-rate" className="block font-semibold text-foreground mb-2">
                     Annual interest rate 
                   </Label>
                   <Input
@@ -256,7 +259,7 @@ export default function PresentValueCalculator() {
 
                 {/* Number of Payments Input */}
                 <div className="space-y-2">
-                  <Label htmlFor="number-of-payments" className="text-sm font-medium text-foreground">
+                  <Label htmlFor="number-of-payments" className="block font-semibold text-foreground mb-2">
                     Number of payments
                   </Label>
                   <Input
@@ -273,7 +276,7 @@ export default function PresentValueCalculator() {
 
                 {/* Payment Frequency */}
                 <div className="space-y-2">
-                  <Label className="text-sm font-medium text-foreground">Payment frequency</Label>
+                  <Label className="block font-semibold text-foreground mb-2">Compounding frequency</Label>
                   <Select
                     value={paymentFrequency}
                     onValueChange={(value) => setPaymentFrequency(value as CompoundingFrequency)}

From 4418260721f899c54e1111f6397e4182f0aaa3dc Mon Sep 17 00:00:00 2001
From: Jen Breese-Kauth <jbreese@stanford.edu>
Date: Mon, 4 May 2026 14:01:16 -0700
Subject: [PATCH 2/4] stashing

---
 app/interactives/present-value-calculator-v2/page.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/interactives/present-value-calculator-v2/page.tsx b/app/interactives/present-value-calculator-v2/page.tsx
index 2b7d3b0..8e8cdea 100644
--- a/app/interactives/present-value-calculator-v2/page.tsx
+++ b/app/interactives/present-value-calculator-v2/page.tsx
@@ -151,7 +151,9 @@ export default function PresentValueCalculator() {
                     step={1}
                     className="bg-white border-1 w-full rounded-md shadow-sm py-2 px-3"
                   />
-                  <p>10 quarterly periods = 2 years and 6 months.</p>
+                  <p className="text-sm text-foreground mt-2">
+                  {totalPeriods > 0 && `${totalPeriods} ${frequencyMap[compoundingFrequency].label.toLowerCase()} periods = ${timePeriod} year${timePeriod === 1 ? '' : 's'}`}
+                </p>
                 </div>
 
                 {/* Compounding Frequency */}

From 62865b30c35b803c746aba9d3af66ebb4467fefe Mon Sep 17 00:00:00 2001
From: Jen Breese-Kauth <jbreese@stanford.edu>
Date: Mon, 4 May 2026 15:45:11 -0700
Subject: [PATCH 3/4] IFDM-145: Progress on list of issues

---
 .../present-value-calculator-v2/page.tsx      | 165 ++++++++++++------
 1 file changed, 107 insertions(+), 58 deletions(-)

diff --git a/app/interactives/present-value-calculator-v2/page.tsx b/app/interactives/present-value-calculator-v2/page.tsx
index 8e8cdea..c95bdc2 100644
--- a/app/interactives/present-value-calculator-v2/page.tsx
+++ b/app/interactives/present-value-calculator-v2/page.tsx
@@ -24,17 +24,40 @@ const frequencyMap: Record<CompoundingFrequency, { periods: number; label: strin
   daily: { periods: 365, label: "Daily" },
 }
 
+function formatTimePeriod(totalPeriods: number, periodsPerYear: number): string {
+  const totalYears = totalPeriods / periodsPerYear
+  const years = Math.floor(totalYears)
+  const remainingPeriods = totalPeriods - (years * periodsPerYear)
+  const months = Math.round((remainingPeriods / periodsPerYear) * 12)
+
+  if (years === 0 && months === 0) return "0 months"
+  if (years === 0) {
+    return months === 1 ? "1 month" : `${months} months`
+  }
+  if (months === 0) {
+    return years === 1 ? "1 year" : `${years} years`
+  }
+  
+  const yearText = years === 1 ? "1 year" : `${years} years`
+  const monthText = months === 1 ? "1 month" : `${months} months`
+  return `${yearText} and ${monthText}`
+}
+
+function formatNumber(value: number): string {
+  return Math.round(value).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+}
+
 export default function PresentValueCalculator() {
   const [activeTab, setActiveTab] = useState("single")
   
   // Single Amount State
-  const [futureValue, setFutureValue] = useState(10000)
+  const [futureValue, setFutureValue] = useState(0)
   const [interestRate, setInterestRate] = useState(5)
   const [timePeriod, setTimePeriod] = useState(10)
   const [compoundingFrequency, setCompoundingFrequency] = useState<CompoundingFrequency>("annually")
 
   // Payment Series State
-  const [paymentAmount, setPaymentAmount] = useState(1000)
+  const [paymentAmount, setPaymentAmount] = useState(0)
   const [paymentInterestRate, setPaymentInterestRate] = useState(5)
   const [numberOfPayments, setNumberOfPayments] = useState(10)
   const [paymentFrequency, setPaymentFrequency] = useState<CompoundingFrequency>("annually")
@@ -42,10 +65,10 @@ export default function PresentValueCalculator() {
   const singleCalculations = useMemo(() => {
     const rate = interestRate / 100
     const n = frequencyMap[compoundingFrequency].periods
-    const totalPeriods = n * timePeriod
+    const totalPeriods = timePeriod // CHANGED: use input directly as total periods
     const periodRate = rate / n
     const presentValue = futureValue / Math.pow(1 + periodRate, totalPeriods)
-    const discountAmount =  futureValue - presentValue
+    const discountAmount = futureValue - presentValue
 
     return {
       presentValue,
@@ -68,7 +91,7 @@ export default function PresentValueCalculator() {
     }
     
     const totalPayments = paymentAmount * numberOfPayments
-    const discountAmount = totalPayments -presentValue
+    const discountAmount = totalPayments - presentValue
 
     return {
       presentValue,
@@ -106,34 +129,49 @@ export default function PresentValueCalculator() {
               <div className="w-full md:w-1/2 space-y-6 bg-transparent">
                 {/* Future Value Input */}
                 <p>Enter a future value to calculate what it is worth today.</p>
+                {/* Future Value Input */}
                 <div className="space-y-2">
                   <Label htmlFor="future-value" className="block font-semibold text-foreground mb-2">
                     Future value
                   </Label>
-                  <Input
-                    id="future-value"
-                    type="number"
-                    value={futureValue === 0 ? "" : futureValue}
-                    onChange={(e) => setFutureValue(e.target.value === "" ? 0 : Number(e.target.value))}
-                    className="bg-white border-1 w-full rounded-md shadow-sm py-2 px-3"
-                  />
+                  <div className="relative">
+                    {futureValue > 0 && (
+                      <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
+                        $
+                      </span>
+                    )}
+                    <Input
+                      id="future-value"
+                      type="number"
+                      value={futureValue === 0 ? "" : futureValue}
+                      onChange={(e) => setFutureValue(e.target.value === "" ? 0 : Number(e.target.value))}
+                      className={`bg-white border-1 w-full rounded-md shadow-sm py-2 px-3 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ${
+                        futureValue > 0 ? "pl-7" : ""
+                      }`}
+                    />
+                  </div>
                 </div>
 
                 {/* Interest Rate Input */}
                 <div className="space-y-2">
-                  <Label htmlFor="interest-rate" className="text-sm font-medium text-foreground">
-                    Annual interest rate (%)
-                  </Label>
-                  <Input
-                    id="interest-rate"
-                    type="number"
-                    value={interestRate === 0 ? "" : interestRate}
-                    onChange={(e) => setInterestRate(e.target.value === "" ? 0 : Number(e.target.value))}
-                    min={0}
-                    max={100}
-                    step={0.1}
-                    className="bg-white border-1 w-full rounded-md shadow-sm py-2 px-3"
-                  />
+                  <div className="relative">
+                    <Label htmlFor="interest-rate" className="text-sm font-medium text-foreground">
+                      Annual interest rate (%)
+                    </Label>
+                    <Input
+                      id="interest-rate"
+                      type="number"
+                      value={interestRate === 0 ? "" : interestRate}
+                      onChange={(e) => setInterestRate(e.target.value === "" ? 0 : Number(e.target.value))}
+                      min={0}
+                      max={100}
+                      step={0.1}
+                      className="w-full pl-4 pr-16 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                    <span className="absolute right-4 top-[2.8em] -translate-y-1/2 text-gray-500 pointer-events-none">
+                      %
+                    </span>
+                  </div>
                 </div>
 
                 {/* Time Period Input */}
@@ -147,12 +185,14 @@ export default function PresentValueCalculator() {
                     value={timePeriod === 0 ? "" : timePeriod}
                     onChange={(e) => setTimePeriod(e.target.value === "" ? 0 : Number(e.target.value))}
                     min={1}
-                    max={100}
+                    max={1000}
                     step={1}
-                    className="bg-white border-1 w-full rounded-md shadow-sm py-2 px-3"
+                    className="bg-white border-1 w-full rounded-md shadow-sm py-2 px-3 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                   />
                   <p className="text-sm text-foreground mt-2">
-                  {totalPeriods > 0 && `${totalPeriods} ${frequencyMap[compoundingFrequency].label.toLowerCase()} periods = ${timePeriod} year${timePeriod === 1 ? '' : 's'}`}
+
+                    {timePeriod > 0 && `${formatNumber(timePeriod)} ${frequencyMap[compoundingFrequency].label.toLowerCase()} period${timePeriod !== 1 ? 's' : ''} = ${formatTimePeriod(timePeriod, frequencyMap[compoundingFrequency].periods)}`}
+
                 </p>
                 </div>
 
@@ -179,11 +219,9 @@ export default function PresentValueCalculator() {
 
               {/* Results Section */}
               <div className="w-full md:w-1/2 bg-[var(--card-background)] rounded-3xl p-[32px]">
-                <h2 className="text-[var(--text-navy)] text-[22px] font-bold">Results</h2>
-
                 {/* Main Present Value Display */}
-                <p className="text-sm  my-2">Present Value</p>
-                <p className="text-3xl font-bold text-lagunita mb-5">
+                <h2 className="text-[var(--text-navy)] text-center text-[22px] font-bold">Present value today</h2>
+                <p className="text-3xl font-bold text-lagunita mb-5 text-center">
                   {formatCurrency(singleCalculations.presentValue)}
                 </p>
 
@@ -216,7 +254,7 @@ export default function PresentValueCalculator() {
                 </div>
 
                 <p className="text-sm mt-4 text-center md:text-left">
-                  Compounded {frequencyMap[compoundingFrequency].label.toLowerCase()} over {timePeriod} years
+                  {timePeriod} {frequencyMap[compoundingFrequency].label.toLowerCase()} periods = {formatTimePeriod(timePeriod, frequencyMap[compoundingFrequency].periods)}
                 </p>
               </div>
             </div>
@@ -228,18 +266,27 @@ export default function PresentValueCalculator() {
 
               <div className="bg-transparent w-full md:w-1/2 space-y-6">                
                 {/* Payment Amount Input */}
-                <p>Enter a payment amount and number of payments to calculate their value today.</p>
+                <p>Find what a series of payments is worth today. Enter a payment amount and number of payments to calculate the present value.</p>
                 <div className="space-y-2">
                   <Label htmlFor="payment-amount" className="block font-semibold text-foreground mb-2">
                     Payment amount ($)
                   </Label>
-                  <Input
-                    id="payment-amount"
-                    type="number"
-                    value={paymentAmount === 0 ? "" : paymentAmount}
-                    onChange={(e) => setPaymentAmount(e.target.value === "" ? 0 : Number(e.target.value))}
-                    className="bg-white border-1 w-full rounded-md shadow-sm py-2 px-3"
-                  />
+                  <div className="relative">
+                    {paymentAmount > 0 && (
+                      <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
+                        $
+                      </span>
+                    )}
+                    <Input
+                      id="payment-amount"
+                      type="number"
+                      value={paymentAmount === 0 ? "" : paymentAmount}
+                      onChange={(e) => setPaymentAmount(e.target.value === "" ? 0 : Number(e.target.value))}
+                      className={`bg-white border-1 w-full rounded-md shadow-sm py-2 px-3 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ${
+                        paymentAmount > 0 ? "pl-7" : ""
+                      }`}
+                    />
+                  </div>
                 </div>
 
                 {/* Interest Rate Input */}
@@ -247,16 +294,21 @@ export default function PresentValueCalculator() {
                   <Label htmlFor="payment-interest-rate" className="block font-semibold text-foreground mb-2">
                     Annual interest rate 
                   </Label>
-                  <Input
-                    id="payment-interest-rate"
-                    type="number"
-                    value={paymentInterestRate === 0 ? "" : paymentInterestRate}
-                    onChange={(e) => setPaymentInterestRate(e.target.value === "" ? 0 : Number(e.target.value))}
-                    min={0}
-                    max={100}
-                    step={0.1}
-                    className="bg-white border-1 w-full rounded-md shadow-sm py-2 px-3"
-                  />
+                  <div className="relative">
+                    <Input
+                      id="payment-interest-rate"
+                      type="number"
+                      value={paymentInterestRate === 0 ? "" : paymentInterestRate}
+                      onChange={(e) => setPaymentInterestRate(e.target.value === "" ? 0 : Number(e.target.value))}
+                      min={0}
+                      max={100}
+                      step={0.1}
+                      className="bg-white border-1 w-full rounded-md shadow-sm py-2 px-3 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                    <span className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none">
+                      %
+                    </span>
+                  </div>
                 </div>
 
                 {/* Number of Payments Input */}
@@ -272,7 +324,7 @@ export default function PresentValueCalculator() {
                     min={1}
                     max={1000}
                     step={1}
-                    className="bg-white border-1 w-full rounded-md shadow-sm py-2 px-3"
+                    className="bg-white border-1 w-full rounded-md shadow-sm py-2 px-3 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                   />
                 </div>
 
@@ -299,11 +351,8 @@ export default function PresentValueCalculator() {
 
               {/* Results Section */}
               <div className="w-full md:w-1/2 bg-[var(--card-background)] rounded-3xl p-[32px]">
-                <h2 className="text-[var(--text-navy)] text-[22px] font-bold">Results</h2>
-                
-                {/* Main Present Value Display */}
-                <p className="text-sm  my-2">Present Value</p>
-                <p className="text-3xl font-bold text-lagunita mb-5">
+              <h2 className="text-[var(--text-navy)] text-center text-[22px] font-bold">Present value</h2>
+                 <p className="text-3xl font-bold text-lagunita mb-5 text-center">
                   {formatCurrency(paymentCalculations.presentValue)}
                 </p>
 
@@ -351,4 +400,4 @@ export default function PresentValueCalculator() {
     </div>
     </div>
   )
-}
+}
\ No newline at end of file

From 2796f52ef833038b04a3ede14a25feca2950e007 Mon Sep 17 00:00:00 2001
From: Jen Breese-Kauth <jbreese@stanford.edu>
Date: Tue, 5 May 2026 08:45:56 -0700
Subject: [PATCH 4/4] IFDM-145: removing text per ticket

---
 .../present-value-calculator-v2/page.tsx            | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/app/interactives/present-value-calculator-v2/page.tsx b/app/interactives/present-value-calculator-v2/page.tsx
index c95bdc2..e039927 100644
--- a/app/interactives/present-value-calculator-v2/page.tsx
+++ b/app/interactives/present-value-calculator-v2/page.tsx
@@ -14,13 +14,15 @@ import {
 } from "@/app/ui/components/select"
 import ThemeToggle from "@/app/lib/theme-toggle"
 
-type CompoundingFrequency = "annually" | "semi-annually" | "quarterly" | "monthly" | "daily"
+type CompoundingFrequency = "annually" | "semi-annually" | "quarterly" | "monthly" | "biweekly" | "weekly" | "daily"
 
 const frequencyMap: Record<CompoundingFrequency, { periods: number; label: string }> = {
   annually: { periods: 1, label: "Annually" },
   "semi-annually": { periods: 2, label: "Semi-annually" },
   quarterly: { periods: 4, label: "Quarterly" },
   monthly: { periods: 12, label: "Monthly" },
+  biweekly: { periods: 26, label: "Biweekly" },
+  weekly: { periods: 52, label: "Weekly" },
   daily: { periods: 365, label: "Daily" },
 }
 
@@ -220,7 +222,7 @@ export default function PresentValueCalculator() {
               {/* Results Section */}
               <div className="w-full md:w-1/2 bg-[var(--card-background)] rounded-3xl p-[32px]">
                 {/* Main Present Value Display */}
-                <h2 className="text-[var(--text-navy)] text-center text-[22px] font-bold">Present value today</h2>
+                <h2 className="text-[var(--text-navy)] text-center text-[22px] font-bold">Present value</h2>
                 <p className="text-3xl font-bold text-lagunita mb-5 text-center">
                   {formatCurrency(singleCalculations.presentValue)}
                 </p>
@@ -252,10 +254,6 @@ export default function PresentValueCalculator() {
                     </div>
                   </div>
                 </div>
-
-                <p className="text-sm mt-4 text-center md:text-left">
-                  {timePeriod} {frequencyMap[compoundingFrequency].label.toLowerCase()} periods = {formatTimePeriod(timePeriod, frequencyMap[compoundingFrequency].periods)}
-                </p>
               </div>
             </div>
           </TabsContent>
@@ -389,9 +387,6 @@ export default function PresentValueCalculator() {
                     </div>
                   </div>
                 </div>
-                <p className="text-sm mt-4 text-center md:text-left">
-                  {numberOfPayments} payments made {frequencyMap[paymentFrequency].label.toLowerCase()}
-                </p>
               </div>
             </div>
           </TabsContent>