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

ok

Browse Source
This commit is contained in:
Vassshhh
2025-08-27 02:53:44 +07:00
parent e039fc8acc
commit ba896106d4
12 changed files with 292 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/DailyCharts.js
View File

@@ -23,41 +23,50 @@ const DailyCharts = ({ incomeGraph, transactionGraph, materialGraph, colors, typ
"21-24",
];
console.log(dayData)
const sumSold = (transactions) =>
Array.isArray(transactions) ? transactions.reduce((acc, t) => acc + t.sold, 0) : transactions.transaction || 0;
const sumTotal = (transactions) =>
Array.isArray(transactions) ? transactions.reduce((acc, t) => acc + t.totalPrice, 0) : transactions.income || 0;
const sumOutcome = (transactions) =>
Array.isArray(transactions) ? transactions.reduce((acc, t) => acc + t.materialOutcome || t.price, 0) : transactions.outcome || 0;
let seriesData = []
if(graphFilter == 'transactions'){
if (graphFilter == 'transactions') {
seriesData = [
dayData.hour0To3Transactions.reduce((acc, t) => acc + t.sold, 0),
dayData.hour3To6Transactions.reduce((acc, t) => acc + t.sold, 0),
dayData.hour6To9Transactions.reduce((acc, t) => acc + t.sold, 0),
dayData.hour9To12Transactions.reduce((acc, t) => acc + t.sold, 0),
dayData.hour12To15Transactions.reduce((acc, t) => acc + t.sold, 0),
dayData.hour15To18Transactions.reduce((acc, t) => acc + t.sold, 0),
dayData.hour18To21Transactions.reduce((acc, t) => acc + t.sold, 0),
dayData.hour21To24Transactions.reduce((acc, t) => acc + t.sold, 0),
sumSold(dayData?.hour0To3Transactions),
sumSold(dayData?.hour3To6Transactions),
sumSold(dayData?.hour6To9Transactions),
sumSold(dayData?.hour9To12Transactions),
sumSold(dayData?.hour12To15Transactions),
sumSold(dayData?.hour15To18Transactions),
sumSold(dayData?.hour18To21Transactions),
sumSold(dayData?.hour21To24Transactions),
];
}
else if(graphFilter == 'income'){
else if (graphFilter == 'income') {
seriesData = [
dayData.hour0To3Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour3To6Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour6To9Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour9To12Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour12To15Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour15To18Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour18To21Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour21To24Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
sumTotal(dayData?.hour0To3Transactions),
sumTotal(dayData?.hour3To6Transactions),
sumTotal(dayData?.hour6To9Transactions),
sumTotal(dayData?.hour9To12Transactions),
sumTotal(dayData?.hour12To15Transactions),
sumTotal(dayData?.hour15To18Transactions),
sumTotal(dayData?.hour18To21Transactions),
sumTotal(dayData?.hour21To24Transactions),
];
}
else if(graphFilter == 'outcome'){
else if (graphFilter == 'outcome') {
seriesData = [
dayData.hour3To6MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour6To9MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour0To3MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour9To12MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour12To15MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour15To18MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour18To21MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour21To24MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
sumOutcome(dayData?.hour0To3MaterialIds),
sumOutcome(dayData?.hour3To6MaterialIds),
sumOutcome(dayData?.hour6To9MaterialIds),
sumOutcome(dayData?.hour9To12MaterialIds),
sumOutcome(dayData?.hour12To15MaterialIds),
sumOutcome(dayData?.hour15To18MaterialIds),
sumOutcome(dayData?.hour18To21MaterialIds),
sumOutcome(dayData?.hour21To24MaterialIds),
];
}
return {
@@ -119,13 +128,13 @@ const DailyCharts = ({ incomeGraph, transactionGraph, materialGraph, colors, typ
key={indexx}
className={`${styles.dateSelector} ${index === indexx ? styles.dateSelectorActive : styles.dateSelectorInactive
}`}
style={{position: 'relative' }}
style={{ position: 'relative' }}
onClick={() =>
type == 'yesterday' && selectedIndex == -1 || type != 'yesterday' && selectedIndex !== index ? setSelectedIndex(index) : setSelectedIndex(-1)
}
// style={{ backgroundColor: index === indexx ? colors[index % colors.length] : 'transparent' }}
>
<div style={{position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: index == indexx ? `2px solid ${colors[index % colors.length]}` : 'none'}}></div>
<div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: index == indexx ? `2px solid ${colors[index % colors.length]}` : 'none' }}></div>
<div
style={{ color: index === indexx ? 'black' : 'transparent' }}>
{indexx !== chartData.length - 1 ? (
@@ -134,7 +143,7 @@ const DailyCharts = ({ incomeGraph, transactionGraph, materialGraph, colors, typ
{(indexx === 0 || (formatDate(chartData[indexx - 1].date).month !== month && type != 'weekly')) && month}
</>
) : (
'Kemarin'
'Hari ini'
)}
</div>

8
src/components/Header.js
View File

@@ -368,7 +368,7 @@ const Header = ({
{shopName}
</Child>
<Child>
Mode pengembangan &nbsp;
Mode Edit &nbsp;
<Switch
borderRadius={0}
checked={isEditMode}
@@ -377,7 +377,7 @@ const Header = ({
</Child>
<Child onClick={() => setModal("reports")}>Lihat laporan</Child>
<Child onClick={() => setModal("add_material")}>
Kelola bahan baku
Kelola stok
</Child>
<Child hasChildren>
@@ -423,7 +423,7 @@ const Header = ({
<Child>{shopName}</Child>
<Child>
Mode pengembangan&nbsp;
Mode Edit&nbsp;
<Switch
borderRadius={0}
checked={isEditMode}
@@ -431,7 +431,7 @@ const Header = ({
/>
</Child>
<Child onClick={() => setModal("add_material")}>
Kelola bahan baku
Kelola stok
</Child>
<Child hasChildren>

2
src/components/Item.js
View File

@@ -200,7 +200,7 @@ const Item = ({
lineHeight: '1rem',
justifyContent: 'center'
}}>
Promo {(((initialPrice - promoPrice) / initialPrice) * 100).toFixed(0)}%
Promo
</div>
<div style={{ display: 'flex' }}>

72
src/components/ItemConfig.js
View File

@@ -1,6 +1,7 @@
import React, { useState, useEffect, useRef } from "react";
import styles from "./Modal.module.css";
import { getImageUrl } from "../helpers/itemHelper.js";
import { ThreeDots } from "react-loader-spinner";
const ItemConfig = ({
name: initialName,
@@ -24,11 +25,14 @@ const ItemConfig = ({
const fileInputRef = useRef(null);
const textareaRef = useRef(null);
const [isSaving, setIsSaving] = useState(false);
useEffect(() => {
// Prevent scrolling when modal is open
document.body.style.overflow = "hidden";
if(selectedImage){
if (selectedImage) {
const reader = new FileReader();
reader.onloadend = () => {
setPreviewUrl(reader.result);
@@ -79,18 +83,27 @@ const ItemConfig = ({
return () => textarea.removeEventListener("input", handleResize);
}
}, [textareaRef.current]);
const handleCreate = async () => {
setIsSaving(true);
try {
await handleCreateItem(itemName, itemPrice, selectedImage, previewUrl, itemDescription, itemPromoPrice);
document.body.style.overflow = "auto";
} finally {
setIsSaving(false);
}
};
const handleCreate = () => {
console.log(itemPromoPrice)
handleCreateItem(itemName, itemPrice, selectedImage, previewUrl, itemDescription, itemPromoPrice);
document.body.style.overflow = "auto";
};
const handleUpdate = () => {
console.log(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice)
handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice);
const handleUpdate = async () => {
setIsSaving(true);
try {
await handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice);
document.body.style.overflow = "auto";
} finally {
setIsSaving(false);
}
};
return (
<div onClick={handleOverlayClick} style={{ position: 'fixed', width: '100vw', height: '100vh', left: 0, bottom: 0, display: 'flex', flexDirection: 'column-reverse', zIndex: 301, backgroundColor: '#00000061' }}>
<div onClick={handleContentClick} style={{ display: 'flex', flexDirection: 'column', padding: '15px', backgroundColor: 'white', borderRadius: '20px 20px 0 0', overflowY: 'auto' }}>
@@ -131,7 +144,7 @@ const ItemConfig = ({
transition: 'all 0.3s ease',
boxSizing: 'border-box', // Make sure the padding doesn't cause overflow
}}
onChange={(e)=>setItemName(e.target.value)}
onChange={(e) => setItemName(e.target.value)}
onFocus={(e) => e.target.style.borderColor = '#60d37e'}
onBlur={(e) => e.target.style.borderColor = '#ccc'}
/>
@@ -153,7 +166,7 @@ const ItemConfig = ({
transition: 'all 0.3s ease',
boxSizing: 'border-box',
}}
onChange={(e)=>setItemPrice(e.target.value)}
onChange={(e) => setItemPrice(e.target.value)}
onFocus={(e) => e.target.style.borderColor = '#60d37e'}
onBlur={(e) => e.target.style.borderColor = '#ccc'}
/>
@@ -174,7 +187,7 @@ const ItemConfig = ({
transition: 'all 0.3s ease',
boxSizing: 'border-box',
}}
onChange={(e)=>setItemPromoPrice(e.target.value)}
onChange={(e) => setItemPromoPrice(e.target.value)}
onFocus={(e) => e.target.style.borderColor = '#60d37e'}
onBlur={(e) => e.target.style.borderColor = '#ccc'}
/>
@@ -200,17 +213,40 @@ const ItemConfig = ({
}}
placeholder="Tambah deskripsi..."
value={itemDescription}
onChange={(e)=>setItemDescription(e.target.value)}
onChange={(e) => setItemDescription(e.target.value)}
onFocus={(e) => e.target.style.borderColor = '#60d37e'}
onBlur={(e) => e.target.style.borderColor = '#ccc'}
/>
</div>
<div
onClick={() => {
if (!isSaving) {
isBeingEdit ? handleUpdate() : handleCreate();
}
}}
style={{
width: '100%',
height: '40px',
alignContent: 'center',
textAlign: 'center',
borderRadius: '10px',
border: '1px solid #60d37e',
color: isSaving ? '#aaa' : '#60d37e',
backgroundColor: 'white',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: isSaving ? 'not-allowed' : 'pointer'
}}
>
{isSaving ? (
<div style={{ width: '100%', height: '35px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div onClick={() => {isBeingEdit ? handleUpdate() : handleCreate()} } style={{ width: '100%', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
{isBeingEdit? 'Simpan' : 'Buat Item'}
</div>
<ThreeDots height={20} width={20} />
) : (
isBeingEdit ? 'Simpan' : 'Buat Item'
)}
</div>
</div>
</div>
);

10
src/components/ItemLister.js
View File

@@ -713,15 +713,6 @@ const ItemLister = ({
}
imageUrl={getImageUrl("uploads/assets/addnew.png")}
/>
{/* {typeImage != null && !previewUrl.includes(typeImage) && (
<ItemType
rectangular={true}
onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage)
}
imageUrl={getImageUrl(typeImage)}
/>
)} */}
<ItemType
rectangular={true}
@@ -857,7 +848,6 @@ const ItemLister = ({
);
})}
</div>
<button onClick={() => setIsFirstStep(false)} style={{ width: '100%', height: '40px', borderRadius: '20px' }}>selanjutnya</button>
</>
)}
{(isEdit && !isFirstStep || !isEdit) &&

52
src/components/ItemLister.module.css
View File

@@ -24,60 +24,8 @@
/* padding: 10px; */
/* max-height: calc(3 * (25vw - 20px) + 20px); */
overflow-y: auto;
height: calc(49vw - 20px);
}
@media (min-height: 0px) {
.grid-container {
height: 27vh;
}
}
@media (min-height: 630px) {
.grid-container {
height: 27vh;
}
}
@media (min-height: 636px) {
.grid-container {
height: 29vh;
}
}
@media (min-height: 650px) {
.grid-container {
height: 34vh;
}
}
@media (min-height: 705px) {
.grid-container {
height: 37vh;
}
}
@media (min-height: 735px) {
.grid-container {
height: 38vh;
}
}
@media (min-height: 759px) {
.grid-container {
height: 40vh;
}
}
@media (min-height: 819px) {
.grid-container {
height: 44vh;
}
}
@media (min-height: 830px) {
.grid-container {
height: 47vh;
}
}
@media (min-height: 892px) {
.grid-container {
height: 49vh;
}
}
.title-container {
display: flex;

1
src/components/Modal.module.css
View File

@@ -36,3 +36,4 @@
.closeButton:hover {
color: #f44336; /* Change color on hover for better UX */
}

31
src/pages/CafePage.js
View File

@@ -19,6 +19,8 @@ import { MusicPlayer } from "../components/MusicPlayer";
import ItemLister from "../components/ItemLister";
import Header from "../components/Header";
import Switch from "react-switch";
import { ThreeDots } from "react-loader-spinner";
import { getLocalStorage, updateLocalStorage, removeLocalStorage } from "../helpers/localStorageHelpers";
@@ -152,7 +154,7 @@ function CafePage({
socket.on("joined-room", (response) => {
const { isSpotifyNeedLogin, isExceededDeadline } = response;
setNeedSpotifyLogin(isSpotifyNeedLogin);
if (isExceededDeadline) setModal("message",{captMessage:'Kafe sedang tidak tersedia'});
if (isExceededDeadline) setModal("message", { captMessage: 'Kafe sedang tidak tersedia' });
setIsExceededDeadline(isExceededDeadline);
});
}
@@ -254,8 +256,31 @@ function CafePage({
isSpotifyNeedLogin={isSpotifyNeedLogin}
queue={queue}
setModal={setModal}
/>{
user.username !== undefined &&
(user.cafeId === shopId || user.user_id === shopOwnerId) &&
(user.roleId === 1 || user.roleId === 2) && (
<div style={{
backgroundColor: '#5c7c5c',
padding: '7px 28px',
margin: '0 10px',
borderRadius: '15px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
textShadow: '2px 2px 4px rgba(0, 0, 0, 0.7)',
fontSize: '16px'
}}>
Mode Edit&nbsp;
<Switch
borderRadius={0}
checked={isEditMode}
onChange={() => setIsEditMode(!isEditMode)}
/>
<div></div>
</div>
)
}
<ItemTypeLister
user={user}
shopOwnerId={shopOwnerId}
@@ -380,7 +405,7 @@ function CafePage({
}
</div>
</div>
<Watermark/>
<Watermark />
</div>
{/* )} */}
</>

2
src/pages/CreateClerk.js
View File

@@ -28,7 +28,7 @@ const CreateClerk = ({ shopId }) => {
try {
const create = await createClerks(shopId || cafeIdParam, username, password);
if (create) setMessage('Clerk created successfully');
if (create) {setMessage('Clerk created successfully');}
else setMessage('Failed to create clerk');
} catch (error) {
setMessage('Error creating clerk');

2
src/pages/Dashboard.js
View File

@@ -100,7 +100,7 @@ const LinktreePage = ({ user, setModal }) => {
const modal = "product";
const productId = 1;
const authorizedUri = "http://localhost:3000?token=";
const authorizedUri = "https://kedaimaster.com?token=";
const unauthorizedUri = `${baseUrl}?modal=${modal}&product_id=${productId}`;
const url =

2
src/pages/MaterialList.js
View File

@@ -231,7 +231,7 @@ const SetPaymentQr = ({ cafeId }) => {
<></>
) : (
<>
<h3 className={styles.title}>Bahan baku</h3>
<h3 className={styles.title}>Stok</h3>
<Carousel items={materials} onSelect={(e) => setSelectedMaterialIndex(e)} selectedIndex={selectedMaterialIndex} />
{selectedMaterialIndex !== -1 ? (
<>

12
src/pages/Reports.js
View File

@@ -323,8 +323,6 @@ const App = ({ forCafe = true, cafeId = -1,
} else if (otherCafes.length === 1) {
updatedFullTexts = [
[otherCafes[0].cafeIdentifyName || otherCafes[0].username, otherCafes[0].cafeId || otherCafes[0].user_id],
...(user.roleId == 1 ? [[-1]] : [])
];
setSelectedCafeId(otherCafes[0].cafeId); // Get the cafeId (second part of the pair)
@@ -507,7 +505,7 @@ const App = ({ forCafe = true, cafeId = -1,
marginTop: '30px'
}}>
<MultiSwitch
texts={["Kemarin", "Minggu ini", "Bulan ini", "Tahun ini"]}
texts={["Hari ini", "Minggu ini", "Bulan ini", "Tahun ini"]}
selectedSwitch={["yesterday", "weekly", "monthly", "yearly"].indexOf(
filter
)}
@@ -611,9 +609,11 @@ const App = ({ forCafe = true, cafeId = -1,
>
<div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
<h6 style={{ margin: 0, textAlign: "left", fontSize: '10px', fontWeight: 500 }}>
{(filter == 'yesterday' || filter == 'weekly') ?
{(filter == 'weekly') ?
`Data dihitung dengan membandingkan
${comparisonText} hari terakhir dengan ${comparisonText} hari sebelumnya, dengan penghitungan dimulai dari data kemarin.`
7 hari terakhir dengan 7 hari sebelumnya, dengan penghitungan dimulai dari data kemarin.`
:
(filter == 'yesterday') ? `Data dihitung dengan membandingkan antara hari ini dan kemarin.`
:
(filter == 'monthly') ? `Data dihitung dengan membandingkan antara awal hingga akhir bulan ini dan bulan lalu, dengan penghitungan berakhir pada data kemarin.` : `Data dihitung dengan membandingkan antara awal hingga akhir tahun ini dan tahun lalu, dengan penghitungan berakhir pada data kemarin.`}
</h6>
@@ -628,7 +628,7 @@ const App = ({ forCafe = true, cafeId = -1,
}
style={{ color: 'black', position: 'relative' }}
>
<div>Item laku</div>
<div>Penjualan</div>
</div>
<div
className={`${styles.filterSelector} ${circularFilter == 'material' ? '' : styles.filterSelectorInactive}