This commit is contained in:
client.perkafean.backup
2024-09-05 07:05:20 +00:00
parent 2bc5aa6a14
commit 0dcbe77019
7 changed files with 266 additions and 243 deletions

View File

@@ -177,7 +177,7 @@ function App() {
// shopClerks is can only be obtained by the shop owner
// so every user that is admin will try to getting shopClerks, even not yet proven that this is their shop
const shopClerks = await getClerks(shopId);
setShopClerks(shopClerks);
if (shopClerks != null) setShopClerks(shopClerks);
}
}
});

View File

@@ -114,7 +114,7 @@ export default function Footer({
</span>
{table.length == 0 && (
<img
src="https://i.ibb.co.com/y0FWnbh/qr-scan-icon-2048x2048-aeh36n7y.png"
src="https://i.imgur.com/I44LpDO.png"
alt="QR Code"
className={styles.qrIcon}
/>

View File

@@ -360,8 +360,8 @@ const Header = ({
user.roleId === 2 && (
<Child hasChildren>
{shopName}
<Child onClick={() => setModal("update_stock")}>
update stock
<Child onClick={() => setModal("add_material")}>
stock
</Child>
{user.username !== undefined &&
user.roleId == 2 &&

View File

@@ -1,6 +1,6 @@
import React, { useState, useRef, useEffect } from 'react';
import './RouletteWheel.css';
import coffeeImage from './coffee.png'; // Update the path to your image
import React, { useState, useRef, useEffect } from "react";
import "./RouletteWheel.css";
import coffeeImage from "./coffee.png"; // Update the path to your image
const RouletteWheel = ({ isForRegister, onSign }) => {
const [rotation, setRotation] = useState(0);
@@ -9,9 +9,9 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
const startRotationRef = useRef(0);
const wheelRef = useRef(null);
const [email, setEmail] = useState('');
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [email, setEmail] = useState("");
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const emailInputRef = useRef(null);
const usernameInputRef = useRef(null);
@@ -32,8 +32,13 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
const angle = getAngle(x, y);
const deltaAngle = angle - startAngleRef.current;
setRotation(startRotationRef.current + deltaAngle);
if(isForRegister) {if (rotation + deltaAngle > 30 || rotation + deltaAngle < - 210) handleEnd();}
else {if (rotation + deltaAngle > 30 || rotation + deltaAngle < - 120) handleEnd();}
if (isForRegister) {
if (rotation + deltaAngle > 30 || rotation + deltaAngle < -210)
handleEnd();
} else {
if (rotation + deltaAngle > 30 || rotation + deltaAngle < -120)
handleEnd();
}
}
};
@@ -93,22 +98,24 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
useEffect(() => {
if (isDragging) {
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('touchmove', handleTouchMove, { passive: false });
document.addEventListener('touchend', handleTouchEnd, { passive: false });
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
document.addEventListener("touchmove", handleTouchMove, {
passive: false,
});
document.addEventListener("touchend", handleTouchEnd, { passive: false });
} else {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
document.removeEventListener('touchmove', handleTouchMove);
document.removeEventListener('touchend', handleTouchEnd);
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
document.removeEventListener("touchmove", handleTouchMove);
document.removeEventListener("touchend", handleTouchEnd);
}
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
document.removeEventListener('touchmove', handleTouchMove);
document.removeEventListener('touchend', handleTouchEnd);
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
document.removeEventListener("touchmove", handleTouchMove);
document.removeEventListener("touchend", handleTouchEnd);
};
}, [isDragging]);
@@ -128,8 +135,7 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
} else if (isVisible(rotation % 360 !== -180)) {
passwordInputRef.current.focus();
}
}
else{
} else {
if (isVisible(rotation % 360 !== -0)) {
usernameInputRef.current.focus();
} else if (isVisible(rotation % 360 !== -90)) {
@@ -150,7 +156,9 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
{!isForRegister ? (
<>
<input
className={`roulette-input ${isVisible(rotation % 360 !== -0) ? '' : 'hidden'}`}
className={`roulette-input ${
isVisible(rotation % 360 !== -0) ? "" : "hidden"
}`}
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
@@ -158,7 +166,9 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
/>
<input
className={`roulette-input ${isVisible(rotation % 360 !== -90) ? '' : 'hidden'}`}
className={`roulette-input ${
isVisible(rotation % 360 !== -90) ? "" : "hidden"
}`}
placeholder="Password"
type="password"
value={password}
@@ -167,17 +177,23 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
/>
<button
className={`roulette-input ${isVisible(rotation % 360 !== -90) ? '' : 'hidden'}`}
className={`roulette-input ${
isVisible(rotation % 360 !== -90) ? "" : "hidden"
}`}
onClick={handleSign}
onMouseDown={handleChildMouseDown}
onTouchStart={handleChildTouchStart}
style={{ transform: "translate(10%, 320%) rotate(90deg)" }}
>Sign in</button>
</>)
: (
>
Sign in
</button>
</>
) : (
<>
<input
className={`roulette-input ${isVisible(rotation % 360 !== -0) ? '' : 'hidden'}`}
className={`roulette-input ${
isVisible(rotation % 360 !== -0) ? "" : "hidden"
}`}
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
@@ -185,7 +201,9 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
/>
<input
className={`roulette-input ${isVisible(rotation % 360 !== -90) ? '' : 'hidden'}`}
className={`roulette-input ${
isVisible(rotation % 360 !== -90) ? "" : "hidden"
}`}
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
@@ -193,7 +211,9 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
/>
<input
className={`roulette-input ${isVisible(rotation % 360 !== -180) ? '' : 'hidden'}`}
className={`roulette-input ${
isVisible(rotation % 360 !== -180) ? "" : "hidden"
}`}
placeholder="Password"
type="password"
value={password}
@@ -202,19 +222,19 @@ const RouletteWheel = ({ isForRegister, onSign }) => {
style={{ transform: "translate(-90%, 115%) rotate(180deg)" }}
/>
<button
className={`roulette-button ${isVisible(rotation % 360 !== -180) ? '' : 'hidden'}`}
className={`roulette-button ${
isVisible(rotation % 360 !== -180) ? "" : "hidden"
}`}
onClick={handleSign}
onMouseDown={handleChildMouseDown}
onTouchStart={handleChildTouchStart}
style={{ transform: "translate(-90%, 30%) rotate(180deg)" }}
>Sign up</button>
>
Sign up
</button>
</>
)}
<img
src={coffeeImage}
className="roulette-image"
alt="Coffee"
/>
<img src={coffeeImage} className="roulette-image" alt="Coffee" />
</div>
</div>
);

View File

@@ -1,5 +1,5 @@
// src/config.js
const API_BASE_URL = "https://8h8rx8-5000.csb.app"; // Replace with your actual backend URL
const API_BASE_URL = "https://5n2rcx-5000.csb.app"; // Replace with your actual backend URL
export default API_BASE_URL;

View File

@@ -343,10 +343,15 @@ export const getFavourite = async (cafeId) => {
return response.json();
};
export const getAnalytics = async (cafeId) => {
export const getAnalytics = async (cafeId, filter) => {
const response = await fetch(
`${API_BASE_URL}/transaction/get-analytics/${cafeId}`,
getHeaders()
API_BASE_URL + "/transaction/get-analytics/" + cafeId + "?type=" + filter,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
}
);
return response.json();
};

View File

@@ -85,7 +85,7 @@ const RoundedRectangle = ({
{percentage != undefined && "%"}
{percentage != undefined && (
<span style={arrowStyle}>
{percentage > 0 ? "↗" : percentage == 0 ? "-" : "↘"}
{percentage > 0 ? "↗" : percentage === 0 ? "-" : "↘"}
</span>
)}
</div>
@@ -102,16 +102,13 @@ const App = ({ cafeId }) => {
const [colors, setColors] = useState([]);
const [viewStock, setViewStock] = useState(false);
useEffect(() => {
const fetchData = async () => {
const fetchData = async (filter) => {
try {
setLoading(true);
const items = await getFavourite(cafeId);
const analyticsData = await getAnalytics(cafeId);
const incomeData = await getIncome(cafeId);
if (items) setFavouriteItems(items);
if (analyticsData) setAnalytics(analyticsData);
// Fetch the analytics data with the selected filter
const analyticsData = await getAnalytics(cafeId, filter);
console.log(analyticsData);
if (analyticsData) setAnalytics(analyticsData);
} catch (error) {
console.error("Error fetching data:", error);
} finally {
@@ -119,8 +116,9 @@ const App = ({ cafeId }) => {
}
};
fetchData();
}, [cafeId]);
useEffect(() => {
fetchData(filter); // Fetch data when filter changes
}, [filter]);
useEffect(() => {
const getRandomColor = () => {
@@ -239,7 +237,7 @@ const App = ({ cafeId }) => {
value={sold}
percentage={percentage}
/>
{filteredItems[0]?.Item != undefined && (
{filteredItems[0]?.Item !== undefined && (
<RoundedRectangle
bgColor="#E5ECF6"
title={filteredItems[0]?.Item.name}
@@ -247,7 +245,7 @@ const App = ({ cafeId }) => {
percentage={filteredItems[0]?.percentageByPreviousPeriod}
/>
)}
{filteredItems[0]?.Item == undefined && (
{filteredItems[0]?.Item === undefined && (
<RoundedRectangle
bgColor="#8989897a"
title={"No fav item"}
@@ -257,8 +255,8 @@ const App = ({ cafeId }) => {
<RoundedRectangle
bgColor={viewStock ? "#979797" : "#E5ECF6"}
title="Stok"
value={viewStock ? " ˅" : " ˄"} // Corrected ternary operator syntax
onClick={() => setViewStock(!viewStock)} // onClick should be a function
value={viewStock ? " ˅" : " ˄"}
onClick={() => setViewStock(!viewStock)}
/>
<RoundedRectangle
bgColor="#E3F5FF"