<?php include 'header.php'; ?>

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Remix Icons -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">

    <!-- ApexCharts -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <style>

        body{
            font-family:Inter,sans-serif;
            background:#f4f7fb;
        }

        .dashboard-card{
            background:#fff;
            border:1px solid #edf2f7;
            border-radius:24px;
            box-shadow:0 4px 18px rgba(15,23,42,.05);
            transition:.3s;
        }

        .dashboard-card:hover{
            transform:translateY(-3px);
            box-shadow:0 15px 35px rgba(15,23,42,.08);
        }

        .icon-box{
            width:56px;
            height:56px;
            border-radius:18px;
            display:flex;
            align-items:center;
            justify-content:center;
            flex-shrink:0;
        }

        .quick-btn{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:115px;
            border-radius:22px;
            border:1px solid #edf2f7;
            background:#f8fafc;
            transition:.3s;
            padding:16px;
        }

        .quick-btn:hover{
            transform:translateY(-3px);
            background:#fff;
            box-shadow:0 12px 30px rgba(15,23,42,.08);
        }

        .table-badge{
            padding:5px 12px;
            border-radius:999px;
            font-size:11px;
            font-weight:700;
        }

    </style>

</head>

<body>

<div class="max-w-[1850px] mx-auto px-3 md:px-6 py-5">

    <!-- PAGE HEADER -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">

        <div>

            <h1 class="text-3xl font-bold text-slate-800">
                Accounts Dashboard
            </h1>

            <p class="text-sm text-slate-500 mt-1">
                Complete accounting, finance & transaction management
            </p>

        </div>

        <div class="flex items-center gap-3">

            <button class="h-11 px-5 rounded-2xl bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 transition">
                Export Reports
            </button>

            <button class="h-11 px-5 rounded-2xl border border-slate-200 bg-white text-sm font-semibold text-slate-700">
                This Month
            </button>

        </div>

    </div>

    <!-- TOP STATS -->
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-5">

        <!-- REVENUE -->
        <div class="dashboard-card p-5">

            <div class="flex items-start justify-between">

                <div>

                    <p class="text-sm text-slate-500 font-medium">
                        Total Revenue
                    </p>

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        ₹24.8L
                    </h2>

                    <p class="text-sm text-emerald-600 font-semibold mt-3">
                        +18% Growth
                    </p>

                </div>

                <div class="icon-box bg-emerald-50">
                    <i class="ri-money-rupee-circle-fill text-2xl text-emerald-600"></i>
                </div>

            </div>

        </div>

        <!-- EXPENSE -->
        <div class="dashboard-card p-5">

            <div class="flex items-start justify-between">

                <div>

                    <p class="text-sm text-slate-500 font-medium">
                        Total Expenses
                    </p>

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        ₹8.4L
                    </h2>

                    <p class="text-sm text-red-500 font-semibold mt-3">
                        Monthly Expense
                    </p>

                </div>

                <div class="icon-box bg-red-50">
                    <i class="ri-wallet-3-fill text-2xl text-red-500"></i>
                </div>

            </div>

        </div>

        <!-- OUTSTANDING -->
        <div class="dashboard-card p-5">

            <div class="flex items-start justify-between">

                <div>

                    <p class="text-sm text-slate-500 font-medium">
                        Outstanding
                    </p>

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        ₹3.6L
                    </h2>

                    <p class="text-sm text-amber-500 font-semibold mt-3">
                        Pending Payments
                    </p>

                </div>

                <div class="icon-box bg-amber-50">
                    <i class="ri-error-warning-fill text-2xl text-amber-500"></i>
                </div>

            </div>

        </div>

        <!-- SALES -->
        <div class="dashboard-card p-5">

            <div class="flex items-start justify-between">

                <div>

                    <p class="text-sm text-slate-500 font-medium">
                        Sales Invoice
                    </p>

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        186
                    </h2>

                    <p class="text-sm text-blue-600 font-semibold mt-3">
                        Generated
                    </p>

                </div>

                <div class="icon-box bg-blue-50">
                    <i class="ri-file-list-3-fill text-2xl text-blue-600"></i>
                </div>

            </div>

        </div>

        <!-- PROFIT -->
        <div class="dashboard-card p-5">

            <div class="flex items-start justify-between">

                <div>

                    <p class="text-sm text-slate-500 font-medium">
                        Profit Margin
                    </p>

                    <h2 class="text-4xl font-bold text-slate-800 mt-3">
                        42%
                    </h2>

                    <p class="text-sm text-purple-600 font-semibold mt-3">
                        Net Profit
                    </p>

                </div>

                <div class="icon-box bg-purple-50">
                    <i class="ri-line-chart-fill text-2xl text-purple-600"></i>
                </div>

            </div>

        </div>

    </div>

    <!-- ANALYTICS -->
    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-5 mt-6">

        <!-- CLIENT MANAGEMENT -->
        <div class="dashboard-card p-5">

            <div class="flex items-center justify-between mb-5">

                <div>

                    <h2 class="text-lg font-bold text-slate-800">
                        Client Management
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Active clients overview
                    </p>

                </div>

                <div class="icon-box bg-violet-50">
                    <i class="ri-team-fill text-2xl text-violet-600"></i>
                </div>

            </div>

            <div class="flex items-end justify-between mb-5">

                <div>

                    <h3 class="text-4xl font-bold text-slate-800">
                        248
                    </h3>

                    <p class="text-sm text-emerald-600 font-semibold mt-2">
                        +18 New Clients
                    </p>

                </div>

                <div>

                    <p class="text-xs text-slate-400">
                        Vendors
                    </p>

                    <h4 class="text-2xl font-bold text-slate-700">
                        54
                    </h4>

                </div>

            </div>

            <div id="clientChart"></div>

        </div>

        <!-- SALES OVERVIEW -->
        <div class="dashboard-card p-5">

            <div class="flex items-center justify-between mb-5">

                <div>

                    <h2 class="text-lg font-bold text-slate-800">
                        Sales Overview
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Invoice performance
                    </p>

                </div>

                <div class="icon-box bg-pink-50">
                    <i class="ri-file-chart-fill text-2xl text-pink-600"></i>
                </div>

            </div>

            <div class="space-y-5">

                <div>

                    <div class="flex items-center justify-between mb-2">

                        <p class="text-sm font-medium text-slate-600">
                            Quotations
                        </p>

                        <p class="font-bold text-slate-800">
                            145
                        </p>

                    </div>

                    <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                        <div class="h-full bg-pink-500 rounded-full" style="width:78%;"></div>
                    </div>

                </div>

                <div>

                    <div class="flex items-center justify-between mb-2">

                        <p class="text-sm font-medium text-slate-600">
                            Proforma Invoice
                        </p>

                        <p class="font-bold text-slate-800">
                            98
                        </p>

                    </div>

                    <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                        <div class="h-full bg-red-500 rounded-full" style="width:62%;"></div>
                    </div>

                </div>

                <div>

                    <div class="flex items-center justify-between mb-2">

                        <p class="text-sm font-medium text-slate-600">
                            Sales Invoice
                        </p>

                        <p class="font-bold text-slate-800">
                            186
                        </p>

                    </div>

                    <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                        <div class="h-full bg-orange-500 rounded-full" style="width:92%;"></div>
                    </div>

                </div>

                <div>

                    <div class="flex items-center justify-between mb-2">

                        <p class="text-sm font-medium text-slate-600">
                            Credit / Debit Note
                        </p>

                        <p class="font-bold text-slate-800">
                            42
                        </p>

                    </div>

                    <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                        <div class="h-full bg-yellow-500 rounded-full" style="width:38%;"></div>
                    </div>

                </div>

            </div>

        </div>

        <!-- ACCOUNT BOOKS -->
        <div class="dashboard-card p-5">

            <div class="flex items-center justify-between mb-5">

                <div>

                    <h2 class="text-lg font-bold text-slate-800">
                        Account Books
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Financial records
                    </p>

                </div>

                <div class="icon-box bg-blue-50">
                    <i class="ri-bank-fill text-2xl text-blue-600"></i>
                </div>

            </div>

            <div id="booksChart"></div>

        </div>

        <!-- FINANCIAL HEALTH -->
        <div class="dashboard-card p-5">

            <div class="flex items-center justify-between mb-5">

                <div>

                    <h2 class="text-lg font-bold text-slate-800">
                        Financial Health
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Business performance
                    </p>

                </div>

                <div class="icon-box bg-green-50">
                    <i class="ri-pie-chart-2-fill text-2xl text-green-600"></i>
                </div>

            </div>

            <div id="reportChart"></div>

        </div>

    </div>

<!-- QUICK ACTIONS -->
<div class="dashboard-card p-6 mt-6">

    <!-- HEADER -->
    <div class="flex items-center justify-between mb-6">

        <div>

            <h2 class="text-2xl font-bold text-slate-800">
                Quick Actions
            </h2>

            <p class="text-sm text-slate-500 mt-1">
                Frequently used accounting actions
            </p>

        </div>


    </div>

    <!-- BUTTONS -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-5">

        <!-- SALES -->
        <a href="puresaas_add_account_sales_invoice.php" class="group">

            <div class="quick-btn hover:border-pink-200">

                <div class="w-16 h-16 rounded-2xl bg-pink-100 flex items-center justify-center group-hover:scale-110 transition duration-300">

                    <i class="ri-file-text-line text-4xl text-pink-600"></i>

                </div>

                <div class="text-center">

                    <h4 class="text-sm font-bold text-slate-800">
                        Sales Invoice
                    </h4>

                    <p class="text-xs text-slate-500 mt-1">
                        Create invoice
                    </p>

                </div>

            </div>

        </a>

        <!-- PURCHASE -->
        <a href="puresaas_add_account_purchase_bill.php" class="group">

            <div class="quick-btn hover:border-blue-200">

                <div class="w-16 h-16 rounded-2xl bg-blue-100 flex items-center justify-center group-hover:scale-110 transition duration-300">

                    <i class="ri-shopping-bag-4-line text-4xl text-blue-600"></i>

                </div>

                <div class="text-center">

                    <h4 class="text-sm font-bold text-slate-800">
                        Purchase Bill
                    </h4>

                    <p class="text-xs text-slate-500 mt-1">
                        Add purchase
                    </p>

                </div>

            </div>

        </a>

        <!-- LEDGER -->
        <a href="puresaas_add_account_ledger.php" class="group">

            <div class="quick-btn hover:border-green-200">

                <div class="w-16 h-16 rounded-2xl bg-green-100 flex items-center justify-center group-hover:scale-110 transition duration-300">

                    <i class="ri-book-open-line text-4xl text-green-600"></i>

                </div>

                <div class="text-center">

                    <h4 class="text-sm font-bold text-slate-800">
                        Ledger
                    </h4>

                    <p class="text-xs text-slate-500 mt-1">
                        Manage accounts
                    </p>

                </div>

            </div>

        </a>

        <!-- PAYMENT -->
        <a href="puresaas_add_account_payment_entry.php" class="group">

            <div class="quick-btn hover:border-yellow-200">

                <div class="w-16 h-16 rounded-2xl bg-yellow-100 flex items-center justify-center group-hover:scale-110 transition duration-300">

                    <i class="ri-bank-card-line text-4xl text-yellow-600"></i>

                </div>

                <div class="text-center">

                    <h4 class="text-sm font-bold text-slate-800">
                        Payment Entry
                    </h4>

                    <p class="text-xs text-slate-500 mt-1">
                        Record payments
                    </p>

                </div>

            </div>

        </a>

        <!-- EXPENSE -->
        <a href="puresaas_add_account_expense_entry.php" class="group">

            <div class="quick-btn hover:border-red-200">

                <div class="w-16 h-16 rounded-2xl bg-red-100 flex items-center justify-center group-hover:scale-110 transition duration-300">

                    <i class="ri-wallet-line text-4xl text-red-600"></i>

                </div>

                <div class="text-center">

                    <h4 class="text-sm font-bold text-slate-800">
                        Expenses
                    </h4>

                    <p class="text-xs text-slate-500 mt-1">
                        Add expenses
                    </p>

                </div>

            </div>

        </a>

    </div>

</div>

    <!-- RECENT TRANSACTIONS -->
    <div class="dashboard-card overflow-hidden mt-6">

        <div class="px-6 py-5 border-b border-slate-100 flex items-center justify-between">

            <h2 class="text-xl font-bold text-slate-800">
                Recent Transactions
            </h2>

            <button class="text-sm text-blue-600 font-semibold">
                View All
            </button>

        </div>

        <div class="overflow-x-auto">

            <table class="w-full min-w-[1000px]">

                <thead class="bg-slate-50 border-b border-slate-100">

                    <tr>

                        <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                            Voucher No
                        </th>

                        <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                            Particular
                        </th>

                        <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                            Type
                        </th>

                        <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                            Amount
                        </th>

                        <th class="px-6 py-4 text-left text-xs font-semibold text-slate-400 uppercase">
                            Status
                        </th>

                    </tr>

                </thead>

                <tbody class="divide-y divide-slate-100">

                    <tr class="hover:bg-slate-50 transition">

                        <td class="px-6 py-4 text-sm font-semibold text-slate-700">
                            REC-1025
                        </td>

                        <td class="px-6 py-4 text-sm text-slate-700">
                            Client Payment
                        </td>

                        <td class="px-6 py-4 text-sm text-slate-700">
                            Receipt
                        </td>

                        <td class="px-6 py-4 text-sm font-bold text-emerald-600">
                            ₹48,000
                        </td>

                        <td class="px-6 py-4">

                            <span class="table-badge bg-emerald-100 text-emerald-600">
                                Completed
                            </span>

                        </td>

                    </tr>

                    <tr class="hover:bg-slate-50 transition">

                        <td class="px-6 py-4 text-sm font-semibold text-slate-700">
                            PAY-2036
                        </td>

                        <td class="px-6 py-4 text-sm text-slate-700">
                            Vendor Payment
                        </td>

                        <td class="px-6 py-4 text-sm text-slate-700">
                            Payment
                        </td>

                        <td class="px-6 py-4 text-sm font-bold text-red-500">
                            ₹22,500
                        </td>

                        <td class="px-6 py-4">

                            <span class="table-badge bg-yellow-100 text-yellow-700">
                                Pending
                            </span>

                        </td>

                    </tr>

                    <tr class="hover:bg-slate-50 transition">

                        <td class="px-6 py-4 text-sm font-semibold text-slate-700">
                            EXP-1148
                        </td>

                        <td class="px-6 py-4 text-sm text-slate-700">
                            Office Expense
                        </td>

                        <td class="px-6 py-4 text-sm text-slate-700">
                            Expense
                        </td>

                        <td class="px-6 py-4 text-sm font-bold text-orange-500">
                            ₹8,400
                        </td>

                        <td class="px-6 py-4">

                            <span class="table-badge bg-blue-100 text-blue-600">
                                Approved
                            </span>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>

