Manual changes saved

components/footer.js

@@ -4,42 +4,42 @@ class CustomFooter extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         footer {
-          background: #1a202c;
-          color: #e2e8f0;
-          padding: 2rem 1rem;
+          background: #1e293b;
+          color: white;
+          padding: 2rem;
           text-align: center;
-          margin-top: auto;
+          margin-top: 2rem;
         }
         .footer-content {
           max-width: 1200px;
           margin: 0 auto;
           display: flex;
           flex-direction: column;
-          gap: 1.5rem;
+          gap: 1rem;
         }
         .footer-links {
           display: flex;
           justify-content: center;
           gap: 1.5rem;
-          flex-wrap: wrap;
+          margin-bottom: 1rem;
         }
         .footer-links a {
-          color: #a0aec0;
+          color: #cbd5e1;
           text-decoration: none;
           transition: color 0.2s;
         }
         .footer-links a:hover {
-          color: #ffffff;
+          color: white;
         }
         .copyright {
-          color: #718096;
+          color: #94a3b8;
           font-size: 0.875rem;
         }
         @media (max-width: 640px) {
           .footer-links {
             flex-direction: column;
-            gap: 0.75rem;
             align-items: center;
+            gap: 0.5rem;
           }
         }
       </style>
@@ -49,11 +49,9 @@ class CustomFooter extends HTMLElement {
             <a href="#">Privacy Policy</a>
             <a href="#">Terms of Service</a>
             <a href="#">Contact Us</a>
-            <a href="#">API Documentation</a>
-          </div>
-          <div class="copyright">
-            &copy; ${new Date().getFullYear()} Bulk Order Blaster. All rights reserved.
+            <a href="#">Help Center</a>
           </div>
+          <p class="copyright">&copy; ${new Date().getFullYear()} BulkOrder Blitz. All rights reserved.</p>
         </div>
       </footer>
     `;

components/navbar.js

@@ -4,40 +4,43 @@ class CustomNavbar extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         nav {
-          background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+          background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
           padding: 1rem 2rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
-          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
-        .logo { 
-          color: white; 
-          font-weight: bold; 
+        .logo {
+          color: white;
+          font-weight: 700;
           font-size: 1.25rem;
           display: flex;
           align-items: center;
           gap: 0.5rem;
         }
-        ul { 
-          display: flex; 
-          gap: 1.5rem; 
-          list-style: none; 
-          margin: 0; 
-          padding: 0; 
+        ul {
+          display: flex;
+          gap: 1.5rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
         }
-        a { 
-          color: white; 
-          text-decoration: none; 
-          transition: opacity 0.2s; 
+        a {
+          color: white;
+          text-decoration: none;
           font-weight: 500;
-          padding: 0.5rem 0;
-          border-bottom: 2px solid transparent;
-          transition: all 0.2s;
+          transition: opacity 0.2s;
+          display: flex;
+          align-items: center;
+          gap: 0.3rem;
+        }
+        a:hover {
+          opacity: 0.9;
         }
-        a:hover { 
-          opacity: 0.9; 
-          border-bottom-color: white;
+        .nav-icon {
+          width: 18px;
+          height: 18px;
         }
         @media (max-width: 640px) {
           nav {
@@ -52,15 +55,14 @@ class CustomNavbar extends HTMLElement {
         }
       </style>
       <nav>
-        <div class="logo">
-          <i data-feather="package"></i>
-          <span>Bulk Order Blaster</span>
-        </div>
+        <a href="/" class="logo">
+          <i data-feather="package" class="nav-icon"></i>
+          <span>BulkOrder Blitz</span>
+        </a>
         <ul>
-          <li><a href="/">Home</a></li>
-          <li><a href="#">Orders</a></li>
-          <li><a href="#">Settings</a></li>
-          <li><a href="#">Help</a></li>
+          <li><a href="/"><i data-feather="home" class="nav-icon"></i> Home</a></li>
+          <li><a href="/orders.html"><i data-feather="list" class="nav-icon"></i> Orders</a></li>
+          <li><a href="/upload.html" class="font-bold"><i data-feather="upload" class="nav-icon"></i> Upload</a></li>
         </ul>
       </nav>
     `;

index.html

@@ -3,101 +3,105 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bulk Order Blaster 🚀</title>
+    <title>Bulk Order Upload</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <custom-navbar></custom-navbar>
     
     <main class="container mx-auto px-4 py-8">
         <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
-            <h1 class="text-3xl font-bold text-gray-800 mb-6">Bulk Order Processing</h1>
+            <h1 class="text-3xl font-bold text-gray-800 mb-6">Bulk Order Upload</h1>
             
-            <div class="space-y-8">
-                <!-- Merchant ID Input -->
-                <div class="space-y-2">
-                    <label for="merchant-id" class="block text-sm font-medium text-gray-700">Merchant ID</label>
-                    <div class="flex items-center">
-                        <i data-feather="user" class="text-gray-500 mr-2"></i>
-                        <input type="text" id="merchant-id" placeholder="Enter your merchant ID" 
-                            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
+            <!-- Merchant ID Input -->
+            <div class="mb-8">
+                <label for="merchantId" class="block text-sm font-medium text-gray-700 mb-2">Merchant ID</label>
+                <div class="relative rounded-md shadow-sm">
+                    <input type="text" id="merchantId" 
+                           class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-4 pr-12 py-3 sm:text-sm border-gray-300 rounded-md border" 
+                           placeholder="Enter merchant ID">
+                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                        <i data-feather="user" class="text-gray-400"></i>
                     </div>
                 </div>
-                
-                <!-- File Dropzone -->
-                <div class="space-y-2">
-                    <div class="flex items-center justify-between">
-                        <label class="block text-sm font-medium text-gray-700">Upload Order File</label>
-                        <button id="download-template" class="text-sm text-blue-600 hover:text-blue-800 flex items-center">
-                            <i data-feather="download" class="w-4 h-4 mr-1"></i> Download Template
-                        </button>
-                    </div>
-<div id="dropzone" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-500 transition">
-                        <div class="flex flex-col items-center justify-center space-y-2">
-                            <i data-feather="upload" class="w-12 h-12 text-gray-400"></i>
-                            <p class="text-gray-500">Drag & drop your order file here or click to browse</p>
-                        <p class="text-xs text-gray-400">Supports: CSV, XLSX (Max 5MB). <span class="text-blue-600 cursor-pointer" id="show-preview">Preview</span></p>
-</div>
-                        <input type="file" id="file-input" class="hidden" accept=".csv,.xlsx">
-                    </div>
+            </div>
+
+            <!-- Drag & Drop Zone -->
+            <div id="dropZone" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-8 transition-colors hover:border-indigo-400">
+                <div class="flex flex-col items-center justify-center space-y-4">
+                    <i data-feather="upload-cloud" class="w-12 h-12 text-gray-400"></i>
+                    <h3 class="text-lg font-medium text-gray-700">Drag & drop your file here</h3>
+                    <p class="text-sm text-gray-500">or</p>
+                    <button id="browseBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        Browse Files
+                    </button>
+                    <input type="file" id="fileInput" class="hidden" accept=".csv,.xlsx,.xls">
+                    <p class="text-xs text-gray-400 mt-2">Supported formats: CSV, XLSX, XLS</p>
                 </div>
-                
-                <!-- Data Preview -->
-                <div class="space-y-2">
-                    <div class="flex items-center justify-between">
-                        <label class="block text-sm font-medium text-gray-700">Order Preview</label>
-                        <button id="refresh-btn" class="text-sm text-blue-500 hover:text-blue-700 flex items-center">
-                            <i data-feather="refresh-cw" class="w-4 h-4 mr-1"></i> Refresh
-                        </button>
-                    </div>
-                    <div id="preview-container" class="hidden bg-gray-50 rounded-lg p-4 min-h-40 border border-gray-200">
-                        <div id="empty-state" class="text-center py-10">
-                            <i data-feather="file-text" class="w-10 h-10 mx-auto text-gray-400"></i>
-                            <p class="mt-2 text-gray-500">No data to preview. Upload a file to see the preview.</p>
-                        </div>
-                        <div id="preview-content" class="overflow-x-auto">
-<table class="min-w-full divide-y divide-gray-200">
-                                <thead id="preview-head" class="bg-gray-100">
-                                    <!-- Headers will be inserted here -->
-                                </thead>
-                                <tbody id="preview-body" class="bg-white divide-y divide-gray-200">
-                                    <!-- Rows will be inserted here -->
-                                </tbody>
-                            </table>
-                            <div id="preview-stats" class="mt-4 text-sm text-gray-500">
-                                <!-- Stats will be inserted here -->
-                            </div>
+            </div>
+            <div id="fileInfo" class="hidden mb-8 p-4 bg-gray-50 rounded-lg">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center space-x-3">
+                        <i data-feather="file" class="text-indigo-600"></i>
+                        <div>
+                            <p id="fileName" class="text-sm font-medium text-gray-700"></p>
+                            <p id="fileSize" class="text-xs text-gray-500"></p>
                         </div>
                     </div>
+                    <button id="removeFile" class="text-gray-400 hover:text-gray-600">
+                        <i data-feather="x"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Preview Section -->
+            <div id="previewSection" class="hidden">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Preview</h2>
+                <div class="overflow-x-auto bg-gray-50 rounded-lg p-4 mb-6">
+                    <table id="previewTable" class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-100">
+                            <tr>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Column 1</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Column 2</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Column 3</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200" id="previewBody">
+                            <!-- Preview data will be inserted here -->
+                        </tbody>
+                    </table>
                 </div>
                 
-                <!-- Action Buttons -->
-                <div class="flex justify-end space-x-4 pt-4">
-                    <button id="clear-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition">
-                        Clear All
+                <div class="flex justify-end space-x-3">
+                    <button id="cancelBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        Cancel
                     </button>
-                    <button id="process-btn" disabled class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center disabled:opacity-50 disabled:cursor-not-allowed">
-                        <i data-feather="send" class="w-4 h-4 mr-2"></i> Process Orders
+                    <button id="processBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        Process Orders
                     </button>
                 </div>
             </div>
         </div>
     </main>
-    
+
     <custom-footer></custom-footer>
 
+    <!-- Toast Notification -->
+    <div id="toast" class="fixed bottom-4 right-4 hidden">
+        <div class="bg-gray-800 text-white px-4 py-2 rounded-md shadow-lg flex items-center">
+            <span id="toastMessage"></span>
+        </div>
+    </div>
+
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
     </script>
-<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
 </body>
 </html>

script.js

@@ -1,54 +1,23 @@
-
 document.addEventListener('DOMContentLoaded', function() {
-    // DOM Elements
-    const downloadTemplateBtn = document.getElementById('download-template');
-    const showPreviewLink = document.getElementById('show-preview');
-const dropzone = document.getElementById('dropzone');
-    const fileInput = document.getElementById('file-input');
-    const merchantIdInput = document.getElementById('merchant-id');
-    const previewContainer = document.getElementById('preview-container');
-    const emptyState = document.getElementById('empty-state');
-    const previewContent = document.getElementById('preview-content');
-    const previewHead = document.getElementById('preview-head');
-    const previewBody = document.getElementById('preview-body');
-    const previewStats = document.getElementById('preview-stats');
-    const clearBtn = document.getElementById('clear-btn');
-    const processBtn = document.getElementById('process-btn');
-    const refreshBtn = document.getElementById('refresh-btn');
-    let fileData = null;
-
-    // Download template functionality
-    downloadTemplateBtn.addEventListener('click', () => {
-        // Create sample data
-        const sampleData = [
-            ['OrderID', 'Customer', 'Product', 'Quantity', 'Price'],
-            ['ORD001', 'John Doe', 'Product A', '2', '19.99'],
-            ['ORD002', 'Jane Smith', 'Product B', '1', '29.99'],
-            ['ORD003', 'Bob Johnson', 'Product C', '3', '9.99']
-        ];
-
-        // Create workbook
-        const wb = XLSX.utils.book_new();
-        const ws = XLSX.utils.aoa_to_sheet(sampleData);
-        XLSX.utils.book_append_sheet(wb, ws, 'Orders');
-
-        // Generate and download
-        XLSX.writeFile(wb, 'Order_Template.xlsx');
-    });
-
-    // Toggle preview visibility
-    showPreviewLink.addEventListener('click', () => {
-        if (fileData) {
-            previewContainer.classList.toggle('hidden');
-            showPreviewLink.textContent = previewContainer.classList.contains('hidden') ? 'Show Preview' : 'Hide Preview';
-        } else {
-            previewContainer.classList.add('hidden');
-            showPreviewLink.textContent = 'Preview';
-        }
-    });
-// Drag and drop events
+    const dropZone = document.getElementById('dropZone');
+    const fileInput = document.getElementById('fileInput');
+    const browseBtn = document.getElementById('browseBtn');
+    const fileInfo = document.getElementById('fileInfo');
+    const fileName = document.getElementById('fileName');
+    const fileSize = document.getElementById('fileSize');
+    const removeFile = document.getElementById('removeFile');
+    const previewSection = document.getElementById('previewSection');
+    const previewBody = document.getElementById('previewBody');
+    const cancelBtn = document.getElementById('cancelBtn');
+    const processBtn = document.getElementById('processBtn');
+    const toast = document.getElementById('toast');
+    const toastMessage = document.getElementById('toastMessage');
+    
+    let selectedFile = null;
+
+    // Handle drag and drop events
     ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-        dropzone.addEventListener(eventName, preventDefaults, false);
+        dropZone.addEventListener(eventName, preventDefaults, false);
     });
 
     function preventDefaults(e) {
@@ -57,207 +26,135 @@ const dropzone = document.getElementById('dropzone');
     }
 
     ['dragenter', 'dragover'].forEach(eventName => {
-        dropzone.addEventListener(eventName, highlight, false);
+        dropZone.addEventListener(eventName, highlight, false);
     });
 
     ['dragleave', 'drop'].forEach(eventName => {
-        dropzone.addEventListener(eventName, unhighlight, false);
+        dropZone.addEventListener(eventName, unhighlight, false);
     });
 
     function highlight() {
-        dropzone.classList.add('bg-blue-50', 'border-blue-500');
+        dropZone.classList.add('highlight');
     }
 
     function unhighlight() {
-        dropzone.classList.remove('bg-blue-50', 'border-blue-500');
+        dropZone.classList.remove('highlight');
     }
 
-    dropzone.addEventListener('drop', handleDrop, false);
-    dropzone.addEventListener('click', () => fileInput.click());
-
-    fileInput.addEventListener('change', handleFiles);
+    // Handle dropped files
+    dropZone.addEventListener('drop', handleDrop, false);
 
     function handleDrop(e) {
         const dt = e.dataTransfer;
         const files = dt.files;
-        handleFiles({ target: { files } });
+        handleFiles(files);
     }
 
-    function handleFiles(e) {
-        const files = e.target.files;
-        if (files.length) {
-            processFile(files[0]);
-        }
-    }
+    // Browse files button
+    browseBtn.addEventListener('click', () => {
+        fileInput.click();
+    });
+
+    fileInput.addEventListener('change', function() {
+        handleFiles(this.files);
+    });
 
-    // File processing
-    function processFile(file) {
-        if (!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/csv'].includes(file.type) && 
-            !file.name.endsWith('.xlsx') && !file.name.endsWith('.csv')) {
-            alert('Please upload a valid CSV or Excel file.');
+    // Remove file button
+    removeFile.addEventListener('click', function() {
+        resetFileUpload();
+    });
+
+    // Cancel button
+    cancelBtn.addEventListener('click', function() {
+        resetFileUpload();
+    });
+
+    // Process button
+    processBtn.addEventListener('click', function() {
+        if (!selectedFile) {
+            showToast('Please upload a file first', 'error');
             return;
         }
 
-        if (file.size > 5 * 1024 * 1024) {
-            alert('File size exceeds 5MB limit.');
+        const merchantId = document.getElementById('merchantId').value;
+        if (!merchantId) {
+            showToast('Please enter a merchant ID', 'error');
             return;
         }
 
-        const reader = new FileReader();
-        
-        reader.onload = function(e) {
-            const data = e.target.result;
-            try {
-                if (file.name.endsWith('.xlsx')) {
-                    processExcel(data);
-                } else {
-                    processCSV(data);
-                }
-            } catch (error) {
-                console.error('Error processing file:', error);
-                alert('Error processing file. Please check the format and try again.');
-            }
-        };
+        // Simulate processing
+        showToast('Processing bulk orders...', 'success');
+        setTimeout(() => {
+            showToast('Bulk orders processed successfully!', 'success');
+            resetFileUpload();
+        }, 2000);
+    });
+
+    function handleFiles(files) {
+        if (files.length === 0) return;
         
-        reader.onerror = function() {
-            alert('Error reading file. Please try again.');
-        };
+        const file = files[0];
+        const validTypes = ['text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
         
-        if (file.name.endsWith('.xlsx')) {
-            reader.readAsArrayBuffer(file);
-        } else {
-            reader.readAsText(file);
+        if (!validTypes.includes(file.type) && !file.name.match(/\.(csv|xlsx|xls)$/i)) {
+            showToast('Invalid file type. Please upload a CSV or Excel file.', 'error');
+            dropZone.classList.add('error');
+            setTimeout(() => dropZone.classList.remove('error'), 2000);
+            return;
         }
+
+        selectedFile = file;
+        displayFileInfo(file);
+        showPreview();
     }
 
-    function processExcel(data) {
-        const workbook = XLSX.read(data, { type: 'array' });
-        const firstSheetName = workbook.SheetNames[0];
-        const worksheet = workbook.Sheets[firstSheetName];
-        const jsonData = XLSX.utils.sheet_to_json(worksheet);
+    function displayFileInfo(file) {
+        fileName.textContent = file.name;
         
-        if (jsonData.length) {
-            fileData = jsonData;
-            showPreview(jsonData);
-        } else {
-            alert('No data found in the Excel file.');
-        }
+        // Format file size
+        const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
+        fileSize.textContent = `${sizeInMB} MB`;
+        
+        fileInfo.classList.remove('hidden');
+        dropZone.classList.add('hidden');
     }
 
-    function processCSV(data) {
-        const lines = data.split('\n');
-        const headers = lines[0].split(',');
-        const result = [];
-
-        for (let i = 1; i < lines.length; i++) {
-            if (!lines[i]) continue;
-            const obj = {};
-            const currentline = lines[i].split(',');
-
-            for (let j = 0; j < headers.length; j++) {
-                obj[headers[j]] = currentline[j];
-            }
-            result.push(obj);
-        }
-
-        if (result.length) {
-            fileData = result;
-            showPreview(result);
-        } else {
-            alert('No data found in the CSV file.');
-        }
-    }
-    function showPreview(data) {
-        emptyState.classList.add('hidden');
-        previewContainer.classList.remove('hidden');
-showPreviewLink.textContent = 'Hide Preview';
-// Clear previous preview
-        previewHead.innerHTML = '';
+    function showPreview() {
+        // In a real app, you would parse the file and display actual data
+        // For demo purposes, we'll show mock data
         previewBody.innerHTML = '';
         
-        // Set headers
-        const headers = Object.keys(data[0]);
-        const headerRow = document.createElement('tr');
-        
-        headers.forEach(header => {
-            const th = document.createElement('th');
-            th.textContent = header;
-            headerRow.appendChild(th);
-        });
-        
-        previewHead.appendChild(headerRow);
-        
-        // Set rows (limit to 10 for preview)
-        const previewRows = data.slice(0, 10);
-        
-        previewRows.forEach(row => {
-            const tr = document.createElement('tr');
-            
-            headers.forEach(header => {
-                const td = document.createElement('td');
-                td.textContent = row[header] || 'N/A';
-                tr.appendChild(td);
-            });
-            
-            previewBody.appendChild(tr);
-        });
-        
-        // Set stats
-        previewStats.innerHTML = `
-            Showing ${previewRows.length} of ${data.length} rows. 
-            ${data.length > 10 ? 'Only first 10 rows are shown in preview.' : ''}
-        `;
-        
-        // Enable process button if merchant ID is filled
-        updateProcessButton();
-    }
-    function updateProcessButton() {
-        processBtn.disabled = !(fileData && merchantIdInput.value.trim());
-        if (!fileData) {
-            previewContainer.classList.add('hidden');
-            showPreviewLink.textContent = 'Preview';
+        // Add mock rows
+        for (let i = 0; i < 5; i++) {
+            const row = document.createElement('tr');
+            row.innerHTML = `
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Product ${i+1}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${Math.floor(Math.random() * 10) + 1}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${(Math.random() * 100).toFixed(2)}</td>
+            `;
+            previewBody.appendChild(row);
         }
+        
+        previewSection.classList.remove('hidden');
     }
-merchantIdInput.addEventListener('input', updateProcessButton);
 
-    // Button actions
-    clearBtn.addEventListener('click', () => {
+    function resetFileUpload() {
+        selectedFile = null;
         fileInput.value = '';
-        fileData = null;
-        emptyState.classList.remove('hidden');
-        previewContent.classList.add('hidden');
-        previewContainer.classList.add('hidden');
-        merchantIdInput.value = '';
-        processBtn.disabled = true;
-        showPreviewLink.textContent = 'Preview';
-    });
-refreshBtn.addEventListener('click', () => {
-        if (fileData) {
-            showPreview(fileData);
-        }
-    });
+        fileInfo.classList.add('hidden');
+        previewSection.classList.add('hidden');
+        dropZone.classList.remove('hidden');
+    }
 
-    processBtn.addEventListener('click', () => {
-        if (!merchantIdInput.value.trim()) {
-            alert('Please enter a merchant ID.');
-            return;
-        }
-        
-        if (!fileData) {
-            alert('Please upload a file first.');
-            return;
-        }
-        
-        // Simulate processing
-        processBtn.disabled = true;
-        processBtn.innerHTML = '<i data-feather="loader" class="w-4 h-4 mr-2 animate-spin"></i> Processing...';
-        feather.replace();
+    function showToast(message, type = 'success') {
+        toastMessage.textContent = message;
+        toast.className = `fixed bottom-4 right-4 flex items-center ${type === 'success' ? 'toast-success' : 'toast-error'} px-4 py-2 rounded-md shadow-lg`;
+        toast.classList.add('show');
         
         setTimeout(() => {
-            alert(`Success! Processed ${fileData.length} orders for merchant ${merchantIdInput.value.trim()}.`);
-            processBtn.disabled = false;
-            processBtn.innerHTML = '<i data-feather="send" class="w-4 h-4 mr-2"></i> Process Orders';
-            feather.replace();
-        }, 2000);
-    });
+            toast.classList.remove('show');
+            toast.classList.add('hide');
+            setTimeout(() => toast.classList.add('hidden'), 300);
+        }, 3000);
+    }
 });

style.css

@@ -1,51 +1,41 @@
 /* Shared styles across all pages */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
 body {
-    font-family: 'Inter', sans-serif;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
-#dropzone {
-    transition: all 0.3s ease;
+#dropZone.highlight {
+    border-color: #818cf8;
+    background-color: #f5f3ff;
 }
 
-#dropzone.active {
-    border-color: #3b82f6;
-    background-color: #f0f7ff;
-}
-#preview-container {
-    transition: all 0.3s ease;
+#dropZone.error {
+    border-color: #ef4444;
+    background-color: #fee2e2;
 }
 
-#download-template {
-    transition: all 0.2s ease;
+.toast-success {
+    background-color: #10b981 !important;
 }
 
-#show-preview {
-    transition: all 0.2s ease;
+.toast-error {
+    background-color: #ef4444 !important;
 }
-#preview-content table {
-    font-size: 0.875rem;
+
+/* Animation for toast */
+@keyframes slideIn {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
 }
 
-#preview-content th {
-    text-align: left;
-    padding: 0.5rem 1rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 0.05em;
-    color: #4b5563;
+@keyframes slideOut {
+    from { transform: translateX(0); opacity: 1; }
+    to { transform: translateX(100%); opacity: 0; }
 }
 
-#preview-content td {
-    padding: 0.75rem 1rem;
-    white-space: nowrap;
+#toast.show {
+    animation: slideIn 0.3s forwards;
 }
 
-#preview-content tr:nth-child(even) {
-    background-color: #f9fafb;
+#toast.hide {
+    animation: slideOut 0.3s forwards;
 }