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

ok

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

15
src/components/BarChart.module.css
View File

@@ -1,7 +1,16 @@
.chartItemContainer{ /* Chart item container */
position: relative; .chartItemContainer {
font-size: 14px; position: relative;
font-size: 14px;
margin-bottom: 230px; /* Initial margin-bottom */
transition: margin-bottom 0.3s ease-in-out; /* Add transition for margin-bottom */
} }
/* Expanded state - when the parent is "expanded" */
.expanded {
margin-bottom: 503px; /* New margin-bottom value when expanded */
}
.chartItemWrapper { .chartItemWrapper {
position: absolute; position: absolute;
transition: top 0.3s ease-in-out; /* Apply transition to chartItemWrapper */ transition: top 0.3s ease-in-out; /* Apply transition to chartItemWrapper */

16
src/components/Coupon.css
View File

@@ -9,7 +9,7 @@
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
align-items: center; align-items: center;
position: relative; position: relative;
margin-bottom: 5px; margin-bottom: 10px;
} }
/* Left side (with the rotated code and dotted line) */ /* Left side (with the rotated code and dotted line) */
@@ -75,12 +75,12 @@
} }
.RibbonBannerInverted h1 { .RibbonBannerInverted h1 {
margin: 0; /* Remove default margin */ margin: 0;
font-size: 18px; /* Adjust font size as needed */ font-size: 17px;
transform: rotate(-44.7deg)scale(-1,1); /* Rotate the text */ transform: rotate(-44.7deg) scale(-1, 1);
transform-origin: center; /* Rotate around its center */ transform-origin: center;
white-space: nowrap; /* Prevent text wrapping */ white-space: nowrap;
position: absolute; position: absolute;
top: 57px; top: 58px;
left: -12px; left: -8px;
} }

26
src/components/Coupon.js
View File

