ok

src/components/Coupon.js

@@ -41,7 +41,7 @@ const Coupon = ({ code, value, period, type, expiration }) => {
 
     return (
         <div className='coupon'>
-            {daysLeft < 1 && (
+            {(expiration == null && code != null) || (expiration != null && code != null && daysLeft < 1) && (
               <div className='RibbonBannerInverted'>
                 <img src={"https://i.imgur.com/yt6osgL.png"}></img>
                 <h1>Kupon berakhir</h1>

src/pages/Reports.js

@@ -103,7 +103,7 @@ const RoundedRectangle = ({
 };
 
 const App = ({ cafeId,
-  handleClose }) => {
+  handleClose, otherCafes }) => {
   const [analytics, setAnalytics] = useState({});
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState("yesterday");
@@ -180,6 +180,7 @@ const App = ({ cafeId,
   }
 
   function onToggle(selectedItem) {
+    setAnalytics({});
     const filterMap = ["yesterday", "weekly", "monthly", "yearly"];
     setFilter(filterMap[selectedItem]);
   }
@@ -187,15 +188,100 @@ const App = ({ cafeId,
   const filterTexts = ["1", "7", "30", "365"];
   const comparisonText =
     filterTexts[["yesterday", "weekly", "monthly", "yearly"].indexOf(filter)];
-  // const formatDate = (isoDateString) => {
+
-  //   const date = new Date(isoDateString);
+  const [resetKey, setResetKey] = useState(0); // A key to force re-render
-  //   return date.toLocaleDateString("en-US", {
+  const [texts, setTexts] = useState(['buat kedai']); // initially show only first 3 texts
-  //     year: "numeric",
+  const [fullTexts, setFullTexts] = useState(null); // initially show only first 3 texts
-  //     month: "long",
+  const [fullTextsVisible, setFullTextsVisible] = useState(null); // initially show only first 3 texts
-  //     day: "numeric",
+  useEffect(() => {
-  //     hour: "numeric",
+    if (otherCafes != null) {
-  //   });
+      let updatedFullTexts;
-  // };
+  
+      if (otherCafes.length === 0) {
+        updatedFullTexts = [["buat kedai", 0]];
+      } else if (otherCafes.length === 1) {
+        updatedFullTexts = [
+          [otherCafes[0].name, otherCafes[0].cafeId],
+          ["buat kedai", -1]
+        ];
+      } else {
+        updatedFullTexts = [
+          ["semua", 0], // First entry is "semua"
+          ...otherCafes.map(cafe => [cafe.name, cafe.cafeId]), // Map over cafes to get name and cafeId pairs
+          ["+", -1] // Add the "+" entry
+        ];
+      }
+  
+      setFullTexts(updatedFullTexts); // Set fullTexts with the original structure
+      // Set fullTextsVisible to an array of names only
+      setFullTextsVisible(updatedFullTexts.map(item => item[0])); // Extract just the names (first part of each pair)
+  
+      // Set the first 3 items in texts
+      setTexts(updatedFullTexts.map(item => item[0]).slice(0, 3));
+  
+      // Increment resetKey to trigger re-render
+      setResetKey(prevKey => prevKey + 1);
+    }
+  
+    console.log(otherCafes);
+  }, [otherCafes]);
+  
+  
+  console.log(fullTexts)
+  const [selectedSwitch, setSelectedSwitch] = useState(0);
+
+  const onItemToggle = (index) => {
+    let selectedCafeId = null;
+  
+    // When user clicks the last visible option (index === 2 in the current view)
+    if (index === 2) {
+      console.log(fullTexts);
+      if (fullTexts.indexOf(texts[2]) < fullTexts.length - 1) {
+        setTexts((prevTexts) => {
+          const newTexts = [...prevTexts];
+          const nextText = fullTexts[prevTexts.length]; // Get the next item in the full list
+          newTexts.shift(); // Remove the first element
+          newTexts.push(nextText); // Add the next item to the end
+          setSelectedSwitch(1); // Change the selected index
+          return newTexts;
+        });
+      }
+    }
+  
+    // When user clicks the first visible option (index === 0 in the current view)
+    if (index === 0) {
+      // Check if there is a previous text in the full list (before the first visible text)
+      if (fullTexts.findIndex(item => item[0] === texts[0]) > 0) {
+        setTexts((prevTexts) => {
+          const newTexts = [...prevTexts];
+          const prevText = fullTexts[fullTexts.findIndex(item => item[0] === newTexts[0]) - 1]; // Get the previous item
+          newTexts.pop(); // Remove the last element
+          newTexts.unshift(prevText); // Add the previous item to the start
+          setSelectedSwitch(1); // Change the selected index
+          return newTexts;
+        });
+      }
+    }
+  
+    // Dynamically update selectedSwitch state to trigger re-render
+    setSelectedSwitch(index);
+  
+    // Get the cafeId from the selected text based on the index
+    const selectedText = texts[index]; // Get the selected name from the texts array
+    const selectedItem = fullTexts.find(item => item[0] === selectedText); // Find the corresponding full item
+    if (selectedItem) {
+      selectedCafeId = selectedItem[1]; // Get the cafeId (second part of the pair)
+    }
+  
+    console.log('Selected cafeId:', selectedCafeId); // Log the selected cafeId
+  
+    setResetKey((prevKey) => prevKey + 1); // Increase the key to force re-render
+  };
+  
+  // useEffect(() => {
+  //   // This effect will run whenever the selectedSwitch changes
+  //   // We could add logic here if needed for side effects
+  // }, [selectedSwitch]);
 
   return (
     <div style={{
@@ -208,7 +294,26 @@ const App = ({ cafeId,
       overflowY: 'auto'
     }}
     >
-      <h2 className={styles["Transactions-title"]}>Laporan</h2>
+      <div style={{ display: 'flex', alignItems: 'center', padding: '0px 20px 0px 20px', justifyContent: 'space-between' }}>
+        <h2 className={styles["Transactions-title"]} style={{ marginTop: 'revert', marginLeft: '0px' }}>Laporan</h2>
+        <div style={{ marginTop: '10px' }}>
+          {otherCafes && <MultiSwitch
+            key={resetKey} // Add key to reset the component and force it to re-render
+            texts={texts}
+            selectedSwitch={selectedSwitch}
+            bgColor={'#f4efe6'}
+            borderColor={'transparent'}
+            borderWidth={0.1}
+            onToggleCallback={onItemToggle}
+            fontColor={"#af9463"}
+            selectedFontColor={"black"}
+            selectedSwitchColor={"white"}
+            eachSwitchWidth={70}
+            height={"25px"}
+            fontSize={"12px"}
+          />}
+        </div>
+      </div>
       <div style={{
         textAlign: "center",
         marginTop: '30px'