Update index.html

index.html

@@ -183,7 +183,7 @@
                             <div class="flex items-center justify-between">
                                 <div>
                                     <p class="text-gray-500">Total Orders</p>
-                                    <h3 class="text-2xl font-semibold">1,234</h3>
+                                    <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>
@@ -195,7 +195,7 @@
                             <div class="flex items-center justify-between">
                                 <div>
                                     <p class="text-gray-500">Revenue</p>
-                                    <h3 class="text-2xl font-semibold">$45,678</h3>
+                                    <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>
@@ -207,7 +207,7 @@
                             <div class="flex items-center justify-between">
                                 <div>
                                     <p class="text-gray-500">Customers</p>
-                                    <h3 class="text-2xl font-semibold">567</h3>
+                                    <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>
@@ -222,7 +222,7 @@
                             <h3 class="font-medium">Recent Orders</h3>
                         </div>
                         <div class="overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200">
+                            <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>
@@ -233,8 +233,8 @@
                                         <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                     </tr>
                                 </thead>
-                                <tbody class="bg-white divide-y divide-gray-200">
-                                    <tr>
+                                <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>
@@ -247,7 +247,7 @@
                                             <button class="text-red-600 hover:text-red-900" onclick="deleteOrder('ORD-1001')">Delete</button>
                                         </td>
                                     </tr>
-                                    <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>
@@ -260,7 +260,7 @@
                                             <button class="text-red-600 hover:text-red-900" onclick="deleteOrder('ORD-1002')">Delete</button>
                                         </td>
                                     </tr>
-                                    <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>
@@ -319,30 +319,30 @@
             </div>
             
             <div class="p-4">
-                <form class="space-y-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 class="w-full px-3 py-2 sap-fiori-border rounded focus:outline-none focus:ring-2 focus:ring-blue-200">
-                            <option>Select customer</option>
-                            <option>John Smith</option>
-                            <option>Sarah Johnson</option>
-                            <option>Michael Brown</option>
+                        <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 class="w-full px-3 py-2 sap-fiori-border rounded focus:outline-none focus:ring-2 focus:ring-blue-200">
-                            <option>Select product</option>
-                            <option>Product A</option>
-                            <option>Product B</option>
-                            <option>Product C</option>
+                        <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" min="1" value="1" 
+                        <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>
                     
@@ -440,6 +440,81 @@
     </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;
@@ -448,6 +523,7 @@
             if (email === 'aicool@example.com' && password === '1244!@') {
                 document.getElementById('login-screen').classList.add('hidden');
                 document.getElementById('app-screen').classList.remove('hidden');
+                renderOrdersTable();
             } else {
                 alert('Invalid credentials. Use email: aicool@example.com and password: 1244!@');
             }
@@ -510,6 +586,7 @@
         // Order functions
         function showCreateOrderModal() {
             document.getElementById('create-order-modal').classList.remove('hidden');
+            document.getElementById('new-order-form').reset();
         }
         
         function hideCreateOrderModal() {
@@ -517,18 +594,65 @@
         }
         
         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();
-            alert('Order created successfully!');
+            
+            // Show notification
+            alert(`Order ${newOrderId} created successfully!`);
         }
         
         function viewOrder(orderId) {
-            alert(`Viewing order ${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}?`,
-                () => alert(`Order ${orderId} deleted`)
+                () => {
+                    orders = orders.filter(order => order.id !== orderId);
+                    renderOrdersTable();
+                    alert(`Order ${orderId} deleted`);
+                }
             );
         }
         
@@ -602,5 +726,5 @@
             showDashboard();
         });
     </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=anonymousatom/checkingui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</body>
 </html>