From 918c92314310f4fa9e6d302992ef090b5bff4462 Mon Sep 17 00:00:00 2001 From: zadit <75159257+insvrgent@users.noreply.github.com> Date: Mon, 6 Jan 2025 02:06:30 +0700 Subject: [PATCH] ok --- src/components/BarChart.module.css | 21 ++- .../{BarChart.js => DailyCharts.js} | 28 +--- src/components/Header.js | 2 +- src/components/MusicPlayer.css | 2 +- src/components/PeriodCharts.js | 156 ++++++++++++++++++ src/pages/Dashboard.js | 4 +- src/pages/MaterialList.js | 7 +- src/pages/Reports.js | 49 +++--- 8 files changed, 219 insertions(+), 50 deletions(-) rename src/components/{BarChart.js => DailyCharts.js} (85%) create mode 100644 src/components/PeriodCharts.js diff --git a/src/components/BarChart.module.css b/src/components/BarChart.module.css index 6eade31..90dbc4b 100644 --- a/src/components/BarChart.module.css +++ b/src/components/BarChart.module.css @@ -27,10 +27,28 @@ flex-grow: 1; text-align: center; padding: 10px; - border-radius: 10px 10px 0 0; transition: all 0.3s ease-in-out; + font-weight: 600; + } + + .dateSelector:first-child { + flex-grow: 1; + text-align: center; + padding: 10px; + border-radius: 10px 0 0 0; + transition: all 0.3s ease-in-out; + font-weight: 600; } + .dateSelector:last-child { + flex-grow: 1; + text-align: center; + padding: 10px; + border-radius: 0 10px 0 0; + transition: all 0.3s ease-in-out; + font-weight: 600; + } + .dateSelectorActive { color: black; z-index: 2; @@ -43,5 +61,6 @@ .chartWrapper { border: 1px solid rgb(179, 177, 177); + border-radius: 0 0 11px 11px; } \ No newline at end of file diff --git a/src/components/BarChart.js b/src/components/DailyCharts.js similarity index 85% rename from src/components/BarChart.js rename to src/components/DailyCharts.js index 448d91c..14d194a 100644 --- a/src/components/BarChart.js +++ b/src/components/DailyCharts.js @@ -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 BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => { +const DailyCharts = ({ transactionGraph, colors, type }) => { const [selectedIndex, setSelectedIndex] = useState(-1); useEffect(() => { @@ -12,20 +12,6 @@ const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => { const processData = (graphData) => { if (!graphData) return null; return graphData.map((dayData) => { - const monthly = [ - "minggu 1", - "minggu 2", - "minggu 3", - "minggu 4", - ]; - - const yearly = [ - "Q1", - "Q2", - "Q3", - "Q4", - ]; - const categories = [ "0-3", "3-6", @@ -103,12 +89,15 @@ const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => { 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' }} onClick={() => - selectedIndex !== index ? setSelectedIndex(index) : setSelectedIndex(-1) + type == 'yesterday' && selectedIndex == -1 || type != 'yesterday' && selectedIndex !== index ? setSelectedIndex(index) : setSelectedIndex(-1) } - style={{ backgroundColor: index === indexx ? colors[index % colors.length] : 'transparent' }} + // style={{ backgroundColor: index === indexx ? colors[index % colors.length] : 'transparent' }} > -
+
{indexx !== chartData.length - 1 ? ( <> {day}{" "} @@ -126,6 +115,7 @@ const BarChart = ({ transactionGraph, colors, type, aggregatedReports }) => {
{ ); }; -export default BarChart; +export default DailyCharts; diff --git a/src/components/Header.js b/src/components/Header.js index 8a162cb..b922b7d 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -316,7 +316,7 @@ const Header = ({
{ + const [selectedIndex, setSelectedIndex] = useState(-1); + + useEffect(() => { + setSelectedIndex(-1); + }, [aggregatedCurrentReports, aggregatedPreviousReports]); + + const monthly = ["1 - 7", "8 - 14", "15 - 21", "22 - 28", "29 - 31"]; + const yearly = ["Kuartal 1", "Kuartal 2", "Kuartal 3", "Kuartal 4"]; + const cat = type == 'monthly' ? monthly : yearly; + + // Map the data for the current reports + let currentIncomeData, currentOutcomeData, currentTransactionData, previousIncomeData, previousOutcomeData, previousTransactionData = null; + if (aggregatedCurrentReports) { + currentIncomeData = aggregatedCurrentReports.map((report) => report.income); + currentOutcomeData = aggregatedCurrentReports.map((report) => report.outcome); + currentTransactionData = aggregatedCurrentReports.map((report) => report.transactions); + } + 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); + } + let globalMax = null; + if (aggregatedCurrentReports || aggregatedPreviousReports) + // Find the global maximum for the y-axis + globalMax = Math.max( + // ...currentIncomeData, + // ...currentOutcomeData, + ...currentTransactionData, + // ...previousIncomeData, + // ...previousOutcomeData, + ...previousTransactionData + ); + + return ( +
+ + {aggregatedPreviousReports && ( +
+ +
+
+ selectedIndex === -1 ? setSelectedIndex(0) : setSelectedIndex(-1) + } + style={{border: '1px solid rgb(179, 177, 177)', color: colors[0]}} + > +
{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}
+
+
+ selectedIndex === 0 ? setSelectedIndex(-1) : setSelectedIndex(1) + }> +
{type == 'monthly' ? 'bulan ini' : 'tahun ini'}
+
+
+
+ +
+
+ )} + {aggregatedCurrentReports && ( +
+
+
+ selectedIndex === 1 ? setSelectedIndex(-1) : setSelectedIndex(0) + }> +
{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}
+
+
+ selectedIndex === -1 ? setSelectedIndex(1) : setSelectedIndex(-1) + } + + style={{border: '1px solid rgb(179, 177, 177)', color: colors[1]}}> +
{type == 'monthly' ? 'bulan ini' : 'tahun ini'}
+
+
+
+ +
+
+ )} +
+ ); +}; + +export default PeriodCharts; diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js index 570577c..e05935f 100644 --- a/src/pages/Dashboard.js +++ b/src/pages/Dashboard.js @@ -10,7 +10,7 @@ import { ThreeDots } from "react-loader-spinner"; import Header from '../components/Header'; import CircularDiagram from "./CircularDiagram"; import API_BASE_URL from '../config'; -import BarChart from '../components/BarChart'; +import DailyCharts from '../components/DailyCharts'; const LinktreePage = ({ user, setModal }) => { const navigate = useNavigate(); @@ -746,7 +746,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(

penambahan stok

- +
diff --git a/src/pages/MaterialList.js b/src/pages/MaterialList.js index 5081646..5c29d88 100644 --- a/src/pages/MaterialList.js +++ b/src/pages/MaterialList.js @@ -325,7 +325,6 @@ const MaterialList = ({ cafeId, handleClose }) => { )}

{currentMaterial.name}

-

{currentMaterial.unit}

- + {filter == 'yesterday' || filter == 'weekly' ? + + : + + }
Kembali