ok banget

src/pages/Reports.js

@@ -17,6 +17,7 @@ const RoundedRectangle = ({
   title,
   value,
   percentage,
+  invert,
   fontSize = "15px",
   loading = false,
   children, // Assuming this is a React component or JSX
@@ -73,7 +74,7 @@ const RoundedRectangle = ({
     display: "flex",
     alignItems: "center",
     textAlign: "right",
-    color: loading ? "black" : percentage > 0 ? "#007bff" : "red",
+    color: loading ? "black" : percentage >= 0 ? (invert ? "red" : "#2fd45e") : (invert ? "#2fd45e" : "red"),
   };
 
   const arrowStyle = {
@@ -102,7 +103,8 @@ const RoundedRectangle = ({
   );
 };
 
-const App = ({ cafeId }) => {
+const App = ({ cafeId, 
+  handleClose }) => {
   const [favouriteItems, setFavouriteItems] = useState([]);
   const [analytics, setAnalytics] = useState({});
   const [loading, setLoading] = useState(true);
@@ -128,7 +130,7 @@ const App = ({ cafeId }) => {
   }, [filter]);
 
   const [sold, percentage] = analytics[filter] || [0, 0];
-  const filteredItems = analytics.currentFavoriteItems || [];
+  const filteredItems = analytics.items || [];
 
   const totalSold = filteredItems.reduce((sum, item) => sum + item.count, 0);
   const colors = [
@@ -187,7 +189,7 @@ const App = ({ cafeId }) => {
     setFilter(filterMap[selectedItem]);
   }
 
-  const filterTexts = ["1 day", "7 days", "30 days", "365 days"];
+  const filterTexts = ["1", "7", "30", "365"];
   const comparisonText =
     filterTexts[["daily", "weekly", "monthly", "yearly"].indexOf(filter)];
   const formatDate = (isoDateString) => {
@@ -201,11 +203,18 @@ const App = ({ cafeId }) => {
   };
 
   return (
-    <div className={styles.Transactions} style={{ backgroundColor: "#cfcfcf" }}>
+    <div style={{
+      position: 'fixed',
+      height: '100vh',
+      width: '100vw',
+      top: 0,
+      right: 0,
+      backgroundColor: 'rgb(207, 207, 207)'}}
+      >
       <h2 className={styles["Transactions-title"]}>Reports</h2>
       <div style={{ textAlign: "center" }}>
         <MultiSwitch
-          texts={["Yesterday", "Last 7", "Last 30", "Last 365"]}
+          texts={["Yesterday", "This week", "This Month", "This year"]}
           selectedSwitch={["daily", "weekly", "monthly", "yearly"].indexOf(
             filter
           )}
@@ -229,62 +238,56 @@ const App = ({ cafeId }) => {
         >
           <RoundedRectangle
             bgColor="#E3F5FF"
-            title="Transactions"
-            value={analytics.transactionCount}
-            percentage={roundToInteger(analytics.transactionGrowth)}
+            title="Pendapatan"
+            fontSize="12px"
+            value={!loading && "Rp" + formatIncome(analytics?.totalIncome)}
+            percentage={roundToInteger(analytics.growthIncome)}
+            invert={false}
+            loading={loading}
+          />
+
+<RoundedRectangle
+            bgColor="#E5ECF6"
+            title="Pengeluaran"
+            fontSize="12px"
+            value={!loading && "Rp" + formatIncome(analytics?.currentOutcome)}
+            percentage={roundToInteger(analytics.growthOutcome)}
+            invert={true}
             loading={loading}
           />
           <RoundedRectangle
             bgColor="#E5ECF6"
-            title="Income"
-            fontSize="12px"
-            value={!loading && "Rp" + formatIncome(analytics?.totalIncome)}
-            percentage={roundToInteger(analytics.incomeGrowth)}
+            title="Transaksi"
+            value={analytics.totalTransactions}
+            percentage={roundToInteger(analytics.growthTransactions)}
+            invert={false}
             loading={loading}
           />
-
-          {analytics?.currentFavoriteItems &&
-            analytics?.currentFavoriteItems.length > 0 && (
+          {analytics?.items &&
+            analytics?.items.length > 0 && (
               <RoundedRectangle
-                bgColor="#E5ECF6"
-                title={"Fav item"}
-                value={analytics?.currentFavoriteItems[0]?.name}
+                bgColor="#E3F5FF"
+                title={"Item favorit"}
+                value={analytics?.items[0]?.name}
+                loading={loading}
+              />
+            )}
+            {(!analytics?.items ||
+              analytics?.items.length === 0) && (
+              <RoundedRectangle
+                bgColor="#E5ECF6"
+                title={"Item favorit"}
+                value={"-"}
                 loading={loading}
               />
             )}
-          {(!analytics?.currentFavoriteItems ||
-            analytics?.currentFavoriteItems.length === 0) && (
-            <RoundedRectangle
-              bgColor="#E5ECF6"
-              title={"No fav item"}
-              value={"-"}
-              loading={loading}
-            />
-          )}
-          {analytics?.previousFavoriteItem !== null && (
-            <RoundedRectangle
-              bgColor="#E3F5FF"
-              title={"Fav before"}
-              value={analytics?.previousFavoriteItem?.name}
-              loading={loading}
-            />
-          )}
-          {analytics?.previousFavoriteItem === null && (
-            <RoundedRectangle
-              bgColor="#E3F5FF"
-              title={"No fav item"}
-              value={"-"}
-              loading={loading}
-            />
-          )}
-
           <div
             style={{ display: "flex", alignItems: "center", margin: "10px" }}
           >
             <div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
             <h6 style={{ margin: 0, textAlign: "left" }}>
-              Growth percentages are based on comparing the last{" "}
-              {comparisonText} with the preceding {comparisonText}.
+            Persentase pertumbuhan dihitung dengan membandingkan periode{" "}
+              {comparisonText} terakhir dengan {comparisonText} hari sebelumnya.
             </h6>
           </div>
         </div>
@@ -324,36 +327,8 @@ const App = ({ cafeId }) => {
           </div>
         </div>
 
-        <h3 className={styles["Transactions-title"]}>Stock changes</h3>
-
-        {analytics.materialMutations?.length > 0 &&
-          analytics?.materialMutations.map((item, index) => (
-            <RoundedRectangle
-              key={index}
-              bgColor="rgb(59 59 59 / 41%)"
-              title={item.name}
-            >
-              <div
-                style={{
-                  display: "flex",
-                  flexWrap: "wrap",
-                  justifyContent: "left",
-                  padding: "20px",
-                }}
-              >
-                {item.mutations.map((mutation, mutationIndex) => (
-                  <RoundedRectangle
-                    bgColor="rgb(59 59 59 / 41%)"
-                    key={mutationIndex}
-                    isChildren={true}
-                    title={`from ${mutation.oldStock} to ${mutation.newStock}`}
-                    value={formatDate(mutation.changeDate)}
-                  />
-                ))}
-              </div>
-            </RoundedRectangle>
-          ))}
       </div>
+      <div class="ItemLister_PaymentOption__YZlDL"><div style={{marginTop:'20px'}} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
     </div>
   );
 };