import React, { useState, useEffect } from "react";
import { useLocation, useNavigate } from "react-router";
import axios from "axios";
import "./BillingModule.css";
const BillingModule = () => {
const [expenses, setExpenses] = useState([]);
const [expenseType, setExpenseType] = useState("");
const [amount, setAmount] = useState("");
const [grossTotal, setGrossTotal] = useState(0);
const [objectId, setObjectId] = useState("");
const [name, setName] = useState("");
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
const params = new URLSearchParams(location.search);
setObjectId(params.get("objectId"));
setName(params.get("name"));
}, [location.search]);
const handleAddExpense = () => {
if (expenseType && amount) {
const newExpense = {
expenseType,
amount: parseFloat(amount),
};
setExpenses([...expenses, newExpense]);
setExpenseType("");
setAmount("");
}
};
const handleDeleteExpense = (index) => {
const updatedExpenses = [...expenses];
updatedExpenses.splice(index, 1);
setExpenses(updatedExpenses);
};
const calculateGrossTotal = () => {
const total = expenses.reduce((acc, expense) => acc + expense.amount, 0);
setGrossTotal(total);
};
const handleFinish = async () => {
const expensesArray = [];
expenses.forEach((expense) => {
const { expenseType, amount } = expense;
expensesArray.push({ expenseType, amount });
});
const data = {
name,
objectId,
expenses: expensesArray,
grossTotal,
};
console.log("Post Data:", data);
try {
const response = await axios.post("/api/admin/billing", data);
if (response.status === 200) {
navigate("/success");
} else {
throw new Error("Failed to complete the process");
}
} catch (error) {
console.error(error);
}
};
return (
<div className="billing-container">
{objectId && name ? (
<div>
<h1 className="hospital-name">SEVASADAN LIFELINE</h1>
<h2 className="patient-info">Patient Name: {name}</h2>
<h2 className="patient-info">Patient ID: {objectId}</h2>
</div>
) : (
<p>No patient information found.</p>
)}
<div className="add-expense">
<h3>Add Expense</h3>
<div className="input-group">
<label htmlFor="expenseType">Expense Type:</label>
<input
type="text"
id="expenseType"
value={expenseType}
onChange={(e) => setExpenseType(e.target.value)}
/>
</div>
<div className="input-group">
<label htmlFor="amount">Amount:</label>
<input
type="number"
id="amount"
value={amount}
onChange={(e) => setAmount(e.target.value)}
/>
</div>
<button className="add-expense-btn" onClick={handleAddExpense}>
Add Expense
</button>
</div>
<div className="expense-list">
<h3>Expenses</h3>
<table className="expense-table">
<thead>
<tr>
<th>Expense Type</th>
<th>Amount</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{expenses.map((expense, index) => (
<tr key={index}>
<td>{expense.expenseType}</td>
<td>{expense.amount}</td>
<td>
<button
className="delete-expense-btn"
onClick={() => handleDeleteExpense(index)}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="gross-total">
<h3>Gross Total: {grossTotal}</h3>
<button className="calculate-total-btn" onClick={calculateGrossTotal}>
Calculate Gross Total
</button>
</div>
<button className="finish-btn" onClick={handleFinish}>
Finish
</button>
</div>
);
};
export default BillingModule;
const billingSchema = new mongoose.Schema({
name: String,
objectId: String,
expenses: [{ expenseType: String, amount: Number }],
grossTotal: Number,
});
const Billing = mongoose.model("Billing", billingSchema);<pre>import React, { useState, useEffect } from "react";
import { useLocation, useNavigate } from "react-router";
import axios from "axios";
import "./BillingModule.css";
const BillingModule = () => {
const [expenses, setExpenses] = useState([]);
const [expenseType, setExpenseType] = useState("");
const [amount, setAmount] = useState("");
const [grossTotal, setGrossTotal] = useState(0);
const [objectId, setObjectId] = useState("");
const [name, setName] = useState("");
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
const params = new URLSearchParams(location.search);
setObjectId(params.get("objectId"));
setName(params.get("name"));
}, [location.search]);
const handleAddExpense = () => {
if (expenseType && amount) {
const newExpense = {
expenseType,
amount: parseFloat(amount),
};
setExpenses([...expenses, newExpense]);
setExpenseType("");
setAmount("");
}
};
const handleDeleteExpense = (index) => {
const updatedExpenses = [...expenses];
updatedExpenses.splice(index, 1);
setExpenses(updatedExpenses);
};
const calculateGrossTotal = () => {
const total = expenses.reduce((acc, expense) => acc + expense.amount, 0);
setGrossTotal(total);
};
const handleFinish = async () => {
const expensesArray = [];
expenses.forEach((expense) => {
const { expenseType, amount } = expense;
expensesArray.push({ expenseType, amount });
});
const data = {
name,
objectId,
expenses: expensesArray,
grossTotal,
};
console.log("Post Data:", data);
try {
const response = await axios.post("/api/admin/billing", data);
if (response.status === 200) {
navigate("/success");
} else {
throw new Error("Failed to complete the process");
}
} catch (error) {
console.error(error);
}
};
return (
<div className="billing-container">
{objectId && name ? (
<div>
<h1 className="hospital-name">SEVASADAN LIFELINE</h1>
<h2 className="patient-info">Patient Name: {name}</h2>
<h2 className="patient-info">Patient ID: {objectId}</h2>
</div>
) : (
<p>No patient information found.</p>
)}
<div className="add-expense">
<h3>Add Expense</h3>
<div className="input-group">
<label htmlFor="expenseType">Expense Type:</label>
<input
type="text"
id="expenseType"
value={expenseType}
onChange={(e) => setExpenseType(e.target.value)}
/>
</div>
<div className="input-group">
<label htmlFor="amount">Amount:</label>
<input
type="number"
id="amount"
value={amount}
onChange={(e) => setAmount(e.target.value)}
/>
</div>
<button className="add-expense-btn" onClick={handleAddExpense}>
Add Expense
</button>
</div>
<div className="expense-list">
<h3>Expenses</h3>
<table className="expense-table">
<thead>
<tr>
<th>Expense Type</th>
<th>Amount</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{expenses.map((expense, index) => (
<tr key={index}>
<td>{expense.expenseType}</td>
<td>{expense.amount}</td>
<td>
<button
className="delete-expense-btn"
onClick={() => handleDeleteExpense(index)}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="gross-total">
<h3>Gross Total: {grossTotal}</h3>
<button className="calculate-total-btn" onClick={calculateGrossTotal}>
Calculate Gross Total
</button>
</div>
<button className="finish-btn" onClick={handleFinish}>
Finish
</button>
</div>
);
};
export default BillingModule;
What I have tried:
I checked all the apis endpoint and made sure that server is running correctly