@@ -3,7 +3,7 @@ import './Coupon.css'; // Import a CSS file for styling
const Coupon = ({ code, value, period, type, expiration }) => { const Coupon = ({ code, value, period, type, expiration }) => {
// Format the value based on type // Format the value based on type
const formattedValue = type == 'fixed' ? `Diskon Rp${value}` : value != 0 ? `Diskon${value}%` : 'kupon berlangganan'; const formattedValue = type == 'fixed' ? `Diskon Rp${value}` : value != 0 ? `Diskon${value}%` : 'Voucher berlangganan';
// Function to convert expiration to Indonesian date format (dd MMMM yyyy) // Function to convert expiration to Indonesian date format (dd MMMM yyyy)
const formatExpirationDate = (dateString) => { const formatExpirationDate = (dateString) => {
@@ -42,27 +42,31 @@ const Coupon = ({ code, value, period, type, expiration }) => {
return ( return (
<div className='coupon'> <div className='coupon'>
{(expiration == null && code != null) || (expiration != null && code != null && daysLeft < 1) && ( {(expiration == null && code != null) || (expiration != null && code != null && daysLeft < 1) && (
<div className='RibbonBannerInverted'> <div className='RibbonBannerInverted'>
<img src={"https://i.imgur.com/yt6osgL.png"}></img> <img src={"https://i.imgur.com/yt6osgL.png"}></img>
<h1>Kupon berakhir</h1> <h1>Voucher berakhir</h1>
</div> </div>
)} )}
<div className='coupon-left'> <div className='coupon-left'>
<div className='coupon-code'>{code == null ? '404' : code}</div> <div className='coupon-code'>{code == null ? '404' : code}</div>
{/* <div className='dotted-line'></div> */} {/* <div className='dotted-line'></div> */}
</div> </div>
<div className='coupon-right'> <div className='coupon-right'>
<h2 className='coupon-value'>{code == null ? 'Kupon tidak ditemukan' : formattedValue}</h2> <h2 className='coupon-value'>{code == null ? 'Voucher tidak ditemukan' : formattedValue}</h2>
{type && <span className='coupon-type'>{type}</span>} {/* Display type if provided */} {type && <span className='coupon-type'>{type}</span>} {/* Display type if provided */}
<p className='coupon-period'> <p className='coupon-period'>
{code == null ? '-' : value === 0 ? `Masa berlangganan ${period} minggu` : `Masa kupon ${period} minggu`} {code == null ? '-' : value === 0 ? `Masa berlangganan ${period} minggu` : `Masa Voucher ${period} minggu`}
</p> </p>
<p className='coupon-expiration'> <p className='coupon-expiration'>
{expiration == null ? (code == null ? '-' : 'Tanpa kadaluarsa') : {expiration == null
daysLeft <= 7 ? (code == null ? '-' : 'Tanpa kadaluarsa')
? `Berlaku hingga ${daysLeft} hari lagi` : daysLeft < 0
: `Berlaku hingga: ${formatExpirationDate(expiration)}`} ? `Berakhir ${Math.abs(daysLeft)} hari lalu`
: daysLeft <= 7
? `Berlaku hingga ${daysLeft} hari lagi`
: `Berlaku hingga: ${formatExpirationDate(expiration)}`}
</p> </p>
</div> </div>
</div> </div>
); );

2
src/components/DailyCharts.js
View File

@@ -108,7 +108,7 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
{(indexx === 0 || (formatDate(chartData[indexx - 1].date).month !== month && type != 'weekly')) && month} {(indexx === 0 || (formatDate(chartData[indexx - 1].date).month !== month && type != 'weekly')) && month}
</> </>
) : ( ) : (
'kemarin' 'Kemarin'
)} )}
</div> </div>

29
src/components/PeriodCharts.js
View File

@@ -19,12 +19,20 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
currentIncomeData = aggregatedCurrentReports.map((report) => report.income); currentIncomeData = aggregatedCurrentReports.map((report) => report.income);
currentOutcomeData = aggregatedCurrentReports.map((report) => report.outcome); currentOutcomeData = aggregatedCurrentReports.map((report) => report.outcome);
currentTransactionData = aggregatedCurrentReports.map((report) => report.transactions); currentTransactionData = aggregatedCurrentReports.map((report) => report.transactions);
if (type == 'monthly' && currentTransactionData.length === 4) {
currentTransactionData.push(null);
}
} }
if (aggregatedPreviousReports) { if (aggregatedPreviousReports) {
// Map the data for the previous reports // Map the data for the previous reports
previousIncomeData = aggregatedPreviousReports.map((report) => report.income); previousIncomeData = aggregatedPreviousReports.map((report) => report.income);
previousOutcomeData = aggregatedPreviousReports.map((report) => report.outcome); previousOutcomeData = aggregatedPreviousReports.map((report) => report.outcome);
previousTransactionData = aggregatedPreviousReports.map((report) => report.transactions); previousTransactionData = aggregatedPreviousReports.map((report) => report.transactions);
if (type == 'monthly' && previousTransactionData.length === 4) {
previousTransactionData.push(null);
}
} }
let globalMax = null; let globalMax = null;
if (aggregatedCurrentReports || aggregatedPreviousReports) if (aggregatedCurrentReports || aggregatedPreviousReports)
@@ -39,8 +47,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
); );
return ( return (
<div className={styles.chartItemContainer}> <div className={`${styles.chartItemContainer} ${selectedIndex !== -1 ? styles.expanded : ''}`}>
{aggregatedPreviousReports && ( {aggregatedPreviousReports && (
<div className={`${styles.chartItemWrapper} ${selectedIndex !== -1 && selectedIndex !== 0 <div className={`${styles.chartItemWrapper} ${selectedIndex !== -1 && selectedIndex !== 0
? styles.chartItemWrapperActive ? styles.chartItemWrapperActive
@@ -52,9 +59,9 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
onClick={() => onClick={() =>
selectedIndex === -1 ? setSelectedIndex(0) : setSelectedIndex(-1) selectedIndex === -1 ? setSelectedIndex(0) : setSelectedIndex(-1)
} }
style={{ color: 'black',position: 'relative' }} style={{ color: 'black', position: 'relative' }}
> >
<div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid ${colors[0]}` }}></div> <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid ${colors[0]}` }}></div>
<div>{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}</div> <div>{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}</div>
</div> </div>
<div <div
@@ -80,6 +87,11 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
axisTicks: { axisTicks: {
show: false, // Removes the ticks on the x-axis show: false, // Removes the ticks on the x-axis
}, },
labels: {
style: {
colors: ['black', 'black', 'black', 'black', aggregatedPreviousReports?.length == 4 ? 'transparent' : 'black'],
}
}
}, },
yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } }, yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
grid: { show: false }, grid: { show: false },
@@ -117,9 +129,9 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
selectedIndex === -1 ? setSelectedIndex(1) : setSelectedIndex(-1) selectedIndex === -1 ? setSelectedIndex(1) : setSelectedIndex(-1)
} }
style={{ color: 'black',position: 'relative' }} style={{ color: 'black', position: 'relative' }}
> >
<div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid ${colors[1]}` }}></div> <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid ${colors[1]}` }}></div>
<div>{type == 'monthly' ? 'bulan ini' : 'tahun ini'}</div> <div>{type == 'monthly' ? 'bulan ini' : 'tahun ini'}</div>
</div> </div>
</div> </div>
@@ -136,6 +148,11 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
axisTicks: { axisTicks: {
show: false, // Removes the ticks on the x-axis show: false, // Removes the ticks on the x-axis
}, },
labels: {
style: {
colors: ['black', 'black', 'black', 'black', aggregatedCurrentReports?.length == 4 ? 'transparent' : 'black'],
}
}
}, },
yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } }, yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
grid: { show: false }, grid: { show: false },

