buat menu knowaldgebase untuk menampilkan panduan-panduan terkait fitur yang ada di sistem jezpro. ada beberapa fitur utama yaitu, Inventory, Sales, Purchase Order, Finance, HRIS, Master Data dan Report. didalam fitur utama tersebut ada sub menu nya masing-masing yang perlu di tampilkan panduan nya tiap sub menu
c46a068 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JezPro Knowledgebase</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <header class="bg-undefined-500 text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-3xl font-bold">JezPro Knowledgebase</h1> | |
| <p class="mt-2">Your guide to mastering JezPro features</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Search Bar --> | |
| <div class="mb-8"> | |
| <div class="relative"> | |
| <input type="text" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-undefined-500" placeholder="Search for guides..."> | |
| <i data-feather="search" class="absolute right-4 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <!-- Feature Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Inventory --> | |
| <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300"> | |
| <h2 class="text-xl font-semibold mb-4 text-undefined 500">Inventory</h2> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Manajemen Stok</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Transfer Stok</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Penyesuaian Stok</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Laporan Inventory</a></li> | |
| </ul> | |
| </div> | |
| <!-- Sales --> | |
| <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300"> | |
| <h2 class="text-xl font-semibold mb-4 text-undefined 500">Sales</h2> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Penjualan</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Retur Penjualan</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Faktur</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Pelanggan</a></li> | |
| </ul> | |
| </div> | |
| <!-- Purchase Order --> | |
| <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300"> | |
| <h2 class="text-xl font-semibold mb-4 text-undefined 500">Purchase Order</h2> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Pembelian</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Retur Pembelian</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Supplier</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Penerimaan Barang</a></li> | |
| </ul> | |
| </div> | |
| <!-- Finance --> | |
| <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300"> | |
| <h2 class="text-xl font-semibold mb-4 text-undefined 500">Finance</h2> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Akuntansi</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Pembayaran</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Piutang</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Utang</a></li> | |
| </ul> | |
| </div> | |
| <!-- HRIS --> | |
| <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300"> | |
| <h2 class="text-xl font-semibold mb-4 text-undefined 500">HRIS</h2> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Karyawan</a></li> | |
| <li><a href="#" class="text-undefined-6òù00 hover:text-undefined-700">Absensi</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Penggajian</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Cuti</a></li> | |
| </ul> | |
| </div> | |
| <!-- Master Data --> | |
| <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300"> | |
| <h2 class="text-xl font-semibold mb-4 text-undefined 500">Master Data</h2> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Produk</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Kategori</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Gudang</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Satuan</a></li> | |
| </ul> | |
| </div> | |
| <!-- Report --> | |
| <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300"> | |
| <h2 class="text-xl font-semibold mb-4 text-undefined 500">Report</h2> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Laporan Keuangan</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Laporan Penjualan</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Laporan Pembelian</a></li> | |
| <li><a href="#" class="text-undefined-600 hover:text-undefined-700">Laporan HR</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-gray-800 text-white py-6"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p>© 2023 JezPro. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |