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

ok

Browse Source
This commit is contained in:
zadit
2025-02-02 18:17:56 +07:00
parent b0813e1519
commit 02e101025e
13 changed files with 216 additions and 738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/pages/Reports.js
View File

@@ -3,6 +3,8 @@ import {
getReports,
getAnalytics
} from "../helpers/transactionHelpers.js";
import { createCafe } from "../helpers/cafeHelpers.js"
import { createCoupon } from "../helpers/couponHelpers.js"
import CircularDiagram from "./CircularDiagram";
import styles from "./Transactions.module.css";
import "./Switch.css";
@@ -11,6 +13,8 @@ import MultiSwitch from "react-multi-switch-toggle";
import DailyCharts from '../components/DailyCharts.js';
import PeriodCharts from '../components/PeriodCharts.js';
import Coupon from "../components/Coupon.js";
const RoundedRectangle = ({
onClick,
title,
@@ -105,12 +109,14 @@ const RoundedRectangle = ({
};
const App = ({ forCafe = true, cafeId = -1,
handleClose, otherCafes }) => {
handleClose, otherCafes, coupons, setModal, user }) => {
const [selectedCafeId, setSelectedCafeId] = useState(cafeId);
const [analytics, setAnalytics] = useState({});
const [loading, setLoading] = useState(true);
const [filter, setFilter] = useState("yesterday");
const [itemName, setItemName] = useState('');
const fetchData = async (filter) => {
if (selectedCafeId == '-1') return;
try {
@@ -246,29 +252,33 @@ const App = ({ forCafe = true, cafeId = -1,
filterTexts[["yesterday", "weekly", "monthly", "yearly"].indexOf(filter)];
const [resetKey, setResetKey] = useState(0); // A key to force re-render
const [texts, setTexts] = useState(['buat kedai']); // initially show only first 3 texts
const [texts, setTexts] = useState(['Buat bisnis']); // 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) {
console.log(otherCafes)
let updatedFullTexts;
if (otherCafes.length === 0) {
updatedFullTexts = [["buat kedai", 0]];
updatedFullTexts = [["Buat bisnis", 0]];
setSelectedCafeId(0);
} else if (otherCafes.length === 1) {
updatedFullTexts = [
[otherCafes[0].name, otherCafes[0].cafeId],
["buat kedai", -1]
[otherCafes[0].name || otherCafes[0].username, otherCafes[0].cafeId || otherCafes[0].userId],
["Buat bisnis", -1]
];
setSelectedCafeId(otherCafes[0].cafeId); // Get the cafeId (second part of the pair)
} else {
updatedFullTexts = [
["semua", 0], // First entry is "semua"
...otherCafes.map(cafe => [cafe.name, cafe.cafeId]), // Map over cafes to get name and cafeId pairs
["tambah kedai +", -1] // Add the "+" entry
...otherCafes.map(item => [item.name || item.username, item.cafeId || item.userId]), // Map over cafes to get name and cafeId pairs
["tambah bisnis +", -1] // Add the "+" entry
];
setSelectedCafeId(0);
}
setFullTexts(updatedFullTexts); // Set fullTexts with the original structure
@@ -357,24 +367,7 @@ const App = ({ forCafe = true, cafeId = -1,
{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>}
<div style={{ marginTop: '10px' }}>
{!forCafe &&
// <MultiSwitch
// key={resetKey} // Add key to reset the component and force it to re-render
// texts={texts}
// selectedSwitch={selectedSwitch}
// bgColor={'#f4efe6'}
// borderColor={'transparent'}
// borderWidth={0.1}
// onToggleCallback={onItemToggle}
// fontColor={"#af9463"}
// selectedFontColor={"black"}
// selectedSwitchColor={"white"}
// eachSwitchWidth={70}
// height={"25px"}
// fontSize={"12px"}
// />
<div className={styles.dateSelectorWrapper} style={{ fontSize: '13px' }}>
<div className={styles.dateSelectorWrapper} style={{ fontSize: '12px' }}>
{texts.map((item, indexx) => {
return (
<div
@@ -401,7 +394,7 @@ const App = ({ forCafe = true, cafeId = -1,
marginTop: '30px'
}}>
<MultiSwitch
texts={["kemarin", "minggu ini", "bulan ini", "tahun ini"]}
texts={["Kemarin", "Minggu ini", "Bulan ini", "Tahun ini"]}
selectedSwitch={["yesterday", "weekly", "monthly", "yearly"].indexOf(
filter
)}
@@ -466,7 +459,7 @@ const App = ({ forCafe = true, cafeId = -1,
)}
{!forCafe && selectedCafeId != -1 && selectedCafeId != 0 && (
<RoundedRectangle
title={"Kunjungi kedai"}
title={"Kunjungi bisnis"}
loading={loading}
width="calc(100% - 10px)"
onClick={() => window.location.href = window.location.origin + '/' + otherCafes.find(item => item.cafeId === selectedCafeId).cafeIdentifyName}
@@ -477,8 +470,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 }}>
Persentase pertumbuhan dihitung dengan membandingkan {" "}
{comparisonText} hari terakhir dengan {comparisonText} hari sebelumnya.
{(filter == 'yesterday' || filter == 'weekly') ?
`Data dihitung dengan membandingkan
${comparisonText} hari terakhir dengan ${comparisonText} hari sebelumnya, dengan penghitungan dimulai dari data kemarin.`
:
(filter == 'monthly') ? `Data dihitung dengan membandingkan antara awal hingga akhir bulan ini dan bulan lalu, dengan penghitungan dimulai dari data kemarin` : `Data dihitung dengan membandingkan antara awal hingga akhir tahun ini dan tahun lalu, dengan penghitungan dimulai dari data kemarin`}
</h6>
</div>
</div>
@@ -527,7 +523,6 @@ const App = ({ forCafe = true, cafeId = -1,
{!forCafe && selectedCafeId == -1 &&
<div style={{
textAlign: "center",
marginTop: '30px'
}}>
<div
style={{
@@ -537,18 +532,83 @@ const App = ({ forCafe = true, cafeId = -1,
padding: "20px",
}}
>
<RoundedRectangle
title={"Masukkan nama kedai"}
width="calc(100% - 10px)"
><input style={{width: '70%', fontSize: '25px'}}/></RoundedRectangle>
{user.roleId == 0 ?
<RoundedRectangle
title={"Buat kedai"}
width="calc(100% - 10px)"
title={"Masukkan nama bisnis"}
width="calc(100% - 10px)"
>
<input
value={itemName}
onChange={(e) => setItemName(e.target.value)}
style={{
width: '70%',
fontSize: '25px',
borderRadius: '7px',
border: '1px solid black'
}}
/>
</RoundedRectangle>
:
<RoundedRectangle
title={"Masukkan nama bisnis"}
width="calc(100% - 10px)"
>
<input
value={itemName}
onChange={(e) => setItemName(e.target.value)}
style={{
width: '70%',
fontSize: '25px',
borderRadius: '7px',
border: '1px solid black'
}}
/>
</RoundedRectangle>
}
<RoundedRectangle
title={user.roleId === 0 ? "Buat Voucher" : "Buat Bisnis"}
width="calc(100% - 10px)"
onClick={() => (user.roleId === 0 ? createCoupon(itemName) : createCafe(itemName))}
/>
</div>
</div>
}
{user.roleId == 1 &&
<>
<div className={`${styles.couponContainer}`}>
{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>}
<div>
{!forCafe &&
<div className={styles.dateSelectorWrapper} style={{ fontSize: '13px' }}>
<div
className={`${styles.dateSelector} ${styles.dateSelectorActive}`} style={{ position: 'relative', width: 'calc(32vw - 30px)' }}
>
<div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid green` }}></div>
<div
style={{ color: 'black' }}>
Voucher
</div>
</div>
</div>
}
</div>
</div>
<div style={{ padding: '25px', paddingTop: '0', paddingBottom: '0' }}>
{coupons && coupons.map((coupon) => {
return <Coupon
code={coupon?.code || null}
value={coupon?.discountValue}
period={coupon?.discountPeriods}
expiration={coupon?.discountEndDate}
/>
})}
<button className={`${styles.addCoupon}`} onClick={() => setModal('claim-coupon')}>Tambahkan Voucher</button>
</div>
</>
}
</div>
);
};