ok

src/components/BarChart.module.css

@@ -35,7 +35,7 @@
     flex-grow: 1;
     text-align: center;
     padding: 10px;
-    border-radius: 10px 0 0 0;
+    /* border-radius: 10px 0 0 0; */
     transition: all 0.3s ease-in-out;
     font-weight: 600;
   }
@@ -44,7 +44,7 @@
     flex-grow: 1;
     text-align: center;
     padding: 10px;
-    border-radius: 0 10px 0 0;
+    /* border-radius: 0 10px 0 0; */
     transition: all 0.3s ease-in-out;
     font-weight: 600;
   }
@@ -56,11 +56,11 @@
   
   .dateSelectorInactive {
     color: transparent;
-    border-color: transparent;
+    /* border-color: transparent; */
   }
   
   .chartWrapper {
-    border: 1px solid rgb(179, 177, 177);
-    border-radius: 0 0 11px 11px;
+    /* border: 1px solid rgb(179, 177, 177);
+    border-radius: 0 0 11px 11px; */
   }
   

src/components/Coupon.css

@@ -3,10 +3,13 @@
     display: flex;
     border: 2px solid #ccc;
     height: 50%;
+    max-height: 140px;
     background-color: #f8f8f8;
     border-radius: 8px;
     font-family: Arial, sans-serif;
     align-items: center;
+    position: relative;
+    margin-bottom: 5px;
   }
   
   /* Left side (with the rotated code and dotted line) */
