kediritechnopark/kedaimaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
zadit
2025-02-03 07:17:53 +07:00
parent 02e101025e
commit fa5bab4d5f
8 changed files with 199 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Coupon.js
View File

@@ -52,7 +52,7 @@ const Coupon = ({ code, value, period, type, expiration }) => {
{/* <div className='dotted-line'></div> */}
</div>
<div className='coupon-right'>
<h2 className='coupon-value'>{code == null ? 'Voucher tidak ditemukan' : formattedValue}</h2>
<h2 className='coupon-value'>{code == null ? 'Voucher tidak ada' : 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 Voucher ${period} minggu`}

6
src/components/DailyCharts.js
View File

@@ -22,7 +22,7 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
"18-21",
"21-24",
];
console.log(dayData)
const seriesData = [
dayData.hour0To3Transactions.reduce((acc, t) => acc + t.sold, 0),
dayData.hour3To6Transactions.reduce((acc, t) => acc + t.sold, 0),
@@ -75,7 +75,7 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
};
return (
<div className={styles.chartItemContainer}>
<div className={`${styles.chartItemContainer} ${selectedIndex !== -1 ? styles.expanded : ''}`}>
{chartData &&
chartData.map((data, index) => (
<div
@@ -99,7 +99,7 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
}
// 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={{position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: index == indexx ? `2px solid ${colors[index % colors.length]}` : 'none'}}></div>
<div
style={{ color: index === indexx ? 'black' : 'transparent' }}>
{indexx !== chartData.length - 1 ? (

44
src/components/PeriodCharts.js
View File

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import Chart from "react-apexcharts";
import styles from "./BarChart.module.css"; // Import the CSS module
const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReports, colors }) => {
const PeriodCharts = ({ type, graphFilter, aggregatedCurrentReports, aggregatedPreviousReports, colors }) => {
const [selectedIndex, setSelectedIndex] = useState(-1);
useEffect(() => {
@@ -20,6 +20,12 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
currentOutcomeData = aggregatedCurrentReports.map((report) => report.outcome);
currentTransactionData = aggregatedCurrentReports.map((report) => report.transactions);
if (type == 'monthly' && currentIncomeData.length === 4) {
currentIncomeData.push(null);
}
if (type == 'monthly' && currentOutcomeData.length === 4) {
currentOutcomeData.push(null);
}
if (type == 'monthly' && currentTransactionData.length === 4) {
currentTransactionData.push(null);
}
@@ -30,21 +36,27 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
previousOutcomeData = aggregatedPreviousReports.map((report) => report.outcome);
previousTransactionData = aggregatedPreviousReports.map((report) => report.transactions);
if (type == 'monthly' && previousIncomeData.length === 4) {
previousIncomeData.push(null);
}
if (type == 'monthly' && previousOutcomeData.length === 4) {
previousOutcomeData.push(null);
}
if (type == 'monthly' && previousTransactionData.length === 4) {
previousTransactionData.push(null);
}
}
let globalMax = null;
if (aggregatedCurrentReports || aggregatedPreviousReports)
// Find the global maximum for the y-axis
globalMax = Math.max(
// ...currentIncomeData,
// ...currentOutcomeData,
...currentTransactionData,
// ...previousIncomeData,
// ...previousOutcomeData,
...previousTransactionData
);
let globalMax = null;
if (aggregatedCurrentReports || aggregatedPreviousReports) {
// Find the global maximum for the y-axis
globalMax = Math.max(
...(graphFilter === 'income'
? [...currentIncomeData, ...previousIncomeData]
: graphFilter === 'outcome'
? [...currentOutcomeData, ...previousOutcomeData]
: [...currentTransactionData, ...previousTransactionData])
);
}
return (
<div className={`${styles.chartItemContainer} ${selectedIndex !== -1 ? styles.expanded : ''}`}>
@@ -61,7 +73,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
}
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: `2px solid ${colors[0]}` }}></div>
<div>{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}</div>
</div>
<div
@@ -101,7 +113,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
series={[
// { name: "Pemasukan", data: previousIncomeData },
// { name: "Pengaluaran", data: previousOutcomeData },
{ name: "Total transaksi", data: previousTransactionData },
{ name: "Total transaksi", data: graphFilter == 'income' ? previousIncomeData : graphFilter == 'outcome' ? previousOutcomeData : previousTransactionData },
]}
type="area"
height={200}
@@ -131,7 +143,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
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: `2px solid ${colors[1]}` }}></div>
<div>{type == 'monthly' ? 'bulan ini' : 'tahun ini'}</div>
</div>
</div>
@@ -162,7 +174,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
series={[
// { name: "Pemasukan", data: currentIncomeData },
// { name: "Pengeluaran", data: currentOutcomeData },
{ name: "Total transaksi", data: currentTransactionData },
{ name: "Total transaksi", data: graphFilter == 'income' ? currentIncomeData : graphFilter == 'outcome' ? currentOutcomeData : currentTransactionData },
]}
type="area"
height={200}