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: 1px solid rgb(179, 177, 177);
-    border-radius: 0 0 11px 11px;
+    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 ? 
+                      style={{position: 'relative' }}
-                        '1px solid rgb(179, 177, 177)' : 'none' }}
                     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,13 +52,15 @@ 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)
               }>
@@ -115,7 +117,9 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
                 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>
@@ -131,7 +135,8 @@ 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 },

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
@@ -603,7 +610,7 @@ const SetPaymentQr = ({ shop }) => {
 
 
       {!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%', 
+        <div style={{
-        marginBottom: '10px' }}>
+          display: 'flex', justifyContent: 'space-between', width: '100%',
+          marginBottom: '10px'
+        }}>
           <div
             onClick={() => setIsConfigCafeIdentityName(false)} // Close the config modal
             style={{

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 styles from './Join.module.css';
-import API_BASE_URL from '../config.js';
+import { checkCoupon, createUserWithCoupon } from '../helpers/couponHelpers';  // Import the helper functions
-
-function getAuthToken() {
-  return localStorage.getItem('auth');
-}
 
 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
     }
   }, [queryParams]);
 
+  // Handle coupon validation
   const handleCheckCoupon = async (e) => {
     e.preventDefault();
-    try {
+    const { status, coupon } = await checkCoupon(couponCode);
-      const response = await fetch(`${API_BASE_URL}/coupon/check/${couponCode}`, {
+    setCouponStatus(status);
-        method: 'GET',
+    setCouponDetails(coupon);
-        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);
-    }
   };
 
+  // Handle user creation with coupon
   const handleCreateUserWithCoupon = async (e) => {
     e.preventDefault();
 
@@ -66,55 +46,38 @@ const LinktreePage = ({ setModal }) => {
       return;
     }
 
-    try {
+    setLoading(true);
-      const response = await fetch(`${API_BASE_URL}/coupon/create-user`, {
+    const { success, token, message } = await createUserWithCoupon(username, email, password, couponCode);
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${getAuthToken()}`,
-        },
-        body: JSON.stringify({
-          username,
-          email,
-          password,
-          couponCode,
-        }),
-      });
 
-      if (response.ok) {
+    if (success) {
-        const data = await response.json();
       setCouponStatus('User created successfully with coupon');
-        setCouponDetails(null);
+      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;
-
-        // 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(message || 'Error creating user');
-        setCouponStatus(errorData.message || 'Error creating user');
+      setModal('join', { couponCode });
-        setModal('join', { couponCode })
-      }
-    } catch (error) {
-      setCouponStatus('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(() => {
@@ -60,6 +63,17 @@ const LinktreePage = ({ user, setModal }) => {
     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 () => {
@@ -210,11 +224,11 @@ const LinktreePage = ({ user, setModal }) => {
   // 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
+  // Check if items and items.items are defined before proceeding
-const allMaterials = (items?.items || []).flatMap(item => item.report?.materialsPurchased || []);
+  const allMaterials = (items?.items || []).flatMap(item => item.report?.materialsPurchased || []);
 
-// Sort the merged array by date if it's not empty
+  // 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));
+  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>
 
@@ -850,7 +873,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                   <div className={styles.swipeCreditsContent}>
                     {['AI - MUHAMMAD AINUL FIKRI',
                       'BACKEND - ZADIT TAQWA W.',
-                    'FRONTEND - M. PASHA A. P.' ,
+                      'FRONTEND - M. PASHA A. P.',
                       'FRONTEND - NAUFAL DANIYAL P.',
                       'FRONTEND - ZADIT TAQWA W.',
                       'UI/UX - KEVIN DWI WIJAYA',
@@ -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 : ''}`}>
+                <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
-                  <label htmlFor="username" className={styles.usernameLabel}>---- masuk -------------------------------</label>
+                  <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 result = await checkCoupon(code);  // Call the helper
-      const response = await fetch(`${API_BASE_URL}/coupon/check/${code}`, {
+    setCouponStatus(result.coupon ? 200 : 404);
-        method: 'GET',
+    setCouponDetails(result.coupon);
-        headers: {
+  };
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${getAuthToken()}`,
-        },
-      });
 
-      if (response.ok) {
+  // Handle manual coupon code check
-        const data = await response.json();
+  const handleLogCouponForUser = async (code = couponCode) => {
-        setCouponStatus(200);
+    const result = await logCouponForUser(code);  // Call the helper
-        setCouponDetails(data.coupon);
-      } else {
-        setCouponStatus(404);
-        setCouponDetails(null);
-      }
-    } catch (error) {
-      setCouponStatus(404);
-      setCouponDetails(null);
-    }
   };
 
   // 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 &&
+              {couponStatus === 200 &&
-              <form className={styles.linktreeForm}>
+                <div 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 })}
+                    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>Buat akun dengan kupon ini</span>
+                    <span>{isOnlyClaimCoupon ? 'Aktifkan untuk akun ini' : 'Buat akun dengan kupon ini'}</span>
                   </button>
-              </form>
+
-}
+                </div>
+              }
             </>
           )}
           <div className={styles.footer}>
@@ -171,20 +168,14 @@ const LinktreePage = ({ data, setModal }) => {
               >
                 Pelajari lebih lanjut
               </a>
+              {(!isOnlyClaimCoupon || couponStatus != 0) &&
                 <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());
-
+                    setIsUsingCoupon(couponStatus === 0 ? false : true);
-                  // Reset the states and force the component to reset
-                  setIsUsingCoupon(couponStatus == 0 ? false : true);
                     setCouponCode('');
                     setCouponDetails(null);
                     setCouponStatus(0);
@@ -193,9 +184,7 @@ const LinktreePage = ({ data, setModal }) => {
                 >
                   Kembali
                 </a>
-            </div>
+              }
-            <div className={styles.footerImage}>
-              <img src="./laporan.png" alt="Linktree visual" />
             </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 {