@@ -22,7 +25,7 @@
   
   .coupon-code {
     writing-mode: vertical-rl;
-    font-size: 18px;
+    font-size: 4vw;
     font-weight: bold;
     color: #333;
     margin: 0;
@@ -42,7 +45,7 @@
     flex-grow: 1;
   }
   .coupon-value {
-    font-size: clamp(18px, 3vw, 24px); /* Minimum 18px, 6vw (responsive), Maximum 24px */
+    font-size: 4vw; /* Minimum 18px, 6vw (responsive), Maximum 24px */
     font-weight: bold;
     color: #2c3e50;
     text-align: left;
@@ -50,7 +53,34 @@
   
   .coupon-period,
   .coupon-expiration {
-    font-size: 14px;
+    font-size: 3vw;
     color: #7f8c8d;
   }
-  
+  
+  
+.RibbonBannerInverted {
+  pointer-events: none;
+  position: absolute;
+  top: -38px;
+  width: 200px;
+  height: 200px;
+  right: -35px;
+  transform: scale(-0.8,0.8);
+}
+
+.RibbonBannerInverted img {
+  object-fit: contain;
+  width: 100%;
+  height: auto;
+}
+
+.RibbonBannerInverted h1 {
+  margin: 0; /* Remove default margin */
+  font-size: 20px; /* Adjust font size as needed */
+  transform: rotate(-44.7deg)scale(-1,1); /* Rotate the text */
+  transform-origin: center; /* Rotate around its center */
+  white-space: nowrap; /* Prevent text wrapping */
+  position: absolute;
+  top: 68px;
+  left: -9px;
+}

src/components/Coupon.js

@@ -3,22 +3,65 @@ import './Coupon.css'; // Import a CSS file for styling
 
 const Coupon = ({ code, value, period, type, expiration }) => {
     // Format the value based on type
-    const formattedValue = type === 'fixed' ? `Rp ${value}` : value != 0 ? `${value}%` : 'kupon berlangganan';
+    const formattedValue = type == 'fixed' ? `Rp ${value}` : value != 0 ? `${value}%` : 'kupon berlangganan';
+
+    // Function to convert expiration to Indonesian date format (dd MMMM yyyy)
+    const formatExpirationDate = (dateString) => {
+        const date = new Date(dateString);
+
+        // Options for Indonesian date format
+        const options = {
+            weekday: 'long', // 'Monday'
+            year: 'numeric', // '2025'
+            month: 'long', // 'Januari'
+            day: 'numeric' // '11'
+        };
+
+        // Format the date to Indonesian locale (ID)
+        return date.toLocaleDateString('id-ID', options);
+    };
+
+    // Function to calculate the difference in days between expiration and current date (adjusted to UTC)
+    const calculateDaysLeft = (expirationDate) => {
+        const currentDate = new Date();
+        const expiration = new Date(expirationDate);
+
+        // Convert both dates to UTC
+        const utcCurrentDate = new Date(currentDate.toISOString()); // Ensure it's in UTC
+        const utcExpirationDate = new Date(expiration.toISOString()); // Ensure it's in UTC
+
+        // Calculate the time difference in milliseconds
+        const timeDifference = utcExpirationDate - utcCurrentDate;
+        const daysLeft = Math.ceil(timeDifference / (1000 * 3600 * 24)); // Convert to days
+
+        return daysLeft;
+    };
+
+    const daysLeft = expiration ? calculateDaysLeft(expiration) : null;
 
     return (
         <div className='coupon'>
+            {daysLeft < 1 && (
+              <div className='RibbonBannerInverted'>
+                <img src={"https://i.imgur.com/yt6osgL.png"}></img>
+                <h1>Kupon berakhir</h1>
+              </div>
+            )}
             <div className='coupon-left'>
                 <div className='coupon-code'>{code == null ? '404' : code}</div>
-                <div className='dotted-line'></div>
+                {/* <div className='dotted-line'></div> */}
             </div>
             <div className='coupon-right'>
                 <h2 className='coupon-value'>{code == null ? 'Kupon tidak ditemukan' : formattedValue}</h2>
                 {type && <span className='coupon-type'>{type}</span>} {/* Display type if provided */}
                 <p className='coupon-period'>
-                    {code == null ? '-' : value == 0 ? `Masa berlangganan ${period} minggu` : `Masa kupon ${period} minggu`} {/* Fixed string concatenation */}
+                    {code == null ? '-' : value === 0 ? `Masa berlangganan ${period} minggu` : `Masa kupon ${period} minggu`}
                 </p>
                 <p className='coupon-expiration'>
-                    {expiration == null ? (code == null ? '-' : 'Tanpa kadaluarsa') : `Berlaku sampai: ${expiration}`}
+                    {expiration == null ? (code == null ? '-' : 'Tanpa kadaluarsa') : 
+                        daysLeft <= 7 
+                        ? `Berlaku hingga ${daysLeft} hari lagi` 
+                        : `Berlaku hingga: ${formatExpirationDate(expiration)}`}
                 </p>
             </div>
         </div>

src/components/DailyCharts.js

@@ -89,15 +89,15 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
                     key={indexx}
                     className={`${styles.dateSelector} ${index === indexx ? styles.dateSelectorActive : styles.dateSelectorInactive
                       }`}
-                      style={{border: (index==0||index==1) && selectedIndex != index && selectedIndex != indexx || selectedIndex ==-1 && index == 0 || selectedIndex == index && index == indexx ? 
-                        '1px solid rgb(179, 177, 177)' : 'none' }}
+                      style={{position: 'relative' }}
                     onClick={() =>
                       type == 'yesterday' && selectedIndex == -1 || type != 'yesterday' && selectedIndex !== index ? setSelectedIndex(index) : setSelectedIndex(-1)
                     }
                     // style={{ backgroundColor: index === indexx ? colors[index % colors.length] : 'transparent' }}
                   >
+                    <div style={{position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: index == indexx ? `1px solid ${colors[index % colors.length]}` : 'none'}}></div>
                     <div 
-                    style={{ color: index === indexx ? colors[index % colors.length] : 'transparent' }}>
+                    style={{ color: index === indexx ? 'black' : 'transparent' }}>
                       {indexx !== chartData.length - 1 ? (
                         <>
                           {day}{" "}

src/components/Modal.js

@@ -61,7 +61,6 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
       <div className={styles.modalContent} onClick={handleContentClick}>
         
       {modalContent === "edit_account" && <AccountUpdatePage user={user} />}
-        {modalContent === "join" && <Join setModal={setModal} />}
         {modalContent === "reset-password" && <ResetPassword />}
         {modalContent === "req_notification" && <NotificationRequest setModal={setModal} />}
         {modalContent === "blocked_notification" && <NotificationBlocked />}
@@ -105,6 +104,10 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
         {modalContent === "create_coupon" && <CreateCoupon />}
         {modalContent === "check_coupon" && <CheckCoupon />}
         {modalContent === "create_user" && <CreateUserWithCoupon setModal={setModal}/>}
+
+        
+        {modalContent === "join" && <Join setModal={setModal} />}
+        {modalContent === "claim-coupon" && <Join setModal={setModal} />}
       </div>
     </div>
   );

src/components/PeriodCharts.js

@@ -52,16 +52,18 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
               onClick={() =>
                 selectedIndex === -1 ? setSelectedIndex(0) : setSelectedIndex(-1)
               }
-              style={{border: '1px solid rgb(179, 177, 177)', color: colors[0]}}
-             >
+              style={{ color: 'black',position: 'relative' }}
+            >
+            <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom:  `1px solid ${colors[0]}` }}></div>
               <div>{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}</div>
             </div>
             <div
               className={`${styles.dateSelector} ${styles.dateSelectorInactive
                 }`}
-                onClick={() =>
-                  selectedIndex === 0 ? setSelectedIndex(-1) : setSelectedIndex(1)
-                }>
+
+              onClick={() =>
+                selectedIndex === 0 ? setSelectedIndex(-1) : setSelectedIndex(1)
+              }>
               <div>{type == 'monthly' ? 'bulan ini' : 'tahun ini'}</div>
             </div>
           </div>
@@ -70,7 +72,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
               options={{
                 tooltip: { enabled: false },
                 chart: { type: "area", zoom: { enabled: false }, toolbar: { show: false } },
-                xaxis: { 
+                xaxis: {
                   categories: cat,
                   axisBorder: {
                     show: false, // Removes the x-axis line
@@ -78,7 +80,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
                   axisTicks: {
                     show: false, // Removes the ticks on the x-axis
                   },
-                 },
+                },
                 yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
                 grid: { show: false },
                 fill: { opacity: 0.5 },
@@ -105,17 +107,19 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
             <div
               className={`${styles.dateSelector} ${styles.dateSelectorInactive
                 }`}
-                onClick={() =>
-                  selectedIndex === 1 ? setSelectedIndex(-1) : setSelectedIndex(0)
-                }>
+              onClick={() =>
+                selectedIndex === 1 ? setSelectedIndex(-1) : setSelectedIndex(0)
+              }>
               <div>{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}</div>
             </div>
             <div className={styles.dateSelector}
               onClick={() =>
                 selectedIndex === -1 ? setSelectedIndex(1) : setSelectedIndex(-1)
               }
-              
-              style={{border: '1px solid rgb(179, 177, 177)', color: colors[1]}}>
+
+              style={{ color: 'black',position: 'relative' }}
+            >
+            <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid ${colors[1]}` }}></div>
               <div>{type == 'monthly' ? 'bulan ini' : 'tahun ini'}</div>
             </div>
           </div>
@@ -125,13 +129,14 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
                 tooltip: { enabled: false },
                 chart: { type: "area", zoom: { enabled: false }, toolbar: { show: false } },
                 xaxis: {
-                  categories: cat, 
+                  categories: cat,
                   axisBorder: {
                     show: false, // Removes the x-axis line
                   },
                   axisTicks: {
                     show: false, // Removes the ticks on the x-axis
-                  }, },
+                  },
+                },
                 yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
                 grid: { show: false },
                 fill: { opacity: 0.5 },

src/components/TablesPage.js

@@ -259,7 +259,7 @@ const SetPaymentQr = ({ shop }) => {
             <div
               style={{
                 height: 28,
-                left: isconfigcafeidentityname ? 0:69,
+                left: isconfigcafeidentityname ? 0 : 69,
                 right: 0,
                 top: 5,
                 position: 'absolute',
@@ -328,7 +328,6 @@ const SetPaymentQr = ({ shop }) => {
                   >
                     {window.location.hostname}/
                   </div>
-
                   <input
                     ref={cafeIdentifyNameRef}
                     style={{
@@ -344,16 +343,24 @@ const SetPaymentQr = ({ shop }) => {
                       paddingLeft: isconfigcafeidentityname ? '10px' : '0', // Adjust padding when focused
                       borderLeft: isconfigcafeidentityname ? '1px solid #ccc' : '0', // Adjust border when focused
                     }}
-                    onChange={(e)=>setCafeIdentifyNameUpdate(e.target.value)}
+                    onChange={(e) => {
+                      // Convert to lowercase, replace spaces with underscores, and remove invalid characters
+                      const updatedValue = e.target.value
+                        .toLowerCase() // Convert input to lowercase
+                        .replace(/ /g, '_') // Replace spaces with underscores
+                        .replace(/[^a-z0-9_]/g, ''); // Remove characters that are not lowercase letters, numbers, or underscores
+                      setCafeIdentifyNameUpdate(updatedValue);
+                    }}
                     value={cafeIdentifyNameUpdate}
                     onFocus={() => {
                       setIsConfigCafeIdentityName(true); // Set the state to true when input is focused
                     }}
                     onBlur={() => {
                       setIsConfigCafeIdentityName(false); // Set the state to false when input loses focus
-                      setCafeIdentifyNameUpdate(cafeIdentifyNameDefault)
+                      setCafeIdentifyNameUpdate(cafeIdentifyNameDefault); // Reset to default value on blur
                     }} // Handle blur event to reset the state
                   />
+
                 </div>
               </div>
               <div
@@ -600,10 +607,10 @@ const SetPaymentQr = ({ shop }) => {
         </div>
       </div>
 
-      
+
 
       {!isconfigcafeidentityname ? <div
-        onClick={() => {setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus()}} // Open the config modal
+        onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus() }} // Open the config modal
         style={{
           backgroundColor: '#303034',
           right: 0,
@@ -618,8 +625,10 @@ const SetPaymentQr = ({ shop }) => {
       >
         Ganti alamat kedai
       </div> : (
-        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', 
-        marginBottom: '10px' }}>
+        <div style={{
+          display: 'flex', justifyContent: 'space-between', width: '100%',
+          marginBottom: '10px'
+        }}>
           <div
             onClick={() => setIsConfigCafeIdentityName(false)} // Close the config modal
             style={{
@@ -641,7 +650,7 @@ const SetPaymentQr = ({ shop }) => {
               setCafeIdentifyNameDefault(cafeIdentifyNameUpdate)
               // Handle save functionality here
               setIsConfigCafeIdentityName(false); // Close after saving
-              
+
             }}
             style={{
               backgroundColor: '#303034',

src/helpers/couponHelpers.js

@@ -0,0 +1,109 @@
+// helpers/couponHelpers.js
+
+import API_BASE_URL from '../config.js';
+
+// Helper function to get the auth token from localStorage
+export function getAuthToken() {
+  return localStorage.getItem('auth');
+}
+
+// Function to check the validity of the coupon code
+export async function checkCoupon(couponCode) {
+  try {
+    const response = await fetch(`${API_BASE_URL}/coupon/check/${couponCode}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      return { status: 'Coupon is valid', coupon: data.coupon };
+    } else {
+      return { status: 'Coupon not found or expired', coupon: null };
+    }
+  } catch (error) {
+    console.error('Error checking coupon:', error);
+    return { status: 'Error checking coupon.', coupon: null };
+  }
+}
+
+// Function to create a user with the coupon code
+export async function createUserWithCoupon(username, email, password, couponCode) {
+  try {
+    const response = await fetch(`${API_BASE_URL}/coupon/create-user`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        username,
+        email,
+        password,
+        couponCode,
+      }),
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      return { success: true, token: data.token };
+    } else {
+      const errorData = await response.json();
+      return { success: false, message: errorData.message || 'Error creating user' };
+    }
+  } catch (error) {
+    console.error('Error creating user with coupon:', error);
+    return { success: false, message: 'Error creating user.' };
+  }
+}
+
+// Function to create a user with the coupon code
+export async function logCouponForUser(couponCode) {
+  try {
+    const response = await fetch(`${API_BASE_URL}/coupon/log-user`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${getAuthToken()}`,
+      },
+      body: JSON.stringify({
+        couponCode,
+      }),
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      return { success: true };
+    } else {
+      const errorData = await response.json();
+      return { success: false, message: errorData.message || 'Error creating user' };
+    }
+  } catch (error) {
+    console.error('Error creating user with coupon:', error);
+    return { success: false, message: 'Error creating user.' };
+  }
+}
+
+// Function to check the validity of the coupon code
+export async function getUserCoupons() {
+  try {
+    const response = await fetch(`${API_BASE_URL}/coupon/get/`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${getAuthToken()}`,
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      return { status: 'Coupon is valid', coupons: data.coupons };
+    } else {
+      return { status: 'Coupon not found or expired', coupon: null };
+    }
+  } catch (error) {
+    console.error('Error checking coupon:', error);
+    return { status: 'Error checking coupon.', coupon: null };
+  }
+}

src/pages/CreateUserWithCoupon.js

@@ -1,10 +1,7 @@
+// LinktreePage.js
 import React, { useState, useEffect } from 'react';
-import styles from './LinktreePage.module.css'; // Import the module.css file
-import API_BASE_URL from '../config.js';
-
-function getAuthToken() {
-  return localStorage.getItem('auth');
-}
+import styles from './Join.module.css';
+import { checkCoupon, createUserWithCoupon } from '../helpers/couponHelpers';  // Import the helper functions
 
 const LinktreePage = ({ setModal }) => {
   const queryParams = new URLSearchParams(window.location.search);
@@ -25,39 +22,22 @@ const LinktreePage = ({ setModal }) => {
   // Detect query params on component mount
   useEffect(() => {
     const code = queryParams.get('couponCode');
-    console.log(code)
     if (code) {
-      setCouponStatus(200);
+      setCouponStatus('Coupon is valid');
       setCouponCode(code);
-      setIsUsingCoupon(true);  // Automatically switch to the coupon input state
+      setIsUsingCoupon(true); // Automatically switch to the coupon input state
     }
   }, [queryParams]);
 
+  // Handle coupon validation
   const handleCheckCoupon = async (e) => {
     e.preventDefault();
-    try {
-      const response = await fetch(`${API_BASE_URL}/coupon/check/${couponCode}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${getAuthToken()}`,
-        },
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setCouponStatus('Coupon is valid');
-        setCouponDetails(data.coupon);
-      } else {
-        setCouponStatus('Coupon not found or expired');
-        setCouponDetails(null);
-      }
-    } catch (error) {
-      setCouponStatus('Error checking coupon.');
-      setCouponDetails(null);
-    }
+    const { status, coupon } = await checkCoupon(couponCode);
+    setCouponStatus(status);
+    setCouponDetails(coupon);
   };
 
+  // Handle user creation with coupon
   const handleCreateUserWithCoupon = async (e) => {
     e.preventDefault();
 
@@ -66,55 +46,38 @@ const LinktreePage = ({ setModal }) => {
       return;
     }
 
-    try {
-      const response = await fetch(`${API_BASE_URL}/coupon/create-user`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${getAuthToken()}`,
-        },
-        body: JSON.stringify({
-          username,
-          email,
-          password,
-          couponCode,
-        }),
-      });
+    setLoading(true);
+    const { success, token, message } = await createUserWithCoupon(username, email, password, couponCode);
 
-      if (response.ok) {
-        const data = await response.json();
-        setCouponStatus('User created successfully with coupon');
-        setCouponDetails(null);
+    if (success) {
+      setCouponStatus('User created successfully with coupon');
+      localStorage.setItem('auth', token);
 
-        localStorage.setItem('auth', data.token);
+      // Clean the URL by removing query parameters and hash
+      const cleanUrl = window.location.origin + window.location.pathname;
+      window.history.replaceState(null, '', cleanUrl);
 
-        // Clean the URL by removing query parameters and hash
-        const cleanUrl = window.location.origin + window.location.pathname;
-
-        // Replace the current URL with the cleaned one
-        window.history.replaceState(null, '', cleanUrl);
-
-        // Reload the page with the cleaned URL (no query params or hash)
-        window.location.reload();
-      } else {
-        const errorData = await response.json();
-        setCouponStatus(errorData.message || 'Error creating user');
-        setModal('join', { couponCode })
-      }
-    } catch (error) {
-      setCouponStatus('Error creating user.');
-      setModal('join', { couponCode })
+      // Reload the page with the cleaned URL (no query params or hash)
+      window.location.reload();
+    } else {
+      setCouponStatus(message || 'Error creating user');
+      setModal('join', { couponCode });
     }
+
+    setLoading(false);
   };
 
   return (
     <div className={styles.linktreePage}>
       <div className={styles.dashboardContainer}>
         <div className={styles.mainHeading}>Gunakan Kupon</div>
+        <div className={styles.subHeadingTransparent}>
+          Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
+        </div>
 
         <div className={styles.LoginForm}>
           <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
-            <label htmlFor="username" className={styles.usernameLabel}>---- masuk -------------------------------</label>
+            <label htmlFor="username" className={styles.usernameLabel}>---- Daftar -------------------------------</label>
             <input
               type="text"
               placeholder="Username"
@@ -130,7 +93,7 @@ const LinktreePage = ({ setModal }) => {
               onChange={(e) => setEmail(e.target.value)}
               className={!error ? styles.usernameInput : styles.usernameInputError}
             />
-            <button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true) }} className={styles.claimButton}>
+            <button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true); }} className={styles.claimButton}>
               <span>➜</span>
             </button>
           </div>
@@ -139,7 +102,6 @@ const LinktreePage = ({ setModal }) => {
             <span>
               <label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
               <label htmlFor="password" className={styles.usernameLabel}> &nbsp; ----------------- &nbsp; </label>
-
             </span>
 
             <input

src/pages/Dashboard.js

@@ -6,11 +6,13 @@ import { getOwnedCafes, createCafe, updateCafe } from "../helpers/cafeHelpers";
 import { getMyTransactions } from "../helpers/transactionHelpers";
 import { unsubscribeUser } from "../helpers/subscribeHelpers.js";
 import { getLocalStorage, removeLocalStorage } from "../helpers/localStorageHelpers";
+import { getUserCoupons } from "../helpers/couponHelpers";
 import { ThreeDots } from "react-loader-spinner";
 import Header from '../components/Header';
 import CircularDiagram from "./CircularDiagram";
 import API_BASE_URL from '../config';
 import DailyCharts from '../components/DailyCharts';
+import Coupon from '../components/Coupon';
 
 const LinktreePage = ({ user, setModal }) => {
   const navigate = useNavigate();
@@ -29,6 +31,7 @@ const LinktreePage = ({ user, setModal }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedItemId, setSelectedItemId] = useState(0);
   const [selectedSubItemId, setSelectedSubItemId] = useState(0);
+  const [coupons, setCoupons] = useState(null);
 
 
   useEffect(() => {
@@ -55,11 +58,22 @@ const LinktreePage = ({ user, setModal }) => {
       // 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]);
 
+  // Detect query params on component mount
+  useEffect(() => {
+    handleGetkCoupons();
+  }, []);
+
+  // Handle manual coupon code check
+  const handleGetkCoupons = async () => {
+    const result = await getUserCoupons();
+    setCoupons(result.coupons);
+    console.log(result)
+  };
 
   // Handle user transactions
   const handleMyTransactions = async () => {
@@ -169,15 +183,15 @@ const LinktreePage = ({ user, setModal }) => {
     // 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)
@@ -202,19 +216,19 @@ const LinktreePage = ({ user, setModal }) => {
 
   if (user.roleId == 1 || user.roleId == 0 && selectedItemId == 0)
     segments = (selectedItemId != 0 && selectedItemId != -1 && selectedSubItemId == 0 ? allSelectedSubItems : selectedItemId != 0 && selectedItemId != -1 ? filteredItems.report?.items || [] : items?.items || []).map((item, index) => ({
-      percentage: item.percentage || (items?.totalIncome / item?.totalIncome  || items?.totalIncome / item?.report?.totalIncome) * 100,
-      value: item.username || item.itemName  || item.name,
+      percentage: item.percentage || (items?.totalIncome / item?.totalIncome || items?.totalIncome / item?.report?.totalIncome) * 100,
+      value: item.username || item.itemName || item.name,
       color: (colors && colors[index]) || "#cccccc", // Safe check for colors array
     })) || []; // Ensure segments is an empty array if no items are availabled
 
   // Function to combine items of all cafes for the selected tenant
   console.log(selectedItems)
   console.log(segments)
-// Check if items and items.items are defined before proceeding
-const allMaterials = (items?.items || []).flatMap(item => item.report?.materialsPurchased || []);
+  // Check if items and items.items are defined before proceeding
+  const allMaterials = (items?.items || []).flatMap(item => item.report?.materialsPurchased || []);
 
-// Sort the merged array by date if it's not empty
-const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(b.date));
+  // Sort the merged array by date if it's not empty
+  const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(b.date));
 
 
 
@@ -681,7 +695,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?.cafeIdentifyName || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeIdentifyName)}>Kunjungi kedai</button>
 
-              <h3 style={{color: 'black'}}>terlaku</h3>
+              <h3 style={{ color: 'black' }}>terlaku</h3>
               <div
                 style={{
                   display: "flex",
@@ -711,7 +725,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                       >
                         ★
                       </div>
-                      <h5 style={{ margin: 0, textAlign: "left" , color: 'black'}}>{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 &&
@@ -748,6 +762,15 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
               </div>
               <h3>penambahan stok</h3>
               <DailyCharts Data={selectedItems?.report?.materialsPurchased || sortedMaterials} />
+              {coupons && coupons.map((coupon) => {
+                return <Coupon
+                  code={coupon?.code || null}
+                  value={coupon?.discountValue}
+                  period={coupon?.discountPeriods}
+                  expiration={coupon?.discountEndDate}
+                />
+              })}
+              <button onClick={()=>setModal('claim-coupon')}></button>
               <div style={{ height: '24vh' }}></div>
             </div>
 
@@ -844,38 +867,38 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
           <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 - 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 className={styles.mainHeading}>
+                KEDAIMASTER CREDITS
+                <div className={styles.swipeContainer}>
+                  <div className={styles.swipeCreditsContent}>
+                    {['AI - MUHAMMAD AINUL FIKRI',
+                      '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>
                 </div>
+                gratis 3 bulan pertama
               </div>
-              gratis 3 bulan pertama
-            </div> 
-            : 
-            <div className={styles.mainHeading}>
-              COBA KEDAIMASTER
-              <div className={styles.swipeContainer}>
-                <div className={styles.swipeContent}>
-                  {['pemesanan langsung dari meja', 'pengelolaan pesanan dan keuangan', 'tentukan suasana musik', 'pengelolaan stok dan manajemen', 'jangan pernah ragukan pelanggan'].map((item, index) => (
-                    <div key={index} className={styles.swipeItem}>{item}</div>
-                  ))}
+              :
+              <div className={styles.mainHeading}>
+                COBA KEDAIMASTER
+                <div className={styles.swipeContainer}>
+                  <div className={styles.swipeContent}>
+                    {['pemesanan langsung dari meja', 'pengelolaan pesanan dan keuangan', 'tentukan suasana musik', 'pengelolaan stok dan manajemen', 'jangan pernah ragukan pelanggan'].map((item, index) => (
+                      <div key={index} className={styles.swipeItem}>{item}</div>
+                    ))}
+                  </div>
                 </div>
+                Gratis 3 bulan pertama
               </div>
-              Gratis 3 bulan pertama
-            </div>
             }
             <div className={styles.subHeading}>
               Solusi berbasis web untuk memudahkan pengelolaan kedai, dengan fitur yang mempermudah pemilik, kasir, dan tamu berinteraksi.
@@ -883,8 +906,8 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
 
             {getLocalStorage('auth') == null && (
               <div className={styles.LoginForm}>
-                <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword? styles.reverseForm : ''}`}>
-                  <label htmlFor="username" className={styles.usernameLabel}>---- masuk -------------------------------</label>
+                <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
+                  <label htmlFor="username" className={styles.usernameLabel}>---- Masuk -------------------------------</label>
                   <input
                     id="username"
                     placeholder="username"
@@ -893,14 +916,14 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                     value={username}
                     onChange={(e) => setUsername(e.target.value)}
                   />
-                  <button onClick={() => {setInputtingPassword(true); setWasInputtingPassword(true)}} className={styles.claimButton}>
+                  <button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true) }} className={styles.claimButton}>
                     <span>➜</span>
                   </button>
                 </div>
 
-                <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword? styles.reverseForm : ''}`}>
+                <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : styles.idleForm}`}>
                   <span>
-                    <label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
+                    <label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- Kembali </label>
                     <label htmlFor="password" className={styles.usernameLabel}> &nbsp; ----- &nbsp; </label>
                     <label onClick={() => setModal('reset-password', { username: username })} className={styles.usernameLabel}>
                       lupa password? -
@@ -947,7 +970,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                   onError={(e) => e.target.src = '/fallback-image.png'}
                 />
               </div>
-              <a style={{left: 0, right: 0, bottom: 0, textAlign: 'center', color: '#254F1A', fontSize:'13px', position: 'fixed'}}>©2025 KEDIRITECHNOPARK.COM</a>
+              <a style={{ left: 0, right: 0, bottom: 0, textAlign: 'center', color: '#254F1A', fontSize: '13px', position: 'fixed' }}>©2025 KEDIRITECHNOPARK.COM</a>
             </div>
           </div>
         </div>

src/pages/Join.js

@@ -1,14 +1,13 @@
+// LinktreePage.js
 import React, { useState, useEffect } from 'react';
 import styles from './Join.module.css'; // Import the module.css file
-import API_BASE_URL from '../config.js';
+import { checkCoupon, logCouponForUser } from '../helpers/couponHelpers';  // Import the new helper
 import Coupon from '../components/Coupon';
 
