From 59a9d299c54c98a52e77e6d9f26a6f31426835f8 Mon Sep 17 00:00:00 2001
From: zadit <75159257+insvrgent@users.noreply.github.com>
Date: Sat, 4 Jan 2025 06:57:36 +0700
Subject: [PATCH] ok

---
 src/components/BarChart.js         | 45 +++++++++++++----
 src/components/BarChart.module.css |  6 +--
 src/components/MusicComponent.css  |  6 +--
 src/components/MusicComponent.js   | 13 ++---
 src/components/MusicPlayer.css     | 79 ++++++++++++++++++++++++------
 src/components/MusicPlayer.js      | 73 ++++++++++++++++-----------
 src/config.js                      |  2 +-
 src/pages/Dashboard.js             | 17 ++++---
 src/pages/LinktreePage.module.css  | 20 +++++---
 src/pages/Reports.js               | 13 ++---
 src/pages/Transactions.module.css  |  4 +-
 11 files changed, 187 insertions(+), 91 deletions(-)

diff --git a/src/components/BarChart.js b/src/components/BarChart.js
index f4ca6eb..448d91c 100644
--- a/src/components/BarChart.js
+++ b/src/components/BarChart.js
@@ -1,13 +1,31 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Chart from "react-apexcharts";
 import styles from "./BarChart.module.css"; // Import the CSS module
 
-const BarChart = ({ transactionGraph, colors }) => {
+const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => {
   const [selectedIndex, setSelectedIndex] = useState(-1);
 
+  useEffect(() => {
+    setSelectedIndex(-1);
+  }, [transactionGraph]);
+
   const processData = (graphData) => {
     if (!graphData) return null;
     return graphData.map((dayData) => {
+      const monthly = [
+        "minggu 1",
+        "minggu 2",
+        "minggu 3",
+        "minggu 4",
+      ];
+
+      const yearly = [
+        "Q1",
+        "Q2",
+        "Q3",
+        "Q4",
+      ];
+
       const categories = [
         "0-3",
         "3-6",
@@ -60,11 +78,12 @@ const BarChart = ({ transactionGraph, colors }) => {
     const monthNames = [
       "Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"
     ];
-    const month = monthNames[date.getMonth()];
-    const day = date.getDate();
+    const month = monthNames[date.getUTCMonth()]; // Use getUTCMonth() for UTC month
+    const day = date.getUTCDate(); // Use getUTCDate() for UTC day
     return { month, day };
   };
 
+
   return (
     <div className={styles.chartItemContainer}>
       {chartData &&
@@ -72,8 +91,8 @@ const BarChart = ({ transactionGraph, colors }) => {
           <div
             key={index}
             className={`${styles.chartItemWrapper} ${selectedIndex !== -1 && selectedIndex !== index
-                ? styles.chartItemWrapperActive
-                : styles.chartItemWrapperInactive
+              ? styles.chartItemWrapperActive
+              : styles.chartItemWrapperInactive
               }`}
           >
             <div className={styles.dateSelectorWrapper}>
@@ -87,10 +106,18 @@ const BarChart = ({ transactionGraph, colors }) => {
                     onClick={() =>
                       selectedIndex !== index ? setSelectedIndex(index) : setSelectedIndex(-1)
                     }
+                    style={{ backgroundColor: index === indexx ? colors[index % colors.length] : 'transparent' }}
                   >
                     <div>
-                      {day}{" "}
-                      {(indexx === 0 || formatDate(chartData[indexx - 1].date).month !== month) && month}
+                      {indexx !== chartData.length - 1 ? (
+                        <>
+                          {day}{" "}
+                          {(indexx === 0 || (formatDate(chartData[indexx - 1].date).month !== month && type != 'weekly')) && month}
+                        </>
+                      ) : (
+                        'kemarin'
+                      )}
+
                     </div>
                   </div>
                 );
@@ -113,7 +140,7 @@ const BarChart = ({ transactionGraph, colors }) => {
                     categories: data.categories,
                     labels: {
                       style: {
-                        colors: index === 0 ? "#000" : "transparent",
+                        colors: index === 0 || index == selectedIndex || selectedIndex == 0 && index == 1 ? "#000" : "transparent",
                       },
                     },
                   },
diff --git a/src/components/BarChart.module.css b/src/components/BarChart.module.css
index b233269..6eade31 100644
--- a/src/components/BarChart.module.css
+++ b/src/components/BarChart.module.css
@@ -9,7 +9,7 @@
     right: 20px;
   }
   .chartItemWrapperActive {
-    top: 200px; /* Move chartItemWrapper down when selected */
+    top: 275px; /* Move chartItemWrapper down when selected */
   }
   
   .chartItemWrapperInactive {
@@ -27,14 +27,12 @@
     flex-grow: 1;
     text-align: center;
     padding: 10px;
-    border: 1px solid black;
     border-radius: 10px 10px 0 0;
     transition: all 0.3s ease-in-out;
   }
   
   .dateSelectorActive {
     color: black;
-    border-color: black;
     z-index: 2;
   }
   
@@ -44,6 +42,6 @@
   }
   
   .chartWrapper {
-    border: 1px solid black;
+    border: 1px solid rgb(179, 177, 177);
   }
   
\ No newline at end of file
diff --git a/src/components/MusicComponent.css b/src/components/MusicComponent.css
index 1a7bb5c..9e53010 100644
--- a/src/components/MusicComponent.css
+++ b/src/components/MusicComponent.css
@@ -45,18 +45,18 @@
   text-align: start;
   font-size: 1rem;
   font-weight: bold;
-  color: white;
+  color: black;
   margin: 0;
 }
 
 .artist-name {
   text-align: start;
   font-size: 0.9rem;
-  color: white;
+  color: black;
   margin: 0;
 }
 
 .song-duration {
   font-size: 0.9rem;
-  color: white;
+  color: black;
 }
diff --git a/src/components/MusicComponent.js b/src/components/MusicComponent.js
index e8eb660..a35b7a4 100644
--- a/src/components/MusicComponent.js
+++ b/src/components/MusicComponent.js
@@ -121,14 +121,15 @@ const MusicComponent = ({ song, min, max, onDecision }) => {
             onTouchEnd={handleTouchEnd}
             style={{ transform: `translateX(${positionX}px)` }}
             ref={containerRef}>
-            {/* {min === 0 && max === 0 &&
-                <VinylComponent
-                    album={songg.image || songg.album.images[0].url}
-                />} */}
-            {song.set && <div className="decisionbgrnd" style={{ backgroundColor: song.bePlayed ? "green": "red" }}>
+            {song.set && <div className="decisionbgrnd" style={{ backgroundColor: song.bePlayed ? "green" : "red" }}>
                 <h1 className="decision">{song.bePlayed ? "next up" : "skipped"}</h1></div>}
             <div className="bgrnd" style={{ backgroundColor: backgroundColor }}></div>
-            <img src={song.image} alt={song.name} className="song-image" />
+            <img
+                src={song.image}
+                alt={song.name}
+                className="song-image"
+                onError={(e) => e.target.src = song.image}
+            />
             <div className="song-details">
                 <p className="song-name">{song.name}</p>
                 <p className="artist-name">{song.artist}</p>
diff --git a/src/components/MusicPlayer.css b/src/components/MusicPlayer.css
index 15d52ff..da67862 100644
--- a/src/components/MusicPlayer.css
+++ b/src/components/MusicPlayer.css
@@ -115,7 +115,7 @@
   overflow: hidden;
   transition: max-height 0.5s ease, padding 0.5s ease;
   /* Smooth transition for max-height and padding */
-  background-color: rgba(0, 0, 0, 0.8);
+  
   /* Example background color */
 }
 
@@ -177,7 +177,8 @@
 }
 
 .expand-button.expanded{
-  padding-top: 0px;
+  padding-top: 2px;
+  margin-top: -6px;
 }
 
 /* Adjust height of the music player container when expanded */
@@ -190,9 +191,7 @@
   display: flex;
   align-items: center;
   padding: 10px;
-  /* background-color: rgb(29, 185, 84); */
-  
-  background-color: #73a585;
+  padding-top: 0px;
 }
 
 .search-box input[type="text"] {
@@ -204,6 +203,13 @@
   font-size: 16px;
   outline: none;
   /* Remove default outline */
+  background-color: #f4efe6;
+  text-align: center;
+}
+.search-box input[type="text"]::placeholder {
+  font-weight: bold;
+  opacity: 0.7;
+  text-align: center;
 }
 
 .search-box .search-icon {
@@ -225,7 +231,6 @@
   display: flex;
   align-items: center;
   padding: 10px;
-  background-color: rgb(29, 185, 84);
 }
 
 .auth-box input[type="text"] {
@@ -236,9 +241,17 @@
   padding: 10px 15px;
   font-size: 16px;
   outline: none;
+  background-color: #019863;
   /* Remove default outline */
 }
 
+.auth-box input[type="text"]::placeholder {
+  color: white; /* Placeholder text color */
+  font-weight: bold;
+  opacity: 0.7; /* Optional: Adjust visibility */
+  text-align: center;
+}
+
 .auth-box .auth-icon {
   margin-right: 5px;
   color: #888;
@@ -253,20 +266,54 @@
   fill: #888;
   /* Adjust fill color */
 }
-
 .rectangle {
   position: relative;
   height: 200px;
   overflow: hidden;
+  border: 3px dashed #fbebcd;
+  border-radius: 11px;
+
+  /* Flexbox for centering */
+  display: flex;
+  flex-direction: column; /* Stack children vertically */
+  justify-content: center; /* Center vertically */
+  background-color: white;
+  z-index: 1;
+  overflow-y: auto;
 }
 
-.diagonal-text {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(-24deg);
-  font-size: 24px;
-  font-weight: bold;
-  color: #676767;
-  white-space: nowrap;
+.middle-text {
+  text-align: center;
+  font-family: Arial, sans-serif; /* Optional font */
+  color: #333; /* Optional text color */
+  margin-bottom: 0.5rem; /* Add spacing between text and button */
+}
+
+.bold-text {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.normal-text {
+  font-weight: normal;
+  font-size: 13px;
+}
+
+.search-button {
+  display: block;
+  margin: 1rem auto 0;
+
+  flex-grow: 1;
+  border: none;
+  border-radius: 25px;
+  padding: 10px 15px;
+  font-size: 16px;
+  outline: none;
+  background-color: #f4efe6;
+  color: black;
+  font-weight: bold;
+}
+
+.search-button:hover {
+  background-color: #0056b3;
 }
diff --git a/src/components/MusicPlayer.js b/src/components/MusicPlayer.js
index 5b43db8..ccfbfa2 100644
--- a/src/components/MusicPlayer.js
+++ b/src/components/MusicPlayer.js
@@ -31,6 +31,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
   const [canvaz, setCanvaz] = useState('');
   const [videoSrc, setVideoSrc] = useState('');
   const videoRef = useRef(null);
+  const inputRef = useRef(null); // Create a ref to the input field
+
 
 
   useEffect(() => {
@@ -368,6 +370,11 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     }
   }, [currentSong]); // Run effect when currentSong changes
 
+  const handleButtonClick = () => {
+    if (inputRef.current) {
+      inputRef.current.focus(); // Focus the input when the button is clicked
+    }
+  };
 
   return (
     <div className={`music-player`} style={{ marginBottom: `${viewing ? '-10px' : ''}` }}>
@@ -464,22 +471,30 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                 />
               </div>
             )}
-            <div className="search-box" style={{}}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                className="search-icon"
-              >
-                <path d="M10.533 1.27893C5.35215 1.27893 1.12598 5.41887 1.12598 10.5579C1.12598 15.697 5.35215 19.8369 10.533 19.8369C12.767 19.8369 14.8235 19.0671 16.4402 17.7794L20.7929 22.132C21.1834 22.5226 21.8166 22.5226 22.2071 22.132C22.5976 21.7415 22.5976 21.1083 22.2071 20.7178L17.8634 16.3741C19.1616 14.7849 19.94 12.7634 19.94 10.5579C19.94 5.41887 15.7138 1.27893 10.533 1.27893ZM3.12598 10.5579C3.12598 6.55226 6.42768 3.27893 10.533 3.27893C14.6383 3.27893 17.94 6.55226 17.94 10.5579C17.94 14.5636 14.6383 17.8369 10.533 17.8369C6.42768 17.8369 3.12598 14.5636 3.12598 10.5579Z" />
-              </svg>
-              <input
-                type="text"
-                placeholder="cari..."
-                value={songName}
-                onChange={handleInputChange}
-              />
+            <div className="search-box"> 
+        <input
+          ref={inputRef} // Attach the ref to the input field
+          type="text"
+          placeholder="Cari musik..."
+          value={songName}
+          onChange={handleInputChange}
+        />
             </div>
 
+            <div
+              className="rectangle"
+              style={{
+                justifyContent: songName === "" && queue.length > 0 && queue.length < 3 || songName != '' ? 'flex-start' : 'center'
+              }}
+              >
+            {songName == "" && queue.length < 1 && (
+              <div className="middle-text">
+                <span className="bold-text">Antrian kosong</span><br />
+                <span className="normal-text">Pilih musikmu</span>
+                <button className="search-button" onClick={handleButtonClick}>Cari musik</button>
+
+              </div>
+            )}
             {songName != "" &&
               songs.map((song, index) => (
                 <MusicComponent
@@ -506,24 +521,26 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                 ))
               )
             }
-            {songName == "" && queue.length < 1 && (
-              <div className="rectangle">
-                <div className="diagonal-text">Antrian kosong - Pilih musikmu</div>
-              </div>
-            )}
             {songName == "" && queue.length > 0 && queue.length < 3 && (
-              <div className="rectangle">
-                <div className="diagonal-text">Drop Your Hits</div>
+
+              <div className="middle-text">
+                <span className="normal-text">Tambahkan musikmu</span>
+                <button className="search-button" onClick={handleButtonClick}>Cari musik</button>
               </div>
             )}
           </div>
-          <div className={`expand-button ${expanded ? "expanded" : ""}`} onClick={toggleExpand}>
-            
-            <h5>
-                {expanded? '⋀' : 'Lihat antrian musik'}
-            </h5>
-          </div></>
+
+
+
+
+        </div>
+      <div className={`expand-button ${expanded ? "expanded" : ""}`} onClick={toggleExpand}>
+
+        <h5>
+          {expanded ? '⋀' : 'Lihat antrian musik'}
+        </h5>
+      </div></>
       }
-    </div>
+    </div >
   );
 }
diff --git a/src/config.js b/src/config.js
index 6cf67cc..ff08a5e 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = 'https://dev.api.kedaimaster.com';
+const API_BASE_URL = 'https://test.api.kedaimaster.com';
 
 export default API_BASE_URL;
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index 1e3935e..570577c 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -848,14 +848,15 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
               <div className={styles.swipeContainer}>
                 <div className={styles.swipeCreditsContent}>
                   {['AI - MUHAMMAD AINUL FIKRI', 
-                    'BACKEND - ZADIT TAQWA W',
-                    'FRONTEND - NAUFAL UNGU W',
-                    'FRONTEND - PASHA UNGU W' ,
-                    'FRONTEND - ZADIT TAQWA W', 
-                    'UI/UX - LUNA CHELISA A', 
-                    'UI/UX - MAULINA AYU E', 
-                    'UI/UX - NUR ARINDA P', 
-                    'UI/UX - NAURA IZZATI B',].map((item, index) => (
+                    'BACKEND - ZADIT TAQWA W.',
+                    'FRONTEND - M. PASHA A. P.' ,
+                    'FRONTEND - NAUFAL DANIYAL P.',
+                    'FRONTEND - ZADIT TAQWA W.', 
+                    'UI/UX - KEVIN DWI WIJAYA', 
+                    'UI/UX - LUNA CHELISA A.', 
+                    'UI/UX - MAULINA AYU E.', 
+                    'UI/UX - NUR ARINDA P.', 
+                    'UI/UX - NAURA IZZATI B.',].map((item, index) => (
                     <div key={index} className={styles.swipeItem}>{item}</div>
                   ))}
                 </div>
diff --git a/src/pages/LinktreePage.module.css b/src/pages/LinktreePage.module.css
index 8d03226..8bd57a6 100644
--- a/src/pages/LinktreePage.module.css
+++ b/src/pages/LinktreePage.module.css
@@ -103,42 +103,46 @@
 
   10%,
   15% {
-    transform: translateY(-11.1%);
+    transform: translateY(-10%);
   }
 
   20%,
   25% {
-    transform: translateY(-22.2%);
+    transform: translateY(-20%);
   }
 
   30%,
   35% {
-    transform: translateY(-33.3%);
+    transform: translateY(-30%);
   }
 
   40%,
   45% {
-    transform: translateY(-44.4%);
+    transform: translateY(-40%);
   }
   
   50%,
   55% {
-    transform: translateY(-55.5%);
+    transform: translateY(-50%);
   }
 
   60%,
   65% {
-    transform: translateY(-66.6%);
+    transform: translateY(-60%);
   }
 
   70%,
   75% {
-    transform: translateY(-77.7%);
+    transform: translateY(-70%);
   }
 
   80%,
   85% {
-    transform: translateY(-88.8%);
+    transform: translateY(-80%);
+  }
+  90%,
+  95% {
+    transform: translateY(-90%);
   }
 }
 /* Sub Heading */
diff --git a/src/pages/Reports.js b/src/pages/Reports.js
index 42c16a6..4187c24 100644
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -217,12 +217,13 @@ const App = ({ cafeId,
           selectedSwitch={["yesterday", "weekly", "monthly", "yearly"].indexOf(
             filter
           )}
-          borderColor={'#b3b1b1'}
+          bgColor={'#f4efe6'}
+          borderColor={'transparent'}
           borderWidth={0.1}
           onToggleCallback={onToggle}
-          fontColor={"black"}
+          fontColor={"#af9463"}
           selectedFontColor={"black"}
-          selectedSwitchColor={"rgb(197, 197, 197)"}
+          selectedSwitchColor={"white"}
           eachSwitchWidth={70}
           height={"25px"}
           fontSize={"12px"}
@@ -280,8 +281,8 @@ const App = ({ cafeId,
           >
             <div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
             <h6 style={{ margin: 0, textAlign: "left" }}>
-              Persentase pertumbuhan dihitung dengan membandingkan periode{" "}
-              {comparisonText} terakhir dengan {comparisonText} hari sebelumnya.
+              Persentase pertumbuhan dihitung dengan membandingkan {" "}
+              {comparisonText} hari terakhir dengan {comparisonText} hari sebelumnya.
             </h6>
           </div>
         </div>
@@ -320,7 +321,7 @@ const App = ({ cafeId,
             ))}
           </div>
         </div>
-        <BarChart transactionGraph={analytics?.transactionGraph} colors={colors}/>
+        <BarChart transactionGraph={analytics?.transactionGraph} type={analytics?.type} aggregatedReports={analytics?.aggregatedReports} colors={colors}/>
       </div>
       <div class="ItemLister_PaymentOption__YZlDL"><div style={{ marginTop: '20px' }} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
     </div>
diff --git a/src/pages/Transactions.module.css b/src/pages/Transactions.module.css
index 9ca72bf..5ba0676 100644
--- a/src/pages/Transactions.module.css
+++ b/src/pages/Transactions.module.css
@@ -26,11 +26,11 @@
   font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 32px;
+  font-size: 6vw;
   color: black;
   text-align: left;
   margin-left: 20px;
-  margin-top: 40px;
+  margin-top: 57px;
 }
 
 .Transactions-detail {