ok

2025-01-04 06:57:36 +07:00
parent 3a899e197a
commit 59a9d299c5
11 changed files with 187 additions and 91 deletions
--- 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",
                      },
                    },
                  },
--- 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);
  }
  
--- 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;
 }
--- 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>
--- 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;
 }
--- 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 >
  );
 }