I want an offline application for project management. It should be like dashboard. The input file is output of SAP T code md4c, saved as a .txt file
4323110 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Projects - ProjectFlow Navigator</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#faf6ff', | |
| 100: '#f3e8ff', | |
| 200: '#e9d5ff', | |
| 300: '#d8b4fe', | |
| 400: '#c084fc', | |
| 500: '#a855f7', | |
| 600: '#9333ea', | |
| 700: '#7e22ce', | |
| 800: '#6b21a8', | |
| 900: '#581c87', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .project-card { | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .status-badge { | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Navigation Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <div class="w-8 h-8 rounded-lg bg-primary-500 flex items-center justify-center mr-2"> | |
| <i data-feather="trello" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="text-xl font-bold text-gray-800">ProjectFlow</span> | |
| </div> | |
| <nav class="hidden md:ml-6 md:flex space-x-4"> | |
| <a href="index.html" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Dashboard</a> | |
| <a href="projects.html" class="bg-primary-100 text-primary-700 px-3 py-2 rounded-md text-sm font-medium">Projects</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Timeline</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Reports</a> | |
| </nav> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center"> | |
| <i data-feather="user" class="text-primary-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Page Header --> | |
| <div class="md:flex md:items-center md:justify-between mb-8"> | |
| <div class="flex-1 min-w-0"> | |
| <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">All Projects</h2> | |
| <p class="mt-1 text-sm text-gray-500">Manage and track your SAP implementation projects</p> | |
| </div> | |
| <div class="mt-4 flex md:mt-0 md:ml-4"> | |
| <button type="button" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| New Project | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Filters and Search --> | |
| <div class="bg-white shadow rounded-lg p-4 mb-6"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0"> | |
| <div class="flex-1"> | |
| <div class="relative rounded-md shadow-sm"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="search" class="h-4 w-4 text-gray-400"></i> | |
| </div> | |
| <input type="text" name="search" id="search" class="focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md py-2" placeholder="Search projects..."> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <select class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"> | |
| <option>All Status</option> | |
| <option>Not Started</option> | |
| <option>In Progress</option> | |
| <option>Completed</option> | |
| <option>Overdue</option> | |
| </select> | |
| <select class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"> | |
| <option>Sort by: Newest</option> | |
| <option>Sort by: Oldest</option> | |
| <option>Sort by: Name</option> | |
| <option>Sort by: Status</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Projects Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Project Card 1 --> | |
| <div class="project-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="status-badge bg-green-100 text-green-800">Completed</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 bg-blue-50 rounded-lg mr-4"> | |
| <i data-feather="box" class="w-6 h-6 text-blue-500"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Material Requirements Planning</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm mb-4">SAP MRP implementation for production planning and inventory management</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Progress</span> | |
| <span>100%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-1"></i> | |
| <span>Dec 15, 2023</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="users" class="w-4 h-4 mr-1"></i> | |
| <span>5</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-primary-600 hover:text-primary-500">View details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 2 --> | |
| <div class="project-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="status-badge bg-yellow-100 text-yellow-800">In Progress</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 bg-green-50 rounded-lg mr-4"> | |
| <i data-feather="trending-up" class="w-6 h-6 text-green-500"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Inventory Optimization</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm mb-4">Optimizing stock levels and reducing carrying costs across warehouses</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Progress</span> | |
| <span>45%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-yellow-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-1"></i> | |
| <span>Jan 20, 2024</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="users" class="w-4 h-4 mr-1"></i> | |
| <span>8</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-primary-600 hover:text-primary-500">View details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 3 --> | |
| <div class="project-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="status-badge bg-blue-100 text-blue-800">On Track</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 bg-purple-50 rounded-lg mr-4"> | |
| <i data-feather="settings" class="w-6 h-6 text-purple-500"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Production Scheduling</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm mb-4">Advanced production planning and scheduling system implementation</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Progress</span> | |
| <span>75%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-blue-500 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-1"></i> | |
| <span>Feb 10, 2024</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="users" class="w-4 h-4 mr-1"></i> | |
| <span>6</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-primary-600 hover:text-primary-500">View details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 4 --> | |
| <div class="project-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="status-badge bg-red-100 text-red-800">Overdue</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 bg-red-50 rounded-lg mr-4"> | |
| <i data-feather="alert-triangle" class="w-6 h-6 text-red-500"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Quality Management</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm mb-4">Implementing quality control processes and inspection plans</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Progress</span> | |
| <span>30%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-red-500 h-2 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-1"></i> | |
| <span>Nov 30, 2023</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="users" class="w-4 h-4 mr-1"></i> | |
| <span>4</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-primary-600 hover:text-primary-500">View details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 5 --> | |
| <div class="project-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="status-badge bg-gray-100 text-gray-800">Not Started</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 bg-indigo-50 rounded-lg mr-4"> | |
| <i data-feather="dollar-sign" class="w-6 h-6 text-indigo-500"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Cost Accounting</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm mb-4">Implementation of cost center accounting and profitability analysis</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Progress</span> | |
| <span>0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-gray-400 h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-1"></i> | |
| <span>Mar 15, 2024</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="users" class="w-4 h-4 mr-1"></i> | |
| <span>7</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-primary-600 hover:text-primary-500">View details</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 6 --> | |
| <div class="project-card bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="status-badge bg-green-100 text-green-800">Completed</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 bg-teal-50 rounded-lg mr-4"> | |
| <i data-feather="truck" class="w-6 h-6 text-teal-500"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Logistics Management</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm mb-4">Transportation management and warehouse integration project</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Progress</span> | |
| <span>100%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-1"></i> | |
| <span>Oct 5, 2023</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="users" class="w-4 h-4 mr-1"></i> | |
| <span>9</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-primary-600 hover:text-primary-500">View details</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 mt-8 rounded-lg shadow-sm"> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing | |
| <span class="font-medium">1</span> | |
| to | |
| <span class="font-medium">6</span> | |
| of | |
| <span class="font-medium">24</span> | |
| results | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Previous</span> | |
| <i data-feather="chevron-left" class="h-4 w-4"></i> | |
| </a> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">1</a> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">3</a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Next</span> | |
| <i data-feather="chevron-right" class="h-4 w-4"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Simple search functionality | |
| document.getElementById('search').addEventListener('input', function(e) { | |
| const searchTerm = e.target.value.toLowerCase(); | |
| const projectCards = document.querySelectorAll('.project-card'); | |
| projectCards.forEach(card => { | |
| const title = card.querySelector('h3').textContent.toLowerCase(); | |
| const description = card.querySelector('p').textContent.toLowerCase(); | |
| if (title.includes(searchTerm) || description.includes(searchTerm)) { | |
| card.style.display = 'block'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |