ok
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
.chartItemContainer{
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
}
|
||||
.chartItemWrapper {
|
||||
position: absolute;
|
||||
|
||||
@@ -62,9 +62,9 @@
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -38px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
right: -35px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
right: -30px;
|
||||
transform: scale(-0.8,0.8);
|
||||
}
|
||||
|
||||
@@ -76,11 +76,11 @@
|
||||
|
||||
.RibbonBannerInverted h1 {
|
||||
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-origin: center; /* Rotate around its center */
|
||||
white-space: nowrap; /* Prevent text wrapping */
|
||||
position: absolute;
|
||||
top: 68px;
|
||||
left: -9px;
|
||||
top: 57px;
|
||||
left: -12px;
|
||||
}
|
||||
@@ -499,7 +499,7 @@ const ItemLister = ({
|
||||
style={{ paddingBottom: isEdit ? "28vh" : "" }}
|
||||
>
|
||||
|
||||
{ (isEdit && isFirstStep || !isEdit) &&
|
||||
{(isEdit && isFirstStep || !isEdit) &&
|
||||
<div className={styles["title-container"]}>
|
||||
{isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
|
||||
<input
|
||||
@@ -522,7 +522,7 @@ const ItemLister = ({
|
||||
alignItems: 'center', // Center vertically
|
||||
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"
|
||||
@@ -533,7 +533,7 @@ const ItemLister = ({
|
||||
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<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>
|
||||
<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>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
@@ -546,7 +546,7 @@ const ItemLister = ({
|
||||
alignItems: 'center', // Center vertically
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onClick={index==indexTotal-1?null:()=>moveItemTypeDown(itemTypeId)} // Move onClick here for the whole div
|
||||
onClick={index == indexTotal - 1 ? null : () => moveItemTypeDown(itemTypeId)} // Move onClick here for the whole div
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
@@ -557,7 +557,7 @@ const ItemLister = ({
|
||||
<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>
|
||||
<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>
|
||||
@@ -595,7 +595,7 @@ const ItemLister = ({
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
{isEdit && isFirstStep && (
|
||||
<>
|
||||
<div className={styles["grid-container"]}>
|
||||
@@ -751,13 +751,13 @@ const ItemLister = ({
|
||||
);
|
||||
})}
|
||||
</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'}}>←</div>
|
||||
<h3 style={{color: 'black'}}>Daftar item</h3><button style={{visibility: 'hidden', width: '30px'}}></button></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>
|
||||
<h2 className={styles["item-list-title"]}>{items && items.length < 1 ? 'Buat item' :'Daftar item'}</h2></div>}
|
||||
<div className={styles["item-list"]}>
|
||||
{user && (
|
||||
user.userId == shopOwnerId || user.cafeId == shopId) &&
|
||||
|
||||
@@ -212,3 +212,14 @@
|
||||
margin-bottom: 25px;
|
||||
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;
|
||||
}
|
||||
@@ -864,7 +864,35 @@ const LinktreePage = ({ user, setModal }) => {
|
||||
// <div style={{ height: '2px' }}></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.dashboardLine}></div>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
font-size: 14px;
|
||||
font-family: 'poppins';
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
color: black;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@@ -77,7 +77,7 @@
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
font-size: 14px;
|
||||
font-family: 'poppins';
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
color: transparent;
|
||||
margin-bottom: -2.5rem;
|
||||
}
|
||||
|
||||
@@ -150,7 +150,7 @@
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
font-size: 14px;
|
||||
font-family: 'poppins';
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
color: black;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
font-size: 14px;
|
||||
font-family: 'poppins';
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
color: black;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
getReports,
|
||||
getAnalytics
|
||||
} from "../helpers/transactionHelpers.js";
|
||||
import CircularDiagram from "./CircularDiagram";
|
||||
import styles from "./Transactions.module.css";
|
||||
@@ -20,13 +21,14 @@ const RoundedRectangle = ({
|
||||
loading = false,
|
||||
children, // Assuming this is a React component or JSX
|
||||
isChildren,
|
||||
width='calc(100% / 2 - 10px)'
|
||||
}) => {
|
||||
const containerStyle = {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
width: !children && !isChildren && "calc(100% / 2 - 10px)",
|
||||
width: !children && !isChildren && width,
|
||||
height: "auto",
|
||||
borderRadius: "15px",
|
||||
padding: "20px",
|
||||
@@ -102,17 +104,22 @@ const RoundedRectangle = ({
|
||||
);
|
||||
};
|
||||
|
||||
const App = ({ cafeId,
|
||||
const App = ({ forCafe = true, cafeId="",
|
||||
handleClose, otherCafes }) => {
|
||||
const [selectedCafeId, setSelectedCafeId] = useState(cafeId);
|
||||
const [analytics, setAnalytics] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState("yesterday");
|
||||
|
||||
const fetchData = async (filter) => {
|
||||
if(selectedCafeId == '-1') return;
|
||||
try {
|
||||
setLoading(true);
|
||||
// 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);
|
||||
if (analyticsData) setAnalytics(analyticsData);
|
||||
} catch (error) {
|
||||
@@ -122,9 +129,13 @@ const App = ({ cafeId,
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedCafeId(cafeId)
|
||||
}, [cafeId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData(filter); // Fetch data when filter changes
|
||||
}, [filter]);
|
||||
}, [filter, selectedCafeId]);
|
||||
|
||||
const filteredItems = analytics.itemSales || [];
|
||||
|
||||
@@ -193,6 +204,7 @@ const App = ({ cafeId,
|
||||
const [texts, setTexts] = useState(['buat kedai']); // 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
|
||||
|
||||
useEffect(() => {
|
||||
if (otherCafes != null) {
|
||||
let updatedFullTexts;
|
||||
@@ -204,6 +216,8 @@ const App = ({ cafeId,
|
||||
[otherCafes[0].name, otherCafes[0].cafeId],
|
||||
["buat kedai", -1]
|
||||
];
|
||||
|
||||
setSelectedCafeId(otherCafes[0].cafeId); // Get the cafeId (second part of the pair)
|
||||
} else {
|
||||
updatedFullTexts = [
|
||||
["semua", 0], // First entry is "semua"
|
||||
@@ -231,15 +245,15 @@ const App = ({ cafeId,
|
||||
const [selectedSwitch, setSelectedSwitch] = useState(0);
|
||||
|
||||
const onItemToggle = (index) => {
|
||||
let selectedCafeId = null;
|
||||
|
||||
// When user clicks the last visible option (index === 2 in the current view)
|
||||
if (index === 2) {
|
||||
console.log(fullTexts);
|
||||
if (fullTexts.indexOf(texts[2]) < fullTexts.length - 1) {
|
||||
if (fullTexts.findIndex(item => item[0] === texts[2]) < fullTexts.length - 1) {
|
||||
setTexts((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.push(nextText); // Add the next item to the end
|
||||
setSelectedSwitch(1); // Change the selected index
|
||||
@@ -256,7 +270,7 @@ const App = ({ cafeId,
|
||||
const newTexts = [...prevTexts];
|
||||
const prevText = fullTexts[fullTexts.findIndex(item => item[0] === newTexts[0]) - 1]; // Get the previous item
|
||||
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
|
||||
return newTexts;
|
||||
});
|
||||
@@ -270,11 +284,9 @@ const App = ({ cafeId,
|
||||
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
|
||||
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
|
||||
};
|
||||
|
||||
@@ -285,19 +297,22 @@ const App = ({ cafeId,
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
position: forCafe? 'fixed': 'relative',
|
||||
height: '100vh',
|
||||
width: '100vw',
|
||||
top: 0,
|
||||
right: 0,
|
||||
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' }}>
|
||||
<h2 className={styles["Transactions-title"]} style={{ marginTop: 'revert', marginLeft: '0px' }}>Laporan</h2>
|
||||
<div style={{ display: 'flex', alignItems: 'center', padding: forCafe? '0px 20px' : '0px 15px', justifyContent: forCafe? 'flex-start':'space-between' }}>
|
||||
{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' }}>
|
||||
{otherCafes && <MultiSwitch
|
||||
{!forCafe && <MultiSwitch
|
||||
key={resetKey} // Add key to reset the component and force it to re-render
|
||||
texts={texts}
|
||||
selectedSwitch={selectedSwitch}
|
||||
@@ -382,11 +397,19 @@ const App = ({ cafeId,
|
||||
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
|
||||
style={{ display: "flex", alignItems: "center", margin: "10px" }}
|
||||
>
|
||||
<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 {" "}
|
||||
{comparisonText} hari terakhir dengan {comparisonText} hari sebelumnya.
|
||||
</h6>
|
||||
@@ -428,12 +451,11 @@ const App = ({ cafeId,
|
||||
</div>
|
||||
</div>
|
||||
{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} />
|
||||
}
|
||||
</div>
|
||||
<div class="ItemLister_PaymentOption__YZlDL"><div style={{ marginTop: '20px' }} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
.welcoming-text {
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
font-family: poppins;
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
}
|
||||
|
||||
.get-started-button {
|
||||
@@ -42,7 +42,7 @@
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s;
|
||||
font-family: poppins;
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
}
|
||||
|
||||
.get-started-button:hover {
|
||||
|
||||
Reference in New Issue
Block a user