Skip to content

Commit

Permalink
80percent
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicotinelnwza007
nicotinelnwza007 committed Jul 21, 2024
1 parent 05b06c4 commit fa82cbb
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 131 deletions.
Binary file added src/app/hero/Creditcard2.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.
271 changes: 140 additions & 131 deletions src/app/hero/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { useState, useEffect } from "react";
import { creditCardData } from "@/app/hero/mockData";
import creditcard from "@/app/hero/Creditcard.png";
import creditcard2 from "@/app/hero/Creditcard2.png";
import {
Container,
TextField,
Expand Down Expand Up @@ -154,148 +155,156 @@ const App = () => {
<div className="bg-[#575757] text-white">
<div className="flex gap-[8px] p-12 justify-center items-center">
<Image src={creditcard} width={400} height={400} alt="Credit Card" />
<Image src={creditcard} width={400} height={400} alt="Credit Card" />
<Image src={creditcard2} width={400} height={400} alt="Credit Card" />
</div>
<div className="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-3xl font-bold"
>
Your info
</Typography>
<Box component="form" noValidate autoComplete="off">
<div className="text-[24px] text-white ">Salary</div>
<TextField
type="number"
value={salary}
onChange={(e) => setSalary(Number(e.target.value))}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<div className="text-[24px] text-white ">
Max Debt for credit card
</div>
<TextField
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 Our Suggestion
</Button>
</Box>
<Typography
variant="h5"
gutterBottom
className="mt-10 mb-4 text-3xl font-bold"
>
Your info
</Typography>
<Box component="form" noValidate autoComplete="off">
<div className="text-[24px] text-white">Salary</div>
<TextField
type="number"
value={salary}
onChange={(e) => setSalary(Number(e.target.value))}
fullWidth
margin="normal"
className="bg-white rounded-lg"
/>
<div className="text-[24px] text-white">
Max Debt for credit card
</div>
<TextField
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 Our Suggestion
</Button>
</Box>
</div>

<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"
/>
<div> Outcome </div>
<TextField
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>
<div className="flex gap-4 mt-10">
<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<Typography variant="h5" gutterBottom className="text-xl font-bold">
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"
/>
<div className="text-[24px] text-white">Outcome</div>
<TextField
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>
</div>

<Typography variant="h5" gutterBottom className="mt-10 mb-2 text-xl">
Available Money
</Typography>
<Typography className="mb-6">{availableMoney}</Typography>
<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<Typography variant="h5" gutterBottom className="text-xl font-bold">
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="text-xl font-bold">
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="text-xl font-bold">
Purchase Recommendation
</Typography>
<Typography className="mb-6">{recommendation}</Typography>
</div>
</div>

<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={() => {
const dayOfPurchase = new Date(purchaseDate).getDate();
if (dayOfPurchase <= 15) {
setRecommendation("You should use Card 1 for this purchase.");
} else {
setRecommendation("You should use Card 2 for this purchase.");
}
}}
className="mt-6"
>
Calculate Best Card
</Button>
</Box>
</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">
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={() => {
const dayOfPurchase = new Date(purchaseDate).getDate();
if (dayOfPurchase <= 15) {
setRecommendation("You should use Card 1 for this purchase.");
} else {
setRecommendation("You should use Card 2 for this purchase.");
}
}}
className="mt-6"
>
Calculate Best Card
</Button>
</Box>
</div>
</div>
</div>
</div>

);
};

Expand Down

0 comments on commit fa82cbb

Please sign in to comment.