Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vendor Work Order 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> | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .nav-tab { | |
| transition: all 0.3s ease; | |
| } | |
| .nav-tab:hover:not(.active) { | |
| background-color: #f3f4f6; | |
| } | |
| .nav-tab.active { | |
| border-bottom: 3px solid #3b82f6; | |
| } | |
| .signature-pad { | |
| border: 1px dashed #ccc; | |
| background-color: #f9fafb; | |
| } | |
| #workOrderPreview { | |
| background-color: white; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| } | |
| .search-highlight { | |
| background-color: #fef08a; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-3xl font-bold text-gray-800"> | |
| <i class="fas fa-file-invoice mr-3 text-blue-500"></i>Vendor Work Order System | |
| </h1> | |
| <div class="flex items-center space-x-2"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium"> | |
| <i class="fas fa-user-shield mr-1"></i> Admin | |
| </span> | |
| </div> | |
| </div> | |
| <!-- Tabs Navigation --> | |
| <div class="border-b border-gray-200 mb-6"> | |
| <nav class="flex space-x-8"> | |
| <button class="nav-tab py-4 px-1 font-medium text-sm flex items-center" data-tab="initiate"> | |
| <i class="fas fa-pen-to-square mr-2"></i> Initiate Work Order | |
| </button> | |
| <button class="nav-tab py-4 px-1 font-medium text-sm flex items-center" data-tab="approval"> | |
| <i class="fas fa-check-double mr-2"></i> Approval | |
| </button> | |
| <button class="nav-tab py-4 px-1 font-medium text-sm flex items-center" data-tab="manage"> | |
| <i class="fas fa-database mr-2"></i> Manage Work Orders | |
| </button> | |
| <button class="nav-tab py-4 px-1 font-medium text-sm flex items-center" data-tab="print"> | |
| <i class="fas fa-print mr-2"></i> Print/Export | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="tab-content-container"> | |
| <!-- Initiate Form Tab --> | |
| <div id="initiate" class="tab-content active"> | |
| <form id="workOrderForm" class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="woNumber" class="block text-sm font-medium text-gray-700 mb-1">Work Order #</label> | |
| <input type="text" id="woNumber" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" value="WO-2023-001" readonly> | |
| </div> | |
| <div> | |
| <label for="woDate" class="block text-sm font-medium text-gray-700 mb-1">Date</label> | |
| <input type="date" id="woDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="vendorSelect" class="block text-sm font-medium text-gray-700 mb-1">Vendor</label> | |
| <select id="vendorSelect" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required> | |
| <option value="">Select a vendor</option> | |
| <option value="1">ABC Construction Co.</option> | |
| <option value="2">XYZ Maintenance Services</option> | |
| <option value="3">Global Tech Solutions</option> | |
| <option value="4">Premium Cleaning Services</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="projectName" class="block text-sm font-medium text-gray-700 mb-1">Project Name</label> | |
| <input type="text" id="projectName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="Enter project name" required> | |
| </div> | |
| <div> | |
| <label for="workDescription" class="block text-sm font-medium text-gray-700 mb-1">Work Description</label> | |
| <textarea id="workDescription" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="Detailed description of the work to be performed..." required></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <label for="startDate" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label> | |
| <input type="date" id="startDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required> | |
| </div> | |
| <div> | |
| <label for="endDate" class="block text-sm font-medium text-gray-700 mb-1">End Date</label> | |
| <input type="date" id="endDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required> | |
| </div> | |
| <div> | |
| <label for="estimatedCost" class="block text-sm font-medium text-gray-700 mb-1">Estimated Cost ($)</label> | |
| <input type="number" id="estimatedCost" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="0.00" step="0.01" required> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="attachments" class="block text-sm font-medium text-gray-700 mb-1">Attachments</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-gray-600"> | |
| <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none"> | |
| <span>Upload files</span> | |
| <input id="file-upload" name="file-upload" type="file" class="sr-only" multiple> | |
| </label> | |
| <p class="pl-1">or drag and drop</p> | |
| </div> | |
| <p class="text-xs text-gray-500">PDF, DOC, JPG, PNG up to 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-4 pt-4"> | |
| <button type="reset" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-eraser mr-2"></i> Clear Form | |
| </button> | |
| <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-paper-plane mr-2"></i> Submit for Approval | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Approval Tab --> | |
| <div id="approval" class="tab-content"> | |
| <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-blue-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-blue-700"> | |
| Work orders pending your approval are listed below. Please review carefully before approving or rejecting. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">WO #</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vendor</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Est. Cost</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" 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> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">WO-2023-015</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">ABC Construction Co.</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Renovation</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$12,500.00</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"> | |
| Pending Approval | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3 approve-btn" data-id="15"><i class="fas fa-check mr-1"></i> Approve</button> | |
| <button class="text-red-600 hover:text-red-900 reject-btn" data-id="15"><i class="fas fa-times mr-1"></i> Reject</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">WO-2023-014</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Global Tech Solutions</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Network Upgrade</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$8,200.00</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"> | |
| Pending Approval | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3 approve-btn" data-id="14"><i class="fas fa-check mr-1"></i> Approve</button> | |
| <button class="text-red-600 hover:text-red-900 reject-btn" data-id="14"><i class="fas fa-times mr-1"></i> Reject</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-8 border-t border-gray-200 pt-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Approved Work Orders</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">WO #</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vendor</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Approved Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">WO-2023-013</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Premium Cleaning Services</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Quarterly Deep Cleaning</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"> | |
| Approved | |
| </span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">WO-2023-012</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">XYZ Maintenance Services</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HVAC Maintenance</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-10</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"> | |
| Approved | |
| </span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Manage Work Orders Tab --> | |
| <div id="manage" class="tab-content"> | |
| <div class="bg-white shadow rounded-lg p-6 mb-6"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Work Order Management</h2> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input type="text" id="searchWorkOrders" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search work orders..."> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-3 mb-6"> | |
| <div class="w-full sm:w-auto"> | |
| <label for="filterStatus" class="block text-sm font-medium text-gray-700 mb-1">Status</label> | |
| <select id="filterStatus" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">All Statuses</option> | |
| <option value="approved">Approved</option> | |
| <option value="completed">Completed</option> | |
| <option value="archived">Archived</option> | |
| </select> | |
| </div> | |
| <div class="w-full sm:w-auto"> | |
| <label for="filterVendor" class="block text-sm font-medium text-gray-700 mb-1">Vendor</label> | |
| <select id="filterVendor" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">All Vendors</option> | |
| <option value="1">ABC Construction Co.</option> | |
| <option value="2">XYZ Maintenance Services</option> | |
| <option value="3">Global Tech Solutions</option> | |
| <option value="4">Premium Cleaning Services</option> | |
| </select> | |
| </div> | |
| <div class="w-full sm:w-auto"> | |
| <label for="filterDateFrom" class="block text-sm font-medium text-gray-700 mb-1">From Date</label> | |
| <input type="date" id="filterDateFrom" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="w-full sm:w-auto"> | |
| <label for="filterDateTo" class="block text-sm font-medium text-gray-700 mb-1">To Date</label> | |
| <input type="date" id="filterDateTo" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="w-full sm:w-auto flex items-end"> | |
| <button id="applyFilters" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| Apply Filters | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200" id="workOrdersTable"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">WO #</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vendor</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" 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" id="workOrdersBody"> | |
| <!-- Work orders will be loaded here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span id="showingFrom">1</span> to <span id="showingTo">10</span> of <span id="totalItems">50</span> work orders | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="prevPage" class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50" disabled> | |
| Previous | |
| </button> | |
| <button id="nextPage" class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Print/Export Tab --> | |
| <div id="print" class="tab-content"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="md:w-1/3 space-y-6"> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h3 class="font-medium text-lg mb-4">Export Options</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="radio" name="exportFormat" value="pdf" class="h-4 w-4 text-blue-600 focus:ring-blue-500" checked> | |
| <span class="ml-2 block text-sm text-gray-700">PDF Document</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="radio" name="exportFormat" value="doc" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 block text-sm text-gray-700">Word Document</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="radio" name="exportFormat" value="print" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 block text-sm text-gray-700">Print Directly</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h3 class="font-medium text-lg mb-4">Select Work Order</h3> | |
| <select id="woSelect" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">Select a work order</option> | |
| <option value="WO-2023-013">WO-2023-013 - Premium Cleaning Services</option> | |
| <option value="WO-2023-012">WO-2023-012 - XYZ Maintenance Services</option> | |
| <option value="WO-2023-011">WO-2023-011 - ABC Construction Co.</option> | |
| </select> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h3 class="font-medium text-lg mb-4">Delivery Options</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 block text-sm text-gray-700">Email to Vendor</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <span class="ml-2 block text-sm text-gray-700">Save to Documents</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500" checked> | |
| <span class="ml-2 block text-sm text-gray-700">Download File</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button id="generateBtn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md flex items-center justify-center"> | |
| <i class="fas fa-file-export mr-2"></i> Generate | |
| </button> | |
| <button id="printBtn" class="flex-1 bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-md flex items-center justify-center"> | |
| <i class="fas fa-print mr-2"></i> Print | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h3 class="font-medium text-lg mb-4">Preview</h3> | |
| <div id="workOrderPreview" class="p-6"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl font-bold">WORK ORDER</h2> | |
| <div class="flex justify-between mt-4"> | |
| <div class="text-left"> | |
| <p><strong>WO #:</strong> <span id="previewWoNumber">WO-2023-013</span></p> | |
| <p><strong>Date:</strong> <span id="previewDate">June 15, 2023</span></p> | |
| </div> | |
| <div class="text-right"> | |
| <p><strong>Status:</strong> <span class="text-green-600">Approved</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <h3 class="font-bold border-b pb-1 mb-2">Vendor Information</h3> | |
| <p><strong>Name:</strong> Premium Cleaning Services</p> | |
| <p><strong>Contact:</strong> John Smith</p> | |
| <p><strong>Phone:</strong> (555) 123-4567</p> | |
| <p><strong>Email:</strong> john@premiumclean.com</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold border-b pb-1 mb-2">Project Details</h3> | |
| <p><strong>Project:</strong> Quarterly Deep Cleaning</p> | |
| <p><strong>Location:</strong> Main Office Building</p> | |
| <p><strong>Start Date:</strong> June 20, 2023</p> | |
| <p><strong>End Date:</strong> June 22, 2023</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-bold border-b pb-1 mb-2">Work Description</h3> | |
| <p>Complete deep cleaning of all office spaces including carpets, windows, restrooms, and kitchen areas. Special attention to high-touch surfaces and disinfecting all areas.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <h3 class="font-bold border-b pb-1 mb-2">Financial Details</h3> | |
| <p><strong>Estimated Cost:</strong> $3,500.00</p> | |
| <p><strong>Payment Terms:</strong> Net 30 days</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold border-b pb-1 mb-2">Approval</h3> | |
| <p><strong>Approved By:</strong> Sarah Johnson</p> | |
| <p><strong>Approval Date:</strong> June 15, 2023</p> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <div class="flex justify-between"> | |
| <div class="w-1/2 pr-4"> | |
| <p class="border-t pt-2 text-center">Vendor Signature</p> | |
| <div class="signature-pad h-20 mt-2"></div> | |
| </div> | |
| <div class="w-1/2 pl-4"> | |
| <p class="border-t pt-2 text-center">Company Representative</p> | |
| <div class="signature-pad h-20 mt-2"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Approval Modal --> | |
| <div id="approvalModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"> | |
| <i class="fas fa-check text-blue-600"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modalTitle">Approve Work Order</h3> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-500">Are you sure you want to approve this work order?</p> | |
| <div class="mt-4"> | |
| <label for="approvalNotes" class="block text-sm font-medium text-gray-700">Approval Notes (Optional)</label> | |
| <textarea id="approvalNotes" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" id="confirmApprove" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Confirm Approval | |
| </button> | |
| <button type="button" id="cancelApprove" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Rejection Modal --> | |
| <div id="rejectionModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> | |
| <i class="fas fa-times text-red-600"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modalTitle">Reject Work Order</h3> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-500">Are you sure you want to reject this work order?</p> | |
| <div class="mt-4"> | |
| <label for="rejectionReason" class="block text-sm font-medium text-gray-700">Reason for Rejection (Required)</label> | |
| <textarea id="rejectionReason" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" id="confirmReject" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Confirm Rejection | |
| </button> | |
| <button type="button" id="cancelReject" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Edit Work Order Modal --> | |
| <div id="editModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"> | |
| <i class="fas fa-edit text-blue-600"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Edit Work Order</h3> | |
| <div class="mt-2"> | |
| <form id="editWorkOrderForm" class="space-y-4"> | |
| <input type="hidden" id="editWoId"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="editWoNumber" class="block text-sm font-medium text-gray-700">Work Order #</label> | |
| <input type="text" id="editWoNumber" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" readonly> | |
| </div> | |
| <div> | |
| <label for="editWoDate" class="block text-sm font-medium text-gray-700">Date</label> | |
| <input type="date" id="editWoDate" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="editVendor" class="block text-sm font-medium text-gray-700">Vendor</label> | |
| <select id="editVendor" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <option value="1">ABC Construction Co.</option> | |
| <option value="2">XYZ Maintenance Services</option> | |
| <option value="3">Global Tech Solutions</option> | |
| <option value="4">Premium Cleaning Services</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="editProject" class="block text-sm font-medium text-gray-700">Project Name</label> | |
| <input type="text" id="editProject" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| </div> | |
| <div> | |
| <label for="editDescription" class="block text-sm font-medium text-gray-700">Work Description</label> | |
| <textarea id="editDescription" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label for="editStartDate" class="block text-sm font-medium text-gray-700">Start Date</label> | |
| <input type="date" id="editStartDate" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| </div> | |
| <div> | |
| <label for="editEndDate" class="block text-sm font-medium text-gray-700">End Date</label> | |
| <input type="date" id="editEndDate" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| </div> | |
| <div> | |
| <label for="editCost" class="block text-sm font-medium text-gray-700">Estimated Cost ($)</label> | |
| <input type="number" id="editCost" step="0.01" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="editStatus" class="block text-sm font-medium text-gray-700">Status</label> | |
| <select id="editStatus" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <option value="approved">Approved</option> | |
| <option value="completed">Completed</option> | |
| <option value="archived">Archived</option> | |
| </select> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" id="confirmEdit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Save Changes | |
| </button> | |
| <button type="button" id="cancelEdit" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Delete Confirmation Modal --> | |
| <div id="deleteModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> | |
| <i class="fas fa-exclamation-triangle text-red-600"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Delete Work Order</h3> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-500">Are you sure you want to delete this work order? This action cannot be undone.</p> | |
| <div class="mt-4"> | |
| <label for="deleteReason" class="block text-sm font-medium text-gray-700">Reason for Deletion (Optional)</label> | |
| <textarea id="deleteReason" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" id="confirmDelete" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Delete | |
| </button> | |
| <button type="button" id="cancelDelete" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Work Order Data Storage | |
| const workOrders = [ | |
| { | |
| id: 1, | |
| woNumber: 'WO-2023-013', | |
| date: '2023-06-15', | |
| vendor: 'Premium Cleaning Services', | |
| </html> |