@extends('layouts.master')
@section('title', 'Dashboard')
@section('content')
    {{-- Page Title --}}
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-amber-900">Transactions Overview</h1>
        {{--<a href="#" class="bg-amber-700 hover:bg-amber-800 text-white text-sm px-4 py-2 rounded shadow">
            <i class="fas fa-plus mr-1"></i> New Transaction
        </a>--}}
    </div>
    {{-- Stats Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-6">
        <!-- Card 1 -->
        <div class="bg-white shadow rounded-lg p-4 animate-pulse">
            <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
            <div class="h-8 bg-gray-200 rounded w-1/2"></div>
        </div>

        <!-- Card 2 -->
        <div class="bg-white shadow rounded-lg p-4 animate-pulse">
            <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
            <div class="h-8 bg-gray-200 rounded w-1/2"></div>
        </div>

        <!-- Card 3 -->
        <div class="bg-white shadow rounded-lg p-4 animate-pulse">
            <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
            <div class="h-8 bg-gray-200 rounded w-1/2"></div>
        </div>

        <!-- Card 4 -->
        <div class="bg-white shadow rounded-lg p-4 animate-pulse">
            <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
            <div class="h-8 bg-gray-200 rounded w-1/2"></div>
        </div>
    </div>


@endsection
@push('scripts')

@endpush