/home/kueuepay/public_html/storage/framework/views/101725e5e7bfc9aae09777909a7d6103a7a1f7cb.php
<?php $__env->startSection('breadcrumb'); ?>
<?php echo $__env->make('user.components.breadcrumb',[
'breadcrumbs' => [
[
'name' => __("Dashboard"),
'url' => setRoute("user.dashboard"),
]
],
'active' => __($page_title)
], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
<div class="body-wrapper">
<div class="dashboard-wallet">
<div class="row flex-row-reverse">
<div class="col-lg-4 col-md-6">
<div class="dashboard-virtualcard-item">
<div class="dash-virtualCard-wrapper">
<div class="header-area">
<h6 class="label"><?php echo e(__("Default Card")); ?></h6>
<a href="<?php echo e(setRoute('user.card.index')); ?>" class="view-btn"><?php echo e(__("View All")); ?> <i class="las la-arrow-right"></i></a>
</div>
<div class="virtualCard-slider">
<div class="swiper-wrapper ">
<?php if(!empty($card_payments)): ?>
<?php
$name = decrypt($card_payments->name) ?? '';
$card_number = decrypt($card_payments->card_number) ?? '';
$card_cvc = decrypt($card_payments->card_cvc) ?? '';
$expiry_date = decrypt($card_payments->expiry_date) ?? '';
?>
<div class="swiper-slide card<?php echo e(@$card_payments->id); ?>">
<a href="#0" class="virtualCard-item mx-auto bg_img"
data-background="<?php echo e(asset('public/frontend')); ?>/images/element/card.webp">
<div class="logo-wrapper">
<div class="brand-logo">
<img src="<?php echo e(get_logo($basic_settings)); ?>" alt="logo">
</div>
<div class="card-logo">
<img src="<?php echo e(get_fav($basic_settings)); ?>" alt="logo">
</div>
</div>
<div class="card-number-wrapper" data-full-number="<?php echo e(@$card_number); ?>"
onclick="toggleCardNumber()">
<span>********<?php echo e(substr($card_number, -4)); ?></span>
</div>
<div class="bottom-wrapper">
<div class="holder-name">
<span class="label"><?php echo e(__("Card Holder Name")); ?></span>
<h4 class="name"><?php echo e(@$name); ?></h4>
</div>
<div class="date-wrapper">
<span class="label"><?php echo e(__("Valid Till")); ?></span>
<h4 class="date"><?php echo e(@$expiry_date); ?></h4>
</div>
</div>
</a>
</div>
<?php else: ?>
<div class="alert alert-primary no-card">
<p><?php echo e(__("No Active Card Available!")); ?></p>
</div>
<?php endif; ?>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="recent-transaction-wrapper">
<div class="header-area">
<h6 class="label"><?php echo e(__("Latest Transactions")); ?></h6>
</div>
<ul class="recent-transaction-list card-details" id="card<?php echo e(@$card_payments->id); ?>-details">
</ul>
</div>
</div>
</div>
<div class="col-lg-8 col-md-6 mb-40">
<div class="dashboard-card-item mb-60">
<div class="row mb-20-none">
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-12 col-sm-6 mb-20">
<div class="wallet-item">
<div class="wallet-details">
<p><?php echo e(__("Wallet Balance")); ?></p>
<h4 class="title"><?php echo e(get_amount(@$user_wallet->balance,@$user_wallet->currency->code)); ?></h4>
</div>
<div class="country-flag">
<img src="<?php echo e(get_image(@$user_wallet->currency->flag,'currency-flag')); ?>" alt="flag">
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-12 col-sm-6 mb-20">
<div class="wallet-item">
<div class="wallet-details">
<p><?php echo e(__("Total Transactions")); ?></p>
<h4 class="title"><?php echo e(@$total_transactions); ?></h4>
</div>
<div class="icon">
<i class="las la-dollar-sign"></i>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-12 col-sm-6 mb-20">
<div class="wallet-item">
<div class="wallet-details">
<p><?php echo e(__("Save Cards")); ?></p>
<h4 class="title"><?php echo e(@$total_cards); ?></h4>
</div>
<div class="icon">
<i class="las la-credit-card"></i>
</div>
</div>
</div>
</div>
</div>
<div class="dashboard-chart">
<div class="chart-wrapper">
<div class="dashboard-header-wrapper">
<h4 class="title"><?php echo e(__("Transaction Overview")); ?></h4>
</div>
<div class="chart-container">
<div id="chart-area">
</div>
<div id="chart-bar">
</div>
</div>
</div>
</div>
<div class="dashboard-list-area mt-30">
<div class="dashboard-header-wrapper">
<h4 class="title"><?php echo e(__("Latest Transactions")); ?></h4>
</div>
<?php echo $__env->make('user.components.transaction.index',[
'data' => $transactions
], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
</div>
</div>
</div>
</div>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startPush('script'); ?>
<script src="<?php echo e(asset('public/frontend/js/apexcharts.js')); ?>"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Initialize Swiper
var swiper = new Swiper(".virtualCard-slider", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
speed: 1000,
breakpoints: {
1199: {
slidesPerView: 1,
},
991: {
slidesPerView: 1,
},
767: {
slidesPerView: 1,
},
575: {
slidesPerView: 1,
},
},
});
// Show the first card's details on page load
let initialCardId = !empty($card_payments) ? $card_payments[0]->id : null;
document.getElementById(`card${initialCardId}-details`).style.display = 'block';
// Handle slide change to show corresponding details
swiper.on('slideChange', function () {
var activeSlideIndex = swiper.realIndex; // Get active slide index
var cardId = <?php echo json_encode($card_payments, 15, 512) ?>[activeSlideIndex].id; // Get the card ID
// Hide all card details
document.querySelectorAll('.card-details').forEach(function (el) {
el.style.display = 'none';
});
// Show details of the active card
document.getElementById(`card${cardId}-details`).style.display = 'block';
// Fetch and update the transactions
fetchTransactions(cardId);
});
function fetchTransactions(cardId) {
const url = `<?php echo e(url('/user/card')); ?>/${cardId}/transactions`;
fetch(url)
.then(response => response.json())
.then(data => {
const transactionList = document.getElementById(`card${cardId}-details`);
transactionList.innerHTML = '';
data.forEach(transaction => {
const li = document.createElement('li');
li.innerHTML = `
<div class="icon-area">
<i class="fas fa-plus-circle"></i>
<div class="title-wrapper">
<h6 class="label">${transaction.type}</h6>
<span>${transaction.trx_id}</span>
</div>
</div>
<div class="content">
<h6 class="amount">${transaction.request_amount}</h6>
<span class="date">At ${new Date(transaction.created_at).toLocaleTimeString()}</span>
</div>`;
transactionList.appendChild(li);
});
})
.catch(error => console.error('Error fetching transactions:', error));
}
// Toggle card number display
let timer;
function toggleCardNumber() {
const cardNumberWrappers = document.getElementsByClassName('card-number-wrapper');
for (let cardNumberWrapper of cardNumberWrappers) {
const fullCardNumber = cardNumberWrapper.getAttribute('data-full-number');
const hiddenCardNumber = fullCardNumber.split(' ').map((num, index) => index < 3 ? '****' : num).join(' ');
if (cardNumberWrapper.innerHTML.includes('****')) {
cardNumberWrapper.innerHTML = fullCardNumber.split(' ').map(num => `<span>${num}</span>`).join('');
timer = setTimeout(() => {
cardNumberWrapper.innerHTML = hiddenCardNumber.split(' ').map(num => `<span>${num}</span>`).join('');
}, 5000);
} else {
clearTimeout(timer);
cardNumberWrapper.innerHTML = hiddenCardNumber.split(' ').map(num => `<span>${num}</span>`).join('');
}
}
}
});
</script>
<script>
var addMoneyCount = <?php echo json_encode($add_money, 15, 512) ?>;
var transferMoneyCount = <?php echo json_encode($transfer_money, 15, 512) ?>;
var cardPaymentCount = <?php echo json_encode($card_payment, 15, 512) ?>;
function getFirstDayOfMonth() {
var today = new Date();
return new Date(today.getFullYear(), today.getMonth(), 1).getTime();
}
function generateDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = baseval;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push([x, y]);
baseval += 86400000;
i++;
}
return series;
}
var startOfMonth = getFirstDayOfMonth();
var data = generateDayWiseTimeSeries(startOfMonth, 30, { min: 30, max: 90 });
var options1 = {
chart: {
id: "chart2",
type: "area",
height: 230,
foreColor: "#ccc",
toolbar: {
autoSelected: "pan",
show: false
}
},
colors: ["#0070e0"],
stroke: {
width: 3
},
grid: {
borderColor: "#0070e0",
clipMarkers: false,
yaxis: {
lines: {
show: false
}
}
},
dataLabels: {
enabled: false
},
fill: {
gradient: {
enabled: true,
opacityFrom: 0.55,
opacityTo: 0
}
},
markers: {
size: 5,
colors: ["#000524"],
strokeColor: "#00BAEC",
strokeWidth: 3
},
series: [
{
name: "<?php echo e(__('Add Money')); ?>",
data: [{ x: new Date().getTime(), y: addMoneyCount }]
},
{
name: "<?php echo e(__('Transfer Money')); ?>",
data: [{ x: new Date().getTime(), y: transferMoneyCount }]
},
{
name: "<?php echo e(__('Payments')); ?>",
data: [{ x: new Date().getTime(), y: cardPaymentCount }]
}
],
tooltip: {
theme: "dark"
},
xaxis: {
type: "datetime"
},
yaxis: {
min: 0,
tickAmount: 4
}
};
var chart1 = new ApexCharts(document.querySelector("#chart-area"), options1);
chart1.render();
var options2 = {
chart: {
id: "chart1",
height: 130,
type: "bar",
foreColor: "#ccc",
brush: {
target: "chart2",
enabled: true
},
selection: {
enabled: true,
fill: {
color: "#fff",
opacity: 0.4
},
xaxis: {
min: startOfMonth,
max: new Date().getTime()
}
}
},
colors: ["#0070e0"],
series: [
{
name: "<?php echo e(__('Add Money')); ?>",
data: [{ x: new Date().getTime(), y: addMoneyCount }]
},
{
name: "<?php echo e(__('Transfer Money')); ?>",
data: [{ x: new Date().getTime(), y: transferMoneyCount }]
},
{
name: "<?php echo e(__('Payments')); ?>",
data: [{ x: new Date().getTime(), y: cardPaymentCount }]
}
],
stroke: {
width: 2
},
grid: {
borderColor: "#444"
},
markers: {
size: 0
},
xaxis: {
type: "datetime",
tooltip: {
enabled: false
}
},
yaxis: {
tickAmount: 2
}
};
var chart2 = new ApexCharts(document.querySelector("#chart-bar"), options2);
chart2.render();
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('user.layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/kueuepay/public_html/resources/views/user/dashboard.blade.php ENDPATH**/ ?>
Service
top
Our Services: Streamlining Your Payment Experience with Excellence
Discover how our services are designed to enhance your NFC Pay experience with convenience, security, and innovative solutions. From managing transactions to secure payments, we are dedicated to providing seamless support every step of the way.
Secure Card Storage
Easily save your credit and debit card details within our app for quick and secure transactions. This feature ensures that your payment information is protected with advanced encryption and can be used for future purchases with just a tap.
Effortless Money Transfers
Transfer funds quickly and securely between users with our streamlined money transfer service. Simply select the recipient, enter the amount, and authorize the transaction for instant, hassle-free transfers.
Merchant Account Setup
Activate your merchant account effortlessly to start receiving payments. Our intuitive setup process ensures that you can begin accepting transactions smoothly, helping your business thrive with minimal setup time.
Real-Time Transaction Tracking
Keep track of all your transactions in real time through our app. Monitor payment statuses, view transaction history, and manage your account efficiently, ensuring complete control over your financial activities.
Customer Support
Our dedicated support team is available to assist you with any queries or issues. Whether you need help with setting up your account or resolving transaction-related questions, we’re here to provide prompt and reliable assistance.
In the digital age, privacy concerns have become increasingly paramount, prompting the European Union to enact the General Data Protection Regulation (GDPR) in 2018. Among its many provisions, GDPR sets strict guidelines for the collection and processing of personal data, including the use of cookies on websites. Privacy Policy
Allow
Decline
