| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>LuxLeather - Sales & Inventory System</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> |
| <style> |
| .sidebar { |
| transition: all 0.3s; |
| } |
| .sidebar.collapsed { |
| width: 70px; |
| } |
| .sidebar.collapsed .sidebar-text { |
| display: none; |
| } |
| .sidebar.collapsed .logo-text { |
| display: none; |
| } |
| .sidebar.collapsed .nav-item { |
| justify-content: center; |
| } |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| .chart-container { |
| height: 300px; |
| } |
| @media print { |
| .no-print { |
| display: none !important; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="sidebar bg-indigo-800 text-white w-64 flex flex-col"> |
| <div class="p-4 flex items-center space-x-2 border-b border-indigo-700"> |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center"> |
| <i class="fas fa-box-open text-xl"></i> |
| </div> |
| <span class="logo-text text-xl font-bold">LuxLeather</span> |
| </div> |
| |
| <div class="flex-1 overflow-y-auto py-4"> |
| <div class="px-4 space-y-1"> |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-3 rounded-lg bg-indigo-700"> |
| <i class="fas fa-tachometer-alt"></i> |
| <span class="sidebar-text">Dashboard</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-indigo-700"> |
| <i class="fas fa-shopping-cart"></i> |
| <span class="sidebar-text">Sales</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-indigo-700"> |
| <i class="fas fa-boxes"></i> |
| <span class="sidebar-text">Products</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-indigo-700"> |
| <i class="fas fa-users"></i> |
| <span class="sidebar-text">Customers</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-indigo-700"> |
| <i class="fas fa-chart-line"></i> |
| <span class="sidebar-text">Reports</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-indigo-700"> |
| <i class="fas fa-bell"></i> |
| <span class="sidebar-text">Inventory Alerts</span> |
| </a> |
| <a href="#" class="nav-item flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-indigo-700"> |
| <i class="fas fa-cog"></i> |
| <span class="sidebar-text">Settings</span> |
| </a> |
| </div> |
| </div> |
| |
| <div class="p-4 border-t border-indigo-700"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center"> |
| <i class="fas fa-user"></i> |
| </div> |
| <div class="sidebar-text"> |
| <div class="font-medium">Admin User</div> |
| <div class="text-xs text-indigo-300">admin@luxleather.com</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 flex flex-col overflow-hidden"> |
| |
| <header class="bg-white shadow-sm z-10"> |
| <div class="px-6 py-3 flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <button id="sidebarToggle" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <h1 class="text-xl font-semibold text-gray-800">Dashboard</h1> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <button class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-bell"></i> |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> |
| </button> |
| </div> |
| <div class="relative"> |
| <button id="offlineToggle" class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm flex items-center"> |
| <i class="fas fa-wifi mr-1"></i> |
| <span>Online</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
| |
| |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">Today's Sales</p> |
| <h3 class="text-2xl font-bold text-gray-800">$2,450</h3> |
| <p class="text-sm text-green-500 flex items-center"> |
| <i class="fas fa-arrow-up mr-1"></i> 12% from yesterday |
| </p> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-dollar-sign text-blue-600"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">Total Orders</p> |
| <h3 class="text-2xl font-bold text-gray-800">48</h3> |
| <p class="text-sm text-green-500 flex items-center"> |
| <i class="fas fa-arrow-up mr-1"></i> 3 new today |
| </p> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center"> |
| <i class="fas fa-shopping-bag text-purple-600"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">Low Stock Items</p> |
| <h3 class="text-2xl font-bold text-gray-800">7</h3> |
| <p class="text-sm text-red-500 flex items-center"> |
| <i class="fas fa-exclamation-circle mr-1"></i> Needs attention |
| </p> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"> |
| <i class="fas fa-box-open text-orange-600"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">New Customers</p> |
| <h3 class="text-2xl font-bold text-gray-800">5</h3> |
| <p class="text-sm text-green-500 flex items-center"> |
| <i class="fas fa-arrow-up mr-1"></i> 25% from last week |
| </p> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-users text-green-600"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
| |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-2"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-lg font-semibold text-gray-800">Sales Overview</h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-800 rounded-full">Weekly</button> |
| <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-full">Monthly</button> |
| <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-full">Yearly</button> |
| </div> |
| </div> |
| <div class="chart-container"> |
| <canvas id="salesChart" height="300"></canvas> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Recent Sales</h2> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-shopping-bag text-indigo-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Classic Leather Belt</p> |
| <p class="text-sm text-gray-500">#ORD-2023-0012</p> |
| <p class="text-sm text-gray-500">$45.00 • 2 hours ago</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-shopping-bag text-green-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Premium Wallet</p> |
| <p class="text-sm text-gray-500">#ORD-2023-0011</p> |
| <p class="text-sm text-gray-500">$85.00 • 4 hours ago</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-shopping-bag text-purple-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Leather Tote Bag</p> |
| <p class="text-sm text-gray-500">#ORD-2023-0010</p> |
| <p class="text-sm text-gray-500">$120.00 • 6 hours ago</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-shopping-bag text-blue-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Belt Buckle Set</p> |
| <p class="text-sm text-gray-500">#ORD-2023-0009</p> |
| <p class="text-sm text-gray-500">$65.00 • 1 day ago</p> |
| </div> |
| </div> |
| </div> |
| <button class="mt-4 w-full py-2 text-sm text-indigo-600 hover:bg-indigo-50 rounded-lg"> |
| View All Sales |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-2"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-lg font-semibold text-gray-800">Top Products</h2> |
| <button class="text-sm text-indigo-600 hover:text-indigo-800">View All</button> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> |
| |
| <div class="product-card bg-white border border-gray-100 rounded-lg overflow-hidden transition-all duration-300"> |
| <div class="relative h-40 bg-gray-100"> |
| <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Leather Belt" class="w-full h-full object-cover"> |
| <div class="absolute top-2 right-2 bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Best Seller</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-medium text-gray-800">Classic Leather Belt</h3> |
| <div class="flex justify-between items-center mt-2"> |
| <span class="text-gray-600">$45.00</span> |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">32 in stock</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white border border-gray-100 rounded-lg overflow-hidden transition-all duration-300"> |
| <div class="relative h-40 bg-gray-100"> |
| <img src="https://images.unsplash.com/photo-1548036328-c9fa89d128fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Leather Wallet" class="w-full h-full object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-medium text-gray-800">Premium Wallet</h3> |
| <div class="flex justify-between items-center mt-2"> |
| <span class="text-gray-600">$85.00</span> |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">15 in stock</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card bg-white border border-gray-100 rounded-lg overflow-hidden transition-all duration-300"> |
| <div class="relative h-40 bg-gray-100"> |
| <img src="https://images.unsplash.com/photo-1566150902887-e24fbfb77900?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Leather Bag" class="w-full h-full object-cover"> |
| <div class="absolute top-2 right-2 bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Low Stock</div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-medium text-gray-800">Leather Tote Bag</h3> |
| <div class="flex justify-between items-center mt-2"> |
| <span class="text-gray-600">$120.00</span> |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">5 in stock</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Quick Sale</h2> |
| |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Customer</label> |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <option>Walk-in Customer</option> |
| <option>John Smith</option> |
| <option>Sarah Johnson</option> |
| <option>Michael Brown</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Product</label> |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <option>Select a product</option> |
| <option>Classic Leather Belt - $45.00</option> |
| <option>Premium Wallet - $85.00</option> |
| <option>Leather Tote Bag - $120.00</option> |
| <option>Belt Buckle Set - $65.00</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quantity</label> |
| <input type="number" min="1" value="1" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label> |
| <div class="grid grid-cols-2 gap-2"> |
| <button class="py-2 border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <i class="fas fa-money-bill-wave mr-1"></i> Cash |
| </button> |
| <button class="py-2 border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <i class="fas fa-credit-card mr-1"></i> Card |
| </button> |
| <button class="py-2 border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <i class="fas fa-university mr-1"></i> Transfer |
| </button> |
| <button class="py-2 border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <i class="fas fa-truck mr-1"></i> COD |
| </button> |
| </div> |
| </div> |
| |
| <div class="pt-2"> |
| <button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"> |
| Complete Sale |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
| |
| |
| <div id="invoiceModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-y-auto"> |
| <div class="p-6"> |
| |
| <div class="flex justify-between items-start mb-8"> |
| <div> |
| <h2 class="text-2xl font-bold text-gray-800">LuxLeather</h2> |
| <p class="text-gray-600">123 Leather Street, Artisan District</p> |
| <p class="text-gray-600">City, Country 12345</p> |
| <p class="text-gray-600">VAT: GB123456789</p> |
| </div> |
| <div class="text-right"> |
| <h1 class="text-2xl font-bold text-indigo-600">INVOICE</h1> |
| <p class="text-gray-600">#INV-2023-0012</p> |
| <p class="text-gray-600">Date: <span id="invoiceDate">Oct 15, 2023</span></p> |
| <p class="text-gray-600">Due: Upon Receipt</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-between mb-8"> |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Bill To:</h3> |
| <p class="font-medium">John Smith</p> |
| <p class="text-gray-600">123 Customer Street</p> |
| <p class="text-gray-600">City, Country 54321</p> |
| <p class="text-gray-600">john@example.com</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Payment Method:</h3> |
| <p class="font-medium">Credit Card</p> |
| <p class="text-gray-600">**** **** **** 4242</p> |
| <p class="text-gray-600">Transaction ID: TXN123456</p> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> |
| <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">Item</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Qty</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded" src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Classic Leather Belt</div> |
| <div class="text-sm text-gray-500">Brown, Size M</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$45.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$45.00</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded" src="https://images.unsplash.com/photo-1548036328-c9fa89d128fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Premium Wallet</div> |
| <div class="text-sm text-gray-500">Black</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$85.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$85.00</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-end"> |
| <div class="w-64"> |
| <div class="flex justify-between py-2 border-b border-gray-200"> |
| <span class="text-gray-600">Subtotal</span> |
| <span class="font-medium">$130.00</span> |
| </div> |
| <div class="flex justify-between py-2 border-b border-gray-200"> |
| <span class="text-gray-600">Tax (10%)</span> |
| <span class="font-medium">$13.00</span> |
| </div> |
| <div class="flex justify-between py-2 border-b border-gray-200"> |
| <span class="text-gray-600">Shipping</span> |
| <span class="font-medium">$5.00</span> |
| </div> |
| <div class="flex justify-between py-4"> |
| <span class="text-lg font-bold">Total</span> |
| <span class="text-lg font-bold">$148.00</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8 pt-8 border-t border-gray-200"> |
| <div class="flex justify-between"> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-800 mb-2">Payment Instructions:</h3> |
| <p class="text-sm text-gray-600">Please make payment within 7 days of receiving this invoice.</p> |
| <p class="text-sm text-gray-600">Bank: International Bank</p> |
| <p class="text-sm text-gray-600">Account: 1234567890</p> |
| <p class="text-sm text-gray-600">Sort Code: 12-34-56</p> |
| </div> |
| <div class="text-right"> |
| <div class="w-32 h-32 bg-gray-100 inline-flex items-center justify-center"> |
| <span class="text-gray-400 text-xs">QR Code</span> |
| </div> |
| </div> |
| </div> |
| <div class="mt-8 text-center text-xs text-gray-500"> |
| <p>Thank you for your business! We appreciate your trust in LuxLeather products.</p> |
| <p class="mt-1">For any questions, please contact support@luxleather.com</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 px-6 py-4 flex justify-between border-t border-gray-200 no-print"> |
| <button onclick="closeInvoiceModal()" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| Close |
| </button> |
| <div class="space-x-3"> |
| <button onclick="printInvoice()" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <i class="fas fa-print mr-2"></i> Print |
| </button> |
| <button onclick="downloadPDF()" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <i class="fas fa-download mr-2"></i> Download PDF |
| </button> |
| <button onclick="shareWhatsApp()" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500"> |
| <i class="fab fa-whatsapp mr-2"></i> Share via WhatsApp |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('sidebarToggle').addEventListener('click', function() { |
| document.querySelector('.sidebar').classList.toggle('collapsed'); |
| }); |
| |
| |
| let isOnline = true; |
| document.getElementById('offlineToggle').addEventListener('click', function() { |
| isOnline = !isOnline; |
| const button = document.getElementById('offlineToggle'); |
| if (isOnline) { |
| button.innerHTML = '<i class="fas fa-wifi mr-1"></i><span>Online</span>'; |
| button.className = 'px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm flex items-center'; |
| } else { |
| button.innerHTML = '<i class="fas fa-wifi-slash mr-1"></i><span>Offline</span>'; |
| button.className = 'px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm flex items-center'; |
| } |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const today = new Date(); |
| const options = { year: 'numeric', month: 'short', day: 'numeric' }; |
| document.getElementById('invoiceDate').textContent = today.toLocaleDateString('en-US', options); |
| |
| |
| const ctx = document.getElementById('salesChart').getContext('2d'); |
| const salesChart = new Chart(ctx, { |
| type: 'line', |
| data: { |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], |
| datasets: [{ |
| label: 'Sales ($)', |
| data: [4500, 5200, 4800, 6100, 7200, 6900, 8300, 9100, 8500, 9200], |
| backgroundColor: 'rgba(79, 70, 229, 0.05)', |
| borderColor: 'rgba(79, 70, 229, 1)', |
| borderWidth: 2, |
| tension: 0.4, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| drawBorder: false |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| } |
| } |
| }); |
| }); |
| |
| |
| function showInvoiceModal() { |
| document.getElementById('invoiceModal').classList.remove('hidden'); |
| } |
| |
| function closeInvoiceModal() { |
| document.getElementById('invoiceModal').classList.add('hidden'); |
| } |
| |
| function printInvoice() { |
| window.print(); |
| } |
| |
| function downloadPDF() { |
| const { jsPDF } = window.jspdf; |
| const element = document.getElementById('invoiceModal').querySelector('.bg-white'); |
| |
| html2canvas(element).then(canvas => { |
| const imgData = canvas.toDataURL('image/png'); |
| const pdf = new jsPDF('p', 'mm', 'a4'); |
| const imgProps = pdf.getImageProperties(imgData); |
| const pdfWidth = pdf.internal.pageSize.getWidth(); |
| const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; |
| |
| pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); |
| pdf.save('invoice-LuxLeather-2023-0012.pdf'); |
| }); |
| } |
| |
| function shareWhatsApp() { |
| const message = "Here's your invoice from LuxLeather: #INV-2023-0012 for $148.00. Thank you for your business!"; |
| const encodedMessage = encodeURIComponent(message); |
| window.open(`https://wa.me/?text=${encodedMessage}`, '_blank'); |
| } |
| |
| |
| document.querySelector('.bg-indigo-600').addEventListener('click', function() { |
| showInvoiceModal(); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kam33/artmoh" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
