bao/portal-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
pbao9
2026-02-02 22:55:43 +07:00
parent 8125804bac
commit 8b3be9cc58
7 changed files with 105 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/View/Components/ButtonCRM.php
+37
View File
@@ -0,0 +1,37 @@
<?php
namespace App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class ButtonCRM extends Component
{
/**
* Create a new component instance.
*/
public $type;
public $route;
public $url;
public $icon;
public $variant;
public $size;
public function __construct($type = 'button', $route = null, $url = null, $icon = null, $variant = 'primary', $size = 'md')
{
$this->type = $type;
$this->route = $route;
$this->url = $url;
$this->icon = $icon;
$this->variant = $variant;
$this->size = $size;
}
/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.button-c-r-m');
}
}
public/css/style.css
+1 -1
View File
@@ -20447,4 +20447,4 @@ div.tox .tox-button::before {
.wizard.vertical > .actions > ul > li {
margin: 0 0 0 0.7em;
}
}
resources/views/administrator/pages/block/Sync/All.blade.php
+1 -1
View File
@@ -1 +1 @@
<a href="{{ route('package.sync.all') }}" class="btn btn-outline-secondary"><i class="fas fa-sync"></i> Sync All Package</a>
<x-button-crm type="button" variant="primary" size="sm" route="package.sync.all" icon="refresh-cw">Sync All Package</x-button-crm>
resources/views/administrator/pages/block/Sync/Datacenter.blade.php
+2 -2
View File
@@ -1,3 +1,3 @@
<a href="{{ route('package.datacenter.create') }}" class="btn btn-outline-secondary"><i class="fas fa-plus-circle"></i> Add Datacenter</a>
<x-button-crm type="button" variant="primary" size="sm" route="package.datacenter.create" icon="plus-circle">Add Datacenter</x-button-crm>
@include("administrator.pages.block.Sync.All")
<a href="{{ route('package.datacenter.sync') }}" class="btn btn-outline-secondary"><i class="fas fa-sync"></i> Sync Datacenter</a>
<x-button-crm type="button" variant="primary" size="sm" route="package.datacenter.sync" icon="refresh-cw">Sync Datacenter</x-button-crm>
resources/views/administrator/pages/package/datacenter/index.blade.php
+10 -11
View File
@@ -21,10 +21,10 @@
</div>
<div class="card-body">
<x-datatable id="datacenterTable" ajax="{{ route('package.datacenter.datatable') }}" :columns="[
['key' => 'name', 'label' => 'Name'],
['key' => 'v_center.host', 'label' => 'Vcenter Host'],
['key' => 'action', 'label' => 'Action'],
]" />
['key' => 'name', 'label' => 'Name'],
['key' => 'v_center.host', 'label' => 'Vcenter Host'],
['key' => 'action', 'label' => 'Action'],
]" />
</div>
</div>
@@ -35,10 +35,9 @@
</div>
@endif
@endsection
@push('plugin-scripts')
<script src="{{ asset('build/plugins/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('build/plugins/select2/select2.min.js') }}"></script>
<script src="{{ asset('build/plugins/datatables.net/dataTables.min.js') }}"></script>
<script src="{{ asset('build/plugins/datatables.net-bs5/dataTables.bootstrap5.min.js') }}"></script>
@endpush
@push('plugin-scripts')
<script src="{{ asset('build/plugins/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('build/plugins/select2/select2.min.js') }}"></script>
<script src="{{ asset('build/plugins/datatables.net/dataTables.min.js') }}"></script>
<script src="{{ asset('build/plugins/datatables.net-bs5/dataTables.bootstrap5.min.js') }}"></script>
@endpush
resources/views/components/README.md
-127
View File
@@ -1,127 +0,0 @@
# Service Card Component
## Overview
The `service-card` component is a reusable Blade component designed to display service statistics in a clean, modern card format with hover effects and tooltips.
## Usage
### Basic Usage
```blade
<x-service-card
icon="box"
iconColor="text-green-400"
badgeColor="bg-green-400"
title="Services"
value="5"
label="Active Services"
tooltip="Total active services"
/>
```
### With Animation Delay
```blade
<x-service-card
icon="credit-card"
iconColor="text-primary"
badgeColor="bg-primary"
title="Balance"
value="1,000,000 đ"
label="Account Balance"
tooltip="Current account balance"
:animationDelay="0.2"
/>
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `icon` | string | `'box'` | Lucide icon name |
| `iconColor` | string | `'text-green-400'` | Tailwind CSS color class for icon |
| `badgeColor` | string | `'bg-green-400'` | Tailwind CSS color class for badge |
| `title` | string | `''` | Badge title text |
| `value` | mixed | `0` | Main value to display |
| `label` | string | `''` | Label text below value |
| `tooltip` | string | `''` | Tooltip text on hover |
| `animationDelay` | float | `0` | Animation delay in seconds |
## Features
- **Responsive Design**: Adapts to different screen sizes
- **Hover Effects**: Scale animation on hover
- **Tooltips**: Alpine.js powered tooltips with smooth transitions
- **Animation**: Staggered fade-in animations
- **Accessibility**: Proper ARIA attributes and keyboard navigation
- **Internationalization**: Supports Laravel's translation system
## Styling
The component uses Tailwind CSS classes and includes:
- Shadow effects
- Rounded corners
- Smooth transitions
- Background decorations
- Responsive grid layout
## Dependencies
- **Laravel Blade**: For component rendering
- **Tailwind CSS**: For styling
- **Alpine.js**: For interactive features
- **Lucide Icons**: For icon display
- **Animate.css**: For animations (optional)
## Example Implementation
```php
// In your controller
$serviceCards = [
[
'icon' => 'box',
'iconColor' => 'text-green-400',
'badgeColor' => 'bg-green-400',
'title' => __('Services'),
'value' => count($services),
'label' => __('Services'),
'tooltip' => __('Total active services')
],
// ... more cards
];
return view('dashboard', compact('serviceCards'));
```
```blade
<!-- In your Blade view -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5">
@foreach($serviceCards as $index => $card)
<x-service-card
:icon="$card['icon']"
:iconColor="$card['iconColor']"
:badgeColor="$card['badgeColor']"
:title="$card['title']"
:value="$card['value']"
:label="$card['label']"
:tooltip="$card['tooltip']"
:animationDelay="$index * 0.1"
/>
@endforeach
</div>
```
## Customization
You can customize the component by:
1. Modifying the component file directly
2. Publishing the component to your app directory
3. Creating a new component that extends this one
4. Using CSS custom properties for theming
## Best Practices
1. **Use meaningful icons**: Choose Lucide icons that represent the data
2. **Consistent colors**: Use a consistent color scheme across cards
3. **Proper translations**: Always use Laravel's translation system
4. **Accessible text**: Provide meaningful tooltips and labels
5. **Performance**: Keep animation delays reasonable (0.1s intervals)
6. **Mobile-first**: Ensure cards work well on mobile devices
resources/views/components/button-c-r-m.blade.php
+54
View File
@@ -0,0 +1,54 @@
@php
$tag = 'button';
$href = null;
if ($route) {
$href = route($route);
$tag = 'a';
} elseif ($url) {
$href = $url;
$tag = 'a';
} elseif ($attributes->has('href')) {
$href = $attributes->get('href');
$tag = 'a';
}
$baseClasses = 'd-inline-flex gap-2 align-items-center justify-content-center text-white border-0 shadow-md px-2 py-1 rounded-2';
$variants = [
'primary' => 'bg-primary',
'secondary' => 'bg-secondary',
'outline' => 'bg-outline',
'ghost' => 'bg-ghost',
'link' => 'bg-link',
'destructive' => 'bg-destructive',
];
$sizes = [
'default' => 'h-10',
'sm' => 'h-6',
'lg' => 'h-12',
'icon' => 'h-10',
];
$variantClass = $variants[$variant] ?? $variants['primary'];
$sizeClass = $sizes[$size] ?? $sizes['default'];
$classes = "{$baseClasses} {$variantClass} {$sizeClass}";
@endphp
@if($tag === 'a')
<a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
@if($icon)
<i data-lucide="{{ $icon }}" class="mr-2" style="height: 15px; width: 15px"></i>
@endif
{{ $slot }}
</a>
@else
<button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
@if($icon)
<i data-lucide="{{ $icon }}" class="w-1 h-1 mr-2"></i>
@endif
{{ $slot }}
</button>
@endif