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-01-25 00:17:06 +07:00
parent 469d786d49
commit a1b7d0b844
13 changed files with 542 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/pages/Dashboard.js
View File

@@ -6,11 +6,13 @@ import { getOwnedCafes, createCafe, updateCafe } from "../helpers/cafeHelpers";
import { getMyTransactions } from "../helpers/transactionHelpers";
import { unsubscribeUser } from "../helpers/subscribeHelpers.js";
import { getLocalStorage, removeLocalStorage } from "../helpers/localStorageHelpers";
import { getUserCoupons } from "../helpers/couponHelpers";
import { ThreeDots } from "react-loader-spinner";
import Header from '../components/Header';
import CircularDiagram from "./CircularDiagram";
import API_BASE_URL from '../config';
import DailyCharts from '../components/DailyCharts';
import Coupon from '../components/Coupon';
const LinktreePage = ({ user, setModal }) => {
const navigate = useNavigate();
@@ -29,6 +31,7 @@ const LinktreePage = ({ user, setModal }) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedItemId, setSelectedItemId] = useState(0);
const [selectedSubItemId, setSelectedSubItemId] = useState(0);
const [coupons, setCoupons] = useState(null);
useEffect(() => {
@@ -55,11 +58,22 @@ const LinktreePage = ({ user, setModal }) => {
// Remove cafeId from the query parameter
searchParams.delete('cafeId');
}
// Update the URL with the modified query params
window.history.replaceState(null, '', `${url.pathname}?${searchParams.toString()}`);
}, [selectedItemId]);
// Detect query params on component mount
useEffect(() => {
handleGetkCoupons();
}, []);
// Handle manual coupon code check
const handleGetkCoupons = async () => {
const result = await getUserCoupons();
setCoupons(result.coupons);
console.log(result)
};
// Handle user transactions
const handleMyTransactions = async () => {
@@ -169,15 +183,15 @@ const LinktreePage = ({ user, setModal }) => {
// Strong contrasting colors for visibility on white background
"#333333", // Dark Gray (great contrast for legibility)
"#555555", // Medium Gray (slightly lighter, still legible)
// Subtle accent colors (not too bright, but distinct)
"#4B9F8D", // Muted Teal (offers a soft contrast)
"#7F7F7F", // Slate Gray (elegant and balanced)
// Softer neutral colors (for less emphasis)
"#B0B0B0", // Light Gray (gentle tone for subtle slices)
"#D3D3D3", // Silver Gray (light, but still visible on white background)
// A touch of color for balance (but still muted)
"#9C6E5C", // Muted Brown (earthy, grounded tone)
"#A1A1A1", // Silver (neutral highlight)
@@ -202,19 +216,19 @@ const LinktreePage = ({ user, setModal }) => {
if (user.roleId == 1 || user.roleId == 0 && selectedItemId == 0)
segments = (selectedItemId != 0 && selectedItemId != -1 && selectedSubItemId == 0 ? allSelectedSubItems : selectedItemId != 0 && selectedItemId != -1 ? filteredItems.report?.items || [] : items?.items || []).map((item, index) => ({
percentage: item.percentage || (items?.totalIncome / item?.totalIncome || items?.totalIncome / item?.report?.totalIncome) * 100,
value: item.username || item.itemName || item.name,
percentage: item.percentage || (items?.totalIncome / item?.totalIncome || items?.totalIncome / item?.report?.totalIncome) * 100,
value: item.username || item.itemName || item.name,
color: (colors && colors[index]) || "#cccccc", // Safe check for colors array
})) || []; // Ensure segments is an empty array if no items are availabled
// Function to combine items of all cafes for the selected tenant
console.log(selectedItems)
console.log(segments)
// Check if items and items.items are defined before proceeding
const allMaterials = (items?.items || []).flatMap(item => item.report?.materialsPurchased || []);
// Check if items and items.items are defined before proceeding
const allMaterials = (items?.items || []).flatMap(item => item.report?.materialsPurchased || []);
// Sort the merged array by date if it's not empty
const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(b.date));
// Sort the merged array by date if it's not empty
const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(b.date));
@@ -681,7 +695,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
<div className={styles.dashboardBody}>
<button className={styles.goCafeButton} style={{ visibility: (selectedItems?.cafeId || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeId) == null ? 'hidden' : 'visible' }} onClick={() => window.location.href = window.location.origin + '/' + (selectedItems?.cafeIdentifyName || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeIdentifyName)}>Kunjungi kedai</button>
<h3 style={{color: 'black'}}>terlaku</h3>
<h3 style={{ color: 'black' }}>terlaku</h3>
<div
style={{
display: "flex",
@@ -711,7 +725,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
>
★
</div>
<h5 style={{ margin: 0, textAlign: "left" , color: 'black'}}>{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}% &nbsp; {item.value} </h5>
<h5 style={{ margin: 0, textAlign: "left", color: 'black' }}>{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}% &nbsp; {item.value} </h5>
</div>
))}
{segments.length < 1 &&
@@ -748,6 +762,15 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
</div>
<h3>penambahan stok</h3>
<DailyCharts Data={selectedItems?.report?.materialsPurchased || sortedMaterials} />
{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 style={{ height: '24vh' }}></div>
</div>
@@ -844,38 +867,38 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
<div className={styles.dashboardLine}></div>
<div className={styles.dashboardContainer}>
{API_BASE_URL == 'https://test.api.kedaimaster.com' ?
<div className={styles.mainHeading}>
KEDAIMASTER CREDITS
<div className={styles.swipeContainer}>
<div className={styles.swipeCreditsContent}>
{['AI - MUHAMMAD AINUL FIKRI',
'BACKEND - ZADIT TAQWA W.',
'FRONTEND - M. PASHA A. P.' ,
'FRONTEND - NAUFAL DANIYAL P.',
'FRONTEND - ZADIT TAQWA W.',
'UI/UX - KEVIN DWI WIJAYA',
'UI/UX - LUNA CHELISA A.',
'UI/UX - MAULINA AYU E.',
'UI/UX - NUR ARINDA P.',
'UI/UX - NAURA IZZATI B.',].map((item, index) => (
<div key={index} className={styles.swipeItem}>{item}</div>
))}
<div className={styles.mainHeading}>
KEDAIMASTER CREDITS
<div className={styles.swipeContainer}>
<div className={styles.swipeCreditsContent}>
{['AI - MUHAMMAD AINUL FIKRI',
'BACKEND - ZADIT TAQWA W.',
'FRONTEND - M. PASHA A. P.',
'FRONTEND - NAUFAL DANIYAL P.',
'FRONTEND - ZADIT TAQWA W.',
'UI/UX - KEVIN DWI WIJAYA',
'UI/UX - LUNA CHELISA A.',
'UI/UX - MAULINA AYU E.',
'UI/UX - NUR ARINDA P.',
'UI/UX - NAURA IZZATI B.',].map((item, index) => (
<div key={index} className={styles.swipeItem}>{item}</div>
))}
</div>
</div>
gratis 3 bulan pertama
</div>
gratis 3 bulan pertama
</div>
:
<div className={styles.mainHeading}>
COBA KEDAIMASTER
<div className={styles.swipeContainer}>
<div className={styles.swipeContent}>
{['pemesanan langsung dari meja', 'pengelolaan pesanan dan keuangan', 'tentukan suasana musik', 'pengelolaan stok dan manajemen', 'jangan pernah ragukan pelanggan'].map((item, index) => (
<div key={index} className={styles.swipeItem}>{item}</div>
))}
:
<div className={styles.mainHeading}>
COBA KEDAIMASTER
<div className={styles.swipeContainer}>
<div className={styles.swipeContent}>
{['pemesanan langsung dari meja', 'pengelolaan pesanan dan keuangan', 'tentukan suasana musik', 'pengelolaan stok dan manajemen', 'jangan pernah ragukan pelanggan'].map((item, index) => (
<div key={index} className={styles.swipeItem}>{item}</div>
))}
</div>
</div>
Gratis 3 bulan pertama
</div>
Gratis 3 bulan pertama
</div>
}
<div className={styles.subHeading}>
Solusi berbasis web untuk memudahkan pengelolaan kedai, dengan fitur yang mempermudah pemilik, kasir, dan tamu berinteraksi.
@@ -883,8 +906,8 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
{getLocalStorage('auth') == null && (
<div className={styles.LoginForm}>
<div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword? styles.reverseForm : ''}`}>
<label htmlFor="username" className={styles.usernameLabel}>---- masuk -------------------------------</label>
<div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
<label htmlFor="username" className={styles.usernameLabel}>---- Masuk -------------------------------</label>
<input
id="username"
placeholder="username"
@@ -893,14 +916,14 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<button onClick={() => {setInputtingPassword(true); setWasInputtingPassword(true)}} className={styles.claimButton}>
<button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true) }} className={styles.claimButton}>
<span>➜</span>
</button>
</div>
<div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword? styles.reverseForm : ''}`}>
<div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : styles.idleForm}`}>
<span>
<label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
<label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- Kembali </label>
<label htmlFor="password" className={styles.usernameLabel}> &nbsp; ----- &nbsp; </label>
<label onClick={() => setModal('reset-password', { username: username })} className={styles.usernameLabel}>
lupa password? -
@@ -947,7 +970,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
onError={(e) => e.target.src = '/fallback-image.png'}
/>
</div>
<a style={{left: 0, right: 0, bottom: 0, textAlign: 'center', color: '#254F1A', fontSize:'13px', position: 'fixed'}}>©2025 KEDIRITECHNOPARK.COM</a>
<a style={{ left: 0, right: 0, bottom: 0, textAlign: 'center', color: '#254F1A', fontSize: '13px', position: 'fixed' }}>©2025 KEDIRITECHNOPARK.COM</a>
</div>
</div>
</div>