<!-- CHARTS -->
<script>

    // FINANCE CHART

    const financeChart = new ApexCharts(document.querySelector("#financeChart"), {

        chart:{
            type:'area',
            height:320,
            toolbar:{
                show:false
            }
        },

        series:[
            {
                name:'Revenue',
                data:[8,12,15,18,22,25]
            },
            {
                name:'Expenses',
                data:[4,6,8,7,9,10]
            }
        ],

        colors:[
            '#10b981',
            '#ef4444'
        ],

        stroke:{
            curve:'smooth',
            width:4
        },

        fill:{
            type:'gradient',
            gradient:{
                opacityFrom:.35,
                opacityTo:.05
            }
        },

        dataLabels:{
            enabled:false
        },

        grid:{
            borderColor:'#e2e8f0',
            strokeDashArray:5
        },

        xaxis:{
            categories:[
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun'
            ]
        }

    });

    financeChart.render();



    // CLIENT CHART

    const clientChart = new ApexCharts(document.querySelector("#clientChart"), {

        chart:{
            type:'area',
            height:180,
            toolbar:{
                show:false
            }
        },

        series:[{
            name:'Clients',
            data:[40,55,70,95,120,148]
        }],

        colors:['#7c3aed'],

        stroke:{
            curve:'smooth',
            width:4
        },

        fill:{
            type:'gradient',
            gradient:{
                opacityFrom:.35,
                opacityTo:.05
            }
        },

        dataLabels:{
            enabled:false
        },

        grid:{
            show:false
        },

        xaxis:{
            categories:[
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun'
            ]
        }

    });

    clientChart.render();



    // ACCOUNT BOOKS CHART

    const booksChart = new ApexCharts(document.querySelector("#booksChart"), {

        chart:{
            type:'donut',
            height:250
        },

        series:[45,30,15,10],

        labels:[
            'Ledger',
            'Cash Book',
            'Bank Book',
            'Day Book'
        ],

        colors:[
            '#2563eb',
            '#06b6d4',
            '#0ea5e9',
            '#6366f1'
        ],

        legend:{
            position:'bottom'
        },

        dataLabels:{
            enabled:false
        },

        stroke:{
            width:0
        }

    });

    booksChart.render();



    // REPORT CHART

    const reportChart = new ApexCharts(document.querySelector("#reportChart"), {

        chart:{
            type:'radialBar',
            height:280
        },

        series:[82],

        colors:['#16a34a'],

        plotOptions:{
            radialBar:{
                hollow:{
                    size:'65%'
                },
                dataLabels:{
                    name:{
                        show:true,
                        fontSize:'14px'
                    },
                    value:{
                        fontSize:'30px',
                        fontWeight:700
                    }
                }
            }
        },

        labels:['Financial Health']

    });

    reportChart.render();

</script>

</body>
</html>

<?php include 'footer.php'; ?>