201 lines
12 KiB
HTML
201 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html :class="{ 'theme-dark': dark }" x-data="vendorsData()" lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Vendors - Admin Portal</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="/static/admin/css/tailwind.output.css" />
|
|
<style>
|
|
[x-cloak] { display: none !important; }
|
|
</style>
|
|
</head>
|
|
<body x-cloak>
|
|
<div class="flex h-screen bg-gray-50 dark:bg-gray-900" :class="{ 'overflow-hidden': isSideMenuOpen }">
|
|
<!-- Sidebar Container -->
|
|
<div id="sidebar-container"></div>
|
|
|
|
<div class="flex flex-col flex-1 w-full">
|
|
<!-- Header Container -->
|
|
<div id="header-container"></div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="h-full overflow-y-auto">
|
|
<div class="container px-6 mx-auto grid">
|
|
<div class="flex items-center justify-between my-6">
|
|
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
|
Vendor Management
|
|
</h2>
|
|
<button class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
|
<!-- Heroicon: plus -->
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
|
</svg>
|
|
Create Vendor
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Placeholder Content -->
|
|
<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<div class="text-center py-12">
|
|
<div class="mb-4">
|
|
<!-- Heroicon: shopping-bag (outline, large) -->
|
|
<svg class="mx-auto h-24 w-24 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="mb-2 text-xl font-semibold text-gray-700 dark:text-gray-200">
|
|
Vendor Management
|
|
</h3>
|
|
<p class="mb-6 text-gray-600 dark:text-gray-400">
|
|
This page will display vendor list and management tools.
|
|
</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
Features to be implemented:
|
|
</p>
|
|
<ul class="mt-4 text-sm text-gray-600 dark:text-gray-400 space-y-2">
|
|
<li>• View all vendors with filtering and search</li>
|
|
<li>• Create new vendors with detailed forms</li>
|
|
<li>• Edit vendor information</li>
|
|
<li>• Verify/unverify vendors</li>
|
|
<li>• View vendor statistics</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Example vendors table structure (for reference) -->
|
|
<div class="w-full overflow-hidden rounded-lg shadow-xs">
|
|
<div class="w-full overflow-x-auto">
|
|
<table class="w-full whitespace-no-wrap">
|
|
<thead>
|
|
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
|
|
<th class="px-4 py-3">Vendor Code</th>
|
|
<th class="px-4 py-3">Name</th>
|
|
<th class="px-4 py-3">Subdomain</th>
|
|
<th class="px-4 py-3">Status</th>
|
|
<th class="px-4 py-3">Created</th>
|
|
<th class="px-4 py-3">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
|
<template x-if="vendors.length === 0">
|
|
<tr>
|
|
<td colspan="6" class="px-4 py-8 text-sm text-center text-gray-600 dark:text-gray-400">
|
|
<div class="flex flex-col items-center">
|
|
<svg class="w-16 h-16 mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
|
|
</svg>
|
|
<p class="font-medium">No vendors found</p>
|
|
<p class="text-xs mt-1">Create your first vendor to get started</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
|
|
<template x-for="vendor in vendors" :key="vendor.id">
|
|
<tr class="text-gray-700 dark:text-gray-400">
|
|
<td class="px-4 py-3">
|
|
<p class="font-semibold text-sm" x-text="vendor.vendor_code"></p>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm" x-text="vendor.name"></td>
|
|
<td class="px-4 py-3 text-sm" x-text="vendor.subdomain"></td>
|
|
<td class="px-4 py-3 text-xs">
|
|
<span class="px-2 py-1 font-semibold leading-tight rounded-full"
|
|
:class="vendor.is_verified ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600'"
|
|
x-text="vendor.is_verified ? 'Verified' : 'Pending'">
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm" x-text="formatDate(vendor.created_at)"></td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center space-x-4 text-sm">
|
|
<button class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
|
|
aria-label="Edit">
|
|
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-red-600 rounded-lg dark:text-red-400 focus:outline-none focus:shadow-outline-gray"
|
|
aria-label="Delete">
|
|
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load partials BEFORE Alpine -->
|
|
<script src="/static/shared/js/partial-loader.js"></script>
|
|
<script src="/static/shared/js/icons.js"></script>
|
|
<script>
|
|
(async () => {
|
|
await window.partialLoader.loadAll({
|
|
'header-container': 'header.html',
|
|
'sidebar-container': 'sidebar.html'
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<!-- Alpine.js v3 -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
|
|
|
|
<!-- Initialize Alpine data -->
|
|
<script src="/static/admin/js/init-alpine.js"></script>
|
|
|
|
<!-- Vendors-specific logic -->
|
|
<script>
|
|
function vendorsData() {
|
|
return {
|
|
...data(), // Spread base data from init-alpine.js
|
|
currentPage: 'vendors',
|
|
vendors: [],
|
|
loading: false,
|
|
|
|
async init() {
|
|
await this.loadVendors();
|
|
},
|
|
|
|
async loadVendors() {
|
|
this.loading = true;
|
|
try {
|
|
// Replace with your actual API endpoint
|
|
const response = await fetch('/api/v1/admin/vendors', {
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
this.vendors = data.vendors || [];
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading vendors:', error);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
formatDate(dateString) {
|
|
if (!dateString) return '-';
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |