|
|
<!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">[email protected]</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">[email protected]</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 [email protected]</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> |
