ok

2025-01-25 00:17:06 +07:00
parent 469d786d49
commit a1b7d0b844
13 changed files with 542 additions and 226 deletions
--- a/src/components/BarChart.module.css
+++ b/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; */
  }
  
--- a/src/components/Coupon.css
+++ b/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;
+}
--- a/src/components/Coupon.js
+++ b/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>
--- a/src/components/DailyCharts.js
+++ b/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}{" "}
--- a/src/components/Modal.js
+++ b/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>
  );
--- a/src/components/PeriodCharts.js
+++ b/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 },
--- a/src/components/TablesPage.js
+++ b/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',