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

ok

Browse Source
This commit is contained in:
zadit
2025-01-26 23:45:42 +07:00
parent bbab3c6be9
commit f1591b1a2a
10 changed files with 532 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
.chartItemContainer{ .chartItemContainer{
position: relative; position: relative;
font-size: 14px;
} }
.chartItemWrapper { .chartItemWrapper {
position: absolute; position: absolute;

12
src/components/Coupon.css
View File

@@ -62,9 +62,9 @@
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
top: -38px; top: -38px;
width: 200px; width: 170px;
height: 200px; height: 170px;
right: -35px; right: -30px;
transform: scale(-0.8,0.8); transform: scale(-0.8,0.8);
} }
@@ -76,11 +76,11 @@
.RibbonBannerInverted h1 { .RibbonBannerInverted h1 {
margin: 0; /* Remove default margin */ margin: 0; /* Remove default margin */
font-size: 20px; /* Adjust font size as needed */ font-size: 18px; /* Adjust font size as needed */
transform: rotate(-44.7deg)scale(-1,1); /* Rotate the text */ transform: rotate(-44.7deg)scale(-1,1); /* Rotate the text */
transform-origin: center; /* Rotate around its center */ transform-origin: center; /* Rotate around its center */
white-space: nowrap; /* Prevent text wrapping */ white-space: nowrap; /* Prevent text wrapping */
position: absolute; position: absolute;
top: 68px; top: 57px;
left: -9px; left: -12px;
} }

868
src/components/ItemLister.js
View File

@@ -493,121 +493,121 @@ const ItemLister = ({
{(items.length > 0 || {(items.length > 0 ||
(user && (user.cafeId == shopId || user.userId == shopOwnerId))) && ( (user && (user.cafeId == shopId || user.userId == shopOwnerId))) && (
<div <div
key={itemTypeId} key={itemTypeId}
className={`${styles["item-lister"]} ${isEdit ? styles["fullscreen"] : "" className={`${styles["item-lister"]} ${isEdit ? styles["fullscreen"] : ""
}`} }`}
style={{ paddingBottom: isEdit ? "28vh" : "" }} style={{ paddingBottom: isEdit ? "28vh" : "" }}
> >
{ (isEdit && isFirstStep || !isEdit) && {(isEdit && isFirstStep || !isEdit) &&
<div className={styles["title-container"]}> <div className={styles["title-container"]}>
{isEdit && <ItemType blank={true} imageUrl={previewUrl} />} {isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
<input <input
ref={typeNameInputRef} ref={typeNameInputRef}
className={`${styles.title} ${isEdit ? styles.border : styles.noborder className={`${styles.title} ${isEdit ? styles.border : styles.noborder
}`} }`}
value={editedTypeName} value={editedTypeName}
placeholder="Nama tipe" placeholder="Nama tipe"
onChange={(e) => setEditedTypeName(e.target.value)} onChange={(e) => setEditedTypeName(e.target.value)}
disabled={!isEdit} disabled={!isEdit}
/> />
{isEditMode && !isEdit && ( {isEditMode && !isEdit && (
<> <>
<div <div
style={{ style={{
width: '32px', width: '32px',
height: '32px', // Add a height to the div height: '32px', // Add a height to the div
display: 'flex', // Use flexbox display: 'flex', // Use flexbox
justifyContent: 'center', // Center horizontally justifyContent: 'center', // Center horizontally
alignItems: 'center', // Center vertically alignItems: 'center', // Center vertically
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={index==0?null:()=>moveItemTypeUp(itemTypeId)} // Move onClick here for the whole div onClick={index == 0 ? null : () => moveItemTypeUp(itemTypeId)} // Move onClick here for the whole div
>
<svg
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
fill="#000000"
style={{ width: '100%', height: '100%' }} // Ensure SVG fits the div
> >
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g> <svg
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g> viewBox="0 0 16 16"
<g id="SVGRepo_iconCarrier"> xmlns="http://www.w3.org/2000/svg"
<path d="m 1 11 c 0 -0.265625 0.105469 -0.519531 0.292969 -0.707031 l 6 -6 c 0.390625 -0.390625 1.023437 -0.390625 1.414062 0 l 6 6 c 0.1875 0.1875 0.292969 0.441406 0.292969 0.707031 s -0.105469 0.519531 -0.292969 0.707031 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 l -5.292969 -5.292969 l -5.292969 5.292969 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 c -0.1875 -0.1875 -0.292969 -0.441406 -0.292969 -0.707031 z m 0 0" fill={index===0?"gray":"#2e3436"}></path> fill="#000000"
</g> style={{ width: '100%', height: '100%' }} // Ensure SVG fits the div
</svg> >
</div> <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<div <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
style={{ <g id="SVGRepo_iconCarrier">
width: '32px', <path d="m 1 11 c 0 -0.265625 0.105469 -0.519531 0.292969 -0.707031 l 6 -6 c 0.390625 -0.390625 1.023437 -0.390625 1.414062 0 l 6 6 c 0.1875 0.1875 0.292969 0.441406 0.292969 0.707031 s -0.105469 0.519531 -0.292969 0.707031 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 l -5.292969 -5.292969 l -5.292969 5.292969 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 c -0.1875 -0.1875 -0.292969 -0.441406 -0.292969 -0.707031 z m 0 0" fill={index === 0 ? "gray" : "#2e3436"}></path>
height: '32px', // Add a height to the div </g>
display: 'flex', // Use flexbox </svg>
justifyContent: 'center', // Center horizontally </div>
alignItems: 'center', // Center vertically <div
cursor: 'pointer' style={{
}} width: '32px',
onClick={index==indexTotal-1?null:()=>moveItemTypeDown(itemTypeId)} // Move onClick here for the whole div height: '32px', // Add a height to the div
> display: 'flex', // Use flexbox
<svg justifyContent: 'center', // Center horizontally
viewBox="0 0 16 16" alignItems: 'center', // Center vertically
xmlns="http://www.w3.org/2000/svg" cursor: 'pointer'
fill="#000000" }}
style={{ width: '100%', height: '100%' }} // Ensure SVG fits the div onClick={index == indexTotal - 1 ? null : () => moveItemTypeDown(itemTypeId)} // Move onClick here for the whole div
> >
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g> <svg
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g> viewBox="0 0 16 16"
<g id="SVGRepo_iconCarrier"> xmlns="http://www.w3.org/2000/svg"
<path d="m 1 5 c 0 -0.265625 0.105469 -0.519531 0.292969 -0.707031 c 0.390625 -0.390625 1.023437 -0.390625 1.414062 0 l 5.292969 5.292969 l 5.292969 -5.292969 c 0.390625 -0.390625 1.023437 -0.390625 1.414062 0 c 0.1875 0.1875 0.292969 0.441406 0.292969 0.707031 s -0.105469 0.519531 -0.292969 0.707031 l -6 6 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 l -6 -6 c -0.1875 -0.1875 -0.292969 -0.441406 -0.292969 -0.707031 z m 0 0" fill={index===indexTotal-1?"gray":"#2e3436"}></path> fill="#000000"
</g> style={{ width: '100%', height: '100%' }} // Ensure SVG fits the div
</svg> >
</div> <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="m 1 5 c 0 -0.265625 0.105469 -0.519531 0.292969 -0.707031 c 0.390625 -0.390625 1.023437 -0.390625 1.414062 0 l 5.292969 5.292969 l 5.292969 -5.292969 c 0.390625 -0.390625 1.023437 -0.390625 1.414062 0 c 0.1875 0.1875 0.292969 0.441406 0.292969 0.707031 s -0.105469 0.519531 -0.292969 0.707031 l -6 6 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 l -6 -6 c -0.1875 -0.1875 -0.292969 -0.441406 -0.292969 -0.707031 z m 0 0" fill={index === indexTotal - 1 ? "gray" : "#2e3436"}></path>
</g>
</svg>
</div>
<div <div
style={{ style={{
width: '32px', width: '32px',
height: '32px', // Add a height to the div height: '32px', // Add a height to the div
display: 'flex', // Use flexbox display: 'flex', // Use flexbox
justifyContent: 'center', // Center horizontally justifyContent: 'center', // Center horizontally
alignItems: 'center', // Center vertically alignItems: 'center', // Center vertically
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={toggleEditTypeItem} // Move onClick here for the whole div onClick={toggleEditTypeItem} // Move onClick here for the whole div
>
<svg
fill="#000000"
viewBox="0 0 32 32"
style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
version="1.1"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsSerif="http://www.serif.com/"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g> <svg
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g> fill="#000000"
<g id="SVGRepo_iconCarrier"> viewBox="0 0 32 32"
<path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path> style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
<path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path> version="1.1"
</g> xmlSpace="preserve"
</svg> xmlns="http://www.w3.org/2000/svg"
</div> xmlnsSerif="http://www.serif.com/"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
<path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
</g>
</svg>
</div>
</> </>
)} )}
</div> </div>
} }
{isEdit && isFirstStep && ( {isEdit && isFirstStep && (
<> <>
<div className={styles["grid-container"]}> <div className={styles["grid-container"]}>
<ItemType <ItemType
rectangular={true} rectangular={true}
blank={true} blank={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/addnew.png")} imageUrl={getImageUrl("uploads/addnew.png")}
/> />
{/* {typeImage != null && !previewUrl.includes(typeImage) && ( {/* {typeImage != null && !previewUrl.includes(typeImage) && (
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
@@ -617,355 +617,355 @@ const ItemLister = ({
/> />
)} */} )} */}
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/beverage4.jpg")} imageUrl={getImageUrl("uploads/beverage4.jpg")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/beverage1.png")} imageUrl={getImageUrl("uploads/beverage1.png")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/beverage2.png")} imageUrl={getImageUrl("uploads/beverage2.png")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/beverage3.png")} imageUrl={getImageUrl("uploads/beverage3.png")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/snack5.jpg")} imageUrl={getImageUrl("uploads/snack5.jpg")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/dessert1.png")} imageUrl={getImageUrl("uploads/dessert1.png")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/dessert2.jpg")} imageUrl={getImageUrl("uploads/dessert2.jpg")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/food4.jpg")} imageUrl={getImageUrl("uploads/food4.jpg")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/food1.png")} imageUrl={getImageUrl("uploads/food1.png")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/food2.jpg")} imageUrl={getImageUrl("uploads/food2.jpg")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/food3.png")} imageUrl={getImageUrl("uploads/food3.png")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/packet1.png")} imageUrl={getImageUrl("uploads/packet1.png")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/packet2.png")} imageUrl={getImageUrl("uploads/packet2.png")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/snack1.png")} imageUrl={getImageUrl("uploads/snack1.png")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/snack2.png")} imageUrl={getImageUrl("uploads/snack2.png")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/snack3.png")} imageUrl={getImageUrl("uploads/snack3.png")}
/> />
<ItemType <ItemType
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl("uploads/snack4.png")} imageUrl={getImageUrl("uploads/snack4.png")}
/> />
{Array.from({ length: 16 }, (_, index) => { {Array.from({ length: 16 }, (_, index) => {
const sampleNumber = index + 1; // To get numbers from 1 to 16 const sampleNumber = index + 1; // To get numbers from 1 to 16
return ( return (
<ItemType <ItemType
key={sampleNumber} key={sampleNumber}
rectangular={true} rectangular={true}
onClick={(previewUrl, selectedImage) => onClick={(previewUrl, selectedImage) =>
handleImageChange(previewUrl, selectedImage) handleImageChange(previewUrl, selectedImage)
} }
imageUrl={getImageUrl(`uploads/samples/sample (${sampleNumber}).png`)} imageUrl={getImageUrl(`uploads/samples/sample (${sampleNumber}).png`)}
/> />
); );
})} })}
</div> </div>
<button onClick={()=>setIsFirstStep(false)}style={{width: '100%', height: '40px', borderRadius: '20px'}}>selanjutnya</button> <button onClick={() => setIsFirstStep(false)} style={{ width: '100%', height: '40px', borderRadius: '20px' }}>selanjutnya</button>
</> </>
)} )}
{ (isEdit && !isFirstStep || !isEdit) && {(isEdit && !isFirstStep || !isEdit) &&
<> <>
{isEdit && <div style={{display: 'flex', justifyContent: 'space-between'}}><div onClick={()=>setIsFirstStep(true)}style={{color: 'black', fontSize: '50px', width: '30px'}}>&larr;</div> {isEdit && <div style={{ display: 'flex', justifyContent: 'flex-start' }}><div style={{marginTop: '49px', marginRight: '10px', marginLeft: '10px'}} onClick={()=>setIsFirstStep(true)}><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path d="M48,256c0,114.87,93.13,208,208,208s208-93.13,208-208S370.87,48,256,48,48,141.13,48,256Zm212.65-91.36a16,16,0,0,1,.09,22.63L208.42,240H342a16,16,0,0,1,0,32H208.42l52.32,52.73A16,16,0,1,1,238,347.27l-79.39-80a16,16,0,0,1,0-22.54l79.39-80A16,16,0,0,1,260.65,164.64Z"/></svg></div>
<h3 style={{color: 'black'}}>Daftar item</h3><button style={{visibility: 'hidden', width: '30px'}}></button></div>} <h2 className={styles["item-list-title"]}>{items && items.length < 1 ? 'Buat item' :'Daftar item'}</h2></div>}
<div className={styles["item-list"]}> <div className={styles["item-list"]}>
{user && ( {user && (
user.userId == shopOwnerId || user.cafeId == shopId) && user.userId == shopOwnerId || user.cafeId == shopId) &&
isEditMode && ( isEditMode && (
<>
{!isAddingNewItem && (
<button
className={styles["add-item-button"]}
onClick={toggleAddNewItem}
style={{
display: "inline-block",
height: "159px",
fontSize: "50px",
}}
>
+
</button>
)}
{isAddingNewItem && (
<> <>
<button {!isAddingNewItem && (
className={styles["add-item-button"]} <button
onClick={toggleAddNewItem} className={styles["add-item-button"]}
style={{ display: "inline-block" }} onClick={toggleAddNewItem}
> style={{
batal display: "inline-block",
</button> height: "159px",
<Item blank={true} handleCreateItem={onCreateItem} /> fontSize: "50px",
}}
>
+
</button>
)}
{isAddingNewItem && (
<>
<button
className={styles["add-item-button"]}
onClick={toggleAddNewItem}
style={{ display: "inline-block" }}
>
batal
</button>
<Item blank={true} handleCreateItem={onCreateItem} />
</>
)}
</> </>
)} )}
</>
)}
{itemsToCreate.map((item) => { {itemsToCreate.map((item) => {
return !forCart || (forCart && item.qty > 0) ? ( return !forCart || (forCart && item.qty > 0) ? (
<> <>
{isEditItem == item.itemId && ( {isEditItem == item.itemId && (
<button <button
className={styles["add-item-button"]} className={styles["add-item-button"]}
onClick={() => editItem(0)} onClick={() => editItem(0)}
style={{ display: "inline-block" }} style={{ display: "inline-block" }}
>
batal
</button>
)}
<div className={styles["itemWrapper"]}>
{isEditMode && isEditItem != item.itemId && (
<div className={styles["editModeLayout"]}>
{isEditMode && (
<Switch
onChange={() => handleChange(item.itemId)}
checked={item.availability}
/>
)}
<h3>
&nbsp;{item.availability ? "tersedia" : "tidak tersedia"} &nbsp;
</h3>
<div
style={{
width: '32px',
height: '32px', // Add a height to the div
display: 'flex', // Use flexbox
justifyContent: 'center', // Center horizontally
alignItems: 'center', // Center vertically
cursor: 'pointer'
}}
onClick={() => editItem(item.itemId)}
> >
<svg batal
fill="white" </button>
viewBox="0 0 32 32" )}
style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }} <div className={styles["itemWrapper"]}>
version="1.1" {isEditMode && isEditItem != item.itemId && (
xmlSpace="preserve" <div className={styles["editModeLayout"]}>
xmlns="http://www.w3.org/2000/svg" {isEditMode && (
xmlnsSerif="http://www.serif.com/" <Switch
xmlnsXlink="http://www.w3.org/1999/xlink" onChange={() => handleChange(item.itemId)}
> checked={item.availability}
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g> />
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g> )}
<g id="SVGRepo_iconCarrier"> <h3>
<path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path> &nbsp;{item.availability ? "tersedia" : "tidak tersedia"} &nbsp;
<path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path> </h3>
</g> <div
</svg> style={{
</div> width: '32px',
</div> height: '32px', // Add a height to the div
)} display: 'flex', // Use flexbox
justifyContent: 'center', // Center horizontally
<Item alignItems: 'center', // Center vertically
key={item.itemId} cursor: 'pointer'
forCart={forCart} }}
forInvoice={forInvoice} onClick={() => editItem(item.itemId)}
name={item.name} >
price={item.price} <svg
qty={item.qty} fill="white"
imageUrl={item.image} viewBox="0 0 32 32"
imageFile={item.selectedImage} style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
onPlusClick={() => handlePlusClick(item.itemId)} version="1.1"
onNegativeClick={() => handleNegativeClick(item.itemId)} xmlSpace="preserve"
onRemoveClick={() => handleRemoveClick(item.itemId)} xmlns="http://www.w3.org/2000/svg"
isBeingEdit={isEditItem == item.itemId} xmlnsSerif="http://www.serif.com/"
isAvailable={item.availability} xmlnsXlink="http://www.w3.org/1999/xlink"
handleUpdateItem={(name, price, image) => >
updateItemInCreate(item.itemId, name, price, image) <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
} <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
/> <g id="SVGRepo_iconCarrier">
</div> <path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
</> <path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
) : null; </g>
})} </svg>
</div>
{items.map((item) => { </div>
return !forCart || (forCart && item.qty > 0) ? (
<>
{isEditItem == item.itemId && (
<button
className={styles["add-item-button"]}
onClick={() => editItem(0)}
style={{ display: "inline-block" }}
>
batal
</button>
)}
<div className={styles["itemWrapper"]}>
{isEditMode && isEditItem != item.itemId && (
<div className={styles["editModeLayout"]}>
{isEditMode && (
<Switch
onChange={() => handleChange(item.itemId)}
checked={item.availability}
/>
)} )}
<h3>
&nbsp;{item.availability ? "tersedia" : "tidak tersedia"}&nbsp; <Item
</h3> key={item.itemId}
<div forCart={forCart}
style={{ forInvoice={forInvoice}
width: '32px', name={item.name}
height: '32px', // Add a height to the div price={item.price}
display: 'flex', // Use flexbox qty={item.qty}
justifyContent: 'center', // Center horizontally imageUrl={item.image}
alignItems: 'center', // Center vertically imageFile={item.selectedImage}
cursor: 'pointer' onPlusClick={() => handlePlusClick(item.itemId)}
}} onNegativeClick={() => handleNegativeClick(item.itemId)}
onClick={() => editItem(item.itemId)} onRemoveClick={() => handleRemoveClick(item.itemId)}
> isBeingEdit={isEditItem == item.itemId}
<svg isAvailable={item.availability}
fill="white" handleUpdateItem={(name, price, image) =>
viewBox="0 0 32 32" updateItemInCreate(item.itemId, name, price, image)
style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }} }
version="1.1" />
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsSerif="http://www.serif.com/"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
<path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
</g>
</svg>
</div>
</div> </div>
)} </>
) : null;
})}
<Item {items.map((item) => {
key={item.itemId} return !forCart || (forCart && item.qty > 0) ? (
forCart={forCart} <>
forInvoice={forInvoice} {isEditItem == item.itemId && (
name={item.name} <button
price={item.price} className={styles["add-item-button"]}
qty={item.qty} onClick={() => editItem(0)}
imageUrl={ style={{ display: "inline-block" }}
itemTypeId ? getImageUrl(item.image) : item.image >
} batal
onPlusClick={() => handlePlusClick(item.itemId)} </button>
onNegativeClick={() => handleNegativeClick(item.itemId)} )}
onRemoveClick={() => handleRemoveClick(item.itemId)} <div className={styles["itemWrapper"]}>
isBeingEdit={isEditItem == item.itemId} {isEditMode && isEditItem != item.itemId && (
isAvailable={item.availability} <div className={styles["editModeLayout"]}>
handleUpdateItem={(name, price, image) => {isEditMode && (
onUpdateItem(item.itemId, name, price, image) <Switch
} onChange={() => handleChange(item.itemId)}
/> checked={item.availability}
</div> />
</> )}
) : null; <h3>
})} &nbsp;{item.availability ? "tersedia" : "tidak tersedia"}&nbsp;
</h3>
<div
style={{
width: '32px',
height: '32px', // Add a height to the div
display: 'flex', // Use flexbox
justifyContent: 'center', // Center horizontally
alignItems: 'center', // Center vertically
cursor: 'pointer'
}}
onClick={() => editItem(item.itemId)}
>
<svg
fill="white"
viewBox="0 0 32 32"
style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
version="1.1"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsSerif="http://www.serif.com/"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
<path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
</g>
</svg>
</div>
</div>
)}
{user && <Item
user.roleId == 1 && key={item.itemId}
user.userId == shopOwnerId && forCart={forCart}
isEdit && ( forInvoice={forInvoice}
<> name={item.name}
{/* <button price={item.price}
qty={item.qty}
imageUrl={
itemTypeId ? getImageUrl(item.image) : item.image
}
onPlusClick={() => handlePlusClick(item.itemId)}
onNegativeClick={() => handleNegativeClick(item.itemId)}
onRemoveClick={() => handleRemoveClick(item.itemId)}
isBeingEdit={isEditItem == item.itemId}
isAvailable={item.availability}
handleUpdateItem={(name, price, image) =>
onUpdateItem(item.itemId, name, price, image)
}
/>
</div>
</>
) : null;
})}
{user &&
user.roleId == 1 &&
user.userId == shopOwnerId &&
isEdit && (
<>
{/* <button
className={styles["add-item-button"]} className={styles["add-item-button"]}
onClick={handleRemoveType} onClick={handleRemoveType}
> >
Remove Remove
</button> */} </button> */}
</> </>
)} )}
</div> </div>
</> </>
} }
{isEdit && ( {isEdit && (
<div className={styles.PaymentOption}> <div className={styles.PaymentOption}>

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

@@ -212,3 +212,14 @@
margin-bottom: 25px; margin-bottom: 25px;
cursor: pointer; cursor: pointer;
} }
.item-list-title {
margin-top: 46px;
margin-left: 0px;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 6vw;
color: black;
text-align: left;
}

30
src/pages/Dashboard.js
View File

@@ -864,7 +864,35 @@ const LinktreePage = ({ user, setModal }) => {
// <div style={{ height: '2px' }}></div> // <div style={{ height: '2px' }}></div>
// </div> // </div>
// </> // </>
<Reports otherCafes={items?.items}/> <div>
<div className={styles.header}>
<Header
HeaderText={"Dashboard"}
isEdit={() => setIsModalOpen(true)}
isLogout={handleLogout}
user={user}
showProfile={true}
setModal={setModal}
HeaderMargin='0px'
/>
</div>
<Reports forCafe={false} otherCafes={items?.items} />
<div style={{ padding: '25px' }}>
<h2>Kupon</h2>
{coupons && coupons.map((coupon) => {
return <Coupon
code={coupon?.code || null}
value={coupon?.discountValue}
period={coupon?.discountPeriods}
expiration={coupon?.discountEndDate}
/>
})}
<button onClick={() => setModal('claim-coupon')}></button>
</div>
</div>
) : ( ) : (
<div className={styles.centeredLinktreePage}> <div className={styles.centeredLinktreePage}>
<div className={styles.dashboardLine}></div> <div className={styles.dashboardLine}></div>

4
src/pages/Join.module.css
View File

@@ -68,7 +68,7 @@
font-weight: 400; font-weight: 400;
line-height: 1.5rem; line-height: 1.5rem;
font-size: 14px; font-size: 14px;
font-family: 'poppins'; font-family: "Plus Jakarta Sans", sans-serif;
color: black; color: black;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@@ -77,7 +77,7 @@
font-weight: 400; font-weight: 400;
line-height: 1.5rem; line-height: 1.5rem;
font-size: 14px; font-size: 14px;
font-family: 'poppins'; font-family: "Plus Jakarta Sans", sans-serif;
color: transparent; color: transparent;
margin-bottom: -2.5rem; margin-bottom: -2.5rem;
} }

2
src/pages/LinktreePage.module.css
View File

@@ -150,7 +150,7 @@
font-weight: 400; font-weight: 400;
line-height: 1.5rem; line-height: 1.5rem;
font-size: 14px; font-size: 14px;
font-family: 'poppins'; font-family: "Plus Jakarta Sans", sans-serif;
color: black; color: black;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }

2
src/pages/Login.module.css
View File

@@ -77,7 +77,7 @@
font-weight: 400; font-weight: 400;
line-height: 1.5rem; line-height: 1.5rem;
font-size: 14px; font-size: 14px;
font-family: 'poppins'; font-family: "Plus Jakarta Sans", sans-serif;
color: black; color: black;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }

60
src/pages/Reports.js
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { import {
getReports, getReports,
getAnalytics
} from "../helpers/transactionHelpers.js"; } from "../helpers/transactionHelpers.js";
import CircularDiagram from "./CircularDiagram"; import CircularDiagram from "./CircularDiagram";
import styles from "./Transactions.module.css"; import styles from "./Transactions.module.css";
@@ -20,13 +21,14 @@ const RoundedRectangle = ({
loading = false, loading = false,
children, // Assuming this is a React component or JSX children, // Assuming this is a React component or JSX
isChildren, isChildren,
width='calc(100% / 2 - 10px)'
}) => { }) => {
const containerStyle = { const containerStyle = {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "flex-start", alignItems: "flex-start",
justifyContent: "center", justifyContent: "center",
width: !children && !isChildren && "calc(100% / 2 - 10px)", width: !children && !isChildren && width,
height: "auto", height: "auto",
borderRadius: "15px", borderRadius: "15px",
padding: "20px", padding: "20px",
@@ -102,17 +104,22 @@ const RoundedRectangle = ({
); );
}; };
const App = ({ cafeId, const App = ({ forCafe = true, cafeId="",
handleClose, otherCafes }) => { handleClose, otherCafes }) => {
const [selectedCafeId, setSelectedCafeId] = useState(cafeId);
const [analytics, setAnalytics] = useState({}); const [analytics, setAnalytics] = useState({});
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [filter, setFilter] = useState("yesterday"); const [filter, setFilter] = useState("yesterday");
const fetchData = async (filter) => { const fetchData = async (filter) => {
if(selectedCafeId == '-1') return;
try { try {
setLoading(true); setLoading(true);
// Fetch the analytics data with the selected filter // Fetch the analytics data with the selected filter
const analyticsData = await getReports(cafeId, filter); const analyticsData = (selectedCafeId !== '' && selectedCafeId !== 0)
? await getReports(selectedCafeId, filter)
: await getAnalytics(filter);
console.log(analyticsData); console.log(analyticsData);
if (analyticsData) setAnalytics(analyticsData); if (analyticsData) setAnalytics(analyticsData);
} catch (error) { } catch (error) {
@@ -122,9 +129,13 @@ const App = ({ cafeId,
} }
}; };
useEffect(() => {
setSelectedCafeId(cafeId)
}, [cafeId]);
useEffect(() => { useEffect(() => {
fetchData(filter); // Fetch data when filter changes fetchData(filter); // Fetch data when filter changes
}, [filter]); }, [filter, selectedCafeId]);
const filteredItems = analytics.itemSales || []; const filteredItems = analytics.itemSales || [];
@@ -193,6 +204,7 @@ const App = ({ cafeId,
const [texts, setTexts] = useState(['buat kedai']); // initially show only first 3 texts const [texts, setTexts] = useState(['buat kedai']); // initially show only first 3 texts
const [fullTexts, setFullTexts] = useState(null); // initially show only first 3 texts const [fullTexts, setFullTexts] = useState(null); // initially show only first 3 texts
const [fullTextsVisible, setFullTextsVisible] = useState(null); // initially show only first 3 texts const [fullTextsVisible, setFullTextsVisible] = useState(null); // initially show only first 3 texts
useEffect(() => { useEffect(() => {
if (otherCafes != null) { if (otherCafes != null) {
let updatedFullTexts; let updatedFullTexts;
@@ -204,6 +216,8 @@ const App = ({ cafeId,
[otherCafes[0].name, otherCafes[0].cafeId], [otherCafes[0].name, otherCafes[0].cafeId],
["buat kedai", -1] ["buat kedai", -1]
]; ];
setSelectedCafeId(otherCafes[0].cafeId); // Get the cafeId (second part of the pair)
} else { } else {
updatedFullTexts = [ updatedFullTexts = [
["semua", 0], // First entry is "semua" ["semua", 0], // First entry is "semua"
@@ -231,15 +245,15 @@ const App = ({ cafeId,
const [selectedSwitch, setSelectedSwitch] = useState(0); const [selectedSwitch, setSelectedSwitch] = useState(0);
const onItemToggle = (index) => { const onItemToggle = (index) => {
let selectedCafeId = null;
// When user clicks the last visible option (index === 2 in the current view) // When user clicks the last visible option (index === 2 in the current view)
if (index === 2) { if (index === 2) {
console.log(fullTexts); console.log(fullTexts);
if (fullTexts.indexOf(texts[2]) < fullTexts.length - 1) { if (fullTexts.findIndex(item => item[0] === texts[2]) < fullTexts.length - 1) {
setTexts((prevTexts) => { setTexts((prevTexts) => {
const newTexts = [...prevTexts]; const newTexts = [...prevTexts];
const nextText = fullTexts[prevTexts.length]; // Get the next item in the full list console.log(prevTexts.length)
const nextText = fullTexts[fullTexts.findIndex(item => item[0] === texts[2])+1][0]; // Get the next item in the full list
newTexts.shift(); // Remove the first element newTexts.shift(); // Remove the first element
newTexts.push(nextText); // Add the next item to the end newTexts.push(nextText); // Add the next item to the end
setSelectedSwitch(1); // Change the selected index setSelectedSwitch(1); // Change the selected index
@@ -256,7 +270,7 @@ const App = ({ cafeId,
const newTexts = [...prevTexts]; const newTexts = [...prevTexts];
const prevText = fullTexts[fullTexts.findIndex(item => item[0] === newTexts[0]) - 1]; // Get the previous item const prevText = fullTexts[fullTexts.findIndex(item => item[0] === newTexts[0]) - 1]; // Get the previous item
newTexts.pop(); // Remove the last element newTexts.pop(); // Remove the last element
newTexts.unshift(prevText); // Add the previous item to the start newTexts.unshift(prevText[0]); // Add the previous item to the start
setSelectedSwitch(1); // Change the selected index setSelectedSwitch(1); // Change the selected index
return newTexts; return newTexts;
}); });
@@ -270,11 +284,9 @@ const App = ({ cafeId,
const selectedText = texts[index]; // Get the selected name from the texts array const selectedText = texts[index]; // Get the selected name from the texts array
const selectedItem = fullTexts.find(item => item[0] === selectedText); // Find the corresponding full item const selectedItem = fullTexts.find(item => item[0] === selectedText); // Find the corresponding full item
if (selectedItem) { if (selectedItem) {
selectedCafeId = selectedItem[1]; // Get the cafeId (second part of the pair) setSelectedCafeId(selectedItem[1]); // Get the cafeId (second part of the pair)
} }
console.log('Selected cafeId:', selectedCafeId); // Log the selected cafeId
setResetKey((prevKey) => prevKey + 1); // Increase the key to force re-render setResetKey((prevKey) => prevKey + 1); // Increase the key to force re-render
}; };
@@ -285,19 +297,22 @@ const App = ({ cafeId,
return ( return (
<div style={{ <div style={{
position: 'fixed', position: forCafe? 'fixed': 'relative',
height: '100vh', height: '100vh',
width: '100vw', width: '100vw',
top: 0, top: 0,
right: 0, right: 0,
backgroundColor: 'white', backgroundColor: 'white',
overflowY: 'auto' overflowY: forCafe? 'auto' : 'none',
color: 'black',
marginTop: forCafe ? 0 : '-22vh'
}} }}
> >
<div style={{ display: 'flex', alignItems: 'center', padding: '0px 20px 0px 20px', justifyContent: 'space-between' }}> <div style={{ display: 'flex', alignItems: 'center', padding: forCafe? '0px 20px' : '0px 15px', justifyContent: forCafe? 'flex-start':'space-between' }}>
<h2 className={styles["Transactions-title"]} style={{ marginTop: 'revert', marginLeft: '0px' }}>Laporan</h2> {forCafe && <div style={{marginTop: '49px', marginRight: '10px'}} onClick={handleClose}><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path d="M48,256c0,114.87,93.13,208,208,208s208-93.13,208-208S370.87,48,256,48,48,141.13,48,256Zm212.65-91.36a16,16,0,0,1,.09,22.63L208.42,240H342a16,16,0,0,1,0,32H208.42l52.32,52.73A16,16,0,1,1,238,347.27l-79.39-80a16,16,0,0,1,0-22.54l79.39-80A16,16,0,0,1,260.65,164.64Z"/></svg></div>}
<h2 className={styles["Transactions-title"]} style={{ marginTop: forCafe? '57px': 'revert', marginLeft: '0px' }}>Laporan</h2>
<div style={{ marginTop: '10px' }}> <div style={{ marginTop: '10px' }}>
{otherCafes && <MultiSwitch {!forCafe && <MultiSwitch
key={resetKey} // Add key to reset the component and force it to re-render key={resetKey} // Add key to reset the component and force it to re-render
texts={texts} texts={texts}
selectedSwitch={selectedSwitch} selectedSwitch={selectedSwitch}
@@ -382,11 +397,19 @@ const App = ({ cafeId,
loading={loading} loading={loading}
/> />
)} )}
{!forCafe && selectedCafeId != -1 && selectedCafeId != 0 && (
<RoundedRectangle
title={"Kunjungi kedai"}
loading={loading}
width="calc(100% - 10px)"
onClick={() => window.location.href = window.location.origin + '/' + otherCafes.find(item => item.cafeId === selectedCafeId).cafeIdentifyName}
/>
)}
<div <div
style={{ display: "flex", alignItems: "center", margin: "10px" }} style={{ display: "flex", alignItems: "center", margin: "10px" }}
> >
<div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div> <div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
<h6 style={{ margin: 0, textAlign: "left" }}> <h6 style={{ margin: 0, textAlign: "left", fontSize: '10px', fontWeight: 500 }}>
Persentase pertumbuhan dihitung dengan membandingkan {" "} Persentase pertumbuhan dihitung dengan membandingkan {" "}
{comparisonText} hari terakhir dengan {comparisonText} hari sebelumnya. {comparisonText} hari terakhir dengan {comparisonText} hari sebelumnya.
</h6> </h6>
@@ -428,12 +451,11 @@ const App = ({ cafeId,
</div> </div>
</div> </div>
{filter == 'yesterday' || filter == 'weekly' ? {filter == 'yesterday' || filter == 'weekly' ?
<DailyCharts transactionGraph={analytics?.transactionGraph} type={filter} colors={colors} /> <DailyCharts transactionGraph={analytics?.transactionGraph || analytics?.combinedTransactionGraph} type={filter} colors={colors} />
: :
<PeriodCharts type={filter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors} /> <PeriodCharts type={filter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors} />
} }
</div> </div>
<div class="ItemLister_PaymentOption__YZlDL"><div style={{ marginTop: '20px' }} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
</div> </div>
); );
}; };

4
src/pages/WelcomePage.css
View File

@@ -30,7 +30,7 @@
.welcoming-text { .welcoming-text {
font-size: 24px; font-size: 24px;
margin-bottom: 20px; margin-bottom: 20px;
font-family: poppins; font-family: "Plus Jakarta Sans", sans-serif;
} }
.get-started-button { .get-started-button {
@@ -42,7 +42,7 @@
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
transition: background-color 0.3s; transition: background-color 0.3s;
font-family: poppins; font-family: "Plus Jakarta Sans", sans-serif;
} }
.get-started-button:hover { .get-started-button:hover {