Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SAP Fiori Test UI</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"> | |
| <style> | |
| .sap-fiori-primary { | |
| background-color: #0a6ed1; | |
| } | |
| .sap-fiori-primary-text { | |
| color: #0a6ed1; | |
| } | |
| .sap-fiori-secondary { | |
| background-color: #f7f7f7; | |
| } | |
| .sap-fiori-shadow { | |
| box-shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1); | |
| } | |
| .sap-fiori-border { | |
| border: 1px solid #d9d9d9; | |
| } | |
| .sap-fiori-hover:hover { | |
| background-color: #ebf2fa; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Login Screen (Initial View) --> | |
| <div id="login-screen" class="flex items-center justify-center min-h-screen"> | |
| <div class="w-full max-w-md p-8 bg-white rounded sap-fiori-shadow"> | |
| <div class="text-center mb-8"> | |
| <i class="fas fa-cloud text-5xl sap-fiori-primary-text mb-4"></i> | |
| <h1 class="text-2xl font-semibold text-gray-800">Welcome to SAP Test UI</h1> | |
| <p class="text-gray-600 mt-2">Please sign in to continue</p> | |
| </div> | |
| <form id="login-form" class="space-y-4"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" name="email" value="[email protected]" | |
| class="w-full px-3 py-2 sap-fiori-border rounded focus:outline-none focus:ring-2 focus:ring-blue-200"> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> | |
| <input type="password" id="password" name="password" value="1244!@" | |
| class="w-full px-3 py-2 sap-fiori-border rounded focus:outline-none focus:ring-2 focus:ring-blue-200"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input id="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-200 border-gray-300 rounded"> | |
| <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label> | |
| </div> | |
| <a href="#" class="text-sm sap-fiori-primary-text hover:underline" onclick="showForgotPassword()">Forgot password?</a> | |
| </div> | |
| <button type="button" onclick="login()" | |
| class="w-full sap-fiori-primary text-white py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300"> | |
| Sign In | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Forgot Password Screen (Hidden by default) --> | |
| <div id="forgot-password-screen" class="hidden items-center justify-center min-h-screen"> | |
| <div class="w-full max-w-md p-8 bg-white rounded sap-fiori-shadow"> | |
| <div class="text-center mb-8"> | |
| <i class="fas fa-key text-4xl sap-fiori-primary-text mb-4"></i> | |
| <h1 class="text-2xl font-semibold text-gray-800">Reset Password</h1> | |
| <p class="text-gray-600 mt-2">Enter your email to receive reset instructions</p> | |
| </div> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="reset-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="reset-email" name="email" value="[email protected]" | |
| class="w-full px-3 py-2 sap-fiori-border rounded focus:outline-none focus:ring-2 focus:ring-blue-200"> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button type="button" onclick="hideForgotPassword()" | |
| class="flex-1 sap-fiori-secondary text-gray-700 py-2 px-4 rounded hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"> | |
| Cancel | |
| </button> | |
| <button type="button" onclick="sendResetLink()" | |
| class="flex-1 sap-fiori-primary text-white py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300"> | |
| Send Link | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Main App Screen (Hidden by default) --> | |
| <div id="app-screen" class="hidden min-h-screen"> | |
| <!-- Header --> | |
| <header class="sap-fiori-primary text-white"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-cloud text-2xl"></i> | |
| <span class="text-xl font-semibold">SAP Test UI</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-blue-700" onclick="showNotifications()"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <div class="flex items-center space-x-2 cursor-pointer" onclick="showUserMenu()"> | |
| <div class="w-8 h-8 rounded-full bg-blue-200 flex items-center justify-center"> | |
| <i class="fas fa-user text-blue-700"></i> | |
| </div> | |
| <span>User</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Sidebar and Main Content --> | |
| <div class="flex"> | |
| <!-- Sidebar --> | |
| <aside class="w-64 sap-fiori-secondary min-h-screen border-r sap-fiori-border"> | |
| <nav class="p-4"> | |
| <ul class="space-y-1"> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded sap-fiori-hover sap-fiori-primary-text font-medium" onclick="showDashboard()"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded sap-fiori-hover text-gray-700" onclick="showOrders()"> | |
| <i class="fas fa-shopping-cart mr-3"></i> | |
| <span>Orders</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded sap-fiori-hover text-gray-700" onclick="showProducts()"> | |
| <i class="fas fa-boxes mr-3"></i> | |
| <span>Products</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded sap-fiori-hover text-gray-700" onclick="showCustomers()"> | |
| <i class="fas fa-users mr-3"></i> | |
| <span>Customers</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded sap-fiori-hover text-gray-700" onclick="showReports()"> | |
| <i class="fas fa-chart-bar mr-3"></i> | |
| <span>Reports</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded sap-fiori-hover text-gray-700" onclick="showSettings()"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span>Settings</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </aside> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 p-6"> | |
| <div id="dashboard-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Dashboard</h2> | |
| <button class="sap-fiori-primary text-white px-4 py-2 rounded hover:bg-blue-700" onclick="showCreateOrderModal()"> | |
| <i class="fas fa-plus mr-2"></i> Create Order | |
| </button> | |
| </div> | |
| <!-- Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white p-6 rounded sap-fiori-shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Total Orders</p> | |
| <h3 id="total-orders" class="text-2xl font-semibold">3</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded sap-fiori-shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Revenue</p> | |
| <h3 id="total-revenue" class="text-2xl font-semibold">$2,692.01</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-dollar-sign"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded sap-fiori-shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Customers</p> | |
| <h3 class="text-2xl font-semibold">3</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Orders Table --> | |
| <div class="bg-white rounded sap-fiori-shadow overflow-hidden"> | |
| <div class="p-4 border-b sap-fiori-border"> | |
| <h3 class="font-medium">Recent Orders</h3> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table id="orders-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">Order ID</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="orders-body" class="bg-white divide-y divide-gray-200"> | |
| <tr id="order-ORD-1001"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-1001</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">John Smith</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,234.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="viewOrder('ORD-1001')">View</button> | |
| <button class="text-red-600 hover:text-red-900" onclick="deleteOrder('ORD-1001')">Delete</button> | |
| </td> | |
| </tr> | |
| <tr id="order-ORD-1002"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-1002</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Processing</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$567.89</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="viewOrder('ORD-1002')">View</button> | |
| <button class="text-red-600 hover:text-red-900" onclick="deleteOrder('ORD-1002')">Delete</button> | |
| </td> | |
| </tr> | |
| <tr id="order-ORD-1003"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-1003</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Michael Brown</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-13</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Shipped</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$890.12</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="viewOrder('ORD-1003')">View</button> | |
| <button class="text-red-600 hover:text-red-900" onclick="deleteOrder('ORD-1003')">Delete</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Other Content Areas (Hidden by default) --> | |
| <div id="orders-content" class="hidden"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Orders</h2> | |
| <p class="text-gray-600">This is the orders page content.</p> | |
| </div> | |
| <div id="products-content" class="hidden"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Products</h2> | |
| <p class="text-gray-600">This is the products page content.</p> | |
| </div> | |
| <div id="customers-content" class="hidden"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Customers</h2> | |
| <p class="text-gray-600">This is the customers page content.</p> | |
| </div> | |
| <div id="reports-content" class="hidden"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Reports</h2> | |
| <p class="text-gray-600">This is the reports page content.</p> | |
| </div> | |
| <div id="settings-content" class="hidden"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Settings</h2> | |
| <p class="text-gray-600">This is the settings page content.</p> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Create Order Modal (Hidden by default) --> | |
| <div id="create-order-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white rounded sap-fiori-shadow w-full max-w-md"> | |
| <div class="p-4 border-b sap-fiori-border flex justify-between items-center"> | |
| <h3 class="text-lg font-medium">Create New Order</h3> | |
| <button onclick="hideCreateOrderModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <form id="new-order-form" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Customer</label> | |
| <select id="order-customer" class="w-full px-3 py-2 sap-fiori-border rounded focus:outline-none focus:ring-2 focus:ring-blue-200"> | |
| <option value="">Select customer</option> | |
| <option value="John Smith">John Smith</option> | |
| <option value="Sarah Johnson">Sarah Johnson</option> | |
| <option value="Michael Brown">Michael Brown</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Product</label> | |
| <select id="order-product" class="w-full px-3 py-2 sap-fiori-border rounded focus:outline-none focus:ring-2 focus:ring-blue-200"> | |
| <option value="">Select product</option> | |
| <option value="Product A">Product A</option> | |
| <option value="Product B">Product B</option> | |
| <option value="Product C">Product C</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quantity</label> | |
| <input type="number" id="order-quantity" min="1" value="1" | |
| class="w-full px-3 py-2 sap-fiori-border rounded focus:outline-none focus:ring-2 focus:ring-blue-200"> | |
| </div> | |
| <div class="flex justify-end space-x-3 pt-4"> | |
| <button type="button" onclick="hideCreateOrderModal()" | |
| class="sap-fiori-secondary text-gray-700 py-2 px-4 rounded hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"> | |
| Cancel | |
| </button> | |
| <button type="button" onclick="submitOrder()" | |
| class="sap-fiori-primary text-white py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300"> | |
| Create Order | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notifications Panel (Hidden by default) --> | |
| <div id="notifications-panel" class="hidden fixed right-4 top-16 w-80 bg-white rounded sap-fiori-shadow z-50"> | |
| <div class="p-3 border-b sap-fiori-border flex justify-between items-center"> | |
| <h3 class="font-medium">Notifications</h3> | |
| <button onclick="hideNotifications()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="p-3 hover:bg-gray-50 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-info-circle text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">New order received</p> | |
| <p class="text-sm text-gray-500">Order #ORD-1004 from John Smith</p> | |
| <p class="text-xs text-gray-400 mt-1">2 minutes ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 hover:bg-gray-50 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-green-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Order shipped</p> | |
| <p class="text-sm text-gray-500">Order #ORD-1002 has been shipped</p> | |
| <p class="text-xs text-gray-400 mt-1">1 hour ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Menu (Hidden by default) --> | |
| <div id="user-menu" class="hidden fixed right-4 top-16 w-48 bg-white rounded sap-fiori-shadow z-50"> | |
| <div class="p-2"> | |
| <div class="px-4 py-2 text-sm text-gray-700">Signed in as <span class="font-medium">[email protected]</span></div> | |
| <div class="border-t sap-fiori-border my-1"></div> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Your Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Settings</a> | |
| <div class="border-t sap-fiori-border my-1"></div> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded" onclick="logout()">Sign out</a> | |
| </div> | |
| </div> | |
| <!-- Confirmation Dialog (Hidden by default) --> | |
| <div id="confirmation-dialog" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white rounded sap-fiori-shadow w-full max-w-md"> | |
| <div class="p-4 border-b sap-fiori-border"> | |
| <h3 class="text-lg font-medium">Confirm Action</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p id="confirmation-message" class="text-gray-700 mb-4">Are you sure you want to perform this action?</p> | |
| <div class="flex justify-end space-x-3"> | |
| <button type="button" onclick="hideConfirmationDialog()" | |
| class="sap-fiori-secondary text-gray-700 py-2 px-4 rounded hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"> | |
| Cancel | |
| </button> | |
| <button type="button" id="confirm-action-button" | |
| class="sap-fiori-primary text-white py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300"> | |
| Confirm | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample data for orders | |
| let orders = [ | |
| { | |
| id: 'ORD-1001', | |
| customer: 'John Smith', | |
| date: '2023-06-15', | |
| status: 'Completed', | |
| amount: 1234.00, | |
| product: 'Product A', | |
| quantity: 2 | |
| }, | |
| { | |
| id: 'ORD-1002', | |
| customer: 'Sarah Johnson', | |
| date: '2023-06-14', | |
| status: 'Processing', | |
| amount: 567.89, | |
| product: 'Product B', | |
| quantity: 1 | |
| }, | |
| { | |
| id: 'ORD-1003', | |
| customer: 'Michael Brown', | |
| date: '2023-06-13', | |
| status: 'Shipped', | |
| amount: 890.12, | |
| product: 'Product C', | |
| quantity: 3 | |
| } | |
| ]; | |
| // Calculate total revenue | |
| function calculateTotalRevenue() { | |
| return orders.reduce((total, order) => total + order.amount, 0); | |
| } | |
| // Update dashboard stats | |
| function updateDashboardStats() { | |
| document.getElementById('total-orders').textContent = orders.length; | |
| document.getElementById('total-revenue').textContent = `$${calculateTotalRevenue().toFixed(2)}`; | |
| } | |
| // Render orders table | |
| function renderOrdersTable() { | |
| const ordersBody = document.getElementById('orders-body'); | |
| ordersBody.innerHTML = ''; | |
| orders.forEach(order => { | |
| const statusClass = { | |
| 'Completed': 'bg-green-100 text-green-800', | |
| 'Processing': 'bg-yellow-100 text-yellow-800', | |
| 'Shipped': 'bg-blue-100 text-blue-800' | |
| }[order.status] || 'bg-gray-100 text-gray-800'; | |
| const row = document.createElement('tr'); | |
| row.id = `order-${order.id}`; | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#${order.id}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${order.customer}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${order.date}</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}">${order.status}</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${order.amount.toFixed(2)}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="viewOrder('${order.id}')">View</button> | |
| <button class="text-red-600 hover:text-red-900" onclick="deleteOrder('${order.id}')">Delete</button> | |
| </td> | |
| `; | |
| ordersBody.appendChild(row); | |
| }); | |
| updateDashboardStats(); | |
| } | |
| // Login functionality | |
| function login() { | |
| const email = document.getElementById('email').value; | |
| const password = document.getElementById('password').value; | |
| if (email === '[email protected]' && password === '1244!@') { | |
| document.getElementById('login-screen').classList.add('hidden'); | |
| document.getElementById('app-screen').classList.remove('hidden'); | |
| renderOrdersTable(); | |
| } else { | |
| alert('Invalid credentials. Use email: [email protected] and password: 1244!@'); | |
| } | |
| } | |
| // Forgot password flow | |
| function showForgotPassword() { | |
| document.getElementById('login-screen').classList.add('hidden'); | |
| document.getElementById('forgot-password-screen').classList.remove('hidden'); | |
| } | |
| function hideForgotPassword() { | |
| document.getElementById('forgot-password-screen').classList.add('hidden'); | |
| document.getElementById('login-screen').classList.remove('hidden'); | |
| } | |
| function sendResetLink() { | |
| alert('Password reset link sent to [email protected]'); | |
| hideForgotPassword(); | |
| } | |
| // Navigation functions | |
| function showDashboard() { | |
| hideAllContent(); | |
| document.getElementById('dashboard-content').classList.remove('hidden'); | |
| } | |
| function showOrders() { | |
| hideAllContent(); | |
| document.getElementById('orders-content').classList.remove('hidden'); | |
| } | |
| function showProducts() { | |
| hideAllContent(); | |
| document.getElementById('products-content').classList.remove('hidden'); | |
| } | |
| function showCustomers() { | |
| hideAllContent(); | |
| document.getElementById('customers-content').classList.remove('hidden'); | |
| } | |
| function showReports() { | |
| hideAllContent(); | |
| document.getElementById('reports-content').classList.remove('hidden'); | |
| } | |
| function showSettings() { | |
| hideAllContent(); | |
| document.getElementById('settings-content').classList.remove('hidden'); | |
| } | |
| function hideAllContent() { | |
| const contents = ['dashboard-content', 'orders-content', 'products-content', 'customers-content', 'reports-content', 'settings-content']; | |
| contents.forEach(id => { | |
| document.getElementById(id).classList.add('hidden'); | |
| }); | |
| } | |
| // Order functions | |
| function showCreateOrderModal() { | |
| document.getElementById('create-order-modal').classList.remove('hidden'); | |
| document.getElementById('new-order-form').reset(); | |
| } | |
| function hideCreateOrderModal() { | |
| document.getElementById('create-order-modal').classList.add('hidden'); | |
| } | |
| function submitOrder() { | |
| const customer = document.getElementById('order-customer').value; | |
| const product = document.getElementById('order-product').value; | |
| const quantity = parseInt(document.getElementById('order-quantity').value); | |
| if (!customer || !product || !quantity) { | |
| alert('Please fill all fields'); | |
| return; | |
| } | |
| // Calculate amount based on product and quantity (simplified) | |
| const productPrices = { | |
| 'Product A': 500, | |
| 'Product B': 300, | |
| 'Product C': 200 | |
| }; | |
| const amount = productPrices[product] * quantity; | |
| // Generate new order ID | |
| const lastOrderId = orders.length > 0 ? parseInt(orders[0].id.split('-')[1]) : 1000; | |
| const newOrderId = `ORD-${lastOrderId + 1}`; | |
| // Add new order | |
| const newOrder = { | |
| id: newOrderId, | |
| customer: customer, | |
| date: new Date().toISOString().split('T')[0], | |
| status: 'Processing', | |
| amount: amount, | |
| product: product, | |
| quantity: quantity | |
| }; | |
| // Add to beginning of array (to show at top) | |
| orders.unshift(newOrder); | |
| // Update UI | |
| renderOrdersTable(); | |
| hideCreateOrderModal(); | |
| // Show notification | |
| alert(`Order ${newOrderId} created successfully!`); | |
| } | |
| function viewOrder(orderId) { | |
| const order = orders.find(o => o.id === orderId); | |
| if (order) { | |
| alert(`Viewing order ${orderId}\nCustomer: ${order.customer}\nProduct: ${order.product}\nQuantity: ${order.quantity}\nAmount: $${order.amount.toFixed(2)}\nStatus: ${order.status}`); | |
| } | |
| } | |
| function deleteOrder(orderId) { | |
| showConfirmationDialog( | |
| `Are you sure you want to delete order ${orderId}?`, | |
| () => { | |
| orders = orders.filter(order => order.id !== orderId); | |
| renderOrdersTable(); | |
| alert(`Order ${orderId} deleted`); | |
| } | |
| ); | |
| } | |
| // Notification functions | |
| function showNotifications() { | |
| document.getElementById('notifications-panel').classList.remove('hidden'); | |
| document.getElementById('user-menu').classList.add('hidden'); | |
| } | |
| function hideNotifications() { | |
| document.getElementById('notifications-panel').classList.add('hidden'); | |
| } | |
| // User menu functions | |
| function showUserMenu() { | |
| document.getElementById('user-menu').classList.remove('hidden'); | |
| document.getElementById('notifications-panel').classList.add('hidden'); | |
| } | |
| function hideUserMenu() { | |
| document.getElementById('user-menu').classList.add('hidden'); | |
| } | |
| // Logout function | |
| function logout() { | |
| document.getElementById('app-screen').classList.add('hidden'); | |
| document.getElementById('login-screen').classList.remove('hidden'); | |
| document.getElementById('user-menu').classList.add('hidden'); | |
| } | |
| // Confirmation dialog functions | |
| function showConfirmationDialog(message, confirmCallback) { | |
| document.getElementById('confirmation-message').textContent = message; | |
| const confirmButton = document.getElementById('confirm-action-button'); | |
| // Remove previous event listeners | |
| const newConfirmButton = confirmButton.cloneNode(true); | |
| confirmButton.parentNode.replaceChild(newConfirmButton, confirmButton); | |
| // Add new event listener | |
| newConfirmButton.addEventListener('click', function() { | |
| hideConfirmationDialog(); | |
| confirmCallback(); | |
| }); | |
| document.getElementById('confirmation-dialog').classList.remove('hidden'); | |
| } | |
| function hideConfirmationDialog() { | |
| document.getElementById('confirmation-dialog').classList.add('hidden'); | |
| } | |
| // Close menus when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const notificationsPanel = document.getElementById('notifications-panel'); | |
| const userMenu = document.getElementById('user-menu'); | |
| if (notificationsPanel && !notificationsPanel.contains(event.target) && | |
| !event.target.closest('button[onclick="showNotifications()"]')) { | |
| notificationsPanel.classList.add('hidden'); | |
| } | |
| if (userMenu && !userMenu.contains(event.target) && | |
| !event.target.closest('div[onclick="showUserMenu()"]')) { | |
| userMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Initialize with dashboard shown | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showDashboard(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |