{shopName}
+ setModal("add_material")}>
+ stock
+
setModal("edit_tables")}>
table maps
diff --git a/src/components/MusicPlayer.css b/src/components/MusicPlayer.css
index 69e9405..771dcf4 100644
--- a/src/components/MusicPlayer.css
+++ b/src/components/MusicPlayer.css
@@ -117,7 +117,7 @@
.expand-button h5 {
font-weight: 500;
margin-top: 0px;
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.36);
+ text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.36);
}
.expand-button:hover {
diff --git a/src/helpers/transactionHelpers.js b/src/helpers/transactionHelpers.js
index da355b9..50d86b9 100644
--- a/src/helpers/transactionHelpers.js
+++ b/src/helpers/transactionHelpers.js
@@ -319,7 +319,7 @@ export const getFavourite = async (cafeId) => {
export const getAnalytics = async (cafeId) => {
const response = await fetch(
- `${API_BASE_URL}/transaction/get-analytics/${cafeId}`,
+ `${API_BASE_URL}/transaction/get-income/${cafeId}`,
getHeaders()
);
return response.json();
diff --git a/src/pages/Reports.js b/src/pages/Reports.js
index 4cc0e6a..e684ad8 100644
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -4,7 +4,14 @@ import { getFavourite, getAnalytics } from "../helpers/transactionHelpers.js";
import CircularDiagram from "./CircularDiagram";
import styles from "./Transactions.module.css";
-const RoundedRectangle = ({ bgColor, title, value, percentage }) => {
+const RoundedRectangle = ({
+ onClick,
+ bgColor,
+ title,
+ value,
+ percentage,
+ fontSize = "20px",
+}) => {
const containerStyle = {
display: "flex",
flexDirection: "column",
@@ -36,7 +43,7 @@ const RoundedRectangle = ({ bgColor, title, value, percentage }) => {
};
const valueStyle = {
- fontSize: "20px",
+ fontSize: fontSize,
fontWeight: "bold",
flex: "1",
textAlign: "left",
@@ -59,6 +66,7 @@ const RoundedRectangle = ({ bgColor, title, value, percentage }) => {
...containerStyle,
backgroundColor: bgColor,
}}
+ onClick={onClick}
>
{title}
@@ -69,8 +77,13 @@ const RoundedRectangle = ({ bgColor, title, value, percentage }) => {
color: percentage > 0 ? "#007bff" : "red",
}}
>
- {percentage}%
- {percentage > 0 ? "↗" : "↘"}
+ {percentage}
+ {percentage != undefined && "%"}
+ {percentage != undefined && (
+
+ {percentage > 0 ? "↗" : percentage == 0 ? "-" : "↘"}
+
+ )}
@@ -83,6 +96,7 @@ const App = ({ cafeId }) => {
const [loading, setLoading] = useState(true);
const [filter, setFilter] = useState("monthly"); // Default filter is 'monthly'
const [colors, setColors] = useState([]);
+ const [viewStock, setViewStock] = useState(false);
useEffect(() => {
const fetchData = async () => {
@@ -92,6 +106,7 @@ const App = ({ cafeId }) => {
const analyticsData = await getAnalytics(cafeId);
if (items) setFavouriteItems(items);
if (analyticsData) setAnalytics(analyticsData);
+ console.log(analyticsData);
} catch (error) {
console.error("Error fetching data:", error);
} finally {
@@ -140,6 +155,25 @@ const App = ({ cafeId }) => {
color: colors[index] || "#cccccc",
}));
+ const formatIncome = (amount) => {
+ if (amount >= 1_000_000_000) {
+ // Format for billions
+ const billions = amount / 1_000_000_000;
+ return billions.toFixed(0) + "b"; // No decimal places for billions
+ } else if (amount >= 1_000_000) {
+ // Format for millions
+ const millions = amount / 1_000_000;
+ return millions.toFixed(2).replace(/\.00$/, "") + "m"; // Two decimal places, remove trailing '.00'
+ } else if (amount >= 1_000) {
+ // Format for thousands
+ const thousands = amount / 1_000;
+ return thousands.toFixed(1).replace(/\.0$/, "") + "k"; // One decimal place, remove trailing '.0'
+ } else {
+ // Less than a thousand
+ return amount.toString();
+ }
+ };
+
return (
Reports
@@ -210,18 +244,23 @@ const App = ({ cafeId }) => {
/>
)}
{filteredItems[0]?.Item == undefined && (
-
+
)}
setViewStock(!viewStock)} // onClick should be a function
/>
@@ -243,7 +282,7 @@ const App = ({ cafeId }) => {
style={{
textAlign: "left",
color: colors[index],
- margin: "5px 0",
+ margin: "10px 0",
}}
>
{item.Item.name}: {item.sold}
diff --git a/src/pages/Transactions.js b/src/pages/Transactions.js
index ade4b08..96e46bd 100644
--- a/src/pages/Transactions.js
+++ b/src/pages/Transactions.js
@@ -125,8 +125,8 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
{transaction.serving_type === "pickup"
- ? "Diambil di kasir"
- : `Diantar ke meja nomor ${
+ ? "Self pickup"
+ : `Serve to ${
transaction.Table ? transaction.Table.tableNo : "N/A"
}`}
@@ -145,11 +145,11 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
{isPaymentLoading ? (
) : transaction.confirmed === 1 ? (
- "Confirmed" // Display "Confirmed" if the transaction is confirmed (1)
+ "Confirm has paid" // Display "Confirmed" if the transaction is confirmed (1)
) : transaction.confirmed === -1 ? (
"Declined" // Display "Declined" if the transaction is declined (-1)
) : (
- "Confirm" // Display "Confirm" if the transaction is not confirmed (0)
+ "Confirm availability" // Display "Confirm" if the transaction is not confirmed (0)
)}
diff --git a/src/pages/Transactions.module.css b/src/pages/Transactions.module.css
index 079d25b..a9ed207 100644
--- a/src/pages/Transactions.module.css
+++ b/src/pages/Transactions.module.css
@@ -4,7 +4,7 @@
background-color: white;
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content: flex-start;
font-size: calc(10px + 2vmin);
color: rgba(88, 55, 50, 1);
background-color: #e9e9e9;
@@ -18,7 +18,7 @@
color: rgba(88, 55, 50, 1);
text-align: left;
margin-left: 20px;
- margin-top: 17px;
+ margin-top: 30px;
}
.Transactions-detail {
diff --git a/src/components/Header.js b/src/components/Header.js
index 81f4a3d..3b7f919 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -314,14 +314,15 @@ const Header = ({
user.roleId === 1 && (
<>