ok

src/components/Carousel.js

@@ -1,21 +1,18 @@
 import React, { useState } from "react";
 import styles from "./Carousel.module.css"; // Import CSS module
 
-const Carousel = ({ items, onSelect }) => {
-  const [selectedIndex, setSelectedIndex] = useState(0); // Start at the first item
+const Carousel = ({ selectedIndex, items, onSelect }) => {
 
   const moveToNext = () => {
     console.log('aa')
     if (selectedIndex < items.length - 1) {
         console.log('bb')
-      setSelectedIndex(selectedIndex + 1);
       onSelect(selectedIndex + 1); // Send the next index to the parent
     }
   };
 
   const moveToPrev = () => {
     if (selectedIndex > -1) {
-      setSelectedIndex(selectedIndex - 1);
       onSelect(selectedIndex - 1); // Send the previous index to the parent
     }
   };
@@ -27,9 +24,9 @@ const Carousel = ({ items, onSelect }) => {
         <div
           className={`${styles.carouselItem} ${styles.prev}`}
           onClick={moveToPrev}
-          style={{ visibility: selectedIndex === -1 ? "hidden" : "visible" }}
+          style={{ visibility: selectedIndex === -1 && items.length > 0 ? "hidden" : "visible" , backgroundColor: items.length < 1 ? '#919191':'#007bff'}}
         >
-          {selectedIndex === -1 ? "+" : items[selectedIndex - 1]?.name || "+"}
+          {selectedIndex === -1 ?  (items.length > 0 ? "+" : "") : items[selectedIndex - 1]?.name || "+"}
         </div>
 
         {/* Current Item */}
@@ -42,7 +39,7 @@ const Carousel = ({ items, onSelect }) => {
           className={`${styles.carouselItem} ${styles.next}`}
           onClick={moveToNext}
           style={{
-            visibility: selectedIndex === items.length -1 ? "hidden" : "visible",
+            visibility: selectedIndex === items.length -1 && items.length > 0 ? "hidden" : "visible", backgroundColor: items.length < 1 ? '#919191':'#007bff'
           }}
         >
           {selectedIndex < items.length - 1 && items[selectedIndex + 1]?.name}

src/components/Carousel.module.css

@@ -44,7 +44,6 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  background-color: #007bff;
   color: white;
   border: none;
   padding: 10px 20px;

src/components/Header.js

@@ -354,9 +354,9 @@ const Header = ({
                           onChange={() => setIsEditMode(!isEditMode)}
                         />
                       </Child>
-                      <Child onClick={() => setModal("reports")}>Laporan</Child>
+                      <Child onClick={() => setModal("reports")}>Lihat laporan</Child>
                       <Child onClick={() => setModal("add_material")}>
-                        Stok
+                        Kelola bahan baku
                       </Child>
 
                       <Child hasChildren>