good

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}
     >
       <div style={titleStyle}>{title}</div>
       <div style={valueAndPercentageContainerStyle}>
@@ -69,8 +77,13 @@ const RoundedRectangle = ({ bgColor, title, value, percentage }) => {
             color: percentage > 0 ? "#007bff" : "red",
           }}
         >
-          {percentage}%
-          <span style={arrowStyle}>{percentage > 0 ? "↗" : "↘"}</span>
+          {percentage}
+          {percentage != undefined && "%"}
+          {percentage != undefined && (
+            <span style={arrowStyle}>
+              {percentage > 0 ? "↗" : percentage == 0 ? "-" : "↘"}
+            </span>
+          )}
         </div>
       </div>
     </div>
@@ -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 (
     <div className={styles.Transactions} style={{ backgroundColor: "#cfcfcf" }}>
       <h2 className={styles["Transactions-title"]}>Reports</h2>
@@ -210,18 +244,23 @@ const App = ({ cafeId }) => {
             />
           )}
           {filteredItems[0]?.Item == undefined && (
-            <RoundedRectangle bgColor="#E5ECF6" value={"No item"} />
+            <RoundedRectangle
+              bgColor="#8989897a"
+              title={"No fav item"}
+              value={"-"}
+            />
           )}
           <RoundedRectangle
-            bgColor="#E5ECF6"
-            title="Transactions"
-            value={sold}
-            percentage={percentage}
+            bgColor={viewStock ?  "#979797" : "#E5ECF6"}
+            title="Stok"
+            value={viewStock ? '‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ˅' : '‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ˄'}  // Corrected ternary operator syntax
+            onClick={() => setViewStock(!viewStock)}  // onClick should be a function
           />
           <RoundedRectangle
             bgColor="#E3F5FF"
-            title="Transactions"
-            value={sold}
+            title="Income"
+            fontSize="12px"
+            value={"Rp" + formatIncome(512520000)}
             percentage={percentage}
           />
         </div>
@@ -243,7 +282,7 @@ const App = ({ cafeId }) => {
                 style={{
                   textAlign: "left",
                   color: colors[index],
-                  margin: "5px 0",
+                  margin: "10px 0",
                 }}
               >
                 {item.Item.name}: {item.sold}

src/pages/Transactions.js

@@ -125,8 +125,8 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
               </ul>
               <h2 className={styles["Transactions-detail"]}>
                 {transaction.serving_type === "pickup"
-                  ? "Diambil di kasir"
-                  : `Diantar ke meja nomor ${
+                  ? "Self pickup"
+                  : `Serve to ${
                       transaction.Table ? transaction.Table.tableNo : "N/A"
                     }`}
               </h2>
@@ -145,11 +145,11 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                   {isPaymentLoading ? (
                     <ColorRing height="50" width="50" color="white" />
                   ) : 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)
                   )}
                 </button>
               </div>

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 {