/home/kueuepay/www/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**/ ?>
About
top
About NFC Pay: Our Story and Mission
NFC Pay was founded with a vision to transform the way people handle transactions. Our journey is defined by a commitment to innovation, security, and convenience. We strive to deliver seamless, user-friendly payment solutions that make everyday transactions effortless and secure. Our mission is to empower you to pay with ease and confidence, anytime, anywhere.
Simplifying Payments, One Tap at a Time.
Reinventing Your Wallet for Modern Convenience.
Smart Payments for a Effortless Lifestyle.
Experience the Ease of Tap and Pay.
Innovative Solutions for Your Daily Transactions.
Frequently Asked Questions About NFC Pay
Here are answers to some common questions about NFC Pay. We aim to provide clear and concise information to help you understand how our platform works and how it can benefit you. If you have any further inquiries, please don’t hesitate to contact our support team.
How do I register for NFC Pay?
Download the app and sign up using your email or phone number, then complete the verification process.
Is my payment information secure?
Yes, we use advanced encryption and security protocols to protect your payment details.
Can I add multiple cards to my NFC Pay wallet?
Absolutely, you can link multiple debit or credit cards to your wallet.
How do I transfer money to another user?
Go to the transfer section, select the recipient, enter the amount, and authorize the transfer.
What should I do if I forget my PIN?
Use the “Forgot PIN” feature in the app to reset it following the provided instructions.
How can I activate my merchant account?
Sign up for a merchant account through the app and follow the setup instructions to start accepting payments.
Can I track my payment status?
Yes, you can view and track your payment status in the account dashboard
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
