/home/kueuepay/public_html/resources/views/user/dashboard.blade.php
@extends('user.layouts.master')
@section('breadcrumb')
@include('user.components.breadcrumb',[
'breadcrumbs' => [
[
'name' => __("Dashboard"),
'url' => setRoute("user.dashboard"),
]
],
'active' => __($page_title)
])
@endsection
@section('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">{{ __("Default Card") }}</h6>
<a href="{{ setRoute('user.card.index') }}" class="view-btn">{{ __("View All") }} <i class="las la-arrow-right"></i></a>
</div>
<div class="virtualCard-slider">
<div class="swiper-wrapper ">
@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) ?? '';
@endphp
<div class="swiper-slide card{{ @$card_payments->id }}">
<a href="#0" class="virtualCard-item mx-auto bg_img"
data-background="{{ asset('public/frontend') }}/images/element/card.webp">
<div class="logo-wrapper">
<div class="brand-logo">
<img src="{{ get_logo($basic_settings) }}" alt="logo">
</div>
<div class="card-logo">
<img src="{{ get_fav($basic_settings) }}" alt="logo">
</div>
</div>
<div class="card-number-wrapper" data-full-number="{{ @$card_number }}"
onclick="toggleCardNumber()">
<span>********{{ substr($card_number, -4) }}</span>
</div>
<div class="bottom-wrapper">
<div class="holder-name">
<span class="label">{{ __("Card Holder Name") }}</span>
<h4 class="name">{{ @$name }}</h4>
</div>
<div class="date-wrapper">
<span class="label">{{ __("Valid Till") }}</span>
<h4 class="date">{{ @$expiry_date }}</h4>
</div>
</div>
</a>
</div>
@else
<div class="alert alert-primary no-card">
<p>{{ __("No Active Card Available!") }}</p>
</div>
@endif
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="recent-transaction-wrapper">
<div class="header-area">
<h6 class="label">{{ __("Latest Transactions") }}</h6>
</div>
<ul class="recent-transaction-list card-details" id="card{{ @$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>{{ __("Wallet Balance") }}</p>
<h4 class="title">{{ get_amount(@$user_wallet->balance,@$user_wallet->currency->code) }}</h4>
</div>
<div class="country-flag">
<img src="{{ 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>{{ __("Total Transactions") }}</p>
<h4 class="title">{{ @$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>{{ __("Save Cards") }}</p>
<h4 class="title">{{ @$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">{{ __("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">{{ __("Latest Transactions") }}</h4>
</div>
@include('user.components.transaction.index',[
'data' => $transactions
])
</div>
</div>
</div>
</div>
</div>
@endsection
@push('script')
<script src="{{ 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 = @json($card_payments)[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 = `{{ 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 = @json($add_money);
var transferMoneyCount = @json($transfer_money);
var cardPaymentCount = @json($card_payment);
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: "{{ __('Add Money') }}",
data: [{ x: new Date().getTime(), y: addMoneyCount }]
},
{
name: "{{ __('Transfer Money') }}",
data: [{ x: new Date().getTime(), y: transferMoneyCount }]
},
{
name: "{{ __('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: "{{ __('Add Money') }}",
data: [{ x: new Date().getTime(), y: addMoneyCount }]
},
{
name: "{{ __('Transfer Money') }}",
data: [{ x: new Date().getTime(), y: transferMoneyCount }]
},
{
name: "{{ __('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>
@endpush
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
