ok

2024-12-27 08:02:11 +07:00
parent cf38edac85
commit 675f4f2c42
13 changed files with 168 additions and 72 deletions
--- a/src/App.css
+++ b/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;
--- a/src/components/ButtonWithReplica.css
+++ b/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 */
--- a/src/components/Header.js
+++ b/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;

--- a/src/components/Item.module.css
+++ b/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 */
--- a/src/components/ItemLister.module.css
+++ b/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;
--- a/src/components/ItemType.module.css
+++ b/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;
--- a/src/components/ItemTypeLister.css
+++ b/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;
--- a/src/pages/Cart.module.css
+++ b/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;
--- a/src/pages/CreateClerk.js
+++ b/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');
--- a/src/pages/Dashboard.js
+++ b/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)
-    "#FF6347", // Tomato red (complementary to olive green)
-    "#FF4500", // Orange red (complementary to olive green)
-
-    // Analogous to olive green
-    "#D0E14F", // Light green-yellow
-    "#A9C96E", // Muted olive green (your bg color itself)
-    "#A5B24F", // Earthy olive green
-
-
-    // Triadic (balanced and vibrant palette)
-    "#FF00FF", // Magenta (triadic color)
-    "#1E90FF", // Dodger blue (triadic color)
-    "#32CD32", // Lime green (triadic color)
-
-    // Neutral tones
-    "#FFDAB9", // Peach (light neutral tone)
-    "#4B0082", // Indigo (dark neutral tone)
-    "#8B4513", // Saddle brown (earthy neutral)
+    // Strong contrasting colors for visibility on white background
+    "#333333", // Dark Gray (great contrast for legibility)
+    "#555555", // Medium Gray (slightly lighter, still legible)
+    
+    // Subtle accent colors (not too bright, but distinct)
+    "#4B9F8D", // Muted Teal (offers a soft contrast)
+    "#7F7F7F", // Slate Gray (elegant and balanced)
+  
+    // Softer neutral colors (for less emphasis)
+    "#B0B0B0", // Light Gray (gentle tone for subtle slices)
+    "#D3D3D3", // Silver Gray (light, but still visible on white background)
+  
+    // A touch of color for balance (but still muted)
+    "#9C6E5C", // Muted Brown (earthy, grounded tone)
+    "#A1A1A1", // Silver (neutral highlight)
  ];
+  

  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>
--- a/src/pages/Invoice.module.css
+++ b/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;
--- a/src/pages/LinktreePage.module.css
+++ b/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%;
-  height: auto;
+  width: 56.27px;
+  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;
-  padding: 5px;
+  color: black;
+  width: 110px;
 }
 .dashboardBody {
  padding-left: 5vw;
@@ -500,6 +552,7 @@
  bottom: 0;
  position: absolute;
  width: 100%;
+  height: 165px;
 }

 .cafeListHeader {
--- a/src/pages/Transactions.module.css
+++ b/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;