sackey
cbae4564b9
- Implemented dashboard view with vehicle stats, active services, recent activity, and upcoming appointments. - Created estimates view with filtering options and a list of service estimates. - Developed invoices view to manage service invoices and payment history with filtering. - Added vehicles view to display registered vehicles and their details. - Built work orders view to track the progress of vehicle services with filtering and detailed information.
466 lines
26 KiB
PHP
466 lines
26 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
|
<head>
|
|
@include('partials.head')
|
|
@fluxAppearance
|
|
</head>
|
|
<body class="min-h-screen bg-white dark:bg-zinc-800">
|
|
<!-- Static Header with Search, Theme Switcher, and User Profile -->
|
|
<header class="bg-white dark:bg-zinc-800 border-b border-zinc-200 dark:border-zinc-700 fixed top-0 left-0 right-0 z-50 px-4 h-16">
|
|
<div class="flex items-center justify-between h-full">
|
|
<!-- Left Section: Sidebar Toggle + Logo -->
|
|
<div class="flex items-center space-x-3">
|
|
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" />
|
|
<flux:brand href="{{ route('dashboard') }}" name="" wire:navigate class="flex items-center">
|
|
<x-app-logo />
|
|
</flux:brand>
|
|
</div>
|
|
|
|
<!-- Center Section: Search Bar with Quick Actions -->
|
|
<div class="flex-1 max-w-2xl mx-8">
|
|
<div class="flex items-center space-x-3">
|
|
<!-- Search Component -->
|
|
<div class="flex-1">
|
|
<livewire:global-search />
|
|
</div>
|
|
|
|
|
|
<!-- Plus Icon for More Quick Actions -->
|
|
<flux:dropdown align="end">
|
|
<flux:button variant="primary" square icon="plus" aria-label="More quick actions" />
|
|
|
|
<flux:menu>
|
|
@if(auth()->user()->hasPermission('customers.create'))
|
|
<flux:menu.item icon="user-plus" href="{{ route('customers.create') }}" wire:navigate>
|
|
New Customer
|
|
</flux:menu.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('vehicles.create'))
|
|
<flux:menu.item icon="truck" href="{{ route('vehicles.create') }}" wire:navigate>
|
|
New Vehicle
|
|
</flux:menu.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('job-cards.create'))
|
|
<flux:menu.item icon="clipboard-document-list" href="{{ route('job-cards.create') }}" wire:navigate>
|
|
New Job Card
|
|
</flux:menu.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('appointments.create'))
|
|
<flux:menu.item icon="calendar" href="{{ route('appointments.create') }}" wire:navigate>
|
|
New Appointment
|
|
</flux:menu.item>
|
|
@endif
|
|
|
|
<flux:menu.separator />
|
|
|
|
@if(auth()->user()->hasPermission('estimates.create'))
|
|
<flux:menu.item icon="document-plus" href="{{ route('estimates.index') }}" wire:navigate>
|
|
New Estimate
|
|
</flux:menu.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('work-orders.create'))
|
|
<flux:menu.item icon="wrench-screwdriver" href="{{ route('work-orders.index') }}" wire:navigate>
|
|
New Work Order
|
|
</flux:menu.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('inspections.create'))
|
|
<flux:menu.item icon="clipboard-document-check" href="{{ route('inspections.index') }}" wire:navigate>
|
|
New Inspection
|
|
</flux:menu.item>
|
|
@endif
|
|
</flux:menu>
|
|
</flux:dropdown>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Section: Notifications, Theme Switcher, and User Profile -->
|
|
<div class="flex items-center space-x-3">
|
|
<!-- Notifications -->
|
|
<flux:dropdown align="end">
|
|
<flux:button variant="subtle" square class="relative" aria-label="Notifications">
|
|
<flux:icon.bell variant="mini" class="text-zinc-500 dark:text-white" />
|
|
<!-- Notification badge -->
|
|
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
|
|
</flux:button>
|
|
|
|
<flux:menu>
|
|
<div class="px-3 py-2 border-b border-zinc-200 dark:border-zinc-700">
|
|
<div class="font-semibold text-sm">Notifications</div>
|
|
</div>
|
|
<flux:menu.item icon="exclamation-triangle" href="#">
|
|
<div>
|
|
<div class="text-sm font-medium">Low Stock Alert</div>
|
|
<div class="text-xs text-zinc-500">Brake pads running low</div>
|
|
</div>
|
|
</flux:menu.item>
|
|
<flux:menu.item icon="clock" href="#">
|
|
<div>
|
|
<div class="text-sm font-medium">Appointment Reminder</div>
|
|
<div class="text-xs text-zinc-500">Service due in 1 hour</div>
|
|
</div>
|
|
</flux:menu.item>
|
|
<flux:menu.item icon="check-circle" href="#">
|
|
<div>
|
|
<div class="text-sm font-medium">Job Completed</div>
|
|
<div class="text-xs text-zinc-500">JC-2024-001 finished</div>
|
|
</div>
|
|
</flux:menu.item>
|
|
<flux:menu.separator />
|
|
<flux:menu.item href="#" class="text-center text-sm text-zinc-500">
|
|
View all notifications
|
|
</flux:menu.item>
|
|
</flux:menu>
|
|
</flux:dropdown>
|
|
|
|
<!-- Theme Switcher -->
|
|
<flux:dropdown x-data align="end">
|
|
<flux:button variant="subtle" square class="group" aria-label="Preferred color scheme">
|
|
<flux:icon.sun x-show="$flux.appearance === 'light'" variant="mini" class="text-zinc-500 dark:text-white" />
|
|
<flux:icon.moon x-show="$flux.appearance === 'dark'" variant="mini" class="text-zinc-500 dark:text-white" />
|
|
<flux:icon.moon x-show="$flux.appearance === 'system' && $flux.dark" variant="mini" />
|
|
<flux:icon.sun x-show="$flux.appearance === 'system' && ! $flux.dark" variant="mini" />
|
|
</flux:button>
|
|
|
|
<flux:menu>
|
|
<flux:menu.item icon="sun" x-on:click="$flux.appearance = 'light'">Light</flux:menu.item>
|
|
<flux:menu.item icon="moon" x-on:click="$flux.appearance = 'dark'">Dark</flux:menu.item>
|
|
<flux:menu.item icon="computer-desktop" x-on:click="$flux.appearance = 'system'">System</flux:menu.item>
|
|
</flux:menu>
|
|
</flux:dropdown>
|
|
|
|
<!-- User Profile -->
|
|
<flux:dropdown position="top" align="start">
|
|
<flux:profile name="{{ auth()->user()->name }}" avatar="" />
|
|
|
|
<flux:menu>
|
|
<flux:menu.item icon="user" href="{{ route('settings.profile') }}" wire:navigate>
|
|
My Profile
|
|
</flux:menu.item>
|
|
|
|
<flux:menu.item icon="key" href="{{ route('settings.password') }}" wire:navigate>
|
|
Change Password
|
|
</flux:menu.item>
|
|
|
|
@if(auth()->user()->hasPermission('settings.manage'))
|
|
<flux:menu.item icon="cog-6-tooth" href="{{ route('settings.general') }}" wire:navigate>
|
|
System Settings
|
|
</flux:menu.item>
|
|
@endif
|
|
|
|
<flux:menu.separator />
|
|
|
|
<div class="px-3 py-2 text-xs text-zinc-500 dark:text-zinc-400">
|
|
<div class="font-semibold">{{ auth()->user()->position ?? 'Employee' }}</div>
|
|
<div>{{ auth()->user()->department ?? 'General' }}</div>
|
|
<div class="text-xs">ID: {{ auth()->user()->employee_id ?? 'N/A' }}</div>
|
|
</div>
|
|
|
|
<flux:menu.separator />
|
|
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<flux:menu.item icon="arrow-right-start-on-rectangle" type="submit">
|
|
Logout
|
|
</flux:menu.item>
|
|
</form>
|
|
</flux:menu>
|
|
</flux:dropdown>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Sidebar -->
|
|
<flux:sidebar sticky stashable class="bg-zinc-50 dark:bg-zinc-900 border-r rtl:border-r-0 rtl:border-l border-zinc-200 dark:border-zinc-700 pt-16" x-data="sidebarState">
|
|
<flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
|
|
|
|
<!-- Main Navigation -->
|
|
<flux:navlist variant="outline">
|
|
<!-- Dashboard -->
|
|
@if(auth()->user()->hasPermission('dashboard.view'))
|
|
<flux:navlist.item icon="home" href="{{ route('dashboard') }}" :current="request()->routeIs('dashboard')" wire:navigate>
|
|
Dashboard
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
<!-- Core Operations -->
|
|
<flux:navlist.group expandable heading="Workshop Operations" x-model="collapsed.workshop">
|
|
@if(auth()->user()->hasPermission('job-cards.view'))
|
|
<flux:navlist.item icon="clipboard-document-list" href="{{ route('job-cards.index') }}" :current="request()->is('job-cards*')" wire:navigate>
|
|
Job Cards
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('work-orders.view'))
|
|
<flux:navlist.item icon="wrench-screwdriver" href="{{ route('work-orders.index') }}" :current="request()->is('work-orders*')" wire:navigate>
|
|
Work Orders
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('inspections.view'))
|
|
<flux:navlist.item icon="clipboard-document-check" href="{{ route('inspections.index') }}" :current="request()->is('inspections*')" wire:navigate>
|
|
Inspections
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('diagnosis.view'))
|
|
<flux:navlist.item icon="magnifying-glass-circle" href="{{ route('diagnosis.index') }}" :current="request()->is('diagnosis*')" wire:navigate>
|
|
Diagnostics
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('timesheets.view'))
|
|
<flux:navlist.item icon="clock" href="{{ route('timesheets.index') }}" :current="request()->is('timesheets*')" wire:navigate>
|
|
Timesheets
|
|
</flux:navlist.item>
|
|
@endif
|
|
</flux:navlist.group>
|
|
|
|
<!-- Customer Management -->
|
|
<flux:navlist.group expandable heading="Customer Management" x-model="collapsed.customers">
|
|
@if(auth()->user()->hasPermission('customers.view'))
|
|
<flux:navlist.item icon="users" href="{{ route('customers.list') }}" :current="request()->routeIs('customers.*')" wire:navigate>
|
|
Customers
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('vehicles.view'))
|
|
<flux:navlist.item icon="truck" href="{{ route('vehicles.index') }}" :current="request()->is('vehicles*')" wire:navigate>
|
|
Vehicles
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('appointments.view'))
|
|
<flux:navlist.item icon="calendar" href="{{ route('appointments.index') }}" :current="request()->is('appointments*')" wire:navigate>
|
|
Appointments
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('service-orders.view'))
|
|
<flux:navlist.item icon="document-text" href="{{ route('service-orders.list') }}" :current="request()->is('service-orders*')" wire:navigate>
|
|
Service Orders
|
|
</flux:navlist.item>
|
|
@endif
|
|
</flux:navlist.group>
|
|
|
|
<!-- Financial Management -->
|
|
<flux:navlist.group expandable heading="Financial" x-model="collapsed.financial">
|
|
@if(auth()->user()->hasPermission('estimates.view'))
|
|
<flux:navlist.item icon="document-plus" href="{{ route('estimates.index') }}" :current="request()->is('estimates*')" wire:navigate>
|
|
Estimates
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('service-orders.view'))
|
|
<flux:navlist.item icon="receipt-percent" href="#" :current="request()->is('invoices*')" wire:navigate>
|
|
Invoices
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('service-orders.view'))
|
|
<flux:navlist.item icon="credit-card" href="#" :current="request()->is('payments*')" wire:navigate>
|
|
Payments
|
|
</flux:navlist.item>
|
|
@endif
|
|
</flux:navlist.group>
|
|
|
|
<!-- Inventory & Resources -->
|
|
<flux:navlist.group expandable heading="Inventory & Resources" x-model="collapsed.inventory">
|
|
@if(auth()->user()->hasPermission('inventory.view'))
|
|
<flux:navlist.item icon="cube" href="{{ route('inventory.dashboard') }}" :current="request()->is('inventory*')" wire:navigate>
|
|
Inventory Dashboard
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('inventory.view'))
|
|
<flux:navlist.item icon="cog" href="{{ route('inventory.parts.index') }}" :current="request()->is('inventory/parts*')" wire:navigate>
|
|
Parts Catalog
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('inventory.view'))
|
|
<flux:navlist.item icon="building-storefront" href="{{ route('inventory.suppliers.index') }}" :current="request()->is('inventory/suppliers*')" wire:navigate>
|
|
Suppliers
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('inventory.purchase-orders'))
|
|
<flux:navlist.item icon="shopping-cart" href="{{ route('inventory.purchase-orders.index') }}" :current="request()->is('inventory/purchase-orders*')" wire:navigate>
|
|
Purchase Orders
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('inventory.stock-movements'))
|
|
<flux:navlist.item icon="arrows-right-left" href="{{ route('inventory.stock-movements.index') }}" :current="request()->is('inventory/stock-movements*')" wire:navigate>
|
|
Stock Movements
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('service-orders.view'))
|
|
<flux:navlist.item icon="list-bullet" href="{{ route('service-items.index') }}" :current="request()->is('service-items*')" wire:navigate>
|
|
Service Items
|
|
</flux:navlist.item>
|
|
@endif
|
|
</flux:navlist.group>
|
|
|
|
<!-- Staff Management -->
|
|
<flux:navlist.group expandable heading="Staff Management" x-model="collapsed.staff">
|
|
@if(auth()->user()->hasPermission('technicians.view'))
|
|
<flux:navlist.item icon="user-group" href="{{ route('technicians.index') }}" :current="request()->is('technicians*')" wire:navigate>
|
|
Technicians
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('technicians.update'))
|
|
<flux:navlist.item icon="academic-cap" href="{{ route('technician.skills') }}" :current="request()->is('technician/skills*')" wire:navigate>
|
|
Skills Management
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('technicians.view-performance'))
|
|
<flux:navlist.item icon="chart-bar-square" href="{{ route('technician.reports') }}" :current="request()->is('technician/reports*')" wire:navigate>
|
|
Performance Reports
|
|
</flux:navlist.item>
|
|
@endif
|
|
</flux:navlist.group>
|
|
</flux:navlist>
|
|
|
|
<flux:spacer />
|
|
|
|
<!-- Bottom Navigation -->
|
|
<flux:navlist variant="outline">
|
|
@if(auth()->user()->hasPermission('reports.view'))
|
|
<flux:navlist.item icon="chart-bar" href="{{ route('reports.index') }}" :current="request()->is('reports*')" wire:navigate>
|
|
Reports & Analytics
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('users.manage'))
|
|
<flux:navlist.item icon="users" href="{{ route('users.index') }}" :current="request()->routeIs('users.*')" wire:navigate>
|
|
User Management
|
|
</flux:navlist.item>
|
|
@endif
|
|
|
|
@if(auth()->user()->hasPermission('settings.manage'))
|
|
<flux:navlist.item icon="cog-6-tooth" href="{{ route('settings.general') }}" :current="request()->is('settings*')" wire:navigate>
|
|
Settings
|
|
</flux:navlist.item>
|
|
@endif
|
|
</flux:navlist>
|
|
</flux:sidebar>
|
|
|
|
<!-- Main Content -->
|
|
<flux:main class="pt-16">
|
|
{{ $slot }}
|
|
</flux:main>
|
|
|
|
<!-- Toast Notifications -->
|
|
@if(session('success'))
|
|
<div id="toast-success"
|
|
class="fixed bottom-4 right-4 z-50 flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow-lg border border-gray-200 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600 transform translate-y-0 opacity-100 transition-all duration-300 ease-in-out"
|
|
role="alert">
|
|
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
|
|
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
|
|
</svg>
|
|
<span class="sr-only">Check icon</span>
|
|
</div>
|
|
<div class="ms-3 text-sm font-normal">{{ session('success') }}</div>
|
|
<button type="button"
|
|
class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
|
|
data-dismiss-target="#toast-success"
|
|
aria-label="Close">
|
|
<span class="sr-only">Close</span>
|
|
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div id="toast-error"
|
|
class="fixed bottom-4 right-4 z-50 flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow-lg border border-gray-200 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600 transform translate-y-0 opacity-100 transition-all duration-300 ease-in-out"
|
|
role="alert">
|
|
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
|
|
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
|
|
</svg>
|
|
<span class="sr-only">Error icon</span>
|
|
</div>
|
|
<div class="ms-3 text-sm font-normal">{{ session('error') }}</div>
|
|
<button type="button"
|
|
class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
|
|
data-dismiss-target="#toast-error"
|
|
aria-label="Close">
|
|
<span class="sr-only">Close</span>
|
|
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
|
|
<script>
|
|
// Auto-hide toasts after 5 seconds with slide animation
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const toasts = document.querySelectorAll('[id^="toast-"]');
|
|
toasts.forEach(function(toast) {
|
|
// Initial slide-in animation
|
|
toast.style.transform = 'translateX(100%)';
|
|
toast.style.opacity = '0';
|
|
|
|
setTimeout(function() {
|
|
toast.style.transform = 'translateX(0)';
|
|
toast.style.opacity = '1';
|
|
}, 100);
|
|
|
|
// Auto-hide after 5 seconds
|
|
setTimeout(function() {
|
|
hideToast(toast);
|
|
}, 5000);
|
|
});
|
|
|
|
// Handle manual close buttons
|
|
document.querySelectorAll('[data-dismiss-target]').forEach(function(button) {
|
|
button.addEventListener('click', function() {
|
|
const targetId = this.getAttribute('data-dismiss-target');
|
|
const target = document.querySelector(targetId);
|
|
if (target) {
|
|
hideToast(target);
|
|
}
|
|
});
|
|
});
|
|
|
|
function hideToast(toast) {
|
|
toast.style.transform = 'translateX(100%)';
|
|
toast.style.opacity = '0';
|
|
setTimeout(function() {
|
|
toast.remove();
|
|
}, 300);
|
|
}
|
|
});
|
|
|
|
// Sidebar collapse state persistence
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('sidebarState', () => ({
|
|
collapsed: JSON.parse(localStorage.getItem('sidebarCollapsed') || '{}'),
|
|
|
|
init() {
|
|
this.$watch('collapsed', (value) => {
|
|
localStorage.setItem('sidebarCollapsed', JSON.stringify(value));
|
|
});
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
|
|
@livewireScripts
|
|
@fluxScripts
|
|
</body>
|
|
</html>
|