Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicotinelnwza007
nicotinelnwza007 committed Jul 21, 2024
1 parent 1e33198 commit 9d7bc3b
Show file tree
Hide file tree
Showing 2 changed files with 204 additions and 122 deletions.
Binary file added src/app/hero/Creditcard1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
326 changes: 204 additions & 122 deletions src/app/hero/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
"use client";

import { useState, useEffect } from 'react';
import { Container, TextField, Button, Typography, Box, List, ListItem, ListItemText } from '@mui/material';


import { useState, useEffect } from "react";
import creditcard from "@/app/hero/Creditcard1.png";
import {
Container,
TextField,
Button,
Typography,
Box,
List,
ListItem,
ListItemText,
} from "@mui/material";
import React from "react";
import Image from "next/image";

const recommendCard = (amount, creditCards) => {
const suitableCards = creditCards.filter(card => card.creditLimit >= amount);
const suitableCards = creditCards.filter(
(card) => card.creditLimit >= amount
);

if (suitableCards.length === 0) {
return "No card has enough credit limit to make this purchase.";
Expand All @@ -31,17 +43,20 @@ const recommendCard = (amount, creditCards) => {
const App = () => {
const [salary, setSalary] = useState(0);
const [purchaseAmount, setPurchaseAmount] = useState(0);
const [recommendation, setRecommendation] = useState('');
const [recommendation, setRecommendation] = useState("");
const [availableMoney, setAvailableMoney] = useState(0);
const [percentage, setPercentage] = useState(20);
const [maxDebt, setMaxDebt] = useState(0);
const [expenses, setExpenses] = useState([]);
const [expenseDescription, setExpenseDescription] = useState('');
const [expenseDescription, setExpenseDescription] = useState("");
const [expenseAmount, setExpenseAmount] = useState(0);
const [purchaseDate, setPurchaseDate] = useState('');
const [purchaseDate, setPurchaseDate] = useState("");

useEffect(() => {
const totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0);
const totalExpenses = expenses.reduce(
(sum, expense) => sum + expense.amount,
0
);
setAvailableMoney(salary - totalExpenses);
}, [salary, expenses]);

Expand All @@ -56,8 +71,11 @@ const App = () => {

const handleAddExpense = () => {
if (expenseDescription && expenseAmount > 0) {
setExpenses([...expenses, { description: expenseDescription, amount: Number(expenseAmount) }]);
setExpenseDescription('');
setExpenses([
...expenses,
{ description: expenseDescription, amount: Number(expenseAmount) },
]);
setExpenseDescription("");
setExpenseAmount(0);
}
};
Expand All @@ -71,147 +89,211 @@ const App = () => {
const purchase = new Date(purchaseDate);
const dayOfPurchase = purchase.getDate();

const closingDay1 = 25; // Closing date 25
const closingDay2 = 20; // Closing date 20
const closingDay1 = 25;
const closingDay2 = 20;

// Get days until next closing dates
let daysUntilClosing1 = closingDay1 - dayOfPurchase;
let daysUntilClosing2 = closingDay2 - dayOfPurchase;

// Adjust days for month boundary

if (daysUntilClosing1 < 0) {
daysUntilClosing1 += new Date(purchase.getFullYear(), purchase.getMonth() + 1, 0).getDate(); // days in current month
daysUntilClosing1 += new Date(
purchase.getFullYear(),
purchase.getMonth() + 1,
0
).getDate();
}

if (daysUntilClosing2 < 0) {
daysUntilClosing2 += new Date(purchase.getFullYear(), purchase.getMonth() + 1, 0).getDate(); // days in current month
daysUntilClosing2 += new Date(
purchase.getFullYear(),
purchase.getMonth() + 1,
0
).getDate();
}

// Recommend card based on closest closing date
if (daysUntilClosing1 < daysUntilClosing2) {
setRecommendation('You should use the card with a closing date on the 25th.');
setRecommendation(
"You should use the card with a closing date on the 25th."
);
} else {
setRecommendation('You should use the card with a closing date on the 20th.');
setRecommendation(
"You should use the card with a closing date on the 20th."
);
}
};

return (
<div>
<nav className="bg-[#46A8A7] shadow-md p-8 flex justify-between">
<div className='text-[36px] text-white font-bold'>Credit Buddy</div>
<ul className="flex justify-around gap-[24px]">
<li className="nav-item">
<a href="/" className="nav-link">
<div>
<nav class="bg-teal-500 shadow-md p-8 flex justify-between items-center">
<div class="text-4xl text-white font-bold">Credit Buddy</div>
<ul class="flex space-x-6">
<li class="nav-item">
<a href="/" class="text-white text-lg">
Home
</a>
</li>
<li className="nav-item">
<a href="/about" className="nav-link">
Caculate
<li class="nav-item">
<a href="/calculate" class="text-white text-lg">
Calculate
</a>
</li>
<li className="nav-item">
<a href="/services" className="nav-link">
<li class="nav-item">
<a href="/about" class="text-white text-lg">
About us
</a>
</li>
<li className="nav-item">
<a href="/contact" className="nav-link">
<li class="nav-item">
<a href="/policy" class="text-white text-lg">
Policy
</a>
</li>
</ul>
<div> Login </div>
<div class="text-white text-lg">Login</div>
</nav>
<Typography className=''>User Financial Information</Typography>

<Box component="form" noValidate autoComplete="off">
<TextField
label="Salary"
type="number"
value={salary}
onChange={(e) => setSalary(Number(e.target.value))}
fullWidth
margin="normal"
/>
<TextField
label="Purchase Amount"
type="number"
value={purchaseAmount}
onChange={(e) => setPurchaseAmount(Number(e.target.value))}
fullWidth
margin="normal"
/>
<TextField
label="Percentage for Max Debt"
type="number"
value={percentage}
onChange={(e) => setPercentage(Number(e.target.value))}
fullWidth
margin="normal"
/>
<Button variant="contained" color="primary" onClick={handleRecommendation} style={{ marginTop: 20 }}>
Get Recommendation
</Button>
</Box>

<Typography variant="h5" gutterBottom style={{ marginTop: 40 }}>Expenses</Typography>
<Box component="form" noValidate autoComplete="off">
<TextField
label="Expense Description"
type="text"
value={expenseDescription}
onChange={(e) => setExpenseDescription(e.target.value)}
fullWidth
margin="normal"
/>
<TextField
label="Expense Amount"
type="number"
value={expenseAmount}
onChange={(e) => setExpenseAmount(Number(e.target.value))}
fullWidth
margin="normal"
/>
<Button variant="contained" color="primary" onClick={handleAddExpense} style={{ marginTop: 20 }}>
Add Expense
</Button>
</Box>
<List>
{expenses.map((expense, index) => (
<ListItem key={index}>
<ListItemText primary={`${expense.description}: ${expense.amount}`} />
<Button variant="outlined" color="secondary" onClick={() => handleRemoveExpense(index)}>
Remove
<div className="bg-[#575757] text-white">
<div className="flex gap-[8px] p-5">
<Image
src="/app/hero/Creditcard1.png"
width={200}
height={200}
alt="Credit Card"
/>
<Image
src="/hero/Creditcard1.png"
width={200}
height={200}
alt="Credit Card"
/>
</div>
<div class="border-t-4 border-yellow-500 p-4 w-4/5 mx-auto flex justify-center items-center">
{" "}
</div>
<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-4/5 mx-auto mt-10 text-white">
<Typography variant="h5" gutterBottom className="mt-10 mb-4 text-xl">
User info
</Typography>

<Box component="form" noValidate autoComplete="off">
<TextField
label="เงินเดือน"
type="number"
value={salary}
onChange={(e) => setSalary(Number(e.target.value))}
fullWidth
margin="normal"
className="bg-white rounded-lg "
/>
<TextField
label="Percentage for Max Debt"
type="number"
value={percentage}
onChange={(e) => setPercentage(Number(e.target.value))}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<Button
variant="contained"
color="primary"
onClick={handleRecommendation}
className="mt-6"
>
Get Recommendation
</Button>
</Box>

<Typography variant="h5" gutterBottom className="mt-10 mb-4 text-xl">
Expenses
</Typography>
<Box component="form" noValidate autoComplete="off">
<TextField
label="Expense Description"
type="text"
value={expenseDescription}
onChange={(e) => setExpenseDescription(e.target.value)}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<TextField
label="Expense Amount"
type="number"
value={expenseAmount}
onChange={(e) => setExpenseAmount(Number(e.target.value))}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<Button
variant="contained"
color="primary"
onClick={handleAddExpense}
className="mt-6"
>
Add Expense
</Button>
</Box>
<List className="mt-6">
{expenses.map((expense, index) => (
<ListItem
key={index}
className="flex justify-between bg-gray-800 rounded-lg p-4 mb-2"
>
<ListItemText
primary={`${expense.description}: ${expense.amount}`}
/>
<Button
variant="outlined"
color="secondary"
onClick={() => handleRemoveExpense(index)}
>
Remove
</Button>
</ListItem>
))}
</List>

<Typography variant="h5" gutterBottom className="mt-10 mb-2 text-xl">
Available Money
</Typography>
<Typography className="mb-6">{availableMoney}</Typography>

<Typography variant="h5" gutterBottom className="mb-2 text-xl">
Max Debt ({percentage}% of Salary)
</Typography>
<Typography className="mb-6">{maxDebt}</Typography>

<Typography variant="h5" gutterBottom className="mb-2 text-xl">
Purchase Recommendation
</Typography>
<Typography className="mb-6">{recommendation}</Typography>

<Typography variant="h5" gutterBottom className="mt-10 mb-4 text-xl">
Card Recommendation by Date
</Typography>
<Box component="form" noValidate autoComplete="off">
<TextField
label="Purchase Date"
type="text"
value={purchaseDate}
onChange={(e) => setPurchaseDate(e.target.value)}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<Button
variant="contained"
color="primary"
onClick={calculateBestCard}
className="mt-6"
>
Calculate Best Card
</Button>
</ListItem>
))}
</List>

<Typography variant="h5" gutterBottom style={{ marginTop: 40 }}>Available Money</Typography>
<Typography>{availableMoney}</Typography>

<Typography variant="h5" gutterBottom>Max Debt ({percentage}% of Salary)</Typography>
<Typography>{maxDebt}</Typography>

<Typography variant="h5" gutterBottom>Purchase Recommendation</Typography>
<Typography>{recommendation}</Typography>

<Typography variant="h5" gutterBottom style={{ marginTop: 40 }}>Card Recommendation by Date</Typography>
<Box component="form" noValidate autoComplete="off">
<TextField
label="Purchase Date"
type="text"
value={purchaseDate}
onChange={(e) => setPurchaseDate(e.target.value)}
fullWidth
margin="normal"
/>
<Button variant="contained" color="primary" onClick={calculateBestCard} style={{ marginTop: 20 }}>
Calculate Best Card
</Button>
</Box>
</div>
</Box>
</div>
</div>
</div>
);
};

Expand Down

0 comments on commit 9d7bc3b

Please sign in to comment.