<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Bulk Invoice Generator</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
    <link href="https://ai-public.creatie.ai/gen_page/tailwind-custom.css" rel="stylesheet"/>
    <script src="https://cdn.tailwindcss.com/3.4.5?plugins=forms@0.5.7,typography@0.5.13,aspect-ratio@0.4.2,container-queries@0.1.1"></script>
    <script src="https://ai-public.creatie.ai/gen_page/tailwind-config.min.js" data-color="#000000" data-border-radius="small"></script>
</head>
    <body class="bg-gray-50 min-h-screen">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
            <div class="mb-8">
                <h1 class="text-3xl font-bold text-gray-900">Bulk Invoice Generator</h1>
                <p class="mt-2 text-gray-600">Generate multiple invoices for selected clients in one go</p>
            </div>
            <div class="bg-white shadow rounded-lg p-6 mb-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Billing Period</label>
                        <div class="flex space-x-4">
                            <select class="form-select block w-full !rounded-button border-gray-300">
                                <option>January</option>
                                <option>February</option>
                                <option>March</option>
                                <option>April</option>
                                <option>May</option>
                                <option>June</option>
                                <option>July</option>
                                <option>August</option>
                                <option>September</option>
                                <option>October</option>
                                <option>November</option>
                                <option>December</option>
                            </select>
                            <select class="form-select block w-full !rounded-button border-gray-300">
                                <option>2024</option>
                                <option>2023</option>
                                <option>2022</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Due Date</label>
                        <input type="date" class="form-input block w-full !rounded-button border-gray-300"/>
                    </div>
                    <div><label class="block text-sm font-medium text-gray-700 mb-2">Last Invoice</label><input type="date" class="form-input block w-full !rounded-button border-gray-300"/></div><div><label class="block text-sm font-medium text-gray-700 mb-2">Billing Cycle</label><select class="form-select block w-full !rounded-button border-gray-300"><option>Monthly</option><option>Quarterly</option><option>Annually</option></select></div></div>
            </div>
            <div class="bg-white shadow rounded-lg p-6 mb-6">
                <h2 class="text-lg font-medium text-gray-900 mb-4">Select Clients</h2>
                <div class="relative mb-4">
                    <input type="text" placeholder="Search clients..." class="form-input block w-full !rounded-button border-gray-300 pl-10"/>
                    <span class="absolute left-3 top-3 text-gray-400">
                        <i class="fas fa-search"></i>
                    </span>
                </div>
                <div class="overflow-x-auto shadow border-b border-gray-200 sm:rounded-lg"><table class="min-w-full divide-y divide-gray-200"><thead class="bg-gray-50"><tr><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><input type="checkbox" class="form-checkbox h-4 w-4 text-custom border-gray-300 !rounded"/></th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client Name<br/><span class="text-xs font-normal">Last Invoice &amp; Amount</span></th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service Plan</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vehicles</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Package</th><th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th></tr></thead><tbody class="bg-white divide-y divide-gray-200"><tr><td class="px-6 py-4 whitespace-nowrap"><input type="checkbox" class="form-checkbox h-4 w-4 text-custom border-gray-300 !rounded"/></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm font-medium text-gray-900"><i class="fas fa-wrench text-blue-500 mr-2" title="Had intervention last month"></i>Acme Corporation<br/><span class="text-xs text-gray-500">INV-2023012 ($1,200) - Dec 2023</span></div></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm text-gray-500">Monthly Service Plan</div></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm text-gray-500">5</div></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm text-gray-500">Premium</div></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm font-medium text-custom">$1,200</div></td></tr><tr><td class="px-6 py-4 whitespace-nowrap"><input type="checkbox" class="form-checkbox h-4 w-4 text-custom border-gray-300 !rounded"/></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm font-medium text-gray-900">TechStart Inc<br/><span class="text-xs text-gray-500">INV-2023011 ($2,500) - Dec 2023</span></div></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm text-gray-500">Premium Package</div></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm text-gray-500">8</div></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm text-gray-500">Enterprise</div></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm font-medium text-custom">$2,500</div></td></tr><tr><td class="px-6 py-4 whitespace-nowrap"><input type="checkbox" class="form-checkbox h-4 w-4 text-custom border-gray-300 !rounded"/></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm font-medium text-gray-900"><i class="fas fa-wrench text-blue-500 mr-2" title="Had intervention last month"></i>Global Solutions Ltd<br/><span class="text-xs text-gray-500">INV-2023015 ($5,000) - Dec 2023</span></div></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm text-gray-500">Enterprise Plan</div></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm text-gray-500">15</div></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm text-gray-500">Enterprise Plus</div></td><td class="px-6 py-4 whitespace-nowrap"><div class="text-sm font-medium text-custom">$5,000</div></td></tr></tbody></table></div>
            </div>

            <div class="bg-gray-100 rounded-lg p-6 mb-6"><h2 class="text-lg font-medium text-gray-900 mb-4">Invoice Preview</h2><div class="grid grid-cols-1 gap-4"><div class="bg-white p-4 rounded-lg shadow"><div class="flex justify-between items-center mb-3"><span class="text-lg font-semibold">INV-2024001</span><span class="text-gray-500">January 2024</span></div><div class="flex justify-between items-center mb-2"><span class="font-medium">Acme Corporation</span><span class="text-custom font-semibold">$1,200.00</span></div><div class="text-sm text-gray-500">Monthly Service Plan</div></div><div class="bg-white p-4 rounded-lg shadow"><div class="flex justify-between items-center mb-3"><span class="text-lg font-semibold">INV-2024002</span><span class="text-gray-500">January 2024</span></div><div class="flex justify-between items-center mb-2"><span class="font-medium">TechStart Inc</span><span class="text-custom font-semibold">$2,500.00</span></div><div class="text-sm text-gray-500">Premium Package</div></div><div class="bg-white p-4 rounded-lg shadow"><div class="flex justify-between items-center mb-3"><span class="text-lg font-semibold">INV-2024003</span><span class="text-gray-500">January 2024</span></div><div class="flex justify-between items-center mb-2"><span class="font-medium">Global Solutions Ltd</span><span class="text-custom font-semibold">$5,000.00</span></div><div class="text-sm text-gray-500">Enterprise Plan</div></div></div></div>
            <div class="flex justify-end space-x-4"><button class="px-4 py-2 border border-gray-300 text-gray-700 bg-white !rounded-button hover:bg-gray-50">Cancel</button><button class="px-4 py-2 bg-custom text-white !rounded-button hover:bg-custom/90">Generate Invoices</button></div>
            <div class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center" id="progressModal">
                <div class="bg-white p-6 rounded-lg shadow-xl max-w-md w-full">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Generating Invoices...</h3>
                    <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                        <div class="bg-custom h-2 rounded-full" style="width: 45%"></div>
                    </div>
                    <p class="text-sm text-gray-500">Processing 2 of 3 invoices</p>
                </div>
            </div>
        </div>
