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

<div class="min-h-screen bg-gray-100 py-10 px-4">

<!-- Compact Page Heading -->
<div class="max-w-7xl mx-auto mb-5">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-black">
                   Lockora Account Management
                </h1>
            </div>
        </div>
</div>

    <!-- Responsive Grid -->
    <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">

        <!-- Card 1 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <!-- Header -->
            <div class="bg-gradient-to-r from-purple-500 to-indigo-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Master</h2>
            </div>

            <!-- Links -->
            <div class="p-5 space-y-3">
                <a href="lockora_account_dashboard.php"
                    class="block bg-purple-100 hover:bg-purple-200 text-purple-800 px-4 py-2 rounded-xl transition">Dashboard</a>
                    
                <a href="lockora_account_client.php"
                    class="block bg-purple-100 hover:bg-purple-200 text-purple-800 px-4 py-2 rounded-xl transition">Client</a>

                <a href="lockora_items_and_services.php"
                    class="block bg-pink-100 hover:bg-pink-200 text-pink-800 px-4 py-2 rounded-xl transition">Item /
                    Services</a>

                <a href="lockora_bank_account.php"
                    class="block bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-4 py-2 rounded-xl transition">Bank Account</a>
                    
                <a href="lockora_payment_modes.php" class="block bg-teal-100 hover:bg-teal-200 text-teal-800 px-4 py-2 rounded-xl transition">
                   Payments Modes
                </a>

                <a href="lockora_units.php"
                    class="block bg-green-100 hover:bg-green-200 text-green-800 px-4 py-2 rounded-xl transition">Units</a>
            </div>

        </div>

        <!-- Card 2 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <div class="bg-gradient-to-r from-pink-500 to-rose-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Sales</h2>
            </div>

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

                <a href="lockora_account_quotation.php" class="block bg-pink-100 hover:bg-pink-200 text-pink-800 px-4 py-2 rounded-xl transition">
                    Quotations
                </a>

                <a href="lockora_account_performa_invoice.php" class="block bg-rose-100 hover:bg-rose-200 text-rose-800 px-4 py-2 rounded-xl transition">
                    Performa Invoice (PI)
                </a>

                <a href="lockora_account_sales_invoice.php"
                    class="block bg-orange-100 hover:bg-orange-200 text-orange-800 px-4 py-2 rounded-xl transition">
                    Sales Invoice
                </a>

                <a href="lockora_credit_note.php" class="block bg-red-100 hover:bg-red-200 text-red-800 px-4 py-2 rounded-xl transition">
                    Credit Note
                </a>

                <a href="lockora_debit_note.php"
                    class="block bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-4 py-2 rounded-xl transition">
                    Debit Note
                </a>

            </div>

        </div>

        <!-- Card 3-->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <!-- Header -->
            <div class="bg-gradient-to-r from-blue-500 to-sky-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Account</h2>
            </div>

            <!-- Account Links -->
            <div class="p-5 space-y-3">

                <a href="lockora_account_ledger.php" class="block bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded-xl transition">
                    Ledger
                </a>

                <a href="lockora_cash_book.php" class="block bg-cyan-100 hover:bg-cyan-200 text-cyan-800 px-4 py-2 rounded-xl transition">
                    Cash Book
                </a>

                <a href="lockora_bank_book.php" class="block bg-sky-100 hover:bg-sky-200 text-sky-800 px-4 py-2 rounded-xl transition">
                    Bank Book
                </a>

                <a href="lockora_day_book.php"
                    class="block bg-indigo-100 hover:bg-indigo-200 text-indigo-800 px-4 py-2 rounded-xl transition">
                    Day Book
                </a>

            </div>
        </div>

        <!-- Card 4 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <!-- Header -->
            <div class="bg-gradient-to-r from-green-500 to-emerald-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Financial Reports</h2>
            </div>

            <!-- Links -->
            <div class="p-5 space-y-3">

                <a href="lockora_invoice_register.php"
                    class="block bg-green-100 hover:bg-green-200 text-green-800 px-4 py-2 rounded-xl transition">
                    Invoice Register
                </a>

                <a href="lockora_outstanding_report.php"
                    class="block bg-emerald-100 hover:bg-emerald-200 text-emerald-800 px-4 py-2 rounded-xl transition">
                    Outstanding Report
                </a>

                <a href="lockora_balance_sheet.php" class="block bg-teal-100 hover:bg-teal-200 text-teal-800 px-4 py-2 rounded-xl transition">
                    Balance Sheet
                </a>

                <a href="lockora_profit_and_loss.php" class="block bg-lime-100 hover:bg-lime-200 text-lime-800 px-4 py-2 rounded-xl transition">
                    Profit & Loss
                </a>

            </div>

        </div>
        
        <!-- Card 5 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <div class="bg-gradient-to-r from-emerald-500 to-teal-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Purchase</h2>
            </div>

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

                <a href="lockora_account_purchase_bill.php"
                    class="block bg-emerald-100 hover:bg-emerald-200 text-emerald-800 px-4 py-2 rounded-xl transition">
                    Purchase Bill
                </a>

                <a href="lockora_account_purchase_return.php" class="block bg-teal-100 hover:bg-teal-200 text-teal-800 px-4 py-2 rounded-xl transition">
                    Purchase Return
                </a>

            </div>

        </div>

        <!-- Card 6 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <div class="bg-gradient-to-r from-yellow-500 to-orange-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Transctions</h2>
            </div>

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

                <a href="lockora_account_receipt_entry.php"
                    class="block bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-4 py-2 rounded-xl transition">
                    Receipt Entry
                </a>

                <a href="lockora_account_payment_entry.php"
                    class="block bg-orange-100 hover:bg-orange-200 text-orange-800 px-4 py-2 rounded-xl transition">
                    Payment Entry
                </a>

                <a href="lockora_account_expense_entry.php" class="block bg-pink-100 hover:bg-pink-200 text-pink-800 px-4 py-2 rounded-xl transition">
                    Expense Entry
                </a>

            </div>

        </div>

    </div>

</div>

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