-function getAuthToken() {
-  return localStorage.getItem('auth');
-}
 
 const LinktreePage = ({ data, setModal }) => {
   const queryParams = new URLSearchParams(window.location.search);
+  const [isOnlyClaimCoupon, setIsOnlyClaimCoupon] = useState(false);
   const [isUsingCoupon, setIsUsingCoupon] = useState(false);
   const [couponCode, setCouponCode] = useState('');
   const [couponStatus, setCouponStatus] = useState(0);
@@ -16,9 +15,15 @@ const LinktreePage = ({ data, setModal }) => {
 
   // Detect query params on component mount
   useEffect(() => {
-    if(couponCode != '') return;
+    if (couponCode !== '') return;
+    const modal = queryParams.get('modal');
     const code = queryParams.get('couponCode');
+
     console.log(code)
+    if (modal == 'claim-coupon') {
+      setIsOnlyClaimCoupon(true)
+      setIsUsingCoupon(true);  // Automatically switch to the coupon input state
+    }
     if (code) {
       setCouponCode(code);
       setIsUsingCoupon(true);  // Automatically switch to the coupon input state
@@ -28,27 +33,14 @@ const LinktreePage = ({ data, setModal }) => {
 
   // Handle manual coupon code check
   const handleCheckCoupon = async (code = couponCode) => {
-    try {
-      const response = await fetch(`${API_BASE_URL}/coupon/check/${code}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${getAuthToken()}`,
-        },
-      });
+    const result = await checkCoupon(code);  // Call the helper
+    setCouponStatus(result.coupon ? 200 : 404);
+    setCouponDetails(result.coupon);
+  };
 
-      if (response.ok) {
-        const data = await response.json();
-        setCouponStatus(200);
-        setCouponDetails(data.coupon);
-      } else {
-        setCouponStatus(404);
-        setCouponDetails(null);
-      }
-    } catch (error) {
-      setCouponStatus(404);
-      setCouponDetails(null);
-    }
+  // Handle manual coupon code check
+  const handleLogCouponForUser = async (code = couponCode) => {
+    const result = await logCouponForUser(code);  // Call the helper
   };
 
   // Listen for query parameter changes (using the `location` object)
@@ -74,7 +66,7 @@ const LinktreePage = ({ data, setModal }) => {
       {!isUsingCoupon ? (
         <div className={styles.dashboardContainer}>
           <div className={styles.mainHeading}>Nikmati Kemudahan Mengelola Kafe</div>
-          <div className={styles.subHeading}>
+          <div className={styles.subHeadingTransparent}>
             Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
           </div>
           <form className={styles.linktreeForm}>
@@ -108,16 +100,13 @@ const LinktreePage = ({ data, setModal }) => {
                 Gunakan kupon
               </a>
             </div>
-            <div className={styles.footerImage}>
-              <img src="./laporan.png" alt="Linktree visual" />
-            </div>
           </div>
         </div>
       ) : (
         <div className={styles.dashboardContainer}>
-          <div className={styles.mainHeading}>Daftar Menggunakan Kupon</div>
+          <div className={styles.mainHeading}>{isOnlyClaimCoupon ? 'Aktifkan Kupon' : 'Daftar Menggunakan Kupon'}</div>
           <div className={styles.subHeading}>
-            Kupon tidak hanya dapat digunakan untuk pembuatan akun penyewa, tetapi juga dapat digunakan untuk memperpanjang masa berlangganan.
+            Kupon dapat digunakan untuk pembuatan akun penyewa maupun untuk memperpanjang masa berlangganan.
           </div>
           {couponStatus === 0 ? (
             <form className={styles.linktreeForm} onSubmit={(e) => e.preventDefault()}>
@@ -144,21 +133,29 @@ const LinktreePage = ({ data, setModal }) => {
                 period={couponDetails?.discountPeriods}
                 expiration={couponDetails?.expirationDate}
               />
-              {couponStatus == 200 &&
-              <form className={styles.linktreeForm}>
-                <label htmlFor="username" className={styles.usernameLabel}>
-                  --------------------------------------------
-                </label>
-                <button
-                  type="submit"
-                  className={styles.claimButton}
-                  style={{ width: '266px' }}
-                  onClick={() => setModal('create_user', { codeStatus: 200, couponCode })}
-                >
-                  <span>Buat akun dengan kupon ini</span>
-                </button>
-              </form>
-}
+              {couponStatus === 200 &&
+                <div className={styles.linktreeForm}>
+                  <label htmlFor="username" className={styles.usernameLabel}>
+                    --------------------------------------------
+                  </label>
+                  <button
+                    className={styles.claimButton}
+                    style={{ width: '266px' }}
+                    onClick={() => {
+                      if (!isOnlyClaimCoupon) {
+                        // If it's only claiming a coupon, trigger claim logic
+                        setModal('create_user', { codeStatus: 200, couponCode });
+                      } else {
+                        // Otherwise, handle the coupon for user creation
+                        handleLogCouponForUser();
+                      }
+                    }}
+                  >
+                    <span>{isOnlyClaimCoupon ? 'Aktifkan untuk akun ini' : 'Buat akun dengan kupon ini'}</span>
+                  </button>
+
+                </div>
+              }
             </>
           )}
           <div className={styles.footer}>
@@ -171,31 +168,23 @@ const LinktreePage = ({ data, setModal }) => {
               >
                 Pelajari lebih lanjut
               </a>
-              <a
-                onClick={() => {
-                  // Get the current URL query parameters
-                  const url = new URL(window.location.href);
-
-                  // Remove the couponCode query parameter
-                  url.searchParams.delete('couponCode');
-                  url.searchParams.delete('codeStatus');
-
-                  // Update the browser's URL, but keep 'modal=join' intact
-                  window.history.pushState({}, '', url.toString());
-
-                  // Reset the states and force the component to reset
-                  setIsUsingCoupon(couponStatus == 0 ? false : true);
-                  setCouponCode('');
-                  setCouponDetails(null);
-                  setCouponStatus(0);
-                }}
-                className={styles.footerLink}
-              >
-                Kembali
-              </a>
-            </div>
-            <div className={styles.footerImage}>
-              <img src="./laporan.png" alt="Linktree visual" />
+              {(!isOnlyClaimCoupon || couponStatus != 0) &&
+                <a
+                  onClick={() => {
+                    const url = new URL(window.location.href);
+                    url.searchParams.delete('couponCode');
+                    url.searchParams.delete('codeStatus');
+                    window.history.pushState({}, '', url.toString());
+                    setIsUsingCoupon(couponStatus === 0 ? false : true);
+                    setCouponCode('');
+                    setCouponDetails(null);
+                    setCouponStatus(0);
+                  }}
+                  className={styles.footerLink}
+                >
+                  Kembali
+                </a>
+              }
             </div>
           </div>
         </div>

src/pages/Join.module.css

@@ -6,6 +6,7 @@
   flex-direction: column;
   justify-content: center;
   background-color: rgb(232 204 88);
+  overflow: hidden;
 }
 
 
@@ -72,6 +73,15 @@
   margin-bottom: 1.5rem;
 }
 
+.subHeadingTransparent {
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 14px;
+  font-family: 'poppins';
+  color: transparent;
+  margin-bottom: -2.5rem;
+}
+
 /* Form */
 .linktreeForm {
   display: flex;
@@ -127,6 +137,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  margin-bottom: 14px;
 }
 
 .footerLink {
@@ -159,3 +170,129 @@
   margin-top: -50px;
   margin-bottom: 30px;
 }
+
+
+.LoginForm {
+  display: inline-flex;
+  position: relative;
+  height: 237px;
+}
+
+/* Form */
+.FormUsername {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: absolute;
+  left: 0vw;
+}
+
+.FormUsername.animateForm {
+  animation: FormUsernameProgress 0.5s forwards;
+  /* Apply the animation when inputtingPassword is true */
+}
+
+.FormUsername.reverseForm {
+  animation: FormUsernameReverse 0.5s forwards;
+  /* Reverse animation when inputtingPassword is false */
+}
+
+@keyframes FormUsernameProgress {
+  0% {
+    left: 0vw;
+  }
+
+  100% {
+    left: -100vw;
+  }
+}
+
+@keyframes FormUsernameReverse {
+  0% {
+    left: -100vw;
+  }
+
+  100% {
+    left: 0vw;
+  }
+}
+
+.FormPassword {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: absolute;
+  left: 100vw;
+}
+
+.FormPassword.animateForm {
+  animation: FormPasswordProgress 0.5s forwards;
+  /* Apply the animation when inputtingPassword is true */
+}
+
+.FormPassword.reverseForm {
+  animation: FormPasswordReverse 0.5s forwards;
+  /* Reverse animation when inputtingPassword is false */
+}
+
+@keyframes FormPasswordProgress {
+  0% {
+    left: 100vw;
+  }
+
+  100% {
+    left: 0vw;
+  }
+}
+
+@keyframes FormPasswordReverse {
+  0% {
+    left: 0vw;
+  }
+
+  99.9% {
+    left: 100vw;
+    visibility: hidden;
+  }
+  100% {
+    left: 0vw;
+    visibility: hidden;
+  }
+}
+
+
+.usernameLabel {
+  font-size: 0.875rem;
+  color: #444;
+  margin-bottom: 5px;
+  position: relative;
+}
+
+.usernameInputError {
+  width: 250px;
+  height: 55px;
+  padding-left: 10px;
+  font-size: 1rem;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  border: 2px solid red;
+  /* Red border when error is true */
+  margin-top: 5px;
+  margin-bottom: 15px;
+
+  /* Apply keyframe animation for border color transition */
+  animation: borderTransition 2s ease-in-out forwards;
+}
+
+/* Keyframe animation for border color transition */
+@keyframes borderTransition {
+  0% {
+    border-color: red;
+    /* Initial red border */
+  }
+
+  100% {
+    border-color: transparent;
+    /* Transition to transparent */
+  }
+}

src/pages/LinktreePage.module.css

@@ -208,6 +208,11 @@
   left: 100vw;
 }
 
+.FormPassword.idleForm {
+  left: 0vw;
+  visibility: hidden;
+}
+
 .FormPassword.animateForm {
   animation: FormPasswordProgress 0.5s forwards;
   /* Apply the animation when inputtingPassword is true */
@@ -338,9 +343,10 @@
   padding: 12px 30px;
   border-radius: 30px;
   text-align: center;
-  font-size: 0.875rem;
+  font-size: 0.8rem;
   margin-top: 1.5rem;
   cursor: pointer;
+  max-width: 200px;
 }
 
 .footerImage {