2
src/config.js
View File

@@ -1,5 +1,5 @@
// src/config.js // src/config.js
const API_BASE_URL = 'https://api.kedaimaster.com'; const API_BASE_URL = 'https://dev.api.kedaimaster.com';
export default API_BASE_URL; export default API_BASE_URL;

26
src/helpers/couponHelpers.js
View File

@@ -6,7 +6,33 @@ import API_BASE_URL from '../config.js';
export function getAuthToken() { export function getAuthToken() {
return localStorage.getItem('auth'); return localStorage.getItem('auth');
} }
// Function to create a coupon
export async function createCoupon(discountType, discountValue, discountPeriods) {
try {
const response = await fetch(`${API_BASE_URL}/coupon/create`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${getAuthToken()}`,
},
body: JSON.stringify({
discountType,
discountValue,
discountPeriods,
}),
});
if (response.ok) {
const data = await response.json();
return { success: true, couponCode: data.coupon.code };
} else {
return { success: false, message: 'Failed to create coupon.' };
}
} catch (error) {
console.error('Error creating coupon:', error);
return { success: false, message: 'Error creating coupon.' };
}
}
// Function to check the validity of the coupon code // Function to check the validity of the coupon code
export async function checkCoupon(couponCode) { export async function checkCoupon(couponCode) {
try { try {

33
src/pages/CreateCoupon.js
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import API_BASE_URL from "../config.js"; import {createCoupon} from "../helpers/couponHelpers.js"
function getAuthToken() { function getAuthToken() {
return localStorage.getItem("auth"); return localStorage.getItem("auth");
@@ -11,30 +11,17 @@ const CreateCouponPage = () => {
const [discountPeriods, setDiscountPeriods] = useState(""); const [discountPeriods, setDiscountPeriods] = useState("");
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
try {
const response = await fetch(`${API_BASE_URL}/coupon/create`, { // Call the helper function to create the coupon
method: "POST", const result = await createCoupon(discountType, discountValue, discountPeriods);
headers: {
"Content-Type": "application/json", if (result.success) {
Authorization: `Bearer ${getAuthToken()}`, setMessage(`Coupon created successfully: ${result.couponCode}`);
}, } else {
body: JSON.stringify({ setMessage(result.message);
discountType,
discountValue,
discountPeriods,
}),
});
if (response.ok) {
const data = await response.json();
setMessage(`Coupon created successfully: ${data.coupon.code}`);
} else {
setMessage("Failed to create coupon.");
}
} catch (error) {
setMessage("Error creating coupon.");
} }
}; };

2
src/pages/CreateUserWithCoupon.js
View File

@@ -70,7 +70,7 @@ const LinktreePage = ({ setModal }) => {
return ( return (
<div className={styles.linktreePage}> <div className={styles.linktreePage}>
<div className={styles.dashboardContainer}> <div className={styles.dashboardContainer}>
<div className={styles.mainHeading}>Gunakan Kupon</div> <div className={styles.mainHeading}>Gunakan Voucher</div>
<div className={styles.subHeadingTransparent}> <div className={styles.subHeadingTransparent}>
Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami. Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
</div> </div>

643
src/pages/Dashboard.js
View File

@@ -236,634 +236,6 @@ const LinktreePage = ({ user, setModal }) => {
return ( return (
<> <>
{user && user.roleId < 2 ? ( {user && user.roleId < 2 ? (
// <>
// <div className={styles.nonCenteredLinktreePage}>
// <div className={styles.dashboard}>
// <div className={styles.header}>
// <Header
// HeaderText={"selamat sore " + user.username}
// isEdit={() => setIsModalOpen(true)}
// isLogout={handleLogout}
// user={user}
// showProfile={true}
// setModal={setModal}
// HeaderMargin='0px'
// />
// </div>
// <div className={styles.headerCardWrapper}>
// <div className={styles.headerCard}>
// {user.roleId == 0 ? (
// selectedItemId == 0 || selectedItemId == -1 ? (
// <div className={styles.cardBody}>
// <div className={styles.cardItem}>
// <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
// width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
// preserveAspectRatio="xMidYMid meet">
// <rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
// <g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
// fill="#000000" stroke="none">
// <path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
// -4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
// 273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
// -7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
// -115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
// -270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
// -230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
// -22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
// 56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
// -61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
// m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
// 28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
// 182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
// 45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
// -39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
// 30 78 -20z"/>
// <path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
// -288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
// 129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
// m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
// -183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
// -133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
// <path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
// l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
// 54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
// c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
// -5 80 -22z"/>
// <path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
// 190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
// -19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
// 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
// </g>
// </svg>
// <p>{items?.totalIncome}</p>
// <p> pemasukan</p>
// </div>
// <div className={styles.cardItem}>
// <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
// width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
// preserveAspectRatio="xMidYMid meet">
// <rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
// <g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
// fill="#000000" stroke="none">
// <path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
// -4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
// 273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
// -7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
// -115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
// -270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
// -230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
// -22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
// 56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
// -61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
// m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
// 28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
// 182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
// 45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
// -39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
// 30 78 -20z"/>
// <path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
// -288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
// 129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
// m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
// -183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
// -133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
// <path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
// l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
// 54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
// c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
// -5 80 -22z"/>
// <path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
// 190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
// -19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
// 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
// </g>
// </svg>
// <p> Tagihan</p>
// <p>{items?.totalIncome * 0.02}</p>
// </div>
// </div>
// ) : (
// <div className={styles.cardBody}>
// <div className={styles.cardItem} >
// <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
// width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
// preserveAspectRatio="xMidYMid meet">
// <rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
// <g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
// fill="#000000" stroke="none">
// <path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
// -4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
// 273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
// -7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
// -115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
// -270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
// -230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
// -22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
// 56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
// -61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
// m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
// 28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
// 182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
// 45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
// -39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
// 30 78 -20z"/>
// <path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
// -288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
// 129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
// m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
// -183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
// -133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
// <path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
// l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
// 54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
// c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
// -5 80 -22z"/>
// <path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
// 190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
// -19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
// 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
// </g>
// </svg>
// <p>{selectedItems?.totalIncome}</p>
// <p>pemasukann</p>
// </div>
// <div className={styles.cardItem}>
// <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
// width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
// preserveAspectRatio="xMidYMid meet">
// <rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
// <g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
// fill="#000000" stroke="none">
// <path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
// -4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
// 273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
// -7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
// -115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
// -270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
// -230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
// -22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
// 56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
// -61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
// m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
// 28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
// 182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
// 45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
// -39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
// 30 78 -20z"/>
// <path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
// -288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
// 129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
// m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
// -183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
// -133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
// <path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
// l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
// 54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
// c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
// -5 80 -22z"/>
// <path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
// 190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
// -19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
// 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
// </g>
// </svg>
// <p>{selectedItems?.totalIncome * 0.02}</p>
// <p>tagihan</p>
// </div>
// <div className={styles.cardImg}>
// <img
// src={filteredItems?.welcomePageConfig ?
// API_BASE_URL + "/" + (JSON.parse(filteredItems.welcomePageConfig)?.image || '') : 'https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg'
// }
// />
// <p>{selectedItems?.totalIncome * 0.02}</p>
// <p>{filteredItems.name}</p>
// </div>
// </div>
// )
// ) : (
// selectedItemId == 0 || selectedItemId == -1 ?
// (
// <div className={styles.cardBody}>
// <div className={styles.cardItem}>
// <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
// width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
// preserveAspectRatio="xMidYMid meet">
// <rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
// <g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
// fill="#000000" stroke="none">
// <path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
// -4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
// 273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
// -7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
// -115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
// -270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
// -230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
// -22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
// 56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
// -61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
// m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
// 28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
// 182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
// 45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
// -39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
// 30 78 -20z"/>
// <path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
// -288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
// 129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
// m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
// -183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
// -133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
// <path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
// l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
// 54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
// c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
// -5 80 -22z"/>
// <path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
// 190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
// -19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
// 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
// </g>
// </svg>
// <p>{formatIncome(items?.totalIncome)}</p>
// <p> pemasukan</p>
// </div>
// <div className={styles.cardItem}>
// <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
// width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
// preserveAspectRatio="xMidYMid meet">
// <rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
// <g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
// fill="#000000" stroke="none">
// <path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
// -4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
// 273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
// -7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
// -115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
// -270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
// -230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
// -22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
// 56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
// -61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
// m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
// 28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
// 182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
// 45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
// -39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
// 30 78 -20z"/>
// <path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
// -288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
// 129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
// m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
// -183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
// -133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
// <path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
// l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
// 54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
// c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
// -5 80 -22z"/>
// <path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
// 190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
// -19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
// 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
// </g>
// </svg>
// <p>{formatIncome(items?.totalOutcome)}</p>
// <p> pengeluaran</p>
// </div>
// <div className={styles.cardItem}>
// <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
// width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
// preserveAspectRatio="xMidYMid meet">
// <rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
// <g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
// fill="#000000" stroke="none">
// <path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
// -4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
// 273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
// -7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
// -115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
// -270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
// -230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
// -22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
// 56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
// -61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
// m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
// 28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
// 182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
// 45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
// -39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
// 30 78 -20z"/>
// <path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
// -288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
// 129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
// m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
// -183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
// -133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
// <path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
// l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
// 54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
// c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
// -5 80 -22z"/>
// <path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
// 190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
// -19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
// 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
// </g>
// </svg>
// <p>{formatIncome(items?.totalIncome * 0.02)}</p>
// <p> tanggungan</p>
// </div>
// </div>
// ) : (
// <div className={styles.cardBody}>
// <div className={styles.cardItem}>
// <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
// width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
// preserveAspectRatio="xMidYMid meet">
// <rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
// <g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
// fill="#000000" stroke="none">
// <path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
// -4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
// 273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
// -7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
// -115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
// -270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
// -230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
// -22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
// 56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
// -61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
// m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
// 28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
// 182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
// 45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
// -39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
// 30 78 -20z"/>
// <path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
// -288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
// 129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
// m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
// -183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
// -133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
// <path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
// l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
// 54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
// c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
// -5 80 -22z"/>
// <path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
// 190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
// -19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
// 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
// </g>
// </svg>
// <p>{formatIncome(selectedItems?.report?.totalIncome)}</p>
// <p>pemasukan</p>
// </div>
// <div className={styles.cardItem} >
// <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
// width="44.000000pt" height="44.000000pt" viewBox="0 0 224.000000 246.000000"
// preserveAspectRatio="xMidYMid meet">
// <rect x="5" y="5" width="216" height="236" rx="200" ry="500" fill="rgb(255,255,255)" />
// <g transform="translate(0.000000,246.000000) scale(0.100000,-0.100000)"
// fill="#000000" stroke="none">
// <path d="M1001 2449 c-459 -53 -835 -377 -957 -824 -25 -92 -28 -118 -32 -331
// -4 -251 4 -328 54 -485 119 -376 418 -666 782 -760 131 -33 259 -44 370 -31
// 273 32 484 133 672 322 173 172 277 375 325 635 14 71 16 133 13 319 -4 213
// -7 239 -32 331 -124 453 -498 771 -971 825 -101 11 -119 11 -224 -1z m326
// -115 c254 -52 490 -212 637 -432 59 -89 98 -174 133 -287 25 -84 27 -103 27
// -270 1 -158 -2 -189 -22 -259 -108 -376 -367 -628 -752 -733 -50 -13 -103 -17
// -230 -17 -127 0 -180 4 -230 17 -385 105 -644 357 -752 733 -20 70 -23 101
// -22 259 0 167 2 186 27 270 70 228 191 404 372 538 156 116 314 176 525 201
// 56 6 209 -4 287 -20z m-854 -1898 c56 -39 61 -49 48 -94 -6 -22 -9 -21 -68 33
// -61 55 -169 189 -198 246 -10 18 17 -4 72 -59 49 -48 114 -105 146 -126z
// m1512 185 c-44 -87 -245 -311 -278 -311 -4 0 -7 18 -5 40 2 38 7 44 72 92 39
// 28 105 86 146 129 41 43 76 78 78 78 1 1 -4 -12 -13 -28z m-1269 -315 c83 -32
// 182 -56 299 -74 l50 -7 0 -55 0 -55 -50 4 c-84 6 -227 47 -313 90 l-82 41 0
// 45 c0 25 2 45 4 45 2 0 44 -15 92 -34z m892 -18 c-3 -42 -4 -44 -76 -81 -74
// -39 -213 -79 -309 -90 l-53 -6 0 58 0 59 65 7 c82 8 237 47 295 73 71 32 82
// 30 78 -20z"/>
// <path d="M995 2216 c-5 -2 -43 -11 -82 -21 -211 -48 -397 -178 -523 -365 -195
// -288 -189 -700 14 -984 235 -329 663 -457 1038 -310 195 76 380 249 468 436
// 129 275 105 614 -60 858 -123 182 -297 306 -515 366 -55 15 -313 30 -340 20z
// m311 -116 c226 -58 403 -200 507 -405 118 -235 108 -512 -25 -740 -53 -90
// -183 -220 -273 -273 -244 -144 -546 -144 -790 0 -90 53 -220 183 -273 273
// -133 228 -143 505 -25 740 103 204 280 346 503 404 105 28 270 28 376 1z"/>
// <path d="M630 1401 l0 -331 80 0 80 0 0 125 0 125 28 0 c25 -1 31 -10 83 -123
// l56 -122 91 -3 c51 -1 92 0 92 3 0 3 -30 64 -66 136 l-66 132 41 41 c22 22 45
// 54 50 69 25 66 5 155 -47 210 -53 56 -73 61 -254 65 l-168 4 0 -331z m297 167
// c29 -27 29 -65 1 -95 -18 -19 -32 -23 -80 -23 l-58 0 0 70 0 70 57 0 c44 0 62
// -5 80 -22z"/>
// <path d="M1220 1240 l0 -330 75 0 75 0 0 96 c0 88 2 95 18 89 74 -32 132 -30
// 190 5 52 32 65 75 65 221 0 154 -13 192 -83 227 -54 27 -101 28 -157 2 -43
// -19 -43 -19 -43 0 0 18 -7 20 -70 20 l-70 0 0 -330z m252 183 c25 -23 27 -177
// 1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
// </g>
// </svg>
// <p>{formatIncome(selectedItems?.report?.currentOutcome)}</p>
// <p>pengeluaran</p>
// </div>
// <div className={styles.cardImg}>
// <img
// src={selectedItems?.welcomePageConfig ?
// API_BASE_URL + "/" + (JSON.parse(selectedItems.welcomePageConfig)?.image || '') : 'https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg'
// }
// />
// <p>&nbsp;</p>
// <p>{selectedItems?.name}</p>
// </div>
// </div>
// )
// )}
// </div>
// </div>
// </div>
// <div className={styles.dashboardBody}>
// <button className={styles.goCafeButton} style={{ visibility: (selectedItems?.cafeId || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeId) == null ? 'hidden' : 'visible' }} onClick={() => window.location.href = window.location.origin + '/' + (selectedItems?.cafeIdentifyName || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeIdentifyName)}>Kunjungi kedai</button>
// <h3 style={{ color: 'black' }}>terlaku</h3>
// <div
// style={{
// display: "flex",
// alignItems: "center",
// justifyContent: "space-between",
// margin: '5px'
// }}
// >
// <div style={{ flex: 1 }}>
// <CircularDiagram segments={segments} />
// </div>
// <div style={{ flex: "1 1 20%" }}>
// {segments && segments.map((item, index) => (
// <div
// key={index}
// style={{
// display: "flex",
// alignItems: "center",
// }}
// >
// <div
// style={{
// marginRight: "5px",
// fontSize: "1.2em",
// color: colors[index],
// }}
// >
// ★
// </div>
// <h5 style={{ margin: 0, textAlign: "left", color: 'black' }}>{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}% &nbsp; {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>
// <DailyCharts Data={selectedItems?.report?.materialsPurchased || sortedMaterials} />
// {coupons && coupons.map((coupon) => {
// return <Coupon
// code={coupon?.code || null}
// value={coupon?.discountValue}
// period={coupon?.discountPeriods}
// expiration={coupon?.discountEndDate}
// />
// })}
// <button onClick={()=>setModal('claim-coupon')}></button>
// <div style={{ height: '24vh' }}></div>
// </div>
// </div>
// <div className={styles.cafeListWrapper}>
// <div className={styles.cafeListHeader}>
// Semua {user.roleId < 1 ? 'penyewa' : 'kedai anda'}
// </div>
// <div className={styles.cafeList}>
// </div>
// {user.roleId < 1 &&
// <div className={styles.rectangle}
// style={{ backgroundColor: selectedItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
// onClick={() => {
// setSelectedItemId(selectedItemId === -1 ? 0 : -1);
// setModal('create_tenant');
// }}
// >
// Tambah penyewa
// </div>
// }
// {
// items?.items?.length > 0 ? (
// items.items.map((item) => {
// const isTenantSelected = selectedItemId === (item.userId || item.cafeId);
// const tenantBackgroundColor = isTenantSelected && !selectedSubItemId ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)';
// const hasSubItems = item?.subItems?.length > 0;
// return (
// <div key={item.userId || item.cafeId}>
// <div
// onClick={() => {
// setSelectedItemId(isTenantSelected && !selectedSubItemId ? 0 : (item.userId || item.cafeId));
// setSelectedSubItemId(0); // Reset subitem selection when changing tenant
// }}
// style={{ backgroundColor: tenantBackgroundColor }}
// className={isTenantSelected ? styles.rectangleNLine : styles.rectangle}
// >
// <h3>{item.username || item.name} &nbsp;</h3>
// <h3>
// Rp{formatIncome(item.totalIncome || item.report?.currentTotals.income) || 0}
// </h3>
// </div>
// {/* Only show cafes if the tenant is selected */}
// {selectedItemId === (item.userId || item.cafeId) && hasSubItems && item.subItems.map((subItem) => {
// const isCafeSelected = selectedSubItemId == (subItem.cafeId || subItem.userId);
// const cafeBackgroundColor = isCafeSelected ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)';
// return (
// <div
// key={subItem.cafeId || subItem.userId}
// className={styles.subRectangle}
// onClick={() => {
// setSelectedSubItemId(isCafeSelected ? 0 : (subItem.cafeId || subItem.userId)); // Toggle subitem selection
// setSelectedItemId(item.userId || item.cafeId); // Ensure tenant stays selected
// }}
// style={{ backgroundColor: cafeBackgroundColor }}
// >
// {subItem.name || subItem.username}
// {/* &nbsp;pendapatan {formatIncome(subItem.report?.totalIncome || 0)} */}
// </div>
// );
// })}
// {selectedItemId == item.cafeId &&
// <div
// className={styles.subRectangle}
// onClick={() => { setSelectedSubItemId(selectedSubItemId == -1 ? 0 : -1); setModal('create_clerk') }}
// style={{ backgroundColor: selectedItemId == item.cafeId && selectedSubItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
// >
// tambah kasir
// </div>
// }
// </div>
// );
// })
// ) : (
// <div>No tenants available</div>
// )
// }
// {user.roleId > 0 &&
// <div className={styles.rectangle}
// style={{ backgroundColor: selectedItemId == -1 ? 'rgb(69, 69, 69)' : 'rgb(114, 114, 114)' }}
// onClick={() => { setSelectedItemId(selectedItemId == -1 ? 0 : -1); setModal('create_kedai') }}
// >
// Tambah kedai
// </div>
// }
// <div style={{ height: '2px' }}></div>
// </div>
// </>
<div> <div>
<div className={styles.header}> <div className={styles.header}>
@@ -878,20 +250,7 @@ const LinktreePage = ({ user, setModal }) => {
/> />
</div> </div>
<Reports forCafe={false} otherCafes={items?.items} /> <Reports forCafe={false} otherCafes={items?.items} coupons={coupons} setModal={setModal} user={user}/>
<div style={{ padding: '25px' }}>
<h2>Kupon</h2>
{coupons && coupons.map((coupon) => {
return <Coupon
code={coupon?.code || null}
value={coupon?.discountValue}
period={coupon?.discountPeriods}
expiration={coupon?.discountEndDate}
/>
})}
<button onClick={() => setModal('claim-coupon')}></button>
</div>
</div> </div>
) : ( ) : (
<div className={styles.centeredLinktreePage}> <div className={styles.centeredLinktreePage}>

10
src/pages/Join.js
View File

@@ -97,16 +97,16 @@ const LinktreePage = ({ data, setModal }) => {
onClick={() => setIsUsingCoupon(true)} onClick={() => setIsUsingCoupon(true)}
className={styles.footerLink} className={styles.footerLink}
> >
Gunakan kupon Gunakan Voucher
</a> </a>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<div className={styles.dashboardContainer}> <div className={styles.dashboardContainer}>
<div className={styles.mainHeading}>{isOnlyClaimCoupon ? 'Aktifkan Kupon' : 'Daftar Menggunakan Kupon'}</div> <div className={styles.mainHeading}>{isOnlyClaimCoupon ? 'Aktifkan Voucher' : 'Daftar Menggunakan Voucher'}</div>
<div className={styles.subHeading}> <div className={styles.subHeading}>
Kupon dapat digunakan untuk pembuatan akun penyewa maupun untuk memperpanjang masa berlangganan. Voucher dapat digunakan untuk pembuatan akun penyewa maupun untuk memperpanjang masa berlangganan.
</div> </div>
{couponStatus === 0 ? ( {couponStatus === 0 ? (
<form className={styles.linktreeForm} onSubmit={(e) => e.preventDefault()}> <form className={styles.linktreeForm} onSubmit={(e) => e.preventDefault()}>
@@ -115,7 +115,7 @@ const LinktreePage = ({ data, setModal }) => {
</label> </label>
<input <input
id="coupon" id="coupon"
placeholder="kode kupon" placeholder="Kode Voucher"
maxLength="30" maxLength="30"
className={styles.usernameInput} className={styles.usernameInput}
value={couponCode} value={couponCode}
@@ -152,7 +152,7 @@ const LinktreePage = ({ data, setModal }) => {
} }
}} }}
> >
<span>{isOnlyClaimCoupon ? 'Aktifkan untuk akun ini' : 'Buat akun dengan kupon ini'}</span> <span>{isOnlyClaimCoupon ? 'Aktifkan untuk akun ini' : 'Buat akun dengan voucher ini'}</span>
</button> </button>
</div> </div>

134
src/pages/Reports.js
View File

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

16
src/pages/Transactions.module.css
View File

@@ -327,3 +327,19 @@
color: black; color: black;
z-index: 2; z-index: 2;
} }
.couponContainer {
padding: 25px;
transition: margin-top 0.3s ease;
}
.addCoupon {
border: 2px solid #ccc;
background-color: #f8f8f8;
border-radius: 8px;
font-family: Arial, sans-serif;
align-items: center;
margin-bottom: 10px;
width: 100%;
height: 52px;
}