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

ok banget

Browse Source
This commit is contained in:
zadit
2024-11-21 17:26:05 +07:00
parent 9c700c4729
commit 89b12737b7
11 changed files with 1345 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/BarChart.js Normal file
View File

@@ -0,0 +1,178 @@
import React, { useRef, useEffect } from 'react';
import { BarChart, Bar, XAxis, Tooltip, Legend, CartesianGrid, ResponsiveContainer, LabelList } from 'recharts';
// Colors palette
const colors = [
// **Analogous Colors** (near greens, yellows)
"#D0E14F", // Light green-yellow
"#B2B83D", // Olive yellow
"#A9C96E", // Muted olive green (your bg color itself)
"#A8B64E", // Olive green with yellow undertones
// **Complementary Colors** (contrast with green)
"#FF6347", // Tomato red
"#FF4500", // Orange red
"#FF8C00", // Dark orange
"#FF7F50", // Coral
// **Triadic Colors** (balanced vibrant combination)
"#1E90FF", // Dodger blue
"#FF00FF", // Magenta
"#32CD32", // Lime green
// **Tetradic Colors** (4-color palette: 2 complementary pairs)
"#00CED1", // Dark turquoise
"#FFD700", // Gold
"#FF1493", // Deep pink
"#8A2BE2", // Blue violet
// **Neutral Tones** (earthy, muted tones to balance the palette)
"#FFDAB9", // Peach
"#F0E68C", // Khaki
"#8B4513", // Saddle brown
"#4B0082", // Indigo
"#C71585", // Medium violet red
// **Pastels for softer contrast**
"#FFB6C1", // Light pink
"#E6E6FA", // Lavender
"#98FB98", // Pale green
"#F0FFF0", // Honeydew
"#D3D3D3", // Light grey
];
const SimpleBarChart = ({ Data }) => {
const lastMonthRef = useRef('');
const lastYearRef = useRef('');
const usedColors = useRef([]); // Keep track of used colors
useEffect(() => {
usedColors.current = [];
}, [Data]);
// Ensure Data is not null or undefined
const transformedData = (Data?.length ? Data.reduce((acc, { date, materialId, priceAtp, stockDifference, name }) => {
function isSameDay(date1, date2) {
const d1 = new Date(date1);
const d2 = new Date(date2);
return d1.getFullYear() === d2.getFullYear() &&
d1.getMonth() === d2.getMonth() &&
d1.getDate() === d2.getDate();
}
// Assuming `acc` is an array of entries and `date` is the input date you're checking
const existingEntry = acc.find(d => isSameDay(d.date, date));
console.log(existingEntry)
if (existingEntry) {
// If it exists, sum the stockDifference (priceAtp * stockDifference)
existingEntry[name] = (existingEntry[name] || 0) + (priceAtp * stockDifference);
} else {
// If it doesn't exist yet, add a new entry
acc.push({
date,
materialId,
name,
[name]: priceAtp * stockDifference
});
}
return acc;
}, []) : []);
// Sort the data by date (ascending) to easily find the oldest date
const sortedData = [...transformedData].sort((a, b) => new Date(a.date) - new Date(b.date));
// The first date in the sorted array will be the oldest
const oldestDate = sortedData[0]?.date;
// Get the unique materials (names) from the data
const uniqueMaterials = Array.from(new Set(Data?.map(item => item.name) || []));
// Function to format date and handle month and year changes
const formatDate = (date) => {
const formattedDate = new Date(date);
const day = formattedDate.getDate(); // Get the day of the month
const month = formattedDate.toLocaleString('en-US', { month: 'short' }); // Get the abbreviated month (e.g., "Nov")
const year = formattedDate.getFullYear().toString().slice(2); // Get the last two digits of the year (e.g., "24")
// Extract the month and year from the date
const currentMonth = formattedDate.toLocaleDateString('en-US', { month: 'short' });
const currentYear = formattedDate.getFullYear();
// Check if it's the oldest date (first entry)
if (date === oldestDate) {
lastMonthRef.current = currentMonth; // Update lastMonthRef for the first entry
lastYearRef.current = currentYear; // Update lastYearRef for the first entry
return `${day} ${month} ${year}`; // Format as "day month year" (e.g., "4 Nov 24")
}
// If the year changes, show the full date with year
if (currentYear !== lastYearRef.current) {
lastYearRef.current = currentYear; // Update year reference
return `${day} ${month} ${year}`; // Show full date: day month year
}
// If the month changes, show the full date with month and year
if (currentMonth !== lastMonthRef.current) {
lastMonthRef.current = currentMonth; // Update month reference
return `${day} ${month} ${year}`; // Show full date: day month year
}
// Only show the day if the month hasn't changed
return `${day}`; // Show just the day if the month remains the same
};
// Function to get the next available color from the palette, starting from a random index
const getNextColor = () => {
// Randomly pick a starting index from the color palette
const randomIndex = Math.floor(Math.random() * colors.length);
// Find the first unused color from the random starting point
let color = null;
for (let i = 0; i < colors.length; i++) {
const index = (randomIndex + i) % colors.length;
if (!usedColors.current.includes(colors[index])) {
color = colors[index];
usedColors.current.push(color); // Mark color as used
break;
}
}
return color || '#000000'; // Fallback color if no colors are available
};
// Extract unique dates for the XAxis
const uniqueDates = Array.from(new Set(transformedData.map(item => item.date)));
return (
<div style={{ width: '100%', height: '20vh' }}>
<ResponsiveContainer width="100%" height="100%">
<BarChart data={transformedData}>
{/* Format the XAxis ticks to show only the month when it changes */}
<XAxis
dataKey="date"
tickFormatter={formatDate} // Custom formatting function
interval={0} // Set interval to 0 to display all dates in data
ticks={uniqueDates} // Only use unique dates for the XAxis
/>
<Tooltip />
<Legend />
<CartesianGrid strokeDasharray="3 3" />
{/* Dynamically create bars and labels for each unique material */}
{uniqueMaterials.map((material) => (
<React.Fragment key={material}>
<Bar dataKey={material} fill={getNextColor()}>
</Bar>
</React.Fragment>
))}
</BarChart>
</ResponsiveContainer>
</div>
);
};
export default SimpleBarChart;

