CasperSecurity
<x-app-layout>
<x-slot name="pageheader">
<li><h5 class="sm:text-[17px] text-[15px] mr-8">Dashboard</h5></li>
</x-slot>
<div class="row">
<div class="2xl:w-3/4 w-full">
<div class="row">
<div class="xl:w-1/4 sm:w-1/2 w-full">
<div class="card chart-grd same-card overflow-hidden relative">
<div class="card-body depostit-card p-0">
<div class="depostit-card-media flex justify-between px-5 pt-[18px] relative z-[1]">
<div>
<h6 class="font-normal">Total Income</h6>
<h3 class="font-semibold leading-[1.346]">₹1,20,000</h3>
</div>
<div class="icon-box bg-primary-light h-[2.5rem] w-[2.5rem] relative flex items-center justify-center rounded-md">
<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4642 13.7074C11.4759 12.1252 10.8504 10.8738 9.60279 9.99009C8.6392 9.30968 7.46984 8.95476 6.33882 8.6137C3.98274 7.89943 3.29927 7.52321 3.29927 6.3965C3.29927 5.14147 4.93028 4.69493 6.32655 4.69493C7.34341 4.69493 8.51331 5.01109 9.23985 5.47964L10.6802 3.24887C9.73069 2.6333 8.43112 2.21342 7.14783 2.0831V0H4.49076V2.22918C2.12884 2.74876 0.640949 4.29246 0.640949 6.3965C0.640949 7.87005 1.25327 9.03865 2.45745 9.86289C3.37331 10.4921 4.49028 10.83 5.56927 11.1572C7.88027 11.8557 8.81873 12.2813 8.80805 13.691L8.80799 13.7014C8.80799 14.8845 7.24005 15.3051 5.89676 15.3051C4.62786 15.3051 3.248 14.749 2.46582 13.9222L0.535522 15.7481C1.52607 16.7957 2.96523 17.5364 4.4907 17.8267V20.0001H7.14783V17.8735C9.7724 17.4978 11.4616 15.9177 11.4642 13.7074Z" fill="var(--primary)"/>
</svg>
</div>
</div>
<div id="NewCustomers"></div>
</div>
</div>
</div>
<div class="xl:w-1/4 sm:w-1/2 w-full">
<div class="card chart-grd same-card overflow-hidden relative">
<div class="card-body depostit-card p-0">
<div class="depostit-card-media flex justify-between px-5 pt-[18px] relative z-[1]">
<div>
<h6 class="font-normal">Total Expenses</h6>
<h3 class="font-semibold leading-[1.346]">₹85,000</h3>
</div>
<div class="icon-box bg-primary-light h-[2.5rem] w-[2.5rem] relative flex items-center justify-center rounded-md">
<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4642 13.7074C11.4759 12.1252 10.8504 10.8738 9.60279 9.99009C8.6392 9.30968 7.46984 8.95476 6.33882 8.6137C3.98274 7.89943 3.29927 7.52321 3.29927 6.3965C3.29927 5.14147 4.93028 4.69493 6.32655 4.69493C7.34341 4.69493 8.51331 5.01109 9.23985 5.47964L10.6802 3.24887C9.73069 2.6333 8.43112 2.21342 7.14783 2.0831V0H4.49076V2.22918C2.12884 2.74876 0.640949 4.29246 0.640949 6.3965C0.640949 7.87005 1.25327 9.03865 2.45745 9.86289C3.37331 10.4921 4.49028 10.83 5.56927 11.1572C7.88027 11.8557 8.81873 12.2813 8.80805 13.691L8.80799 13.7014C8.80799 14.8845 7.24005 15.3051 5.89676 15.3051C4.62786 15.3051 3.248 14.749 2.46582 13.9222L0.535522 15.7481C1.52607 16.7957 2.96523 17.5364 4.4907 17.8267V20.0001H7.14783V17.8735C9.7724 17.4978 11.4616 15.9177 11.4642 13.7074Z" fill="var(--primary)"/>
</svg>
</div>
</div>
<div id="NewCustomers"></div>
</div>
</div>
</div>
<div class="xl:w-1/4 sm:w-1/2 w-full">
<div class="card chart-grd same-card overflow-hidden relative">
<div class="card-body depostit-card p-0">
<div class="depostit-card-media flex justify-between px-5 pt-[18px] relative z-[1]">
<div>
<h6 class="font-normal">Available Funds</h6>
<h3 class="font-semibold leading-[1.346]">₹35,000</h3>
</div>
<div class="icon-box bg-danger-light h-[2.5rem] w-[2.5rem] relative flex items-center justify-center rounded-md">
<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4642 13.7074C11.4759 12.1252 10.8504 10.8738 9.60279 9.99009C8.6392 9.30968 7.46984 8.95476 6.33882 8.6137C3.98274 7.89943 3.29927 7.52321 3.29927 6.3965C3.29927 5.14147 4.93028 4.69493 6.32655 4.69493C7.34341 4.69493 8.51331 5.01109 9.23985 5.47964L10.6802 3.24887C9.73069 2.6333 8.43112 2.21342 7.14783 2.0831V0H4.49076V2.22918C2.12884 2.74876 0.640949 4.29246 0.640949 6.3965C0.640949 7.87005 1.25327 9.03865 2.45745 9.86289C3.37331 10.4921 4.49028 10.83 5.56927 11.1572C7.88027 11.8557 8.81873 12.2813 8.80805 13.691L8.80799 13.7014C8.80799 14.8845 7.24005 15.3051 5.89676 15.3051C4.62786 15.3051 3.248 14.749 2.46582 13.9222L0.535522 15.7481C1.52607 16.7957 2.96523 17.5364 4.4907 17.8267V20.0001H7.14783V17.8735C9.7724 17.4978 11.4616 15.9177 11.4642 13.7074Z" fill="#FF5E5E"/>
</svg>
</div>
</div>
<div id="NewExperience"></div>
</div>
</div>
</div>
<div class="xl:w-1/4 sm:w-1/2 w-full">
<div class="card chart-grd same-card overflow-hidden relative">
<div class="card-body depostit-card p-0">
<div class="depostit-card-media flex justify-between px-5 pt-[18px] relative z-[1]">
<div>
<h6 class="font-normal">Dues Pending</h6>
<h3 class="font-semibold leading-[1.346]">₹15,000</h3>
</div>
<div class="icon-box bg-danger-light h-[2.5rem] w-[2.5rem] relative flex items-center justify-center rounded-md">
<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4642 13.7074C11.4759 12.1252 10.8504 10.8738 9.60279 9.99009C8.6392 9.30968 7.46984 8.95476 6.33882 8.6137C3.98274 7.89943 3.29927 7.52321 3.29927 6.3965C3.29927 5.14147 4.93028 4.69493 6.32655 4.69493C7.34341 4.69493 8.51331 5.01109 9.23985 5.47964L10.6802 3.24887C9.73069 2.6333 8.43112 2.21342 7.14783 2.0831V0H4.49076V2.22918C2.12884 2.74876 0.640949 4.29246 0.640949 6.3965C0.640949 7.87005 1.25327 9.03865 2.45745 9.86289C3.37331 10.4921 4.49028 10.83 5.56927 11.1572C7.88027 11.8557 8.81873 12.2813 8.80805 13.691L8.80799 13.7014C8.80799 14.8845 7.24005 15.3051 5.89676 15.3051C4.62786 15.3051 3.248 14.749 2.46582 13.9222L0.535522 15.7481C1.52607 16.7957 2.96523 17.5364 4.4907 17.8267V20.0001H7.14783V17.8735C9.7724 17.4978 11.4616 15.9177 11.4642 13.7074Z" fill="#FF5E5E"/>
</svg>
</div>
</div>
<div id="NewExperience"></div>
</div>
</div>
</div>
<div class="xl:w-2/3 w-full">
<div class="card overflow-hidden flex flex-col">
<!-- Header -->
<div class="card-header flex justify-between items-center sm:pt-6 pt-5 sm:px-5 px-4 flex-wrap">
<h4 class="heading">Monthwise Bank Balance</h4>
<ul class="flex flex-wrap max-sm:mt-2.5 gap-2" id="bankBalanceTabs">
<li>
<button class="tab-btn active" data-series="week">Week</button>
</li>
<li>
<button class="tab-btn" data-series="month">Month</button>
</li>
<li>
<button class="tab-btn" data-series="year">Year</button>
</li>
<li>
<button class="tab-btn" data-series="all">All</button>
</li>
</ul>
</div>
<!-- Body -->
<div class="card-body">
<div id="bankBalanceChart"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const chartData = {
week: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
data: [120000, 125000, 118000, 130000, 128000, 135000]
},
month: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
data: [850000, 820000, 900000, 880000, 910000, 950000]
},
year: {
categories: ['2021', '2022', '2023', '2024', '2025'],
data: [4200000, 4500000, 4700000, 5200000, 5800000]
},
all: {
categories: ['2019','2020','2021','2022','2023','2024','2025'],
data: [3000000, 3400000, 4200000, 4500000, 4700000, 5200000, 5800000]
}
};
const options = {
chart: {
type: 'area',
height: 320,
toolbar: { show: false }
},
series: [{
name: 'Bank Balance',
data: chartData.week.data
}],
xaxis: {
categories: chartData.week.categories
},
dataLabels: { enabled: false },
stroke: {
curve: 'smooth',
width: 3
},
tooltip: {
y: {
formatter: val => "₹ " + val.toLocaleString('en-IN')
}
}
};
const chart = new ApexCharts(
document.querySelector("#bankBalanceChart"),
options
);
chart.render();
// Tab switch logic
document.querySelectorAll(".tab-btn").forEach(btn => {
btn.addEventListener("click", function () {
document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
this.classList.add("active");
const seriesKey = this.dataset.series;
chart.updateOptions({
xaxis: {
categories: chartData[seriesKey].categories
},
series: [{
data: chartData[seriesKey].data
}]
});
});
});
});
</script>
<div class="xl:w-1/3 w-full">
<div class="card overflow-hidden flex flex-col h-full">
<!-- Header -->
<div class="card-header flex justify-between items-center sm:pt-6 py-5 sm:px-5 px-4">
<h4 class="heading">Sundry Creditors Balance Due</h4>
<a href="javascript:void(0);" class="text-primary text-sm">View All</a>
</div>
<!-- Body -->
<div class="card-body">
<div id="sundryCreditorsChart"></div>
<!-- Summary -->
<div class="grid grid-cols-2 gap-4 mt-6 text-center">
<div>
<h5 class="text-danger text-lg font-semibold">₹4,80,000</h5>
<span class="text-sm text-body-color">Total Due</span>
</div>
<div>
<h5 class="text-primary text-lg font-semibold">6</h5>
<span class="text-sm text-body-color">Creditors</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const options = {
chart: {
type: 'donut',
height: 320
},
series: [120000, 95000, 78000, 65000, 72000, 50000],
labels: [
'Vendor A',
'Vendor B',
'Stationery Supplier',
'Canteen Vendor',
'Hostel Supplier',
'Misc Vendor'
],
colors: ['#ef4444', '#f97316', '#eab308', '#22c55e', '#0ea5e9', '#6366f1'],
legend: {
position: 'bottom'
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val.toFixed(1) + "%"
}
},
tooltip: {
y: {
formatter: function (value) {
return "₹ " + value.toLocaleString('en-IN');
}
}
}
};
const chart = new ApexCharts(
document.querySelector("#sundryCreditorsChart"),
options
);
chart.render();
});
</script>
</div>
</div>
<div class="2xl:w-1/4 w-full">
<div class="card overflow-hidden relative flex flex-col">
<!-- Header -->
<div class="px-5 pt-6">
<h4 class="text-lg font-semibold">Monthwise Income</h4>
</div>
<!-- Body -->
<div class="py-5">
<div class="text-center">
<h2 id="earningTotal" class="text-[38px] font-semibold mb-2">
₹6,743.00
</h2>
<!-- Chart -->
<div id="earningChart" class="h-[200px]"></div>
</div>
</div>
</div>
</div>
</div>
</x-app-layout>