From 47743ce8dcec1550589355deb34247282cb2f6ed Mon Sep 17 00:00:00 2001 From: "client.perkafean.backup" Date: Fri, 6 Sep 2024 08:48:51 +0000 Subject: [PATCH] ok --- package-lock.json | 10 +++ package.json | 1 + src/pages/Reports.js | 205 +++++++++++++++++++++---------------------- src/pages/Switch.css | 39 ++++++++ 4 files changed, 152 insertions(+), 103 deletions(-) create mode 100644 src/pages/Switch.css diff --git a/package-lock.json b/package-lock.json index bb37436..88889af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "react-bootstrap": "^2.10.4", "react-dom": "^18.3.1", "react-loader-spinner": "^6.1.6", + "react-multi-switch-toggle": "^1.0.12", "react-qr-reader": "^3.0.0-beta-1", "react-router-dom": "^6.24.0", "react-scripts": "5.0.1", @@ -16052,6 +16053,15 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" }, + "node_modules/react-multi-switch-toggle": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/react-multi-switch-toggle/-/react-multi-switch-toggle-1.0.12.tgz", + "integrity": "sha512-SW/g2InMjQOZSUZvq8uPnblpWpHgL/uox/xGKEoRSPZNhyHbHJEb902W+R/oS5bu2udhc7OrWi8M+G7NHzMKAw==", + "peerDependencies": { + "react": "^16.3.0", + "react-dom": "^16.3.0" + } + }, "node_modules/react-qr-reader": { "version": "3.0.0-beta-1", "resolved": "https://registry.npmjs.org/react-qr-reader/-/react-qr-reader-3.0.0-beta-1.tgz", diff --git a/package.json b/package.json index 4c2457d..a5eb987 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react-bootstrap": "^2.10.4", "react-dom": "^18.3.1", "react-loader-spinner": "^6.1.6", + "react-multi-switch-toggle": "^1.0.12", "react-qr-reader": "^3.0.0-beta-1", "react-router-dom": "^6.24.0", "react-scripts": "5.0.1", diff --git a/src/pages/Reports.js b/src/pages/Reports.js index ba51624..4df9fb1 100644 --- a/src/pages/Reports.js +++ b/src/pages/Reports.js @@ -7,6 +7,9 @@ import { } from "../helpers/transactionHelpers.js"; import CircularDiagram from "./CircularDiagram"; import styles from "./Transactions.module.css"; +import "./Switch.css"; + +import MultiSwitch from "react-multi-switch-toggle"; const RoundedRectangle = ({ onClick, @@ -14,7 +17,8 @@ const RoundedRectangle = ({ title, value, percentage, - fontSize = "20px", + fontSize = "15px", + loading = false, }) => { const containerStyle = { display: "flex", @@ -30,12 +34,15 @@ const RoundedRectangle = ({ textAlign: "left", fontFamily: "Arial, sans-serif", boxSizing: "border-box", + backgroundColor: loading ? "rgb(127 127 127)" : bgColor, }; const titleStyle = { fontWeight: "bold", marginBottom: "10px", width: "100%", + backgroundColor: loading ? "rgb(85 85 85)" : "inherit", + color: loading ? "transparent" : "inherit", }; const valueAndPercentageContainerStyle = { @@ -47,10 +54,15 @@ const RoundedRectangle = ({ }; const valueStyle = { - fontSize: fontSize, + fontSize: loading ? "15px" : fontSize, fontWeight: "bold", flex: "1", textAlign: "left", + color: loading ? "transparent" : "inherit", + backgroundColor: loading ? "rgb(85 85 85)" : "transparent", + overflow: "hidden", + textOverflow: "ellipsis", // Add ellipsis for overflow text + whiteSpace: "nowrap", // Prevent text from wrapping }; const percentageStyle = { @@ -58,6 +70,7 @@ const RoundedRectangle = ({ display: "flex", alignItems: "center", textAlign: "right", + color: loading ? "black" : percentage > 0 ? "#007bff" : "red", }; const arrowStyle = { @@ -65,25 +78,18 @@ const RoundedRectangle = ({ }; return ( -
+
{title}
-
{value}
+
{loading ? "Loading..." : value}
0 ? "#007bff" : "red", }} > - {percentage} - {percentage != undefined && "%"} - {percentage != undefined && ( + {loading ? "" : percentage} + {percentage != undefined && !loading && "%"} + {percentage != undefined && !loading && ( {percentage > 0 ? "↗" : percentage === 0 ? "-" : "↘"} @@ -98,7 +104,7 @@ const App = ({ cafeId }) => { const [favouriteItems, setFavouriteItems] = useState([]); const [analytics, setAnalytics] = useState({}); const [loading, setLoading] = useState(true); - const [filter, setFilter] = useState("monthly"); // Default filter is 'monthly' + const [filter, setFilter] = useState("daily"); // Default filter is 'monthly' const [colors, setColors] = useState([]); const [viewStock, setViewStock] = useState(false); @@ -139,15 +145,6 @@ const App = ({ cafeId }) => { setColors(colors); }, [favouriteItems, filter]); - if (loading) - return ( -
-
- -
-
- ); - const [sold, percentage] = analytics[filter] || [0, 0]; const filteredItems = favouriteItems[filter] || []; @@ -173,56 +170,42 @@ const App = ({ cafeId }) => { return thousands.toFixed(1).replace(/\.0$/, "") + "k"; // One decimal place, remove trailing '.0' } else { // Less than a thousand - return amount.toString(); + if (amount != null) return amount.toString(); } }; + function roundToInteger(num) { + return Math.round(num); + } + + function onToggle(selectedItem) { + const filterMap = ["daily", "weekly", "monthly", "yearly"]; + setFilter(filterMap[selectedItem]); + } + + const filterTexts = ["1 day", "7 days", "30 days", "365 days"]; + const comparisonText = + filterTexts[["daily", "weekly", "monthly", "yearly"].indexOf(filter)]; + return (

Reports

-
- - - - -
+
{ - {filteredItems[0]?.Item !== undefined && ( - - )} - {filteredItems[0]?.Item === undefined && ( - - )} - setViewStock(!viewStock)} + value={analytics.transactionCount} + percentage={roundToInteger(analytics.transactionGrowth)} + loading={loading} /> + + {analytics?.currentFavoriteItem !== null && ( + + )} + {analytics?.currentFavoriteItem === null && ( + + )} + {analytics?.previousFavoriteItem !== null && ( + + )} + {analytics?.previousFavoriteItem === null && ( + + )} + +
+ ⓘ compared to the previous {comparisonText} +
{
{filteredItems.map((item, index) => ( -
- {item.Item.name}: {item.sold} -
+ ))}
diff --git a/src/pages/Switch.css b/src/pages/Switch.css new file mode 100644 index 0000000..4102f65 --- /dev/null +++ b/src/pages/Switch.css @@ -0,0 +1,39 @@ +.filter-switch { + display: flex; + align-items: center; + position: relative; + font-family: Arial, sans-serif; +} + +.filter-item { + padding: 10px 20px; + cursor: pointer; + transition: transform 0.3s ease, color 0.3s ease; + border-radius: 5px; + margin-right: 10px; + position: relative; +} + +.filter-item.active { + color: #fff; + background: #007bff; + transform: scale(1.1); +} + +.filter-item::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 123, 255, 0.2); + border-radius: 5px; + opacity: 0; + transition: opacity 0.3s ease; + z-index: -1; +} + +.filter-item.active::before { + opacity: 1; +}