From b0813e15191b2217dc68bdbbdd2c716681ef24ba Mon Sep 17 00:00:00 2001 From: insvrgent Date: Wed, 29 Jan 2025 15:39:55 +0700 Subject: [PATCH] ok --- package.json | 2 +- src/config.js | 2 +- src/pages/Reports.js | 401 +++++++++++++++++++++++-------------------- 3 files changed, 216 insertions(+), 189 deletions(-) diff --git a/package.json b/package.json index 833756d..5c30e14 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "groovebrew-mockup", "version": "0.1.0", "private": true, - "homepage": "https://dev.kedaimaster.com", + "homepage": "https://kedaimaster.com", "dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", diff --git a/src/config.js b/src/config.js index 6cf67cc..967c5ce 100644 --- a/src/config.js +++ b/src/config.js @@ -1,5 +1,5 @@ // src/config.js -const API_BASE_URL = 'https://dev.api.kedaimaster.com'; +const API_BASE_URL = 'https://api.kedaimaster.com'; export default API_BASE_URL; diff --git a/src/pages/Reports.js b/src/pages/Reports.js index abea1fd..8425e03 100644 --- a/src/pages/Reports.js +++ b/src/pages/Reports.js @@ -21,14 +21,14 @@ const RoundedRectangle = ({ loading = false, children, // Assuming this is a React component or JSX isChildren, - width='calc(100% / 2 - 10px)' + width = 'calc(100% / 2 - 10px)' }) => { const containerStyle = { display: "flex", flexDirection: "column", alignItems: "flex-start", justifyContent: "center", - width: !children && !isChildren && width, + width: width, height: "auto", borderRadius: "15px", padding: "20px", @@ -104,7 +104,7 @@ const RoundedRectangle = ({ ); }; -const App = ({ forCafe = true, cafeId="", +const App = ({ forCafe = true, cafeId = -1, handleClose, otherCafes }) => { const [selectedCafeId, setSelectedCafeId] = useState(cafeId); const [analytics, setAnalytics] = useState({}); @@ -112,13 +112,13 @@ const App = ({ forCafe = true, cafeId="", const [filter, setFilter] = useState("yesterday"); const fetchData = async (filter) => { - if(selectedCafeId == '-1') return; + if (selectedCafeId == '-1') return; try { setLoading(true); // Fetch the analytics data with the selected filter - const analyticsData = (selectedCafeId !== '' && selectedCafeId !== 0) - ? await getReports(selectedCafeId, filter) - : await getAnalytics(filter); + const analyticsData = (selectedCafeId !== '' && selectedCafeId !== 0) + ? await getReports(selectedCafeId, filter) + : await getAnalytics(filter); console.log(analyticsData); if (analyticsData) setAnalytics(analyticsData); @@ -165,30 +165,30 @@ const App = ({ forCafe = true, cafeId="", const cafeTotal = (cafe.report?.itemSales || []).reduce((sum, item) => sum + item.sold, 0); return total + cafeTotal; }, 0); - + // Define a color palette or generate colors dynamically const colorPalette = colors; - + // Ensure that each segment gets a unique color let colorIndex = 0; - + console.log(filteredItems) let segments = (selectedCafeId == 0 || selectedCafeId == -1) ? filteredItems.flatMap((cafe) => { const cafeItems = cafe.report?.itemSales || []; console.log(cafeItems); // Log all items for the cafe - + return cafeItems.map((item, index) => { const percentage = totalSoldAcrossAllCafes > 0 ? ((item.sold / totalSoldAcrossAllCafes) * 100).toFixed(2) : 0; - + console.log(`${item.itemName}: ${(percentage)}%`); // Log item name and percentage - + // Assign a unique color from the color palette const color = colorPalette[colorIndex % colorPalette.length]; // Use modulo to cycle through colors - + colorIndex++; // Increment to ensure a new color for the next item - + return { itemName: item.itemName, sold: item.sold, @@ -205,12 +205,12 @@ const App = ({ forCafe = true, cafeId="", color: color, }; }); - + segments.sort((a, b) => b.sold - a.sold); - - + + console.log(selectedCafeId) -console.log(segments) + console.log(segments) const formatIncome = (amount) => { if (amount >= 1_000_000_000) { @@ -249,11 +249,11 @@ console.log(segments) 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; - + if (otherCafes.length === 0) { updatedFullTexts = [["buat kedai", 0]]; } else if (otherCafes.length === 1) { @@ -261,8 +261,8 @@ console.log(segments) [otherCafes[0].name, otherCafes[0].cafeId], ["buat kedai", -1] ]; - - setSelectedCafeId(otherCafes[0].cafeId); // Get the cafeId (second part of the pair) + + setSelectedCafeId(otherCafes[0].cafeId); // Get the cafeId (second part of the pair) } else { updatedFullTexts = [ ["semua", 0], // First entry is "semua" @@ -270,27 +270,27 @@ console.log(segments) ["tambah kedai +", -1] // Add the "+" entry ]; } - + setFullTexts(updatedFullTexts); // Set fullTexts with the original structure // Set fullTextsVisible to an array of names only setFullTextsVisible(updatedFullTexts.map(item => item[0])); // Extract just the names (first part of each pair) - + // Set the first 3 items in texts setTexts(updatedFullTexts.map(item => item[0]).slice(0, 3)); - + // Increment resetKey to trigger re-render setResetKey(prevKey => prevKey + 1); } - + console.log(otherCafes); }, [otherCafes]); - - + + console.log(fullTexts) const [selectedSwitch, setSelectedSwitch] = useState(0); const onItemToggle = (index) => { - + // When user clicks the last visible option (index === 2 in the current view) if (index === 2) { console.log(fullTexts); @@ -298,7 +298,7 @@ console.log(segments) setTexts((prevTexts) => { const newTexts = [...prevTexts]; console.log(prevTexts.length) - const nextText = fullTexts[fullTexts.findIndex(item => item[0] === texts[2])+1][0]; // Get the next item in the full list + 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 @@ -306,7 +306,7 @@ console.log(segments) }); } } - + // When user clicks the first visible option (index === 0 in the current view) if (index === 0) { // Check if there is a previous text in the full list (before the first visible text) @@ -321,20 +321,20 @@ console.log(segments) }); } } - + // Dynamically update selectedSwitch state to trigger re-render setSelectedSwitch(index); - + // Get the cafeId from the selected text based on the index 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) { setSelectedCafeId(selectedItem[1]); // Get the cafeId (second part of the pair) } - + setResetKey((prevKey) => prevKey + 1); // Increase the key to force re-render }; - + // useEffect(() => { // // This effect will run whenever the selectedSwitch changes // // We could add logic here if needed for side effects @@ -342,186 +342,213 @@ console.log(segments) return (
-
- {forCafe &&
} +
+ {forCafe &&
}
- {!forCafe && - - // - -
- {texts.map((item, indexx) => { - return ( -
onItemToggle(indexx)} - > -
-
- {item} + {!forCafe && -
-
- ); - })} -
+ // + +
+ {texts.map((item, indexx) => { + return ( +
onItemToggle(indexx)} + > +
+
+ {item} + +
+
+ ); + })} +
}
-
- -
- + +
+ - - - {analytics?.itemSales && - analytics?.itemSales.length > 0 && ( - - )} - {(!analytics?.itemSales || - analytics?.itemSales.length === 0) && ( - - )} - {!forCafe && selectedCafeId != -1 && selectedCafeId != 0 && ( + + + {analytics?.itemSales && + analytics?.itemSales.length > 0 && ( window.location.href = window.location.origin + '/' + otherCafes.find(item => item.cafeId === selectedCafeId).cafeIdentifyName} /> )} + {(!analytics?.itemSales || + analytics?.itemSales.length === 0) && ( + + )} + {!forCafe && selectedCafeId != -1 && selectedCafeId != 0 && ( + window.location.href = window.location.origin + '/' + otherCafes.find(item => item.cafeId === selectedCafeId).cafeIdentifyName} + /> + )} +
+
ⓘ
+
+ Persentase pertumbuhan dihitung dengan membandingkan {" "} + {comparisonText} hari terakhir dengan {comparisonText} hari sebelumnya. +
+
+
-
ⓘ
-
- Persentase pertumbuhan dihitung dengan membandingkan {" "} - {comparisonText} hari terakhir dengan {comparisonText} hari sebelumnya. -
-
-
-
-
- -
-
- {segments.map((item, index) => ( -
+
+ +
+
+ {segments.map((item, index) => (
- ★ +
+ ★ +
+
{item.itemName}
-
{item.itemName}
-
- ))} + ))} +
+
+ {filter == 'yesterday' || filter == 'weekly' ? + + : + + } +
+ } + {!forCafe && selectedCafeId == -1 && +
+
+ + +
- {filter == 'yesterday' || filter == 'weekly' ? - - : - - } -
+ }
); };