ok

src/App.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&ital,wght@0,200..800;1,200..800&display=swap");
 html,
 body {
   -ms-overflow-style: none; /* IE and Edge */
@@ -36,7 +36,7 @@ body {
 }
 
 .title {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 28px;

src/components/ButtonWithReplica.css

@@ -9,7 +9,7 @@
   position: relative;
   z-index: 201; /* Make sure the button is above the replica */
 
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 70%; /* Adjusted for better readability */
@@ -125,7 +125,7 @@
 
 .ClaimButton.active {
   visibility: visible;
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 70%; /* Adjusted for better readability */

src/components/Header.js

@@ -17,7 +17,7 @@ const HeaderBar = styled.div`
 
 const Title = styled.h2`
   margin: 0;
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size:${(props) => (props.HeaderSize)};
@@ -26,7 +26,7 @@ const Title = styled.h2`
 
 const ProfileName = styled.h2`
   position: absolute;
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 30px;
@@ -197,7 +197,7 @@ const Child = styled.div`
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   padding-left: 5px;
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
 

src/components/Item.module.css

@@ -96,7 +96,7 @@
 }
 
 .itemName {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-style: normal;
   width: calc(100% - 15px); /* Adjust the width to prevent overflow */
   font-size: 1.4rem;
@@ -124,7 +124,7 @@
 }
 
 .itemPrice {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-style: normal;
   font-weight: 600;
   width: calc(100% - 15px); /* Adjust the width to prevent overflow */
@@ -136,7 +136,7 @@
 }
 
 .itemPriceInvoice {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-style: normal;
   font-weight: 600;
   width: calc(100% - 15px); /* Adjust the width to prevent overflow */
@@ -158,7 +158,7 @@
 }
 
 .itemQtyValue {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-style: normal;
   font-weight: 600;
   margin-top: 19px;
@@ -169,7 +169,7 @@
 }
 
 .itemQtyInput {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-style: normal;
   font-weight: 600;
   width: 30px; /* Adjust the width to prevent overflow */

src/components/ItemLister.module.css

@@ -35,7 +35,7 @@
 
 .title {
   background-color: transparent;
-    font-family: "Poppins", sans-serif;
+    font-family: "Plus Jakarta Sans", sans-serif;
     font-weight: 500;
     font-style: normal;
     font-size: 20px;
@@ -119,7 +119,7 @@
   justify-content: space-between;
   width: 80vw;
   margin: 0 auto;
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size: 1.5em;
@@ -131,7 +131,7 @@
   justify-content: space-between;
   width: 80vw;
   margin: 0 auto;
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size: 0.9em;
@@ -139,7 +139,7 @@
   margin-bottom: 17px;
 }
 .PayButton {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 32px;

src/components/ItemType.module.css

@@ -43,7 +43,7 @@
 }
 
 .item-type-name {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 14px;

src/components/ItemTypeLister.css

@@ -56,7 +56,7 @@
   align-self: center; /* Center the button horizontally */
 }
 .item-type-name {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-style: normal;
   height: 20vw;
   font-size: 1.5rem;

src/pages/Cart.module.css

@@ -9,7 +9,7 @@
 }
 
 .Cart-title {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 32px;
@@ -85,7 +85,7 @@
   margin-bottom: 17px;
 }
 .CheckoutButton {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 32px;

src/pages/CreateClerk.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { createClerks } from '../helpers/userHelpers'; // Adjust the import path as needed
+import { useLocation } from "react-router-dom";
 
 const CreateClerk = ({ shopId }) => {
   const [username, setUsername] = useState('');
@@ -7,6 +8,11 @@ const CreateClerk = ({ shopId }) => {
   const [loading, setLoading] = useState(false);
   const [message, setMessage] = useState('');
 
+  const location = useLocation();
+  
+  const queryParams = new URLSearchParams(location.search);
+  const cafeIdParam = queryParams.get("cafeId");
+
   const handleSubmit = async (event) => {
     event.preventDefault();
     setLoading(true);
@@ -20,7 +26,7 @@ const CreateClerk = ({ shopId }) => {
     }
 
     try {
-      const create = await createClerks(shopId, username, password);
+      const create = await createClerks(shopId || cafeIdParam, username, password);
 
       if (create) setMessage('Clerk created successfully');
       else setMessage('Failed to create clerk');

src/pages/Dashboard.js

@@ -43,6 +43,23 @@ const LinktreePage = ({ user, setModal }) => {
 
   }, [location]);
 
+  useEffect(() => {
+    const url = new URL(window.location.href); // Get the current URL
+    const searchParams = new URLSearchParams(url.search); // Get the query parameters
+    console.log(selectedItemId)
+    if (selectedItemId != 0 && selectedItemId != -1) {
+      // Add cafeId to the query parameter
+      searchParams.set('cafeId', selectedItemId);
+    } else {
+      // Remove cafeId from the query parameter
+      searchParams.delete('cafeId');
+    }
+  
+    // Update the URL with the modified query params
+    window.history.replaceState(null, '', `${url.pathname}?${searchParams.toString()}`);
+  }, [selectedItemId]);
+
+
   // Handle user transactions
   const handleMyTransactions = async () => {
     try {
@@ -148,26 +165,23 @@ const LinktreePage = ({ user, setModal }) => {
   };
 
   const colors = [
-    // Complementary (for contrast with olive green)
+    // Strong contrasting colors for visibility on white background
-    "#FF6347", // Tomato red (complementary to olive green)
+    "#333333", // Dark Gray (great contrast for legibility)
-    "#FF4500", // Orange red (complementary to olive green)
+    "#555555", // Medium Gray (slightly lighter, still legible)
-
+    
-    // Analogous to olive green
+    // Subtle accent colors (not too bright, but distinct)
-    "#D0E14F", // Light green-yellow
+    "#4B9F8D", // Muted Teal (offers a soft contrast)
-    "#A9C96E", // Muted olive green (your bg color itself)
+    "#7F7F7F", // Slate Gray (elegant and balanced)
-    "#A5B24F", // Earthy olive green
+  
-
+    // Softer neutral colors (for less emphasis)
-
+    "#B0B0B0", // Light Gray (gentle tone for subtle slices)
-    // Triadic (balanced and vibrant palette)
+    "#D3D3D3", // Silver Gray (light, but still visible on white background)
-    "#FF00FF", // Magenta (triadic color)
+  
-    "#1E90FF", // Dodger blue (triadic color)
+    // A touch of color for balance (but still muted)
-    "#32CD32", // Lime green (triadic color)
+    "#9C6E5C", // Muted Brown (earthy, grounded tone)
-
+    "#A1A1A1", // Silver (neutral highlight)
-    // Neutral tones
-    "#FFDAB9", // Peach (light neutral tone)
-    "#4B0082", // Indigo (dark neutral tone)
-    "#8B4513", // Saddle brown (earthy neutral)
   ];
+  
 
   const selectedItems = items.items?.find(item => (item.userId || item.cafeId) === selectedItemId);
 
@@ -268,8 +282,8 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                                 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
                             </g>
                           </svg>
-                          <p>Total pemasukan</p>
                           <p>{items?.totalIncome}</p>
+                          <p> pemasukan</p>
                         </div>
                         <div className={styles.cardItem}>
                           <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
@@ -312,7 +326,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                                 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
                             </g>
                           </svg>
-                          <p>Total keuntungan</p>
+                          <p> keuntungan</p>
                           <p>{items?.totalIncome * 0.02}</p>
                         </div>
                       </div>
@@ -413,6 +427,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                               API_BASE_URL + "/" + (JSON.parse(filteredItems.welcomePageConfig)?.image || '') : 'https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg'
                             }
                           />
+                          <p>{selectedItems?.totalIncome * 0.02}</p>
                           <p>{filteredItems.name}</p>
                         </div>
                       </div>
@@ -462,8 +477,8 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                                 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
                               </g>
                             </svg>
-                            <p>Total pemasukan</p>
                             <p>{formatIncome(items?.totalIncome)}</p>
+                            <p> pemasukan</p>
                           </div>
                           <div className={styles.cardItem}>
                             <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
@@ -506,8 +521,8 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                                 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
                               </g>
                             </svg>
-                            <p>Total pengeluaran</p>
                             <p>{formatIncome(items?.totalOutcome)}</p>
+                            <p> pengeluaran</p>
                           </div>
                           <div className={styles.cardItem}>
                             <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
@@ -550,8 +565,8 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                                 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
                               </g>
                             </svg>
-                            <p>Total tanggungan</p>
                             <p>{formatIncome(items?.totalIncome * 0.02)}</p>
+                            <p> tanggungan</p>
                           </div>
                         </div>
                       ) : (
@@ -651,6 +666,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                                 API_BASE_URL + "/" + (JSON.parse(selectedItems.welcomePageConfig)?.image || '') : 'https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg'
                               }
                             />
+                            <p>&nbsp;</p>
                             <p>{selectedItems?.name}</p>
                           </div>
                         </div>
@@ -664,7 +680,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
             <div className={styles.dashboardBody}>
               <button className={styles.goCafeButton} style={{ visibility: (selectedItems?.cafeId || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeId) == null ? 'hidden' : 'visible' }} onClick={() => window.location.href = window.location.origin + '/' + (selectedItems?.cafeId || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeId)}>Kunjungi kedai</button>
 
-              <h3>terlakuu</h3>
+              <h3 style={{color: 'black'}}>terlaku</h3>
               <div
                 style={{
                   display: "flex",
@@ -694,7 +710,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                       >
                         ★
                       </div>
-                      <h5 style={{ margin: 0, textAlign: "left" }}>{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}% &nbsp; {item.value} </h5>
+                      <h5 style={{ margin: 0, textAlign: "left" , color: 'black'}}>{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}% &nbsp; {item.value} </h5>
                     </div>
                   ))}
                   {segments.length < 1 &&
@@ -737,7 +753,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
           </div>
           <div className={styles.cafeListWrapper}>
             <div className={styles.cafeListHeader}>
-              Semua {user.roleId < 1 ? 'penyewa' : 'kedai yang dikau miliki'}
+              Semua {user.roleId < 1 ? 'penyewa' : 'kedai anda'}
             </div>
             <div className={styles.cafeList}>
             </div>
@@ -826,6 +842,27 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
         <div className={styles.centeredLinktreePage}>
           <div className={styles.dashboardLine}></div>
           <div className={styles.dashboardContainer}>
+            {API_BASE_URL == 'https://test.api.kedaimaster.com' ?
+            <div className={styles.mainHeading}>
+              KEDAIMASTER CREDITS
+              <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) => (
+                    <div key={index} className={styles.swipeItem}>{item}</div>
+                  ))}
+                </div>
+              </div>
+              diskon 50%
+            </div> 
+            : 
             <div className={styles.mainHeading}>
               COBA KEDAIMASTER
               <div className={styles.swipeContainer}>
@@ -835,9 +872,9 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                   ))}
                 </div>
               </div>
-              diskon 0%
+              diskon 50%
             </div>
-
+            }
             <div className={styles.subHeading}>
               Solusi berbasis web untuk memudahkan pengelolaan kedai, dengan fitur yang mempermudah pemilik, kasir, dan tamu berinteraksi.
             </div>

src/pages/Invoice.module.css

@@ -10,7 +10,7 @@
 }
 
 .Invoice-title {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 6vw;
@@ -21,7 +21,7 @@
 }
 
 .Invoice-detail {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 20px;
@@ -66,7 +66,7 @@
   justify-content: space-between;
   width: 80vw;
   margin: 0 auto;
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size: 1.3em;
@@ -76,7 +76,7 @@
 }
 
 .PayButton {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 20px;
@@ -112,7 +112,7 @@
   justify-content: space-between;
   width: 80vw;
   margin: 0 auto;
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size: 1.5em;

src/pages/LinktreePage.module.css

@@ -12,7 +12,7 @@
   display: flex;
   flex-direction: column;
   justify-content: start;
-  background-color: rgb(193 201 134);
+  background-color: rgb(255 255 255);
   position: relative;
 }
 
@@ -53,6 +53,10 @@
   animation: swipeUp 12s infinite;
 }
 
+.swipeCreditsContent {
+  animation: swipeUpCredits 12s infinite;
+}
+
 .swipeItem {
   overflow: hidden;
   height: 75px;
@@ -90,6 +94,53 @@
   }
 }
 
+@keyframes swipeUpCredits {
+
+  0%,
+  5% {
+    transform: translateY(0);
+  }
+
+  10%,
+  15% {
+    transform: translateY(-11.1%);
+  }
+
+  20%,
+  25% {
+    transform: translateY(-22.2%);
+  }
+
+  30%,
+  35% {
+    transform: translateY(-33.3%);
+  }
+
+  40%,
+  45% {
+    transform: translateY(-44.4%);
+  }
+  
+  50%,
+  55% {
+    transform: translateY(-55.5%);
+  }
+
+  60%,
+  65% {
+    transform: translateY(-66.6%);
+  }
+
+  70%,
+  75% {
+    transform: translateY(-77.7%);
+  }
+
+  80%,
+  85% {
+    transform: translateY(-88.8%);
+  }
+}
 /* Sub Heading */
 .subHeading {
   font-weight: 400;
@@ -417,6 +468,7 @@
 
 .header {
   background-color: white;
+  border-bottom: 1px solid gray;
   top: 0;
   width: 100%;
   height: calc(25vh - 25px);
@@ -435,7 +487,8 @@
 }
 
 .headerCard {
-  background-color: #779f94;
+  background-color: white;
+  border: 1px solid gray;
   position: relative;
   width: 90%;
   border-radius: 20px;
@@ -447,23 +500,22 @@
   width: 100%;
   height: 100%;
   align-items: center;
-  justify-content: center; /* Center the content */
+  justify-content: space-evenly;
 }
 
 .cardImg {
   border-radius: 20px;
   font-size: 15px;
   text-align: center;
-  margin: 10px;
-  padding: 5px;
   height: 100%;
   place-content: center;
-
+  color: black;
+  width: 110px;
 }
 
 .cardImg img {
-  width: 100%;
+  width: 56.27px;
-  height: auto;
+  height: 56.27px;
   max-width: 85px;
   object-fit: contain;
   border-radius: 50%; /* Keep the circular shape */
@@ -478,8 +530,8 @@
   border-radius: 20px;
   font-size: 15px;
   text-align: center;
-  margin: 10px;
+  color: black;
-  padding: 5px;
+  width: 110px;
 }
 .dashboardBody {
   padding-left: 5vw;
@@ -500,6 +552,7 @@
   bottom: 0;
   position: absolute;
   width: 100%;
+  height: 165px;
 }
 
 .cafeListHeader {

src/pages/Transactions.module.css

@@ -23,7 +23,7 @@
 }
 
 .Transactions-title {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 32px;
@@ -34,7 +34,7 @@
 }
 
 .Transactions-detail {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 15px;
@@ -56,7 +56,7 @@
       justify-content: space-between;
       /* width: 100%; */
       margin: 0 auto;
-      font-family: "Poppins", sans-serif;
+      font-family: "Plus Jakarta Sans", sans-serif;
       font-weight: 600;
       font-style: normal;
       font-size: 15px;
@@ -72,7 +72,7 @@
   justify-content: space-between;
   width: 100%; /* Ensures it takes up full width */
   margin: 0 auto;
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size: 15px;
@@ -82,7 +82,7 @@
 }
 
 .PayButton {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 15px; /* Adjusted for better readability */
@@ -97,7 +97,7 @@
   text-align: center;
 }
 .DeclineButton {
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 15px;
@@ -114,7 +114,7 @@
 .DeclineButton.active {
   position: relative;
   z-index: 201;
-  font-family: "Poppins", sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 20px;