ok

2025-02-02 18:17:56 +07:00
parent b0813e1519
commit 02e101025e
13 changed files with 216 additions and 738 deletions
--- a/src/components/BarChart.module.css
+++ b/src/components/BarChart.module.css
@@ -1,7 +1,16 @@
-.chartItemContainer{
-    position: relative;
-    font-size: 14px;
+/* Chart item container */
+.chartItemContainer {
+  position: relative;
+  font-size: 14px;
+  margin-bottom: 230px;  /* Initial margin-bottom */
+  transition: margin-bottom 0.3s ease-in-out;  /* Add transition for margin-bottom */
 }
+
+/* Expanded state - when the parent is "expanded" */
+.expanded {
+  margin-bottom: 503px;  /* New margin-bottom value when expanded */
+}
+
 .chartItemWrapper {
    position: absolute;
    transition: top 0.3s ease-in-out; /* Apply transition to chartItemWrapper */
--- a/src/components/Coupon.css
+++ b/src/components/Coupon.css
@@ -9,7 +9,7 @@
    font-family: Arial, sans-serif;
    align-items: center;
    position: relative;
-    margin-bottom: 5px;
+    margin-bottom: 10px;
  }
  
  /* Left side (with the rotated code and dotted line) */
@@ -75,12 +75,12 @@
 }

 .RibbonBannerInverted h1 {
-  margin: 0; /* Remove default margin */
-  font-size: 18px; /* 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 */
+  margin: 0;
+  font-size: 17px;
+  transform: rotate(-44.7deg) scale(-1, 1);
+  transform-origin: center;
+  white-space: nowrap;
  position: absolute;
-  top: 57px;
-  left: -12px;
+  top: 58px;
+  left: -8px;
 }
--- a/src/components/Coupon.js
+++ b/src/components/Coupon.js
@@ -3,7 +3,7 @@ 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' ? `Diskon Rp${value}` : value != 0 ? `Diskon${value}%` : 'kupon berlangganan';
+    const formattedValue = type == 'fixed' ? `Diskon Rp${value}` : value != 0 ? `Diskon${value}%` : 'Voucher berlangganan';

    // Function to convert expiration to Indonesian date format (dd MMMM yyyy)
    const formatExpirationDate = (dateString) => {
@@ -42,27 +42,31 @@ const Coupon = ({ code, value, period, type, expiration }) => {
    return (
        <div className='coupon'>
            {(expiration == null && code != null) || (expiration != null && code != null && daysLeft < 1) && (
-              <div className='RibbonBannerInverted'>
-                <img src={"https://i.imgur.com/yt6osgL.png"}></img>
-                <h1>Kupon berakhir</h1>
-              </div>
+                <div className='RibbonBannerInverted'>
+                    <img src={"https://i.imgur.com/yt6osgL.png"}></img>
+                    <h1>Voucher berakhir</h1>
+                </div>
            )}
            <div className='coupon-left'>
                <div className='coupon-code'>{code == null ? '404' : code}</div>
                {/* <div className='dotted-line'></div> */}
            </div>
            <div className='coupon-right'>
-                <h2 className='coupon-value'>{code == null ? 'Kupon tidak ditemukan' : formattedValue}</h2>
+                <h2 className='coupon-value'>{code == null ? 'Voucher 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`}
+                    {code == null ? '-' : value === 0 ? `Masa berlangganan ${period} minggu` : `Masa Voucher ${period} minggu`}
                </p>
                <p className='coupon-expiration'>
-                    {expiration == null ? (code == null ? '-' : 'Tanpa kadaluarsa') : 
-                        daysLeft <= 7 
-                        ? `Berlaku hingga ${daysLeft} hari lagi` 
-                        : `Berlaku hingga: ${formatExpirationDate(expiration)}`}
+                    {expiration == null
+                        ? (code == null ? '-' : 'Tanpa kadaluarsa')
+                        : daysLeft < 0
+                            ? `Berakhir ${Math.abs(daysLeft)} hari lalu`
+                            : daysLeft <= 7
+                                ? `Berlaku hingga ${daysLeft} hari lagi`
+                                : `Berlaku hingga: ${formatExpirationDate(expiration)}`}
                </p>
+
            </div>
        </div>
    );
--- a/src/components/DailyCharts.js
+++ b/src/components/DailyCharts.js
@@ -108,7 +108,7 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
                          {(indexx === 0 || (formatDate(chartData[indexx - 1].date).month !== month && type != 'weekly')) && month}
                        </>
                      ) : (
-                        'kemarin'
+                        'Kemarin'
                      )}

                    </div>
--- a/src/components/PeriodCharts.js
+++ b/src/components/PeriodCharts.js
@@ -19,12 +19,20 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
    currentIncomeData = aggregatedCurrentReports.map((report) => report.income);
    currentOutcomeData = aggregatedCurrentReports.map((report) => report.outcome);
    currentTransactionData = aggregatedCurrentReports.map((report) => report.transactions);
+
+    if (type == 'monthly' && currentTransactionData.length === 4) {
+      currentTransactionData.push(null);
+    }
  }
  if (aggregatedPreviousReports) {
    // Map the data for the previous reports
    previousIncomeData = aggregatedPreviousReports.map((report) => report.income);
    previousOutcomeData = aggregatedPreviousReports.map((report) => report.outcome);
    previousTransactionData = aggregatedPreviousReports.map((report) => report.transactions);
+
+    if (type == 'monthly' && previousTransactionData.length === 4) {
+      previousTransactionData.push(null);
+    }
  }
  let globalMax = null;
  if (aggregatedCurrentReports || aggregatedPreviousReports)
@@ -39,8 +47,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
    );

  return (
-    <div className={styles.chartItemContainer}>
-
+    <div className={`${styles.chartItemContainer} ${selectedIndex !== -1 ? styles.expanded : ''}`}>
      {aggregatedPreviousReports && (
        <div className={`${styles.chartItemWrapper} ${selectedIndex !== -1 && selectedIndex !== 0
          ? styles.chartItemWrapperActive
@@ -52,9 +59,9 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
              onClick={() =>
                selectedIndex === -1 ? setSelectedIndex(0) : setSelectedIndex(-1)
              }
-              style={{ color: 'black',position: 'relative' }}
+              style={{ color: 'black', position: 'relative' }}
            >
-            <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom:  `1px solid ${colors[0]}` }}></div>
+              <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
@@ -80,6 +87,11 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
                  axisTicks: {
                    show: false, // Removes the ticks on the x-axis
                  },
+                  labels: {
+                    style: {
+                  colors: ['black', 'black', 'black', 'black', aggregatedPreviousReports?.length == 4 ? 'transparent' : 'black'],
+                    }
+                  }
                },
                yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
                grid: { show: false },
@@ -117,9 +129,9 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
                selectedIndex === -1 ? setSelectedIndex(1) : setSelectedIndex(-1)
              }

-              style={{ color: 'black',position: 'relative' }}
+              style={{ color: 'black', position: 'relative' }}
            >
-            <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid ${colors[1]}` }}></div>
+              <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>
@@ -136,6 +148,11 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
                  axisTicks: {
                    show: false, // Removes the ticks on the x-axis
                  },
+                  labels: {
+                    style: {
+                      colors: ['black', 'black', 'black', 'black', aggregatedCurrentReports?.length == 4 ? 'transparent' : 'black'],
+                    }
+                  }
                },
                yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
                grid: { show: false },