system parameter page added
This commit is contained in:
erishBRBS
parent
e70ffa85a1
commit
2a92dc2983
|
|
@ -3,11 +3,16 @@
|
|||
namespace App\Livewire;
|
||||
|
||||
use Livewire\Component;
|
||||
use Livewire\WithFileUploads; // Required for file uploads
|
||||
use Livewire\Attributes\Layout; // Required for layout declaration
|
||||
|
||||
#[Layout('layouts.dashboard')] // Attribute syntax for Laravel 11
|
||||
class SystemParameter extends Component
|
||||
{
|
||||
use WithFileUploads;
|
||||
|
||||
public $image;
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.system-parameter.system-parameter');
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<input type="text" wire:model.debounce.500ms="search"
|
||||
class="w-80 p-2 border border-gray-300 rounded-md"
|
||||
placeholder="Search..."
|
||||
autofocus>
|
||||
>
|
||||
|
||||
<!-- Add Button (if enabled and route exists) -->
|
||||
@if ($hasAddButton && $addRoute)
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
<!-- Dynamic Columns (sortable) -->
|
||||
@foreach ($columns as $column)
|
||||
<th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')">
|
||||
<th class="px-4 py-2 text-left cursor-pointer " wire:click="sortBy('{{ $column['field'] }}')">
|
||||
{{ $column['label'] }}
|
||||
@if ($sortField === $column['field'])
|
||||
@if ($sortDirection === 'asc')
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
<!-- Table Body -->
|
||||
<tbody>
|
||||
@forelse ($rows as $row)
|
||||
<tr class="hover:bg-gray-50">
|
||||
<tr class="hover:bg-gray-50 border-b">
|
||||
<!-- Checkbox for row selection (if enabled) -->
|
||||
@if ($hasCheckbox)
|
||||
<td class="px-4 py-2">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,178 @@
|
|||
<div>
|
||||
{{-- Top Nav --}}
|
||||
@include('livewire.system-parameter.top-nav.system-parameter')
|
||||
<h1>This is system parameter page</h1>
|
||||
{{-- Top Nav --}}
|
||||
@include('livewire.system-parameter.top-nav.system-parameter')
|
||||
|
||||
<div class="mt-10">
|
||||
<div class="p-4 bg-white shadow-md">
|
||||
<div class="p-6 w-[80%] mx-auto bg-white rounded-md shadow-md">
|
||||
<h2 class="text-2xl font-semibold mb-4">Company Logo</h2>
|
||||
|
||||
<!-- Upload Logo -->
|
||||
<div class="flex justify-center items-start gap-4">
|
||||
<label class="w-40 p-2 text-right font-medium">Upload Image:</label>
|
||||
<div class="flex-1">
|
||||
<label class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-md p-8 cursor-pointer hover:bg-gray-50 transition">
|
||||
<input type="file" wire:model="image" class="hidden" accept="image/*">
|
||||
<img src="/assets/unioil(orange).png" alt="Upload" class="h-16 mb-4" />
|
||||
<p class="text-gray-600 font-semibold text-center">Click or drag file to this area to upload</p>
|
||||
<p class="text-gray-400 text-sm">Support for a single upload only</p>
|
||||
</label>
|
||||
|
||||
@error('image')
|
||||
<span class="text-red-500 text-sm">{{ $message }}</span>
|
||||
@enderror
|
||||
|
||||
@if ($image)
|
||||
<div class="mt-6">
|
||||
<p class="text-sm text-gray-600 mb-2">Preview:</p>
|
||||
<img src="{{ $image->temporaryUrl() }}" class="h-48 rounded border shadow">
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gps Radius -->
|
||||
<div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md">
|
||||
<h2 class="text-2xl font-semibold mb-4">GPS Radius</h2>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<label class="w-60 text-right font-medium">GPS Radius (in meters):</label>
|
||||
<input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Enter radius" value="2000000000000">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer Service Details -->
|
||||
<div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md">
|
||||
<h2 class="text-2xl font-semibold mb-4">Customer Service Details</h2>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<label class="w-60 text-right font-medium">Contact Email Address:</label>
|
||||
<input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Email address" value="loyalty@unioil.com">
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4 mt-5">
|
||||
<label class="w-60 text-right font-medium">Contact Number:</label>
|
||||
<input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Contact number" value="02 868 788 77">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Administrator Details -->
|
||||
<div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md">
|
||||
<h2 class="text-2xl font-semibold mb-4">System Administrator Details</h2>
|
||||
|
||||
<div class="flex items-center gap-4 mt-5">
|
||||
<label class="w-60 text-right font-medium">Contact Details:</label>
|
||||
<input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Contact number" value="grmontino@unioil.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Information Guide Details -->
|
||||
<div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md">
|
||||
<h2 class="text-2xl font-semibold mb-4">Information Guide Details</h2>
|
||||
|
||||
<div class="flex items-start gap-4 mt-5">
|
||||
<label class="w-60 text-right font-medium flex items-center">
|
||||
Details:
|
||||
<span class="ml-2 relative group cursor-pointer">
|
||||
<i class="fas fa-question-circle text-gray-500"></i>
|
||||
|
||||
<!-- Tooltip -->
|
||||
<div class="absolute left-6 top-1/2 transform -translate-y-1/2 w-72 bg-gray-800 text-white text-sm rounded-md p-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10 shadow-md">
|
||||
This content will be used in the <strong>"Enter ID Number"</strong> page as part of the <strong>Apply for a Card</strong> process of the Unioil Mobile App.
|
||||
|
||||
<!-- Arrow -->
|
||||
<div class="absolute -left-1.5 top-1/2 transform -translate-y-1/2 w-3 h-3 bg-gray-800 rotate-45"></div>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<textarea wire:model="info_guide" class="flex-1 border rounded px-3 py-2 h-32 resize-none" placeholder="Enter information guide...">Testing</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Android Version Update -->
|
||||
<div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md">
|
||||
<h2 class="text-2xl font-semibold mb-4">Android Version Update</h2>
|
||||
|
||||
<div class="flex items-center gap-4 mt-5">
|
||||
<label class="w-60 text-right font-medium">Android Version:</label>
|
||||
<input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Version" value="1.7.17">
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 mt-5">
|
||||
<label class="w-60 text-right font-medium">Version Update Message:</label>
|
||||
<textarea wire:model="info_guide" class="flex-1 border rounded px-3 py-2 h-32 resize-none" value="test" placeholder="Message">A new update is available to provide you with a more secure, stable and seamless user experience.</textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4 mt-5">
|
||||
<label class="w-60 text-right font-medium">Version Action:</label>
|
||||
<select wire:model="version_action" class="flex-1 border rounded px-3 py-2">
|
||||
<option value="update">Update</option>
|
||||
<option value="force update">Force Update</option>
|
||||
<option value="silent update">Silent Update</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IOS Version Update -->
|
||||
<div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md">
|
||||
<h2 class="text-2xl font-semibold mb-4">IOS Version Update</h2>
|
||||
|
||||
<div class="flex items-center gap-4 mt-5">
|
||||
<label class="w-60 text-right font-medium">IOS Version:</label>
|
||||
<input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Version" value="">
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 mt-5">
|
||||
<label class="w-60 text-right font-medium">Version Update Message:</label>
|
||||
<textarea wire:model="info_guide" class="flex-1 border rounded px-3 py-2 h-32 resize-none" value="test" placeholder="Message">A new update is available to provide you with a more secure, stable and seamless user experience.</textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4 mt-5">
|
||||
<label class="w-60 text-right font-medium">Version Action:</label>
|
||||
<select wire:model="version_action" class="flex-1 border rounded px-3 py-2">
|
||||
<option value="update">Update</option>
|
||||
<option value="force update">Force Update</option>
|
||||
<option value="silent update">Silent Update</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Sync Data Section with Info Tooltip -->
|
||||
<div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md relative" x-data="{ open: false }">
|
||||
<h2 class="text-2xl font-semibold mb-4">Update Details</h2>
|
||||
|
||||
<!-- Info Tooltip -->
|
||||
<div class="absolute left-0 -top-32 w-[30rem]" x-show="open" x-transition>
|
||||
<div class="bg-white border rounded-md shadow-md p-4">
|
||||
<h3 class="font-semibold mb-2">Info</h3>
|
||||
<p class="text-sm text-gray-700">
|
||||
Select this button to sync the below data from the Unioil Website to the Unioil Mobile App system.
|
||||
</p>
|
||||
<ul class="text-sm text-gray-700 list-disc list-inside mt-2">
|
||||
<li>City and Province</li>
|
||||
<li>Products</li>
|
||||
<li>Stations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button -->
|
||||
<button
|
||||
@mouseenter="open = true"
|
||||
@mouseleave="open = false"
|
||||
wire:click="sync_data"
|
||||
class="mt-4 px-4 py-2 w-60 bg-blue-500 text-white rounded-md hover:bg-blue-600 cursor-pointer">
|
||||
Sync Data
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<div>
|
||||
<!-- anchor tag horizontally -->
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600">
|
||||
<div class="flex items-center gap-2 text-xs text-gray- sticky ">
|
||||
<!-- Home link -->
|
||||
<a href="/main/profile" class="flex items-center hover:text-orange-600">
|
||||
<x-heroicon-o-home class="w-3 h-3 mr-1" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue