kediritechnopark/groovee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
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);
} }
} }
}); });

2
src/components/Footer.js
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}
/> />

10
src/components/Header.js
View File

@@ -314,15 +314,15 @@ const Header = ({
user.roleId === 1 && ( user.roleId === 1 && (
<> <>
<Child onClick={goToAdminCafes}>see your other cafes</Child> <Child onClick={goToAdminCafes}>see your other cafes</Child>
{/* <Child onClick={() => setModal("update_stock")}> {/* <Child onClick={() => setModal("update_stock")}>
update stock update stock
</Child> */} </Child> */}
<Child hasChildren> <Child hasChildren>
{shopName} {shopName}
<Child onClick={() => setModal("add_material")}> <Child onClick={() => setModal("add_material")}>
stock stock
</Child> </Child>
<Child onClick={() => setModal("edit_tables")}> <Child onClick={() => setModal("edit_tables")}>
table maps table maps
</Child> </Child>
@@ -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 &&

438
src/components/RouletteWheel.js
View File

@@ -1,223 +1,243 @@
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);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const startAngleRef = useRef(0); const startAngleRef = useRef(0);
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);
const passwordInputRef = useRef(null); const passwordInputRef = useRef(null);
const handleSign = () => { const handleSign = () => {
onSign(email, username, password); onSign(email, username, password);
};
const handleStart = (x, y) => {
setIsDragging(true);
startAngleRef.current = getAngle(x, y);
startRotationRef.current = rotation;
};
const handleMove = (x, y) => {
if (isDragging) {
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();
}
}
};
const handleEnd = () => {
setIsDragging(false);
setRotation((prevRotation) => {
const snappedRotation = Math.round(prevRotation / 90) * 90;
return snappedRotation;
});
};
const handleMouseDown = (e) => {
handleStart(e.clientX, e.clientY);
};
const handleMouseMove = (e) => {
handleMove(e.clientX, e.clientY);
};
const handleMouseUp = () => {
handleEnd();
};
const handleTouchStart = (e) => {
const touch = e.touches[0];
handleStart(touch.clientX, touch.clientY);
};
const handleTouchMove = (e) => {
if (!isDragging) return;
e.preventDefault();
const touch = e.touches[0];
handleMove(touch.clientX, touch.clientY);
};
const handleTouchEnd = (e) => {
e.preventDefault();
handleEnd();
};
const handleChildMouseDown = (e) => {
e.stopPropagation();
};
const handleChildTouchStart = (e) => {
e.stopPropagation();
};
const getAngle = (x, y) => {
const rect = wheelRef.current.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const dx = x - centerX;
const dy = y - centerY;
return Math.atan2(dy, dx) * (180 / Math.PI);
};
useEffect(() => {
if (isDragging) {
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);
}
return () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
document.removeEventListener("touchmove", handleTouchMove);
document.removeEventListener("touchend", handleTouchEnd);
}; };
}, [isDragging]);
const handleStart = (x, y) => { const inputPositions = [-90, 0, 90, 180]; // Positions for the inputs
setIsDragging(true);
startAngleRef.current = getAngle(x, y);
startRotationRef.current = rotation;
};
const handleMove = (x, y) => { const isVisible = (angle) => {
if (isDragging) { const modAngle = ((angle % 360) + 360) % 360;
const angle = getAngle(x, y); return modAngle % 90 === 0;
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();}
}
};
const handleEnd = () => { useEffect(() => {
setIsDragging(false); if (isForRegister) {
setRotation((prevRotation) => { if (isVisible(rotation % 360 !== -0)) {
const snappedRotation = Math.round(prevRotation / 90) * 90; emailInputRef.current.focus();
return snappedRotation; } else if (isVisible(rotation % 360 !== -90)) {
}); usernameInputRef.current.focus();
}; } else if (isVisible(rotation % 360 !== -180)) {
passwordInputRef.current.focus();
}
} else {
if (isVisible(rotation % 360 !== -0)) {
usernameInputRef.current.focus();
} else if (isVisible(rotation % 360 !== -90)) {
passwordInputRef.current.focus();
}
}
}, [rotation]);
const handleMouseDown = (e) => { return (
handleStart(e.clientX, e.clientY); <div className="roulette-wheel-container">
}; <div
className="roulette-wheel"
const handleMouseMove = (e) => { ref={wheelRef}
handleMove(e.clientX, e.clientY); onMouseDown={handleMouseDown}
}; onTouchStart={handleTouchStart}
style={{ transform: `rotate(${rotation}deg)` }}
const handleMouseUp = () => { >
handleEnd(); {!isForRegister ? (
}; <>
<input
const handleTouchStart = (e) => { className={`roulette-input ${
const touch = e.touches[0]; isVisible(rotation % 360 !== -0) ? "" : "hidden"
handleStart(touch.clientX, touch.clientY); }`}
}; placeholder="Username"
value={username}
const handleTouchMove = (e) => { onChange={(e) => setUsername(e.target.value)}
if (!isDragging) return; ref={usernameInputRef}
e.preventDefault(); style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
const touch = e.touches[0]; />
handleMove(touch.clientX, touch.clientY); <input
}; className={`roulette-input ${
isVisible(rotation % 360 !== -90) ? "" : "hidden"
const handleTouchEnd = (e) => { }`}
e.preventDefault(); placeholder="Password"
handleEnd(); type="password"
}; value={password}
onChange={(e) => setPassword(e.target.value)}
const handleChildMouseDown = (e) => { ref={passwordInputRef}
e.stopPropagation(); style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
}; />
<button
const handleChildTouchStart = (e) => { className={`roulette-input ${
e.stopPropagation(); isVisible(rotation % 360 !== -90) ? "" : "hidden"
}; }`}
onClick={handleSign}
const getAngle = (x, y) => { onMouseDown={handleChildMouseDown}
const rect = wheelRef.current.getBoundingClientRect(); onTouchStart={handleChildTouchStart}
const centerX = rect.left + rect.width / 2; style={{ transform: "translate(10%, 320%) rotate(90deg)" }}
const centerY = rect.top + rect.height / 2;
const dx = x - centerX;
const dy = y - centerY;
return Math.atan2(dy, dx) * (180 / Math.PI);
};
useEffect(() => {
if (isDragging) {
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);
}
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
document.removeEventListener('touchmove', handleTouchMove);
document.removeEventListener('touchend', handleTouchEnd);
};
}, [isDragging]);
const inputPositions = [-90, 0, 90, 180]; // Positions for the inputs
const isVisible = (angle) => {
const modAngle = ((angle % 360) + 360) % 360;
return modAngle % 90 === 0;
};
useEffect(() => {
if(isForRegister){
if (isVisible(rotation % 360 !== -0)) {
emailInputRef.current.focus();
} else if (isVisible(rotation % 360 !== -90)) {
usernameInputRef.current.focus();
} else if (isVisible(rotation % 360 !== -180)) {
passwordInputRef.current.focus();
}
}
else{
if (isVisible(rotation % 360 !== -0)) {
usernameInputRef.current.focus();
} else if (isVisible(rotation % 360 !== -90)) {
passwordInputRef.current.focus();
}
}
}, [rotation]);
return (
<div className="roulette-wheel-container">
<div
className="roulette-wheel"
ref={wheelRef}
onMouseDown={handleMouseDown}
onTouchStart={handleTouchStart}
style={{ transform: `rotate(${rotation}deg)` }}
> >
{!isForRegister ? ( Sign in
<> </button>
<input </>
className={`roulette-input ${isVisible(rotation % 360 !== -0) ? '' : 'hidden'}`} ) : (
placeholder="Username" <>
value={username} <input
onChange={(e) => setUsername(e.target.value)} className={`roulette-input ${
ref={usernameInputRef} isVisible(rotation % 360 !== -0) ? "" : "hidden"
style={{ transform: "translate(90%, -120%) rotate(0deg)" }} }`}
/> placeholder="Email"
<input value={email}
className={`roulette-input ${isVisible(rotation % 360 !== -90) ? '' : 'hidden'}`} onChange={(e) => setEmail(e.target.value)}
placeholder="Password" ref={emailInputRef}
type="password" style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
value={password} />
onChange={(e) => setPassword(e.target.value)} <input
ref={passwordInputRef} className={`roulette-input ${
style={{ transform: "translate(30%, 350%) rotate(90deg)" }} isVisible(rotation % 360 !== -90) ? "" : "hidden"
/> }`}
<button placeholder="Username"
className={`roulette-input ${isVisible(rotation % 360 !== -90) ? '' : 'hidden'}`} value={username}
onClick={handleSign} onChange={(e) => setUsername(e.target.value)}
onMouseDown={handleChildMouseDown} ref={usernameInputRef}
onTouchStart={handleChildTouchStart} style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
style={{ transform: "translate(10%, 320%) rotate(90deg)" }} />
>Sign in</button> <input
</>) className={`roulette-input ${
: ( isVisible(rotation % 360 !== -180) ? "" : "hidden"
<> }`}
<input placeholder="Password"
className={`roulette-input ${isVisible(rotation % 360 !== -0) ? '' : 'hidden'}`} type="password"
placeholder="Email" value={password}
value={email} onChange={(e) => setPassword(e.target.value)}
onChange={(e) => setEmail(e.target.value)} ref={passwordInputRef}
ref={emailInputRef} style={{ transform: "translate(-90%, 115%) rotate(180deg)" }}
style={{ transform: "translate(90%, -120%) rotate(0deg)" }} />
/> <button
<input className={`roulette-button ${
className={`roulette-input ${isVisible(rotation % 360 !== -90) ? '' : 'hidden'}`} isVisible(rotation % 360 !== -180) ? "" : "hidden"
placeholder="Username" }`}
value={username} onClick={handleSign}
onChange={(e) => setUsername(e.target.value)} onMouseDown={handleChildMouseDown}
ref={usernameInputRef} onTouchStart={handleChildTouchStart}
style={{ transform: "translate(30%, 350%) rotate(90deg)" }} style={{ transform: "translate(-90%, 30%) rotate(180deg)" }}
/> >
<input Sign up
className={`roulette-input ${isVisible(rotation % 360 !== -180) ? '' : 'hidden'}`} </button>
placeholder="Password" </>
type="password" )}
value={password} <img src={coffeeImage} className="roulette-image" alt="Coffee" />
onChange={(e) => setPassword(e.target.value)} </div>
ref={passwordInputRef} </div>
style={{ transform: "translate(-90%, 115%) rotate(180deg)" }} );
/>
<button
className={`roulette-button ${isVisible(rotation % 360 !== -180) ? '' : 'hidden'}`}
onClick={handleSign}
onMouseDown={handleChildMouseDown}
onTouchStart={handleChildTouchStart}
style={{ transform: "translate(-90%, 30%) rotate(180deg)" }}
>Sign up</button>
</>
)}
<img
src={coffeeImage}
className="roulette-image"
alt="Coffee"
/>
</div>
</div>
);
}; };
export default RouletteWheel; export default RouletteWheel;

2
src/config.js
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;

11
src/helpers/transactionHelpers.js
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();
}; };

44
src/pages/Reports.js
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,25 +102,23 @@ 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); // Fetch the analytics data with the selected filter
const items = await getFavourite(cafeId); const analyticsData = await getAnalytics(cafeId, filter);
const analyticsData = await getAnalytics(cafeId); console.log(analyticsData);
const incomeData = await getIncome(cafeId); if (analyticsData) setAnalytics(analyticsData);
if (items) setFavouriteItems(items); } catch (error) {
if (analyticsData) setAnalytics(analyticsData); console.error("Error fetching data:", error);
console.log(analyticsData); } finally {
} catch (error) { setLoading(false);
console.error("Error fetching data:", error); }
} finally { };
setLoading(false);
}
};
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"