|
|
|
|
@@ -1,6 +1,7 @@
|
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
|
import {
|
|
|
|
|
getReports,
|
|
|
|
|
getAnalytics
|
|
|
|
|
} from "../helpers/transactionHelpers.js";
|
|
|
|
|
import CircularDiagram from "./CircularDiagram";
|
|
|
|
|
import styles from "./Transactions.module.css";
|
|
|
|
|
@@ -20,13 +21,14 @@ const RoundedRectangle = ({
|
|
|
|
|
loading = false,
|
|
|
|
|
children, // Assuming this is a React component or JSX
|
|
|
|
|
isChildren,
|
|
|
|
|
width='calc(100% / 2 - 10px)'
|
|
|
|
|
}) => {
|
|
|
|
|
const containerStyle = {
|
|
|
|
|
display: "flex",
|
|
|
|
|
flexDirection: "column",
|
|
|
|
|
alignItems: "flex-start",
|
|
|
|
|
justifyContent: "center",
|
|
|
|
|
width: !children && !isChildren && "calc(100% / 2 - 10px)",
|
|
|
|
|
width: !children && !isChildren && width,
|
|
|
|
|
height: "auto",
|
|
|
|
|
borderRadius: "15px",
|
|
|
|
|
padding: "20px",
|
|
|
|
|
@@ -102,17 +104,22 @@ const RoundedRectangle = ({
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const App = ({ cafeId,
|
|
|
|
|
const App = ({ forCafe = true, cafeId="",
|
|
|
|
|
handleClose, otherCafes }) => {
|
|
|
|
|
const [selectedCafeId, setSelectedCafeId] = useState(cafeId);
|
|
|
|
|
const [analytics, setAnalytics] = useState({});
|
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
|
const [filter, setFilter] = useState("yesterday");
|
|
|
|
|
|
|
|
|
|
const fetchData = async (filter) => {
|
|
|
|
|
if(selectedCafeId == '-1') return;
|
|
|
|
|
try {
|
|
|
|
|
setLoading(true);
|
|
|
|
|
// Fetch the analytics data with the selected filter
|
|
|
|
|
const analyticsData = await getReports(cafeId, filter);
|
|
|
|
|
const analyticsData = (selectedCafeId !== '' && selectedCafeId !== 0)
|
|
|
|
|
? await getReports(selectedCafeId, filter)
|
|
|
|
|
: await getAnalytics(filter);
|
|
|
|
|
|
|
|
|
|
console.log(analyticsData);
|
|
|
|
|
if (analyticsData) setAnalytics(analyticsData);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
@@ -122,9 +129,13 @@ const App = ({ cafeId,
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setSelectedCafeId(cafeId)
|
|
|
|
|
}, [cafeId]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
fetchData(filter); // Fetch data when filter changes
|
|
|
|
|
}, [filter]);
|
|
|
|
|
}, [filter, selectedCafeId]);
|
|
|
|
|
|
|
|
|
|
const filteredItems = analytics.itemSales || [];
|
|
|
|
|
|
|
|
|
|
@@ -193,6 +204,7 @@ const App = ({ cafeId,
|
|
|
|
|
const [texts, setTexts] = useState(['buat kedai']); // initially show only first 3 texts
|
|
|
|
|
const [fullTexts, setFullTexts] = useState(null); // initially show only first 3 texts
|
|
|
|
|
const [fullTextsVisible, setFullTextsVisible] = useState(null); // initially show only first 3 texts
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (otherCafes != null) {
|
|
|
|
|
let updatedFullTexts;
|
|
|
|
|
@@ -204,6 +216,8 @@ const App = ({ cafeId,
|
|
|
|
|
[otherCafes[0].name, otherCafes[0].cafeId],
|
|
|
|
|
["buat kedai", -1]
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
setSelectedCafeId(otherCafes[0].cafeId); // Get the cafeId (second part of the pair)
|
|
|
|
|
} else {
|
|
|
|
|
updatedFullTexts = [
|
|
|
|
|
["semua", 0], // First entry is "semua"
|
|
|
|
|
@@ -231,15 +245,15 @@ const App = ({ cafeId,
|
|
|
|
|
const [selectedSwitch, setSelectedSwitch] = useState(0);
|
|
|
|
|
|
|
|
|
|
const onItemToggle = (index) => {
|
|
|
|
|
let selectedCafeId = null;
|
|
|
|
|
|
|
|
|
|
// When user clicks the last visible option (index === 2 in the current view)
|
|
|
|
|
if (index === 2) {
|
|
|
|
|
console.log(fullTexts);
|
|
|
|
|
if (fullTexts.indexOf(texts[2]) < fullTexts.length - 1) {
|
|
|
|
|
if (fullTexts.findIndex(item => item[0] === texts[2]) < fullTexts.length - 1) {
|
|
|
|
|
setTexts((prevTexts) => {
|
|
|
|
|
const newTexts = [...prevTexts];
|
|
|
|
|
const nextText = fullTexts[prevTexts.length]; // Get the next item in the full list
|
|
|
|
|
console.log(prevTexts.length)
|
|
|
|
|
const nextText = fullTexts[fullTexts.findIndex(item => item[0] === texts[2])+1][0]; // Get the next item in the full list
|
|
|
|
|
newTexts.shift(); // Remove the first element
|
|
|
|
|
newTexts.push(nextText); // Add the next item to the end
|
|
|
|
|
setSelectedSwitch(1); // Change the selected index
|
|
|
|
|
@@ -256,7 +270,7 @@ const App = ({ cafeId,
|
|
|
|
|
const newTexts = [...prevTexts];
|
|
|
|
|
const prevText = fullTexts[fullTexts.findIndex(item => item[0] === newTexts[0]) - 1]; // Get the previous item
|
|
|
|
|
newTexts.pop(); // Remove the last element
|
|
|
|
|
newTexts.unshift(prevText); // Add the previous item to the start
|
|
|
|
|
newTexts.unshift(prevText[0]); // Add the previous item to the start
|
|
|
|
|
setSelectedSwitch(1); // Change the selected index
|
|
|
|
|
return newTexts;
|
|
|
|
|
});
|
|
|
|
|
@@ -270,11 +284,9 @@ const App = ({ cafeId,
|
|
|
|
|
const selectedText = texts[index]; // Get the selected name from the texts array
|
|
|
|
|
const selectedItem = fullTexts.find(item => item[0] === selectedText); // Find the corresponding full item
|
|
|
|
|
if (selectedItem) {
|
|
|
|
|
selectedCafeId = selectedItem[1]; // Get the cafeId (second part of the pair)
|
|
|
|
|
setSelectedCafeId(selectedItem[1]); // Get the cafeId (second part of the pair)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log('Selected cafeId:', selectedCafeId); // Log the selected cafeId
|
|
|
|
|
|
|
|
|
|
setResetKey((prevKey) => prevKey + 1); // Increase the key to force re-render
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
@@ -285,19 +297,22 @@ const App = ({ cafeId,
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div style={{
|
|
|
|
|
position: 'fixed',
|
|
|
|
|
position: forCafe? 'fixed': 'relative',
|
|
|
|
|
height: '100vh',
|
|
|
|
|
width: '100vw',
|
|
|
|
|
top: 0,
|
|
|
|
|
right: 0,
|
|
|
|
|
backgroundColor: 'white',
|
|
|
|
|
overflowY: 'auto'
|
|
|
|
|
overflowY: forCafe? 'auto' : 'none',
|
|
|
|
|
color: 'black',
|
|
|
|
|
marginTop: forCafe ? 0 : '-22vh'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', padding: '0px 20px 0px 20px', justifyContent: 'space-between' }}>
|
|
|
|
|
<h2 className={styles["Transactions-title"]} style={{ marginTop: 'revert', marginLeft: '0px' }}>Laporan</h2>
|
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', padding: forCafe? '0px 20px' : '0px 15px', justifyContent: forCafe? 'flex-start':'space-between' }}>
|
|
|
|
|
{forCafe && <div style={{marginTop: '49px', marginRight: '10px'}} onClick={handleClose}><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path d="M48,256c0,114.87,93.13,208,208,208s208-93.13,208-208S370.87,48,256,48,48,141.13,48,256Zm212.65-91.36a16,16,0,0,1,.09,22.63L208.42,240H342a16,16,0,0,1,0,32H208.42l52.32,52.73A16,16,0,1,1,238,347.27l-79.39-80a16,16,0,0,1,0-22.54l79.39-80A16,16,0,0,1,260.65,164.64Z"/></svg></div>}
|
|
|
|
|
<h2 className={styles["Transactions-title"]} style={{ marginTop: forCafe? '57px': 'revert', marginLeft: '0px' }}>Laporan</h2>
|
|
|
|
|
<div style={{ marginTop: '10px' }}>
|
|
|
|
|
{otherCafes && <MultiSwitch
|
|
|
|
|
{!forCafe && <MultiSwitch
|
|
|
|
|
key={resetKey} // Add key to reset the component and force it to re-render
|
|
|
|
|
texts={texts}
|
|
|
|
|
selectedSwitch={selectedSwitch}
|
|
|
|
|
@@ -382,11 +397,19 @@ const App = ({ cafeId,
|
|
|
|
|
loading={loading}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
{!forCafe && selectedCafeId != -1 && selectedCafeId != 0 && (
|
|
|
|
|
<RoundedRectangle
|
|
|
|
|
title={"Kunjungi kedai"}
|
|
|
|
|
loading={loading}
|
|
|
|
|
width="calc(100% - 10px)"
|
|
|
|
|
onClick={() => window.location.href = window.location.origin + '/' + otherCafes.find(item => item.cafeId === selectedCafeId).cafeIdentifyName}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
<div
|
|
|
|
|
style={{ display: "flex", alignItems: "center", margin: "10px" }}
|
|
|
|
|
>
|
|
|
|
|
<div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
|
|
|
|
|
<h6 style={{ margin: 0, textAlign: "left" }}>
|
|
|
|
|
<h6 style={{ margin: 0, textAlign: "left", fontSize: '10px', fontWeight: 500 }}>
|
|
|
|
|
Persentase pertumbuhan dihitung dengan membandingkan {" "}
|
|
|
|
|
{comparisonText} hari terakhir dengan {comparisonText} hari sebelumnya.
|
|
|
|
|
</h6>
|
|
|
|
|
@@ -428,12 +451,11 @@ const App = ({ cafeId,
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{filter == 'yesterday' || filter == 'weekly' ?
|
|
|
|
|
<DailyCharts transactionGraph={analytics?.transactionGraph} type={filter} colors={colors} />
|
|
|
|
|
<DailyCharts transactionGraph={analytics?.transactionGraph || analytics?.combinedTransactionGraph} type={filter} colors={colors} />
|
|
|
|
|
:
|
|
|
|
|
<PeriodCharts type={filter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors} />
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ItemLister_PaymentOption__YZlDL"><div style={{ marginTop: '20px' }} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
zadit