958 lines
58 KiB
JavaScript
958 lines
58 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
import styles from './LinktreePage.module.css';
|
|
import { loginUser, getAnalytics, createCafeOwner } from "../helpers/userHelpers";
|
|
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 { ThreeDots } from "react-loader-spinner";
|
|
import Header from '../components/Header';
|
|
import CircularDiagram from "./CircularDiagram";
|
|
import API_BASE_URL from '../config';
|
|
import BarChart from '../components/BarChart';
|
|
|
|
const LinktreePage = ({ user, setModal }) => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [lastModal, setLastModal] = useState(false);
|
|
|
|
const [inputtingPassword, setInputtingPassword] = useState(false);
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState(false);
|
|
const [items, setItems] = useState([]);
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
const [newItem, setNewItem] = useState({ name: "", type: "" });
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [selectedItemId, setSelectedItemId] = useState(0);
|
|
const [selectedSubItemId, setSelectedSubItemId] = useState(0);
|
|
|
|
|
|
useEffect(() => {
|
|
const urlParams = new URLSearchParams(location.search);
|
|
const modalParam = urlParams.get('modal');
|
|
if (lastModal && !modalParam) {
|
|
if (selectedItemId == -1) setSelectedItemId(0);
|
|
else if (selectedSubItemId == -1) setSelectedSubItemId(0);
|
|
}
|
|
if (modalParam) {
|
|
setLastModal(modalParam);
|
|
}
|
|
|
|
}, [location]);
|
|
|
|
useEffect(() => {
|
|
const url = new URL(window.location.href); // Get the current URL
|
|
const searchParams = new URLSearchParams(url.search); // Get the query parameters
|
|
console.log(selectedItemId)
|
|
if (selectedItemId != 0 && selectedItemId != -1) {
|
|
// Add cafeId to the query parameter
|
|
searchParams.set('cafeId', selectedItemId);
|
|
} else {
|
|
// 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]);
|
|
|
|
|
|
// Handle user transactions
|
|
const handleMyTransactions = async () => {
|
|
try {
|
|
setError(false);
|
|
setLoading(true);
|
|
const response = await getMyTransactions();
|
|
if (response) {
|
|
setItems(response);
|
|
} else {
|
|
setError(true);
|
|
}
|
|
} catch (error) {
|
|
setError(true);
|
|
} finally {
|
|
setLoading(false);
|
|
console.log(items);
|
|
}
|
|
};
|
|
|
|
// Handle login
|
|
const handleLogin = async () => {
|
|
try {
|
|
setError(false);
|
|
setLoading(true);
|
|
const response = await loginUser(username, password);
|
|
if (response.success) {
|
|
localStorage.setItem('auth', response.token);
|
|
window.location.href = response.cafeId ? `/${response.cafeId}` : '/';
|
|
} else {
|
|
setError(true);
|
|
}
|
|
} catch (error) {
|
|
setError(true);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Handle logout
|
|
const handleLogout = () => {
|
|
removeLocalStorage("auth");
|
|
unsubscribeUser();
|
|
navigate(0);
|
|
};
|
|
|
|
// Fetch data when the user changes
|
|
useEffect(() => {
|
|
if (user) {
|
|
setLoading(true);
|
|
switch (user.roleId) {
|
|
case 0:
|
|
getAnalytics().then(setItems).catch(console.error).finally(() => setLoading(false));
|
|
break;
|
|
case 1:
|
|
getAnalytics().then(setItems).catch(console.error).finally(() => setLoading(false));
|
|
break;
|
|
case 3:
|
|
handleMyTransactions();
|
|
break;
|
|
default:
|
|
setLoading(false);
|
|
break;
|
|
}
|
|
}
|
|
|
|
console.log(items);
|
|
}, [user]);
|
|
|
|
// Handle create item (admin or cafe owner)
|
|
const handleCreateItem = async () => {
|
|
try {
|
|
if (user.roleId < 1) {
|
|
const newOwner = await createCafeOwner(newItem.email, newItem.username, newItem.password);
|
|
setItems([...items, { userId: newOwner.userId, name: newOwner.username }]);
|
|
} else {
|
|
const newCafe = await createCafe(newItem.name);
|
|
setItems([...items, { cafeId: newCafe.cafeId, name: newCafe.name }]);
|
|
}
|
|
setIsCreating(false);
|
|
setNewItem({ name: "", type: "" });
|
|
} catch (error) {
|
|
console.error("Error creating item:", error);
|
|
}
|
|
};
|
|
|
|
const formatIncome = (amount) => {
|
|
if (amount >= 1_000_000_000) {
|
|
// Format for billions
|
|
const billions = amount / 1_000_000_000;
|
|
return billions.toFixed(0) + "b"; // No decimal places for billions
|
|
} else if (amount >= 1_000_000) {
|
|
// Format for millions
|
|
const millions = amount / 1_000_000;
|
|
return millions.toFixed(2).replace(/\.00$/, "") + "m"; // Two decimal places, remove trailing '.00'
|
|
} else if (amount >= 1_000) {
|
|
// Format for thousands
|
|
const thousands = amount / 1_000;
|
|
return thousands.toFixed(1).replace(/\.0$/, "") + "k"; // One decimal place, remove trailing '.0'
|
|
} else {
|
|
// Less than a thousand
|
|
if (amount != null) return amount.toString();
|
|
}
|
|
};
|
|
|
|
const colors = [
|
|
// 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)
|
|
];
|
|
console.log(items)
|
|
|
|
const selectedItems = items.items?.find(item => (item.userId || item.cafeId) === selectedItemId);
|
|
|
|
// If the selected tenant is found, extract the cafes
|
|
const selectedSubItems = selectedItems?.subItems || [];
|
|
|
|
// 1. Optionally combine all report items from cafes of the selected tenant
|
|
let allSelectedSubItems = null;
|
|
if (user.roleId == 1)
|
|
allSelectedSubItems = selectedSubItems?.flatMap(cafe => cafe.report?.items || selectedItems.report?.items || []);
|
|
|
|
// 2. Retrieve the specific cafe's report items if needed
|
|
const filteredItems = selectedSubItems?.find(cafe => cafe.cafeId == selectedSubItemId) || { report: { items: [] } };
|
|
|
|
// 3. Decide whether to use combined items or individual cafe items
|
|
let segments = [];
|
|
|
|
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.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(selectedItemId)
|
|
// 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));
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
{user && user.roleId < 2 ? (
|
|
<>
|
|
<div className={styles.nonCenteredLinktreePage}>
|
|
|
|
<div className={styles.dashboard}>
|
|
<div className={styles.header}>
|
|
|
|
<Header
|
|
HeaderText={"selamat sore " + user.username}
|
|
isEdit={() => setIsModalOpen(true)}
|
|
isLogout={handleLogout}
|
|
user={user}
|
|
showProfile={true}
|
|
setModal={setModal}
|
|
HeaderMargin='0px'
|
|
/>
|
|
</div>
|
|
<div className={styles.headerCardWrapper}>
|
|
<div className={styles.headerCard}>
|
|
{user.roleId == 0 ? (
|
|
selectedItemId == 0 || selectedItemId == -1 ? (
|
|
<div className={styles.cardBody}>
|
|
<div className={styles.cardItem}>
|
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
|
|
<rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
|
|
<g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
|
|
fill="#000000" stroke="none">
|
|
<path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
|
|
-4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
|
|
273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
|
|
-7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
|
|
-115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
|
|
-270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
|
|
-230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
|
|
-22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
|
|
56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
|
|
-61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
|
|
m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
|
|
28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
|
|
182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
|
|
45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
|
|
-39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
|
|
30 78 -20z"/>
|
|
<path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
|
|
-288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
|
|
129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
|
|
m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
|
|
-183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
|
|
-133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
|
|
<path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
|
|
l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
|
|
54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
|
|
c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
|
|
-5 80 -22z"/>
|
|
<path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
|
|
190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
|
|
-19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
|
|
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
|
|
</g>
|
|
</svg>
|
|
<p>{items?.totalIncome}</p>
|
|
<p> pemasukan</p>
|
|
</div>
|
|
<div className={styles.cardItem}>
|
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
|
|
<rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
|
|
<g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
|
|
fill="#000000" stroke="none">
|
|
<path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
|
|
-4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
|
|
273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
|
|
-7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
|
|
-115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
|
|
-270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
|
|
-230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
|
|
-22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
|
|
56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
|
|
-61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
|
|
m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
|
|
28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
|
|
182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
|
|
45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
|
|
-39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
|
|
30 78 -20z"/>
|
|
<path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
|
|
-288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
|
|
129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
|
|
m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
|
|
-183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
|
|
-133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
|
|
<path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
|
|
l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
|
|
54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
|
|
c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
|
|
-5 80 -22z"/>
|
|
<path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
|
|
190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
|
|
-19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
|
|
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
|
|
</g>
|
|
</svg>
|
|
<p> keuntungan</p>
|
|
<p>{items?.totalIncome * 0.02}</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className={styles.cardBody}>
|
|
<div className={styles.cardItem} >
|
|
|
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
|
|
<rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
|
|
<g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
|
|
fill="#000000" stroke="none">
|
|
<path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
|
|
-4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
|
|
273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
|
|
-7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
|
|
-115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
|
|
-270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
|
|
-230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
|
|
-22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
|
|
56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
|
|
-61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
|
|
m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
|
|
28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
|
|
182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
|
|
45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
|
|
-39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
|
|
30 78 -20z"/>
|
|
<path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
|
|
-288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
|
|
129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
|
|
m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
|
|
-183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
|
|
-133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
|
|
<path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
|
|
l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
|
|
54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
|
|
c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
|
|
-5 80 -22z"/>
|
|
<path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
|
|
190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
|
|
-19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
|
|
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
|
|
</g>
|
|
</svg>
|
|
<p>{selectedItems?.totalIncome}</p>
|
|
<p>pemasukann</p>
|
|
</div>
|
|
<div className={styles.cardItem}>
|
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
|
|
<rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
|
|
<g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
|
|
fill="#000000" stroke="none">
|
|
<path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
|
|
-4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
|
|
273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
|
|
-7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
|
|
-115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
|
|
-270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
|
|
-230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
|
|
-22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
|
|
56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
|
|
-61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
|
|
m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
|
|
28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
|
|
182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
|
|
45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
|
|
-39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
|
|
30 78 -20z"/>
|
|
<path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
|
|
-288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
|
|
129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
|
|
m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
|
|
-183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
|
|
-133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
|
|
<path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
|
|
l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
|
|
54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
|
|
c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
|
|
-5 80 -22z"/>
|
|
<path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
|
|
190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
|
|
-19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
|
|
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
|
|
</g>
|
|
</svg>
|
|
<p>{selectedItems?.totalIncome * 0.02}</p>
|
|
<p>tagihan</p>
|
|
</div>
|
|
<div className={styles.cardImg}>
|
|
<img
|
|
src={filteredItems?.welcomePageConfig ?
|
|
API_BASE_URL + "/" + (JSON.parse(filteredItems.welcomePageConfig)?.image || '') : 'https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg'
|
|
}
|
|
/>
|
|
<p>{selectedItems?.totalIncome * 0.02}</p>
|
|
<p>{filteredItems.name}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
) : (
|
|
selectedItemId == 0 || selectedItemId == -1 ?
|
|
(
|
|
<div className={styles.cardBody}>
|
|
<div className={styles.cardItem}>
|
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
|
|
<rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
|
|
<g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
|
|
fill="#000000" stroke="none">
|
|
<path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
|
|
-4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
|
|
273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
|
|
-7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
|
|
-115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
|
|
-270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
|
|
-230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
|
|
-22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
|
|
56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
|
|
-61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
|
|
m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
|
|
28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
|
|
182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
|
|
45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
|
|
-39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
|
|
30 78 -20z"/>
|
|
<path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
|
|
-288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
|
|
129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
|
|
m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
|
|
-183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
|
|
-133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
|
|
<path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
|
|
l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
|
|
54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
|
|
c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
|
|
-5 80 -22z"/>
|
|
<path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
|
|
190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
|
|
-19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
|
|
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
|
|
</g>
|
|
</svg>
|
|
<p>{formatIncome(items?.totalIncome)}</p>
|
|
<p> pemasukan</p>
|
|
</div>
|
|
<div className={styles.cardItem}>
|
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
|
|
<rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
|
|
<g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
|
|
fill="#000000" stroke="none">
|
|
<path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
|
|
-4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
|
|
273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
|
|
-7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
|
|
-115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
|
|
-270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
|
|
-230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
|
|
-22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
|
|
56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
|
|
-61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
|
|
m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
|
|
28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
|
|
182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
|
|
45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
|
|
-39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
|
|
30 78 -20z"/>
|
|
<path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
|
|
-288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
|
|
129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
|
|
m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
|
|
-183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
|
|
-133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
|
|
<path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
|
|
l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
|
|
54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
|
|
c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
|
|
-5 80 -22z"/>
|
|
<path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
|
|
190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
|
|
-19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
|
|
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
|
|
</g>
|
|
</svg>
|
|
<p>{formatIncome(items?.totalOutcome)}</p>
|
|
<p> pengeluaran</p>
|
|
</div>
|
|
<div className={styles.cardItem}>
|
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
|
|
<rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
|
|
<g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
|
|
fill="#000000" stroke="none">
|
|
<path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
|
|
-4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
|
|
273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
|
|
-7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
|
|
-115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
|
|
-270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
|
|
-230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
|
|
-22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
|
|
56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
|
|
-61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
|
|
m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
|
|
28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
|
|
182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
|
|
45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
|
|
-39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
|
|
30 78 -20z"/>
|
|
<path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
|
|
-288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
|
|
129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
|
|
m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
|
|
-183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
|
|
-133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
|
|
<path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
|
|
l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
|
|
54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
|
|
c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
|
|
-5 80 -22z"/>
|
|
<path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
|
|
190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
|
|
-19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
|
|
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
|
|
</g>
|
|
</svg>
|
|
<p>{formatIncome(items?.totalIncome * 0.02)}</p>
|
|
<p> tanggungan</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className={styles.cardBody}>
|
|
<div className={styles.cardItem}>
|
|
|
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
|
|
<rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
|
|
<g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
|
|
fill="#000000" stroke="none">
|
|
<path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
|
|
-4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
|
|
273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
|
|
-7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
|
|
-115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
|
|
-270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
|
|
-230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
|
|
-22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
|
|
56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
|
|
-61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
|
|
m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
|
|
28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
|
|
182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
|
|
45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
|
|
-39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
|
|
30 78 -20z"/>
|
|
<path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
|
|
-288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
|
|
129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
|
|
m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
|
|
-183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
|
|
-133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
|
|
<path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
|
|
l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
|
|
54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
|
|
c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
|
|
-5 80 -22z"/>
|
|
<path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
|
|
190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
|
|
-19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
|
|
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
|
|
</g>
|
|
</svg>
|
|
<p>{formatIncome(selectedItems?.report?.totalIncome)}</p>
|
|
<p>pemasukan</p>
|
|
</div>
|
|
<div className={styles.cardItem} >
|
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
|
|
<rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
|
|
<g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
|
|
fill="#000000" stroke="none">
|
|
<path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
|
|
-4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
|
|
273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
|
|
-7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
|
|
-115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
|
|
-270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
|
|
-230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
|
|
-22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
|
|
56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
|
|
-61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
|
|
m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
|
|
28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
|
|
182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
|
|
45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
|
|
-39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
|
|
30 78 -20z"/>
|
|
<path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
|
|
-288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
|
|
129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
|
|
m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
|
|
-183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
|
|
-133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
|
|
<path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
|
|
l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
|
|
54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
|
|
c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
|
|
-5 80 -22z"/>
|
|
<path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
|
|
190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
|
|
-19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
|
|
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
|
|
</g>
|
|
</svg>
|
|
<p>{formatIncome(selectedItems?.report?.currentOutcome)}</p>
|
|
<p>pengeluaran</p>
|
|
</div>
|
|
<div className={styles.cardImg}>
|
|
<img
|
|
src={selectedItems?.welcomePageConfig ?
|
|
API_BASE_URL + "/" + (JSON.parse(selectedItems.welcomePageConfig)?.image || '') : 'https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg'
|
|
}
|
|
/>
|
|
<p> </p>
|
|
<p>{selectedItems?.name}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<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?.cafeId || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeId)}>Kunjungi kedai</button>
|
|
|
|
<h3 style={{color: 'black'}}>terlaku</h3>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
margin: '5px'
|
|
}}
|
|
>
|
|
<div style={{ flex: 1 }}>
|
|
<CircularDiagram segments={segments} />
|
|
</div>
|
|
<div style={{ flex: "1 1 20%" }}>
|
|
{segments && segments.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
marginRight: "5px",
|
|
fontSize: "1.2em",
|
|
color: colors[index],
|
|
}}
|
|
>
|
|
★
|
|
</div>
|
|
<h5 style={{ margin: 0, textAlign: "left" , color: 'black'}}>{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}% {item.value} </h5>
|
|
</div>
|
|
))}
|
|
{segments.length < 1 &&
|
|
<>
|
|
|
|
{Array.from({ length: 5 }).map((_, index) => (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<h5
|
|
style={{
|
|
width: '100%',
|
|
margin: 0,
|
|
textAlign: "left",
|
|
backgroundColor: 'gray',
|
|
color: 'gray',
|
|
borderRadius: '20px',
|
|
marginBottom: '2px',
|
|
}}
|
|
>
|
|
-
|
|
</h5>
|
|
</div>
|
|
))}
|
|
|
|
</>
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
<h3>penambahan stok</h3>
|
|
<BarChart Data={selectedItems?.report?.materialsPurchased || sortedMaterials} />
|
|
<div style={{ height: '24vh' }}></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div className={styles.cafeListWrapper}>
|
|
<div className={styles.cafeListHeader}>
|
|
Semua {user.roleId < 1 ? 'penyewa' : 'kedai anda'}
|
|
</div>
|
|
<div className={styles.cafeList}>
|
|
</div>
|
|
|
|
{user.roleId < 1 &&
|
|
<div className={styles.rectangle}
|
|
style={{ backgroundColor: selectedItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
|
|
onClick={() => {
|
|
setSelectedItemId(selectedItemId === -1 ? 0 : -1);
|
|
setModal('create_tenant');
|
|
}}
|
|
>
|
|
Tambah penyewa
|
|
</div>
|
|
}
|
|
{
|
|
items?.items?.length > 0 ? (
|
|
items.items.map((item) => {
|
|
const isTenantSelected = selectedItemId === (item.userId || item.cafeId);
|
|
const tenantBackgroundColor = isTenantSelected && !selectedSubItemId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)';
|
|
const hasSubItems = item?.subItems?.length > 0;
|
|
|
|
return (
|
|
<div key={item.userId || item.cafeId}>
|
|
<div
|
|
onClick={() => {
|
|
setSelectedItemId(isTenantSelected && !selectedSubItemId ? 0 : (item.userId || item.cafeId));
|
|
setSelectedSubItemId(0); // Reset subitem selection when changing tenant
|
|
}}
|
|
style={{ backgroundColor: tenantBackgroundColor }}
|
|
className={isTenantSelected ? styles.rectangleNLine : styles.rectangle}
|
|
>
|
|
<h3>{item.username || item.name} </h3>
|
|
<h3>
|
|
Rp{formatIncome(item.totalIncome || item.report?.totalIncome) || 0}
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Only show cafes if the tenant is selected */}
|
|
{selectedItemId === (item.userId || item.cafeId) && hasSubItems && item.subItems.map((subItem) => {
|
|
const isCafeSelected = selectedSubItemId == (subItem.cafeId || subItem.userId);
|
|
const cafeBackgroundColor = isCafeSelected ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)';
|
|
|
|
return (
|
|
<div
|
|
key={subItem.cafeId || subItem.userId}
|
|
className={styles.subRectangle}
|
|
onClick={() => {
|
|
setSelectedSubItemId(isCafeSelected ? 0 : (subItem.cafeId || subItem.userId)); // Toggle subitem selection
|
|
setSelectedItemId(item.userId || item.cafeId); // Ensure tenant stays selected
|
|
}}
|
|
style={{ backgroundColor: cafeBackgroundColor }}
|
|
>
|
|
{subItem.name || subItem.username}
|
|
{/* pendapatan {formatIncome(subItem.report?.totalIncome || 0)} */}
|
|
</div>
|
|
);
|
|
})}
|
|
{selectedItemId == item.cafeId &&
|
|
<div
|
|
className={styles.subRectangle}
|
|
onClick={() => { setSelectedSubItemId(selectedSubItemId == -1 ? 0 : -1); setModal('create_clerk') }}
|
|
style={{ backgroundColor: selectedItemId == item.cafeId && selectedSubItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
|
|
>
|
|
tambah kasir
|
|
</div>
|
|
}
|
|
</div>
|
|
);
|
|
})
|
|
) : (
|
|
<div>No tenants available</div>
|
|
)
|
|
}
|
|
{user.roleId > 0 &&
|
|
<div className={styles.rectangle}
|
|
style={{ backgroundColor: selectedItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
|
|
onClick={() => { setSelectedItemId(selectedItemId == -1 ? 0 : -1); setModal('create_kedai') }}
|
|
>
|
|
Tambah kedai
|
|
</div>
|
|
}
|
|
<div style={{ height: '2px' }}></div>
|
|
</div></>
|
|
) : (
|
|
<div className={styles.centeredLinktreePage}>
|
|
<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>
|
|
</div>
|
|
diskon 50%
|
|
</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>
|
|
diskon 50%
|
|
</div>
|
|
}
|
|
<div className={styles.subHeading}>
|
|
Solusi berbasis web untuk memudahkan pengelolaan kedai, dengan fitur yang mempermudah pemilik, kasir, dan tamu berinteraksi.
|
|
</div>
|
|
|
|
{getLocalStorage('auth') == null && (
|
|
<div className={styles.LoginForm}>
|
|
<div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : styles.reverseForm}`}>
|
|
<label htmlFor="username" className={styles.usernameLabel}>---- masuk -------------------------------</label>
|
|
<input
|
|
id="username"
|
|
placeholder="username"
|
|
maxLength="30"
|
|
className={!error ? styles.usernameInput : styles.usernameInputError}
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
/>
|
|
<button onClick={() => setInputtingPassword(true)} className={styles.claimButton}>
|
|
<span>➜</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : styles.reverseForm}`}>
|
|
<span>
|
|
<label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> <--- <-- kembali </label>
|
|
<label htmlFor="password" className={styles.usernameLabel}> ----- </label>
|
|
<label onClick={() => setModal('reset-password', { username: username })} className={styles.usernameLabel}>
|
|
lupa password? -
|
|
</label>
|
|
</span>
|
|
<input
|
|
id="password"
|
|
placeholder="password"
|
|
type="password"
|
|
maxLength="30"
|
|
className={!error ? styles.usernameInput : styles.usernameInputError}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
<button
|
|
onClick={handleLogin}
|
|
className={`${styles.claimButton} ${loading ? styles.loading : ''}`}
|
|
disabled={loading}
|
|
>
|
|
<span>{loading ? 'Loading...' : 'Masuk'}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className={styles.footer}>
|
|
<div className={styles.footerLinks}>
|
|
<a href="https://linktr.ee/discover/trending" target="_blank" rel="noreferrer" className={styles.footerLink}>Pelajari lebih lanjut</a>
|
|
<a href="https://linktr.ee" target="_blank" rel="noreferrer" className={styles.footerLink}>Tentang kedaimaster.com</a>
|
|
<a
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className={styles.signupButton}
|
|
onClick={() => setModal('join')}
|
|
>
|
|
Daftarkan kedaimu
|
|
</a>
|
|
</div>
|
|
<div className={styles.footerImage}>
|
|
<img
|
|
style={{ height: '226px', width: '150px', objectFit: 'cover' }}
|
|
src="/kedai.png"
|
|
alt="Linktree visual"
|
|
onError={(e) => e.target.src = '/fallback-image.png'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LinktreePage;
|