Merge pull request #3 from CSE437s/calculators

Calculators

lumo/src/App.jsx

@@ -1,9 +1,12 @@
+// eslint-disable-next-line no-unused-vars
+import React, { useState, useEffect } from "react";
 import "./index.css";
-import { useState, useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 import { createClient } from "@supabase/supabase-js";
 import { Auth } from "@supabase/auth-ui-react";
 import { ThemeSupa } from "@supabase/auth-ui-shared";
-import Questionnaire from "./components/Questionnaire";
+import Questionnaire from "./components/Questionnaire"; // Choose the correct import based on your app's structure
+import SaveNowVsLater from "./components/SaveNowVsLaterCalc/SaveNowVsLater"; // Keep this component if needed
 
 const supabase = createClient(
   "https://dzmmfskrxgkcjakmhutk.supabase.co",
@@ -27,21 +30,37 @@ export default function App() {
     return () => subscription.unsubscribe();
   }, []);
 
-  if (!session) {
-    return (
-      <div>
-        <div>
-          <h1>Welcome to Article26!</h1>
-          <Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} providers={[]} />
-        </div>
-      </div>
-    );
-  } else {
-    // Render questions once session is established
-    return (
-      <div className="flexbox-signin">
-        <Questionnaire />
+  return (
+    <Router>
+      <div className="app-container">
+        <nav>
+          {/* Conditionally render links based on session state */}
+          {session && (
+            <>
+              <Link to="/">Home</Link>
+              <Link to="/savenowvslater">Save Now vs Later</Link>
+            </>
+          )}
+        </nav>
+
+        <Routes>
+          <Route
+            path="/"
+            element={
+              !session ? (
+                <div className="flexbox-signin">
+                  <h1>Welcome to Article26!</h1>
+                  <Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} providers={[]} />
+                </div>
+              ) : (
+                <Questionnaire />
+              )
+            }
+          />
+          <Route path="/savenowvslater" element={<SaveNowVsLater />} />
+          {/* You can add more routes as needed */}
+        </Routes>
       </div>
-    );
-  }
+    </Router>
+  );
 }

lumo/src/__mocks__/MockData.js

@@ -0,0 +1,8 @@
+// This file contains mock data for development and testing purposes
+// src/__mocks__/mockData.js
+
+export const mockSavingsData = [
+    { year: 2024, startingBalance: 25000, contributions: 1200, interestEarned: 275, endBalance: 26475 },
+    // ...additional mock data
+  ];
+

lumo/src/components/SaveNowVsLaterCalc/SaveNowVsLater.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import SavingsForm from './SavingsForm';
+import SavingsBreakdown from './SavingsBreakdown';
+import SavingsComparison from './SavingsComparison';
+import SavingsSummary from './SavingsSummary';
+import { mockSavingsData } from '../../__mocks__/MockData'; // Make sure the path is correct
+import './SaveNowVsLaterCalc.css'; // The CSS file with your styles
+
+function SaveNowVsLater() {
+    const [savingsData, setSavingsData] = useState(mockSavingsData);
+
+    // Replace this with your actual calculation logic
+    const handleCalculate = (formData) => {
+        // Assume calculateSavings is a function that returns the updated data
+        const updatedData = calculateSavings(formData);
+        setSavingsData(updatedData);
+    };
+
+    return (
+        <div className="save-now-vs-later-container">
+            <SavingsForm onCalculate={handleCalculate} />
+            <SavingsSummary data={savingsData} />
+            <SavingsBreakdown data={savingsData} />
+            <SavingsComparison currentApy={1.2} />
+        </div>
+    );
+}
+
+export default SaveNowVsLater;
+
+// Add a calculateSavings function that handles the calculation logic
+// This is a placeholder - you will need to implement this based on your own logic
+function calculateSavings(formData) {
+    // Perform calculation here
+    return mockSavingsData; // return the calculated data
+}

lumo/src/components/SaveNowVsLaterCalc/SaveNowVsLaterCalc.css