2
src/components/Header.js
View File

@@ -311,7 +311,7 @@ const Header = ({
</Title>
<div style={{ visibility: showProfile ? "visible" : "hidden" }}>
<ProfileImage
src={user.username == undefined? shopImage : "https://static-00.iconduck.com/assets.00/profile-major-icon-1024x1024-9rtgyx30.png"}
src={user.username == undefined? shopImage : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
alt="Profile"
onClick={user.username !== undefined?handleImageClick: null}
animate={showRectangle && animate}

2
src/helpers/transactionHelpers.js
View File

@@ -392,7 +392,7 @@ export const getFavourite = async (cafeId) => {
export const getReports = async (cafeId, filter) => {
const response = await fetch(
API_BASE_URL + "/transaction/reports/" + cafeId + "?type=" + filter,
API_BASE_URL + "/transaction/get-reports/" + cafeId + "?type=" + filter,
{
method: "POST",
headers: {

2
src/helpers/userHelpers.js
View File

@@ -171,7 +171,7 @@ export const updateUser = async (formData) => {
};
//for super
export const getAllCafeOwner = async (formData) => {
export const getAnalytics = async (formData) => {
const token = getLocalStorage("auth");
if (token) {
try {

13
src/pages/CircularDiagram.js
View File

@@ -1,17 +1,17 @@
import React from "react";
const CircularDiagram = ({ segments }) => {
const radius = 100; // Radius of the circle
const strokeWidth = 30; // Width of each portion
const radius = 70; // Radius of the circle
const strokeWidth = 20; // Width of each portion
const circumference = 2 * Math.PI * (radius - strokeWidth / 2);
let startOffset = 0; // Initial offset for each segment
let startOffset = -63; // Initial offset for each segment
const svgStyles = {
display: "block",
margin: "0 auto",
};
console.log(segments)
return (
<svg
width={radius * 2}
@@ -29,7 +29,10 @@ const CircularDiagram = ({ segments }) => {
/>
{segments.map((segment, index) => {
const { percentage, color } = segment;
const segmentLength = (circumference * percentage) / 100;
console.log(percentage)
let p = percentage;
if(p == 'Infinity' || isNaN(p)) p = 0;
const segmentLength = (circumference * p) / 100;
const strokeDashoffset = circumference - startOffset;
startOffset += segmentLength;

19
src/pages/Dashboard copy.js
View File

@@ -4,7 +4,7 @@ import Header from "../components/Header";
import { useNavigate } from "react-router-dom";
import AccountUpdateModal from "../components/AccountUpdateModal";
import { removeLocalStorage } from "../helpers/localStorageHelpers";
import { getAllCafeOwner, createCafeOwner } from "../helpers/userHelpers";
import { getAnalytics, createCafeOwner } from "../helpers/userHelpers";
import { getOwnedCafes, createCafe, updateCafe } from "../helpers/cafeHelpers";
import { ThreeDots } from "react-loader-spinner";
@@ -19,11 +19,12 @@ const Dashboard = ({ user, setModal }) => {
const [newItem, setNewItem] = useState({ name: "", type: "" });
useEffect(() => {
if (user && user.roleId === 0) {
if (user && user.roleId < 2) {
setLoading(true);
getAllCafeOwner()
getAnalytics()
.then((data) => {
setItems(data);
console.log(data)
setLoading(false);
})
.catch((error) => {
@@ -31,18 +32,6 @@ const Dashboard = ({ user, setModal }) => {
setLoading(false);
});
}
if (user && user.roleId === 1) {
setLoading(true);
getOwnedCafes(user.userId)
.then((data) => {
setItems(data);
setLoading(false);
})
.catch((error) => {
console.error("Error fetching owned cafes:", error);
setLoading(false);
});
}
}, [user]);
const handleModalClose = () => {

614
src/pages/Dashboard.js
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import styles from './LinktreePage.module.css';
import { loginUser, getAllCafeOwner, createCafeOwner } from "../helpers/userHelpers";
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";
@@ -9,6 +9,8 @@ import { getLocalStorage, removeLocalStorage } from "../helpers/localStorageHelp
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();
@@ -82,10 +84,10 @@ const LinktreePage = ({ user, setModal }) => {
setLoading(true);
switch (user.roleId) {
case 0:
getAllCafeOwner().then(setItems).catch(console.error).finally(() => setLoading(false));
getAnalytics().then(setItems).catch(console.error).finally(() => setLoading(false));
break;
case 1:
getOwnedCafes(user.userId).then(setItems).catch(console.error).finally(() => setLoading(false));
getAnalytics().then(setItems).catch(console.error).finally(() => setLoading(false));
break;
case 3:
handleMyTransactions();
@@ -135,60 +137,61 @@ const LinktreePage = ({ user, setModal }) => {
}
};
const colors = [
"#FF0000", // Red
"#FF6F00", // Dark Orange
"#FFD700", // Gold
"#32CD32", // Lime Green
"#00CED1", // Dark Turquoise
"#1E90FF", // Dodger Blue
"#8A2BE2", // BlueViolet
"#FF00FF", // Magenta
"#FF1493", // Deep Pink
"#FF4500", // OrangeRed
"#FFDAB9", // Peach Puff
"#4B0082", // Indigo
"#00FF7F", // Spring Green
"#C71585", // Medium Violet Red
"#F0E68C", // Khaki
"#FF6347", // Tomato
"#006400", // Dark Green
"#8B4513", // SaddleBrown
"#00BFFF", // Deep Sky Blue
"#FF69B4", // Hot Pink
// Complementary (for contrast with olive green)
"#FF6347", // Tomato red (complementary to olive green)
"#FF4500", // Orange red (complementary to olive green)
// Analogous to olive green
"#D0E14F", // Light green-yellow
"#A9C96E", // Muted olive green (your bg color itself)
"#A5B24F", // Earthy olive green
// Triadic (balanced and vibrant palette)
"#FF00FF", // Magenta (triadic color)
"#1E90FF", // Dodger blue (triadic color)
"#32CD32", // Lime green (triadic color)
// Neutral tones
"#FFDAB9", // Peach (light neutral tone)
"#4B0082", // Indigo (dark neutral tone)
"#8B4513", // Saddle brown (earthy neutral)
];
const selectedTenant = items.tenants?.find(tenant => tenant.userId === selectedItemId);
const selectedItems = items.items?.find(item => (item.userId || item.cafeId) === selectedItemId);
// If the selected tenant is found, extract the cafes
const selectedTenantCafes = selectedTenant?.cafes || [];
const selectedSubItems = selectedItems?.subItems || [];
// 1. Optionally combine all report items from cafes of the selected tenant
const allSelectedTenantCafeItems = selectedTenantCafes.flatMap(cafe => cafe.report?.items || []);
const allSelectedSubItems = selectedSubItems.flatMap(cafe => cafe.report?.items || selectedItems.report.items || []);
// 2. Retrieve the specific cafe's report items if needed
const filteredItems = selectedTenantCafes.find(cafe => cafe.cafeId === selectedSubItemId) || { report: { items: [] } };
const filteredItems = selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId) || { report: { items: [] } };
// 3. Decide whether to use combined items or individual cafe items
const segments = (selectedItemId != 0 && selectedItemId != -1 && selectedSubItemId == 0 ? allSelectedTenantCafeItems : filteredItems.report.items || []).map((item, index) => ({
percentage: item.percentage,
const 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 available
})) || []; // Ensure segments is an empty array if no items are availabled
// Function to combine items of all cafes for the selected tenant
function combineSelectedTenantCafeReports(selectedTenant) {
return selectedTenant.cafes.flatMap(cafe => cafe.report?.items || []);
console.log(selectedItems)
function combineSelectedTenantCafeReports(selectedItems) {
return selectedItems.cafes.flatMap(cafe => cafe.report?.items || []);
}
return (
<>
{user && user.roleId < 2 ? (
<>
<div className={styles.nonCenteredLinktreePage}>
<div className={styles.dashboard}>
<div className={styles.header}>
<Header
HeaderText={"selamat siang " + user.username}
HeaderText={"selamat sore " + user.username}
isEdit={() => setIsModalOpen(true)}
isLogout={handleLogout}
user={user}
@@ -199,15 +202,489 @@ const LinktreePage = ({ user, setModal }) => {
</div>
<div className={styles.headerCardWrapper}>
<div className={styles.headerCard}>
<h1>Total pemasukan {items?.totalIncomeFromAllTenant}</h1>
{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>Total pemasukan</p>
<p>{items?.totalIncome}</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>Total 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>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>{selectedItems?.totalOutcome}</p>
<p>pengeluaran</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>{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>Total pemasukan</p>
<p>{formatIncome(items?.totalIncome)}</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>Total pengeluaran</p>
<p>{formatIncome(items?.totalOutcome)}</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>{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>
<div style={{ flex: 1 }}>
<CircularDiagram segments={segments} />
<h3>terlakuu</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" }}>{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}% &nbsp; {item.value} </h5>
</div>
))}
{segments.length < 1 &&
<>
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<h5 style={{
width: '100%', margin: 0, textAlign: "left", backgroundColor: 'gray', color: 'gray'
}}>-</h5>
</div>
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<h5 style={{
width: '100%', margin: 0, textAlign: "left", backgroundColor: 'gray', color: 'gray'
}}>-</h5>
</div>
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<h5 style={{
width: '100%', margin: 0, textAlign: "left", backgroundColor: 'gray', color: 'gray'
}}>-</h5>
</div>
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<h5 style={{
width: '100%', margin: 0, textAlign: "left", backgroundColor: 'gray', color: 'gray'
}}>-</h5>
</div>
</>
}
</div>
</div>
<h3>penambahan stok</h3>
<BarChart Data={selectedItems?.report?.materialsPurchased} />
<div style={{ height: '24vh' }}></div>
</div>
</div>
<div className={styles.cafeListWrapper}>
<div className={styles.cafeListHeader}>
Semua {user.roleId < 1 ? 'penyewa' : 'kedai yang dikau miliki'}
@@ -218,54 +695,64 @@ const LinktreePage = ({ user, setModal }) => {
{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)}
onClick={() => { setSelectedItemId(selectedItemId == -1 ? 0 : -1); setModal('add-tenant') }}
>
Tambah penyewa
</div>
}
{
items?.tenants?.length > 0 ? (
items.tenants.map((tenant) => {
const isTenantSelected = selectedItemId === tenant.userId;
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 hasCafes = tenant?.cafes?.length > 0;
const hasSubItems = item?.subItems?.length > 0;
return (
<div key={tenant.userId}>
<div key={item.userId || item.cafeId}>
<div
onClick={() => {
setSelectedItemId(isTenantSelected && !selectedSubItemId ? 0 : tenant.userId);
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>{tenant.username}</h3>
<div>
Total Pendapatan: {formatIncome(tenant.totalIncome)}
</div>
<h3>{item.username || item.name} &nbsp;</h3>
<h3>
Rp{formatIncome(item.totalIncome || item.report?.totalIncome) || 0}
</h3>
</div>
{/* Only show cafes if the tenant is selected */}
{selectedItemId === tenant.userId && hasCafes && tenant.cafes.map((cafe) => {
const isCafeSelected = selectedSubItemId === cafe.cafeId;
{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={cafe.cafeId}
key={subItem.cafeId || subItem.userId}
className={styles.subRectangle}
onClick={() => {
setSelectedSubItemId(isCafeSelected ? 0 : cafe.cafeId); // Toggle subitem selection
setSelectedItemId(tenant.userId); // Ensure tenant stays selected
setSelectedSubItemId(isCafeSelected ? 0 : (subItem.cafeId || subItem.userId)); // Toggle subitem selection
setSelectedItemId(item.userId || item.cafeId); // Ensure tenant stays selected
}}
style={{ backgroundColor: cafeBackgroundColor }}
>
{cafe.name}
&nbsp;pendapatan {formatIncome(cafe.report?.totalIncome || 0)}
{subItem.name || subItem.username}
{/* &nbsp;pendapatan {formatIncome(subItem.report?.totalIncome || 0)} */}
</div>
);
})}
{selectedItemId == item.cafeId &&
<div
className={styles.subRectangle}
onClick={() => {
}}
style={{}}
>
tambah kasir
</div>
}
</div>
);
})
@@ -273,18 +760,17 @@ const LinktreePage = ({ user, setModal }) => {
<div>No tenants available</div>
)
}
<div style={{height:'2px'}}></div>
{user.roleId > 0 &&
<div className={styles.rectangle}
style={{ backgroundColor: selectedItemId == 0 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
onClick={() => { setSelectedItemId(selectedItemId == 0 ? -1 : 0); setModal('create-cafe'); }}
style={{ backgroundColor: selectedItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
onClick={() => setSelectedItemId(selectedItemId == -1 ? 0 : -1)}
>
Tambah kedai
</div>
}
</div>
</div>
<div style={{ height: '2px' }}></div>
</div></>
) : (
<div className={styles.centeredLinktreePage}>
<div className={styles.dashboardLine}></div>

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

@@ -1,287 +1,311 @@
/* General container */
.centeredLinktreePage {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgb(210, 232, 35);
}
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgb(210, 232, 35);
}
.nonCenteredLinktreePage {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: start;
background-color: rgb(193 201 134);
position: relative;
}
.dashboardLine {
position: fixed;
left: 0px;
height: 100vh;
width: 30px;
border-right: 1px solid black;
z-index: 5;
.dashboardLine {
position: fixed;
left: 0px;
height: 100vh;
width: 30px;
border-right: 1px solid black;
z-index: 5;
}
.dashboardContainer {
background-color: rgb(210, 232, 35);
z-index: 6;
padding: 0 1rem;
padding-top: 40px;
}
/* Main Heading */
.mainHeading {
font-weight: 700;
font-size: 32px;
line-height: 2.25rem;
margin-bottom: 1rem;
letter-spacing: -1px;
color: rgb(37, 79, 26);
}
.swipeContainer {
height: 75px;
overflow: hidden;
width: 100%;
color: rgb(59 130 246);
}
.swipeContent {
animation: swipeUp 12s infinite;
}
.swipeItem {
overflow: hidden;
height: 75px;
max-width: 300px;
text-wrap: balance;
line-height: 34px;
}
/* Swipe Animation */
@keyframes swipeUp {
0%,
15% {
transform: translateY(0);
}
.dashboardContainer {
background-color: rgb(210, 232, 35);
z-index: 6;
padding: 0 1rem;
padding-top: 40px;
20%,
35% {
transform: translateY(-20%);
}
/* Main Heading */
.mainHeading {
font-weight: 700;
font-size: 32px;
line-height: 2.25rem;
margin-bottom: 1rem;
letter-spacing: -1px;
color: rgb(37, 79, 26);
40%,
55% {
transform: translateY(-40%);
}
.swipeContainer {
height: 75px;
overflow: hidden;
width: 100%;
color: rgb(59 130 246);
60%,
75% {
transform: translateY(-60%);
}
.swipeContent {
animation: swipeUp 12s infinite;
80%,
95% {
transform: translateY(-80%);
}
.swipeItem {
overflow: hidden;
height: 75px;
max-width: 300px;
text-wrap: balance;
line-height: 34px;
}
/* Swipe Animation */
@keyframes swipeUp {
0%, 15% {
transform: translateY(0);
}
20%, 35% {
transform: translateY(-20%);
}
40%, 55% {
transform: translateY(-40%);
}
60%, 75% {
transform: translateY(-60%);
}
80%, 95% {
transform: translateY(-80%);
}
}
/* Sub Heading */
.subHeading {
font-weight: 400;
line-height: 1.5rem;
font-size: 14px;
font-family: 'poppins';
color: black;
margin-bottom: 1.5rem;
}
.LoginForm {
display: inline-flex;
position: relative;
height: 148px;
}
/* Form */
.FormUsername {
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
}
/* Sub Heading */
.subHeading {
font-weight: 400;
line-height: 1.5rem;
font-size: 14px;
font-family: 'poppins';
color: black;
margin-bottom: 1.5rem;
}
.LoginForm {
display: inline-flex;
position: relative;
height: 148px;
}
/* Form */
.FormUsername {
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
left: 0vw;
}
.FormUsername.animateForm {
animation: FormUsernameProgress 0.5s forwards;
/* Apply the animation when inputtingPassword is true */
}
.FormUsername.reverseForm {
animation: FormUsernameReverse 0.5s forwards;
/* Reverse animation when inputtingPassword is false */
}
@keyframes FormUsernameProgress {
0% {
left: 0vw;
}
.FormUsername.animateForm {
animation: FormUsernameProgress 0.5s forwards; /* Apply the animation when inputtingPassword is true */
100% {
left: -100vw;
}
.FormUsername.reverseForm {
animation: FormUsernameReverse 0.5s forwards; /* Reverse animation when inputtingPassword is false */
}
@keyframes FormUsernameReverse {
0% {
left: -100vw;
}
@keyframes FormUsernameProgress {
0% {
left: 0vw;
}
100% {
left: -100vw;
}
100% {
left: 0vw;
}
@keyframes FormUsernameReverse {
0% {
left: -100vw;
}
100% {
left: 0vw;
}
}
.FormPassword {
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
}
.FormPassword {
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
left: 100vw;
}
.FormPassword.animateForm {
animation: FormPasswordProgress 0.5s forwards;
/* Apply the animation when inputtingPassword is true */
}
.FormPassword.reverseForm {
animation: FormPasswordReverse 0.5s forwards;
/* Reverse animation when inputtingPassword is false */
}
@keyframes FormPasswordProgress {
0% {
left: 100vw;
}
.FormPassword.animateForm {
animation: FormPasswordProgress 0.5s forwards; /* Apply the animation when inputtingPassword is true */
100% {
left: 0vw;
}
.FormPassword.reverseForm {
animation: FormPasswordReverse 0.5s forwards; /* Reverse animation when inputtingPassword is false */
}
@keyframes FormPasswordProgress {
0% {
left: 100vw;
}
100% {
left: 0vw;
}
}
@keyframes FormPasswordReverse {
0% {
left: 0vw;
}
100% {
left: 100vw;
}
}
.usernameLabel {
font-size: 0.875rem;
color: #444;
margin-bottom: 5px;
position: relative;
}
.usernameInput {
width: 250px;
height: 55px;
padding-left: 10px;
font-size: 1rem;
background-color: #f0f0f0;
border-radius: 5px;
border: 1px solid #ccc;
margin-top: 5px;
margin-bottom: 15px;
}
@keyframes FormPasswordReverse {
0% {
left: 0vw;
}
.usernameInputError {
width: 250px;
height: 55px;
padding-left: 10px;
font-size: 1rem;
background-color: #f0f0f0;
border-radius: 5px;
border: 2px solid red; /* Red border when error is true */
margin-top: 5px;
margin-bottom: 15px;
/* Apply keyframe animation for border color transition */
animation: borderTransition 2s ease-in-out forwards;
100% {
left: 100vw;
}
/* Keyframe animation for border color transition */
@keyframes borderTransition {
0% {
border-color: red; /* Initial red border */
}
100% {
border-color: transparent; /* Transition to transparent */
}
}
.usernameLabel {
font-size: 0.875rem;
color: #444;
margin-bottom: 5px;
position: relative;
}
.usernameInput {
width: 250px;
height: 55px;
padding-left: 10px;
font-size: 1rem;
background-color: #f0f0f0;
border-radius: 5px;
border: 1px solid #ccc;
margin-top: 5px;
margin-bottom: 15px;
}
.usernameInputError {
width: 250px;
height: 55px;
padding-left: 10px;
font-size: 1rem;
background-color: #f0f0f0;
border-radius: 5px;
border: 2px solid red;
/* Red border when error is true */
margin-top: 5px;
margin-bottom: 15px;
/* Apply keyframe animation for border color transition */
animation: borderTransition 2s ease-in-out forwards;
}
/* Keyframe animation for border color transition */
@keyframes borderTransition {
0% {
border-color: red;
/* Initial red border */
}
.claimButton {
width: 200px;
height: 45px;
background-color: #254F1A;
color: #D2E823;
text-align: center;
font-size: 1rem;
padding: 10px;
border-radius: 30px;
border: none;
cursor: pointer;
100% {
border-color: transparent;
/* Transition to transparent */
}
.claimButton span {
font-weight: 600;
}
/* Footer */
.footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 2rem;
}
.footerLinks {
flex: 1;
display: flex;
flex-direction: column;
}
.footerLink {
font-size: 0.875rem;
color: #254F1A;
margin-bottom: 0.5rem;
text-decoration: underline;
}
.signupButton {
background-color: transparent;
border: 1px solid #254F1A;
color: #254F1A;
padding: 12px 30px;
border-radius: 30px;
text-align: center;
font-size: 0.875rem;
margin-top: 1.5rem;
cursor: pointer;
}
.footerImage {
flex: 1;
text-align: center;
}
.footerImage img {
width: 150px;
height: 226px;
margin-top: -50px;
}
.userInfo {
width: 100vw;
background-color: white;
left: 0;
position: fixed;
border-radius: 20px 20px 0 0;
bottom: 0;
overflow: hidden;
top: 75vh;
transition: top 0.5s ease, padding 0.5s ease;
}
}
.claimButton {
width: 200px;
height: 45px;
background-color: #254F1A;
color: #D2E823;
text-align: center;
font-size: 1rem;
padding: 10px;
border-radius: 30px;
border: none;
cursor: pointer;
}
.claimButton span {
font-weight: 600;
}
/* Footer */
.footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 2rem;
}
.footerLinks {
flex: 1;
display: flex;
flex-direction: column;
}
.footerLink {
font-size: 0.875rem;
color: #254F1A;
margin-bottom: 0.5rem;
text-decoration: underline;
}
.signupButton {
background-color: transparent;
border: 1px solid #254F1A;
color: #254F1A;
padding: 12px 30px;
border-radius: 30px;
text-align: center;
font-size: 0.875rem;
margin-top: 1.5rem;
cursor: pointer;
}
.footerImage {
flex: 1;
text-align: center;
}
.footerImage img {
width: 150px;
height: 226px;
margin-top: -50px;
}
.userInfo {
width: 100vw;
background-color: white;
left: 0;
position: fixed;
border-radius: 20px 20px 0 0;
bottom: 0;
overflow: hidden;
top: 75vh;
transition: top 0.5s ease, padding 0.5s ease;
}
.userInfoExpanded {
width: 100vw;
background-color: white;
@@ -290,122 +314,105 @@
border-radius: 20px 20px 0 0;
bottom: 0;
overflow: hidden;
top: 15vh;
transition: top 0.5s ease, padding 0.5s ease;
}
.userInfoExpandButton {
width: 100%;
background-color: #d1ecdf;
height: 30px;
position: absolute;
}
.userInfoExpandButton {
width: 100%;
background-color: #d1ecdf;
height: 30px;
position: absolute;
}
.ItemContainer {
height: 100%;
overflow-y: auto;
font-size: 10px;
}
.ItemContainer {
height: 100%;
overflow-y: auto;
font-size: 10px;
}
.Item {
background-color: #fff2a3;
border-radius: 20px;
margin: 20px;
padding: 10px;
}
.transactionContainer {
margin-left: 20px;
margin-top: 10px;
}
.transaction {
padding: 10px;
margin-bottom: 5px;
border-radius: 10px;
}
.rectangle {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
font-size: 20px;
background-color: rgb(114, 114, 114);
margin: 5%;
position: relative;
font-weight: 500;
margin-bottom: 20px;
/* Add some space below the rectangle */
}
.rectangleNLine {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
font-size: 20px;
background-color: rgb(114, 114, 114);
margin: 5%;
position: relative;
font-weight: 500;
margin-bottom: 20px;
/* Add some space below the rectangle */
}
.subRectangle {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
font-size: 20px;
background-color: rgb(114, 114, 114);
margin: 5%;
position: relative;
font-weight: 500;
margin-top: 10px;
/* Move it down a little */
margin-left: 50px;
/* Move it down a little */
}
/* The arrow at the bottom */
.subRectangle::before {
left: -14px;
top: 48%;
width: 2px;
height: 54px;
content: "";
position: absolute;
background-color: rgb(114, 114, 114);
transform: translateY(-50%);
}
.Item {
background-color: #fff2a3;
border-radius: 20px;
margin: 20px;
padding: 10px;
}
.transactionContainer {
margin-left: 20px;
margin-top: 10px;
}
.transaction {
padding: 10px;
margin-bottom: 5px;
border-radius: 10px;
}
.rectangle {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
font-size: 20px;
background-color: rgb(114, 114, 114);
margin: 5%;
position: relative;
font-weight: 500;
margin-bottom: 20px; /* Add some space below the rectangle */
}
.rectangleNLine {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
font-size: 20px;
background-color: rgb(114, 114, 114);
margin: 5%;
position: relative;
font-weight: 500;
margin-bottom: 20px; /* Add some space below the rectangle */
}
.subRectangle {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
font-size: 20px;
background-color: rgb(114, 114, 114);
margin: 5%;
position: relative;
font-weight: 500;
margin-top: 10px; /* Move it down a little */
margin-left: 50px; /* Move it down a little */
}
/* Arrow + line connection */
.rectangleNLine::after {
content: "";
position: absolute;
left: -17px;
top: 50%;
width: 18px;
height: 2px; /* Line thickness */
background-color: rgb(114, 114, 114); /* Line color */
transform: translateY(-50%); /* Center the line vertically */
}
/* Arrow + line connection */
.subRectangle::after {
content: "";
position: absolute;
left: -45px; /* Position it to the left of the rectangle */
top: 50%; /* Center vertically */
width: 45px; /* Length of the horizontal line */
height: 2px; /* Line thickness */
background-color: rgb(114, 114, 114); /* Line color */
transform: translateY(-50%); /* Center the line vertically */
}
/* The arrow at the bottom */
.subRectangle::before {
content: "-";
position: absolute;
left: -45px;
top: -21%;
width: 2px;
height: 70px;
content: "";
position: absolute;
background-color: rgb(114, 114, 114);
transform: translateY(-50%);
}
.header {
@@ -413,58 +420,112 @@
top: 0;
width: 100%;
height: calc(25vh - 25px);
margin-bottom: 15vh;
padding-top: 25px;
margin-bottom: 85px;
}
.headerCardWrapper {
top: 0;
position: absolute;
width: 100%;
bottom: 50vh;
justify-content: center;
display: flex;
align-items: center;
top: 0;
position: absolute;
width: 100%;
bottom: 50vh;
justify-content: center;
display: flex;
align-items: center;
}
.headerCard {
background-color: #947257;
position: relative;
width: 90%;
border-radius: 20px;
height: 40%;
}
.cafeListWrapper{
background-color: white;
border-radius: 20px 20px 0 0;
bottom: 0;
position: absolute;
width: 100%;
max-height: 164.5px;
background-color: #779f94;
position: relative;
width: 90%;
border-radius: 20px;
height: 35%;
}
.cafeListHeader{
background-color: white;
border-radius: 20px 20px 0 0;
bottom: 0;
position: absolute;
width: 100%;
height: 100%;
top: -45px;
background-color: #b09c72;
text-align: center;
padding-top: 10px;
font-weight: 500;
}
.cafeList{
background-color: white;
border-radius: 20px 20px 0 0;
bottom: 0;
position: absolute;
width: 100%;
height: 100%;
.cardBody {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center; /* Center the content */
}
.itemInput{
.cardImg {
border-radius: 20px;
font-size: 15px;
text-align: center;
margin: 10px;
padding: 5px;
height: 100%;
place-content: center;
}
.cardImg img {
width: 100%;
height: auto;
max-width: 85px;
object-fit: contain;
border-radius: 50%; /* Keep the circular shape */
}
.cardBody p {
margin: 1vh;
margin-top: 0;
margin-bottom: 0;
}
.cardItem{
border-radius: 20px;
font-size: 15px;
text-align: center;
margin: 10px;
padding: 5px;
}
.dashboardBody {
padding-left: 5vw;
padding-right: 5vw;
}
.goCafeButton {
width: 100%;
background-color: rgb(255, 215, 176);
border-radius: 20px;
position: relative;
z-index: 1;
}
.cafeListWrapper {
background-color: white;
border-radius: 20px 20px 0 0;
top: 83vh;
position: absolute;
width: 100%;
}
.cafeListHeader {
background-color: white;
border-radius: 20px 20px 0 0;
bottom: 0;
position: absolute;
width: 100%;
height: 100%;
top: -45px;
background-color: #b09c72;
text-align: center;
padding-top: 10px;
font-weight: 500;
}
.cafeList {
background-color: white;
border-radius: 20px 20px 0 0;
bottom: 0;
position: absolute;
width: 100%;
height: 100%;
}
.itemInput {
width: 50%;
height: 60%;
border-radius: 14px;

32
src/pages/Reports.js
View File

@@ -1,9 +1,6 @@
import React, { useEffect, useState } from "react";
import { ThreeDots } from "react-loader-spinner";
import {
getFavourite,
getReports,
getIncome,
} from "../helpers/transactionHelpers.js";
import CircularDiagram from "./CircularDiagram";
import styles from "./Transactions.module.css";
@@ -89,8 +86,8 @@ const RoundedRectangle = ({
<div style={valueStyle}>{loading ? "Loading..." : value}</div>
<div style={percentageStyle}>
{loading ? "" : percentage}
{percentage != undefined && !loading && "%"}
{percentage != undefined && !loading && (
{percentage !== undefined && !loading && "%"}
{percentage !== undefined && !loading && (
<span style={arrowStyle}>
{percentage > 0 ? "↗" : percentage === 0 ? "-" : "↘"}
</span>
@@ -105,11 +102,9 @@ const RoundedRectangle = ({
const App = ({ cafeId,
handleClose }) => {
const [favouriteItems, setFavouriteItems] = useState([]);
const [analytics, setAnalytics] = useState({});
const [loading, setLoading] = useState(true);
const [filter, setFilter] = useState("daily");
const [viewStock, setViewStock] = useState(false);
const fetchData = async (filter) => {
try {
@@ -129,10 +124,8 @@ const App = ({ cafeId,
fetchData(filter); // Fetch data when filter changes
}, [filter]);
const [sold, percentage] = analytics[filter] || [0, 0];
const filteredItems = analytics.items || [];
const totalSold = filteredItems.reduce((sum, item) => sum + item.count, 0);
const colors = [
"#FF0000", // Red
"#FF6F00", // Dark Orange
@@ -192,15 +185,15 @@ const App = ({ cafeId,
const filterTexts = ["1", "7", "30", "365"];
const comparisonText =
filterTexts[["daily", "weekly", "monthly", "yearly"].indexOf(filter)];
const formatDate = (isoDateString) => {
const date = new Date(isoDateString);
return date.toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
});
};
// const formatDate = (isoDateString) => {
// const date = new Date(isoDateString);
// return date.toLocaleDateString("en-US", {
// year: "numeric",
// month: "long",
// day: "numeric",
// hour: "numeric",
// });
// };
return (
<div style={{
@@ -209,7 +202,8 @@ const App = ({ cafeId,
width: '100vw',
top: 0,
right: 0,
backgroundColor: 'rgb(207, 207, 207)'}}
backgroundColor: 'rgb(207, 207, 207)',
overflowY: 'auto'}}
>
<h2 className={styles["Transactions-title"]}>Laporan</h2>
<div style={{ textAlign: "center",