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 // 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 // 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); const shopClerks = await getClerks(shopId);
setShopClerks(shopClerks); if (shopClerks != null) setShopClerks(shopClerks);
} }
} }
}); });

View File

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

View File

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

View File

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

View File

@@ -1,5 +1,5 @@
// src/config.js // 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; export default API_BASE_URL;

View File

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

View File

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