@@ -0,0 +1,101 @@
+/* SaveNowVsLaterCalc.css - place this file in the same directory as your components */
+
+.save-now-vs-later-container {
+    font-family: 'Arial', sans-serif;
+    margin: 20px;
+  }
+
+  .savings-form {
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    margin-bottom: 20px;
+  }
+
+  .form-input,
+  .form-select {
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  .form-button {
+    background-color: #005a9c;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+
+  .form-button:hover {
+    background-color: #004080;
+  }
+
+  .chart-container {
+    margin: 20px 0;
+    padding: 20px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+  }
+
+  .table th,
+  .table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+  }
+
+  .table th {
+    background-color: #f0f0f0;
+  }
+
+  .apy-comparison {
+    padding: 20px;
+    margin-top: 20px;
+    background-color: #f2f2f2;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .apy-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+
+  .apy-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .apy-bar {
+    height: 20px;
+    border-radius: 5px;
+  }
+
+  .your-apy {
+    background-color: #4caf50;
+  }
+
+  .national-apy {
+    background-color: #f44336;
+  }
+
+  .online-apy {
+    background-color: #2196f3;
+  }
+
+  .todays-apy {
+    background-color: #ff9800;
+  }
+

lumo/src/components/SaveNowVsLaterCalc/SavingsBreakdown.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import './SaveNowVsLaterCalc.css'; // Assuming the CSS file is in the same directory
+
+function SavingsBreakdown({ data }) {
+  return (
+    <div>
+      <h3>Breakdown by Year</h3>
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Year</th>
+            <th>Starting Balance</th>
+            <th>Contributions</th>
+            <th>Interest Earned</th>
+            <th>End Balance</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((yearData, index) => (
+            <tr key={index}>
+              <td>{yearData.year}</td>
+              <td>${yearData.startingBalance.toFixed(2)}</td>
+              <td>${yearData.contributions.toFixed(2)}</td>
+              <td>${yearData.interestEarned.toFixed(2)}</td>
+              <td>${yearData.endBalance.toFixed(2)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default SavingsBreakdown;

lumo/src/components/SaveNowVsLaterCalc/SavingsComparison.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import './SaveNowVsLaterCalc.css'; // Assuming the CSS file is in the same directory
+
+function SavingsComparison({ userApy }) {
+  // These widths are just placeholders, you might calculate them based on the APY values
+  const nationalAverageApyWidth = '10%';
+  const onlineAverageApyWidth = '60%';
+  const todaysTopApyWidth = '100%';
+
+  return (
+    <div className="apy-comparison">
+      <h3>How Interest Can Impact Your Savings</h3>
+      <div className="apy-item">
+        <span>Your Rate: {userApy}% APY</span>
+        <div className="apy-bar your-apy" style={{ width: `${userApy}%` }}></div>
+      </div>
+      <div className="apy-item">
+        <span>National Average: 0.09% APY</span>
+        <div className="apy-bar national-apy" style={{ width: nationalAverageApyWidth }}></div>
+      </div>
+      <div className="apy-item">
+        <span>Online Average: 1.1% APY</span>
+        <div className="apy-bar online-apy" style={{ width: onlineAverageApyWidth }}></div>
+      </div>
+      <div className="apy-item">
+        <span>Today's Top Rate: 1.86% APY</span>
+        <div className="apy-bar todays-apy" style={{ width: todaysTopApyWidth }}></div>
+      </div>
+    </div>
+  );
+}
+
+export default SavingsComparison;

lumo/src/components/SaveNowVsLaterCalc/SavingsForm.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+
+function SavingsForm({ onCalculate }) {
+  const [startingBalance, setStartingBalance] = useState(0);
+  const [apy, setApy] = useState(0);
+  const [monthlyContribution, setMonthlyContribution] = useState(0);
+  const [yearsToSave, setYearsToSave] = useState(1);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onCalculate({ startingBalance, apy, monthlyContribution, yearsToSave });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="number"
+        value={startingBalance}
+        onChange={(e) => setStartingBalance(e.target.value)}
+        placeholder="Starting Balance"
+      />
+      {/* ...Other inputs for APY, monthly contribution, years to save... */}
+      <button type="submit">Calculate</button>
+    </form>
+  );
+}
+
+export default SavingsForm;

lumo/src/components/SaveNowVsLaterCalc/SavingsSummary.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
+
+function SavingsSummary({ data }) {
+  // You'll need to map your data to the format expected by Recharts
+  const chartData = data.map(item => ({
+    year: item.year,
+    balance: item.endBalance
+  }));
+
+  return (
+    <div className="chart-container">
+      <h2>Your savings balance at the end of the period will be ${data[data.length - 1].endBalance.toFixed(2)}</h2>
+      <BarChart width={600} height={300} data={chartData}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="year" />
+        <YAxis />
+        <Tooltip />
+        <Legend />
+        <Bar dataKey="balance" fill="#82ca9d" />
+      </BarChart>
+    </div>
+  );
+}
+
+export default SavingsSummary;