ok
This commit is contained in:
zadit
@@ -98,33 +98,47 @@ const SimpleBarChart = ({ Data }) => {
|
||||
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();
|
||||
// Extract the year from the first data point
|
||||
const firstYear = new Date(sortedData[0]?.date).getFullYear();
|
||||
|
||||
// Check if all dates have the same year
|
||||
const allSameYear = sortedData.every((item) => new Date(item.date).getFullYear() === firstYear);
|
||||
|
||||
// If all dates are from the same year, show only "day month"
|
||||
if (allSameYear && formattedDate.toLocaleString('en-US', { month: 'short' }) !== lastMonthRef.current) {
|
||||
lastMonthRef.current = formattedDate.toLocaleString('en-US', { month: 'short' });
|
||||
// Show just the day and month if all dates have the same year
|
||||
return `${day} ${month}`;
|
||||
}
|
||||
// if (allSameYear) {
|
||||
// // Show just the day and month if all dates have the same year
|
||||
// return `${day} ${month}`;
|
||||
// }
|
||||
|
||||
// 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
|
||||
lastMonthRef.current = formattedDate.toLocaleDateString('en-US', { month: 'short' });
|
||||
lastYearRef.current = formattedDate.getFullYear();
|
||||
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
|
||||
if (formattedDate.getFullYear() !== lastYearRef.current) {
|
||||
lastYearRef.current = formattedDate.getFullYear();
|
||||
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
|
||||
if (formattedDate.toLocaleString('en-US', { month: 'short' }) !== lastMonthRef.current) {
|
||||
lastMonthRef.current = formattedDate.toLocaleString('en-US', { month: 'short' });
|
||||
return `${day} ${month} `; // 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
|
||||
@@ -158,8 +172,11 @@ const SimpleBarChart = ({ Data }) => {
|
||||
interval={0} // Set interval to 0 to display all dates in data
|
||||
ticks={uniqueDates} // Only use unique dates for the XAxis
|
||||
/>
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Tooltip
|
||||
itemStyle={{
|
||||
color: '#3498db', // Set the tooltip text color to blue
|
||||
}}
|
||||
/>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
|
||||
{/* Dynamically create bars and labels for each unique material */}
|
||||
@@ -168,7 +185,12 @@ const SimpleBarChart = ({ Data }) => {
|
||||
<Bar dataKey={material} fill={getNextColor()}>
|
||||
</Bar>
|
||||
</React.Fragment>
|
||||
))}
|
||||
))}<Legend
|
||||
wrapperStyle={{
|
||||
color: '#3498db', // Set the legend text color to blue
|
||||
backgroundColor: 'white'
|
||||
}}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import React from "react";
|
||||
import styles from "./Modal.module.css";
|
||||
import CreateClerk from "../pages/CreateClerk"
|
||||
import CreateCafe from "../pages/CreateCafe"
|
||||
import CreateTenant from "../pages/CreateTenant"
|
||||
import TablesPage from "./TablesPage.js";
|
||||
import PaymentOptions from "./PaymentOptions.js";
|
||||
import TableMaps from "../components/TableMaps";
|
||||
@@ -43,6 +45,8 @@ const Modal = ({ shop, isOpen, onClose, modalContent, setModal }) => {
|
||||
{modalContent === "req_notification" && <NotificationRequest setModal={setModal} />}
|
||||
{modalContent === "blocked_notification" && <NotificationBlocked />}
|
||||
{modalContent === "create_clerk" && <CreateClerk shopId={shop.cafeId} />}
|
||||
{modalContent === "create_kedai" && <CreateCafe shopId={shop.cafeId} />}
|
||||
{modalContent === "create_tenant" && <CreateTenant shopId={shop.cafeId} />}
|
||||
{modalContent === "edit_tables" && <TablesPage shop={shop} />}
|
||||
{modalContent === "new_transaction" && (
|
||||
<Transaction propsShopId={shop.cafeId} />
|
||||
|
||||
113
src/pages/CreateCafe.js
Normal file
113
src/pages/CreateCafe.js
Normal file
@@ -0,0 +1,113 @@
|
||||
import React, { useState } from 'react';
|
||||
import { createClerks } from '../helpers/userHelpers'; // Adjust the import path as needed
|
||||
|
||||
const CreateClerk = ({ shopId }) => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState('');
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
setLoading(true);
|
||||
setMessage('');
|
||||
|
||||
// Basic validation
|
||||
if (!username || !password) {
|
||||
setMessage('Username and password are required');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const create = await createClerks(shopId, username, password);
|
||||
|
||||
if (create) setMessage('Clerk created successfully');
|
||||
else setMessage('Failed to create clerk');
|
||||
} catch (error) {
|
||||
setMessage('Error creating clerk');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h2 style={styles.header}>Tambah Kedai</h2>
|
||||
<form onSubmit={handleSubmit} style={styles.form}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
style={styles.input}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
style={styles.input}
|
||||
/>
|
||||
<button type="submit" style={styles.button} disabled={loading}>
|
||||
{loading ? 'Creating...' : 'Create Clerk'}
|
||||
</button>
|
||||
{message && (
|
||||
<p style={{ ...styles.message, color: message.includes('success') ? 'green' : 'red' }}>
|
||||
{message}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Basic styling to make it mobile-friendly with a white background
|
||||
const styles = {
|
||||
container: {
|
||||
backgroundColor: '#fff',
|
||||
width: '100%',
|
||||
maxWidth: '350px',
|
||||
margin: '0 auto',
|
||||
padding: '20px',
|
||||
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '8px',
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
header: {
|
||||
textAlign: 'center',
|
||||
marginBottom: '20px',
|
||||
fontSize: '20px',
|
||||
color: '#333',
|
||||
},
|
||||
form: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '15px',
|
||||
},
|
||||
input: {
|
||||
padding: '12px',
|
||||
fontSize: '16px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
backgroundColor: '#f9f9f9',
|
||||
},
|
||||
button: {
|
||||
padding: '12px',
|
||||
fontSize: '16px',
|
||||
borderRadius: '8px',
|
||||
border: 'none',
|
||||
backgroundColor: '#28a745',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
},
|
||||
message: {
|
||||
textAlign: 'center',
|
||||
marginTop: '10px',
|
||||
},
|
||||
};
|
||||
|
||||
export default CreateClerk;
|
||||
@@ -33,7 +33,7 @@ const CreateClerk = ({ shopId }) => {
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h2 style={styles.header}>Create Clerk</h2>
|
||||
<h2 style={styles.header}>Tambah Kasir</h2>
|
||||
<form onSubmit={handleSubmit} style={styles.form}>
|
||||
<input
|
||||
type="text"
|
||||
|
||||
113
src/pages/CreateTenant.js
Normal file
113
src/pages/CreateTenant.js
Normal file
@@ -0,0 +1,113 @@
|
||||
import React, { useState } from 'react';
|
||||
import { createClerks } from '../helpers/userHelpers'; // Adjust the import path as needed
|
||||
|
||||
const CreateClerk = ({ shopId }) => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState('');
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
setLoading(true);
|
||||
setMessage('');
|
||||
|
||||
// Basic validation
|
||||
if (!username || !password) {
|
||||
setMessage('Username and password are required');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const create = await createClerks(shopId, username, password);
|
||||
|
||||
if (create) setMessage('Clerk created successfully');
|
||||
else setMessage('Failed to create clerk');
|
||||
} catch (error) {
|
||||
setMessage('Error creating clerk');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h2 style={styles.header}>Tambah Kedai</h2>
|
||||
<form onSubmit={handleSubmit} style={styles.form}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
style={styles.input}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
style={styles.input}
|
||||
/>
|
||||
<button type="submit" style={styles.button} disabled={loading}>
|
||||
{loading ? 'Creating...' : 'Create Clerk'}
|
||||
</button>
|
||||
{message && (
|
||||
<p style={{ ...styles.message, color: message.includes('success') ? 'green' : 'red' }}>
|
||||
{message}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Basic styling to make it mobile-friendly with a white background
|
||||
const styles = {
|
||||
container: {
|
||||
backgroundColor: '#fff',
|
||||
width: '100%',
|
||||
maxWidth: '350px',
|
||||
margin: '0 auto',
|
||||
padding: '20px',
|
||||
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '8px',
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
header: {
|
||||
textAlign: 'center',
|
||||
marginBottom: '20px',
|
||||
fontSize: '20px',
|
||||
color: '#333',
|
||||
},
|
||||
form: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '15px',
|
||||
},
|
||||
input: {
|
||||
padding: '12px',
|
||||
fontSize: '16px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
backgroundColor: '#f9f9f9',
|
||||
},
|
||||
button: {
|
||||
padding: '12px',
|
||||
fontSize: '16px',
|
||||
borderRadius: '8px',
|
||||
border: 'none',
|
||||
backgroundColor: '#28a745',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
},
|
||||
message: {
|
||||
textAlign: 'center',
|
||||
marginTop: '10px',
|
||||
},
|
||||
};
|
||||
|
||||
export default CreateClerk;
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
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";
|
||||
@@ -14,6 +14,9 @@ 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('');
|
||||
@@ -23,15 +26,22 @@ const LinktreePage = ({ user, setModal }) => {
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [newItem, setNewItem] = useState({ name: "", type: "" });
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [expanded, setIsExpand] = useState(false);
|
||||
const [expandedCafeId, setExpandedCafeId] = useState(null);
|
||||
const [selectedItemId, setSelectedItemId] = useState(0);
|
||||
const [selectedSubItemId, setSelectedSubItemId] = useState(0);
|
||||
|
||||
// Handle expand/collapse of cafe details
|
||||
const handleToggleExpand = (cafeId) => {
|
||||
setExpandedCafeId(expandedCafeId === cafeId ? null : cafeId);
|
||||
};
|
||||
|
||||
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]);
|
||||
|
||||
// Handle user transactions
|
||||
const handleMyTransactions = async () => {
|
||||
@@ -136,6 +146,7 @@ const LinktreePage = ({ user, setModal }) => {
|
||||
if (amount != null) return amount.toString();
|
||||
}
|
||||
};
|
||||
|
||||
const colors = [
|
||||
// Complementary (for contrast with olive green)
|
||||
"#FF6347", // Tomato red (complementary to olive green)
|
||||
@@ -164,240 +175,57 @@ const LinktreePage = ({ user, setModal }) => {
|
||||
const selectedSubItems = selectedItems?.subItems || [];
|
||||
|
||||
// 1. Optionally combine all report items from cafes of the selected tenant
|
||||
const allSelectedSubItems = selectedSubItems.flatMap(cafe => cafe.report?.items || selectedItems.report.items || []);
|
||||
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: [] } };
|
||||
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 ? 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
|
||||
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)
|
||||
function combineSelectedTenantCafeReports(selectedItems) {
|
||||
return selectedItems.cafes.flatMap(cafe => cafe.report?.items || []);
|
||||
}
|
||||
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.nonCenteredLinktreePage}>
|
||||
|
||||
<div className={styles.dashboard}>
|
||||
<div className={styles.header}>
|
||||
<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>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 ?
|
||||
(
|
||||
<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"
|
||||
@@ -441,7 +269,7 @@ const LinktreePage = ({ user, setModal }) => {
|
||||
</g>
|
||||
</svg>
|
||||
<p>Total pemasukan</p>
|
||||
<p>{formatIncome(items?.totalIncome)}</p>
|
||||
<p>{items?.totalIncome}</p>
|
||||
</div>
|
||||
<div className={styles.cardItem}>
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -484,58 +312,14 @@ const LinktreePage = ({ user, setModal }) => {
|
||||
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>
|
||||
<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>{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">
|
||||
@@ -576,115 +360,381 @@ const LinktreePage = ({ user, setModal }) => {
|
||||
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>
|
||||
<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={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'
|
||||
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.name}</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">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
|
||||
</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>
|
||||
<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 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">
|
||||
|
||||
<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}% {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>
|
||||
<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 tanggungan</p>
|
||||
<p>{formatIncome(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>{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>
|
||||
<h3>penambahan stok</h3>
|
||||
<BarChart Data={selectedItems?.report?.materialsPurchased} />
|
||||
<div style={{ height: '24vh' }}></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>
|
||||
<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}% {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 yang dikau miliki'}
|
||||
@@ -695,7 +745,10 @@ 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); setModal('add-tenant') }}
|
||||
onClick={() => {
|
||||
setSelectedItemId(selectedItemId === -1 ? 0 : -1);
|
||||
setModal('create_tenant');
|
||||
}}
|
||||
>
|
||||
Tambah penyewa
|
||||
</div>
|
||||
@@ -746,9 +799,8 @@ const LinktreePage = ({ user, setModal }) => {
|
||||
{selectedItemId == item.cafeId &&
|
||||
<div
|
||||
className={styles.subRectangle}
|
||||
onClick={() => {
|
||||
}}
|
||||
style={{}}
|
||||
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>
|
||||
@@ -762,9 +814,8 @@ const LinktreePage = ({ user, setModal }) => {
|
||||
}
|
||||
{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)}
|
||||
onClick={() => { setSelectedItemId(selectedItemId == -1 ? 0 : -1); setModal('create_kedai') }}
|
||||
>
|
||||
Tambah kedai
|
||||
</div>
|
||||
|
||||
@@ -422,6 +422,7 @@ const MaterialList = ({ cafeId, handleClose }) => {
|
||||
</div>
|
||||
)}
|
||||
<div class="ItemLister_PaymentOption__YZlDL"><div style={{marginTop:'20px'}} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
|
||||
<div style={{marginTop:'58px'}} ></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -433,7 +434,8 @@ const styles = {
|
||||
width: '100vw',
|
||||
top: 0,
|
||||
right: 0,
|
||||
backgroundColor: 'rgb(207, 207, 207)'
|
||||
backgroundColor: 'rgb(207, 207, 207)',
|
||||
overflowY: 'auto'
|
||||
},
|
||||
heading: {
|
||||
textAlign: "center",
|
||||
|
||||
Reference in New Issue
Block a user