القائمة
Componentes de UI para orçamentos seguindo o padrão de components do Easy Budget.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/diegosouzapw/awesome-omni-skill --skill budget-ui-componentsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Token-efficient tracking for AI orchestration. CLI-first for status updates (~50 tokens), agent fallback for complex ops (~1KB). Use when: updating task status, querying blockers, creating progress files, validating phases.
AshAi extension guidelines for integrating AI capabilities with Ash Framework. Use when implementing vectorization/embeddings, exposing Ash actions as LLM tools, creating prompt-backed actions, or setting up MCP servers. Covers semantic search, LangChain integration, and structured outputs.
This skill should be used when solving hard questions, complex architectural problems, or debugging issues that benefit from GPT-5 Pro or GPT-5.1 thinking models with large file context. Use when standard Claude analysis needs deeper reasoning or extended context windows.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | budget-ui-components |
| description | Componentes de UI para orçamentos seguindo o padrão de components do Easy Budget. |
Esta skill define os componentes Blade específicos para a gestão de orçamentos no Easy Budget, seguindo o padrão de components estabelecido no sistema.
resources/views/components/
├── budget/
│ ├── budget-card.blade.php # Card resumido de orçamento
│ ├── budget-details.blade.php # Detalhes completos do orçamento
│ ├── budget-actions.blade.php # Ações disponíveis para orçamento
│ ├── budget-status.blade.php # Badge de status do orçamento
│ ├── budget-totals.blade.php # Totais e valores do orçamento
│ ├── budget-items.blade.php # Lista de itens/serviços do orçamento
│ ├── budget-filters.blade.php # Filtros específicos para orçamentos
│ └── budget-quick-stats.blade.php # Estatísticas rápidas de orçamentos
└── ...
Componente para exibição resumida de orçamentos em listas e dashboards.
<x-budget.budget-card :budget="$budget" :showCustomer="true" :showActions="true" />
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
budget | Budget | Modelo do orçamento | Obrigatório |
showCustomer | bool | Exibir informações do cliente | true |
showActions | bool | Exibir botões de ação | true |
variant | string | Estilo do card (primary, secondary, etc.) | primary |
@props([
'budget',
'showCustomer' => true,
'showActions' => true,
'variant' => 'primary'
])
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-3">
<div class="d-flex align-items-center gap-3">
<div class="avatar-circle bg-{{ $variant }} bg-gradient">
<i class="bi bi-file-earmark-text text-white"></i>
</div>
<div>
<h6 class="mb-1 fw-bold">{{ $budget->code }}</h6>
<small class="text-muted">{{ $budget->created_at->format('d/m/Y') }}</small>
</div>
</div>
<x-budget.budget-status :budget="$budget" />
</div>
@if($showCustomer && $budget->customer)
<div class="mb-3">
<small class="text-muted">Cliente:</small>
<div class="fw-semibold">{{ $budget->customer->display_name }}</div>
</div>
@endif
<div class="d-flex justify-content-between align-items-center">
<div>
<small class="text-muted">Valor Total</small>
<div class="h6 mb-0 fw-bold text-{{ $variant }}">
R$ {{ number_format($budget->total, 2, ',', '.') }}
</div>
</div>
@if($showActions)
<div class="btn-group btn-group-sm" role="group">
<a href="{{ route('provider.budgets.show', $budget) }}" class="btn btn-outline-primary">
<i class="bi bi-eye"></i> Ver
</a>
<a href="{{ route('provider.budgets.edit', $budget) }}" class="btn btn-outline-secondary">
<i class="bi bi-pencil"></i> Editar
</a>
</div>
@endif
</div>
</div>
</div>
Componente para exibição detalhada de informações do orçamento.
<x-budget.budget-details :budget="$budget" :showServices="true" :showTotals="true" />
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
budget | Budget | Modelo do orçamento | Obrigatório |
showServices | bool | Exibir serviços vinculados | true |
showTotals | bool | Exibir totais detalhados | true |
collapsible | bool | Permitir colapsar seções | false |
@props([
'budget',
'showServices' => true,
'showTotals' => true,
'collapsible' => false
])
<div class="budget-details">
<!-- Informações Básicas -->
<div class="row g-3 mb-3">
<div class="col-md-3">
<div class="info-item">
<label class="text-muted small">Código</label>
<div class="fw-bold">{{ $budget->code }}</div>
</div>
</div>
<div class="col-md-3">
<div class="info-item">
<label class="text-muted small">Data</label>
<div class="fw-bold">{{ $budget->created_at->format('d/m/Y H:i') }}</div>
</div>
</div>
<div class="col-md-3">
<div class="info-item">
<label class="text-muted small">Validade</label>
<div class="fw-bold">{{ $budget->due_date?->format('d/m/Y') ?? 'Indeterminado' }}</div>
</div>
</div>
<div class="col-md-3">
<div class="info-item">
<label class="text-muted small">Status</label>
<x-budget.budget-status :budget="$budget" />
</div>
</div>
</div>
<!-- Descrição -->
@if($budget->description)
<div class="row mb-3">
<div class="col-12">
<div class="card border-0">
<div class="card-body">
<label class="text-muted small">Descrição</label>
<p class="mb-0">{{ $budget->description }}</p>
</div>
</div>
</div>
</div>
@endif
<!-- Serviços -->
@if($showServices && $budget->services->isNotEmpty())
<div class="row mb-3">
<div class="col-12">
<div class="card border-0">
<div class="card-header bg-transparent border-0">
<h6 class="mb-0">Serviços Vinculados</h6>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Serviço</th>
<th>Categoria</th>
<th class="text-end">Valor</th>
</tr>
</thead>
<tbody>
@foreach($budget->services as $service)
<tr>
<td>{{ $service->description ?? $service->category->name }}</td>
<td>{{ $service->category->name }}</td>
<td class="text-end fw-bold">
R$ {{ number_format($service->total, 2, ',', '.') }}
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endif
<!-- Totais -->
@if($showTotals)
<x-budget.budget-totals :budget="$budget" />
@endif
</div>
Componente para exibição do status do orçamento com cores e ícones apropriados.
<x-budget.budget-status :budget="$budget" :showIcon="true" />
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
budget | Budget | Modelo do orçamento | Obrigatório |
showIcon | bool | Exibir ícone ao lado do status | true |
size | string | Tamanho do badge (sm, md, lg) | md |
@props([
'budget',
'showIcon' => true,
'size' => 'md'
])
@php
$status = $budget->status;
$metadata = $status->getMetadata();
$color = $metadata['color'] ?? '#6c757d';
$icon = $metadata['icon'] ?? 'circle';
$description = $metadata['description'] ?? $status->value;
$sizeClass = match($size) {
'sm' => 'badge-sm',
'lg' => 'badge-lg',
default => 'badge-md'
};
@endphp
<span class="badge modern-badge {{ $sizeClass }}"
style="background-color: {{ $color }}20; color: {{ $color }}; border: 1px solid {{ $color }}40;">
@if($showIcon)
<i class="bi {{ $icon }} me-1"></i>
@endif
{{ $description }}
</span>
Componente para exibição detalhada dos totais e valores do orçamento.
<x-budget.budget-totals :budget="$budget" :showBreakdown="true" />
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
budget | Budget | Modelo do orçamento | Obrigatório |
showBreakdown | bool | Exibir detalhamento dos valores | true |
variant | string | Estilo visual (primary, success, etc.) | primary |
@props([
'budget',
'showBreakdown' => true,
'variant' => 'primary'
])
<div class="budget-totals">
@if($showBreakdown)
<div class="row g-3 mb-3">
<div class="col-md-4">
<div class="card border-0">
<div class="card-body text-center">
<div class="text-muted small">Subtotal</div>
<div class="h5 mb-0 fw-bold">
R$ {{ number_format($budget->services->sum('total'), 2, ',', '.') }}
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0">
<div class="card-body text-center">
<div class="text-muted small">Desconto</div>
<div class="h5 mb-0 fw-bold text-danger">
- R$ {{ number_format($budget->discount, 2, ',', '.') }}
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 bg-{{ $variant }} bg-gradient text-white">
<div class="card-body text-center">
<div class="small">Valor Total</div>
<div class="h4 mb-0 fw-bold">
R$ {{ number_format($budget->total, 2, ',', '.') }}
</div>
</div>
</div>
</div>
</div>
@else
<div class="card border-0 bg-{{ $variant }} bg-gradient text-white">
<div class="card-body">
<div class="row align-items-center">
<div class="col-md-8">
<div class="small">Valor Total do Orçamento</div>
<div class="h3 mb-0 fw-bold">
R$ {{ number_format($budget->total, 2, ',', '.') }}
</div>
</div>
<div class="col-md-4 text-end">
<x-budget.budget-status :budget="$budget" />
</div>
</div>
</div>
</div>
@endif
</div>
Componente para exibição de ações disponíveis para um orçamento.
<x-budget.budget-actions :budget="$budget" :showShare="true" :showDelete="false" />
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
budget | Budget | Modelo do orçamento | Obrigatório |
showShare | bool | Exibir botão de compartilhamento | true |
showDelete | bool | Exibir botão de exclusão | false |
showPrint | bool | Exibir botão de impressão | true |
@props([
'budget',
'showShare' => true,
'showDelete' => false,
'showPrint' => true
])
<div class="budget-actions btn-group" role="group">
<!-- Visualizar -->
<a href="{{ route('provider.budgets.show', $budget) }}"
class="btn btn-outline-primary"
title="Visualizar Orçamento">
<i class="bi bi-eye"></i> Visualizar
</a>
<!-- Editar -->
@if($budget->status->isEditable())
<a href="{{ route('provider.budgets.edit', $budget) }}"
class="btn btn-outline-secondary"
title="Editar Orçamento">
<i class="bi bi-pencil"></i> Editar
</a>
@endif
<!-- Compartilhar -->
@if($showShare)
<button type="button"
class="btn btn-outline-info"
data-bs-toggle="modal"
data-bs-target="#shareModal-{{ $budget->id }}"
title="Compartilhar Orçamento">
<i class="bi bi-share"></i> Compartilhar
</button>
@endif
<!-- Imprimir -->
@if($showPrint)
<a href="{{ route('provider.budgets.pdf', $budget) }}"
class="btn btn-outline-warning"
target="_blank"
title="Imprimir Orçamento">
<i class="bi bi-printer"></i> Imprimir
</a>
@endif
<!-- Enviar por E-mail -->
<button type="button"
class="btn btn-outline-success"
data-bs-toggle="modal"
data-bs-target="#emailModal-{{ $budget->id }}"
title="Enviar por E-mail">
<i class="bi bi-envelope"></i> Enviar
</button>
<!-- Excluir -->
@if($showDelete && $budget->canDelete())
<button type="button"
class="btn btn-outline-danger"
data-bs-toggle="modal"
data-bs-target="#deleteModal-{{ $budget->id }}"
title="Excluir Orçamento">
<i class="bi bi-trash"></i> Excluir
</button>
@endif
</div>
Componente para filtros específicos de listagem de orçamentos.
<x-budget.budget-filters :filters="$filters" :showDateRange="true" />
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
filters | array | Filtros atuais | [] |
showDateRange | bool | Exibir filtro de período | true |
showStatus | bool | Exibir filtro por status | true |
showCustomer | bool | Exibir filtro por cliente | true |
@props([
'filters' => [],
'showDateRange' => true,
'showStatus' => true,
'showCustomer' => true
])
<div class="budget-filters">
<form action="{{ request()->url() }}" method="GET" class="row g-3">
<div class="col-md-3">
<label class="form-label small fw-bold text-muted text-uppercase">Código</label>
<input type="text"
name="code"
class="form-control form-control-sm"
value="{{ $filters['code'] ?? '' }}"
placeholder="Código do orçamento">
</div>
@if($showCustomer)
<div class="col-md-3">
<label class="form-label small fw-bold text-muted text-uppercase">Cliente</label>
<select name="customer_id" class="form-select form-select-sm">
<option value="">Todos os clientes</option>
@foreach($customers as $customer)
<option value="{{ $customer->id }}"
{{ ($filters['customer_id'] ?? '') == $customer->id ? 'selected' : '' }}>
{{ $customer->display_name }}
</option>
@endforeach
</select>
</div>
@endif
@if($showStatus)
<div class="col-md-3">
<label class="form-label small fw-bold text-muted text-uppercase">Status</label>
<select name="status" class="form-select form-select-sm">
<option value="">Todos os status</option>
@foreach(\App\Enums\BudgetStatus::cases() as $status)
@php $metadata = $status->getMetadata(); @endphp
<option value="{{ $status->value }}"
{{ ($filters['status'] ?? '') == $status->value ? 'selected' : '' }}>
{{ $metadata['description'] }}
</option>
@endforeach
</select>
</div>
@endif
@if($showDateRange)
<div class="col-md-3">
<label class="form-label small fw-bold text-muted text-uppercase">Período</label>
<div class="input-group input-group-sm">
<input type="date"
name="start_date"
class="form-control"
value="{{ $filters['start_date'] ?? '' }}">
<span class="input-group-text">até</span>
<input type="date"
name="end_date"
class="form-control"
value="{{ $filters['end_date'] ?? '' }}">
</div>
</div>
@endif
<div class="col-12">
<div class="d-flex justify-content-between">
<div class="btn-group" role="group">
<button type="submit" class="btn btn-primary btn-sm">
<i class="bi bi-search me-2"></i>Filtrar
</button>
<a href="{{ route('provider.budgets.index') }}" class="btn btn-outline-secondary btn-sm">
<i class="bi bi-x-circle me-2"></i>Limpar
</a>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-success btn-sm" data-bs-toggle="modal" data-bs-target="#createModal">
<i class="bi bi-plus-circle me-2"></i>Novo Orçamento
</button>
</div>
</div>
</div>
</form>
</div>
Componente para exibição de estatísticas rápidas de orçamentos.
<x-budget.budget-quick-stats :stats="$stats" :showChart="true" />
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
stats | array | Dados estatísticos | Obrigatório |
showChart | bool | Exibir gráfico rápido | true |
timeRange | string | Período analisado | month |
@props([
'stats',
'showChart' => true,
'timeRange' => 'month'
])
<div class="budget-quick-stats">
<div class="row g-3">
<!-- Total de Orçamentos -->
<div class="col-md-3">
<div class="card border-0 shadow-sm">
<div class="card-body text-center">
<div class="avatar-circle bg-primary bg-gradient mb-2 mx-auto">
<i class="bi bi-file-earmark-text text-white"></i>
</div>
<div class="text-muted small">Total de Orçamentos</div>
<div class="h4 mb-0 fw-bold">{{ $stats['total'] ?? 0 }}</div>
</div>
</div>
</div>
<!-- Orçamentos Aprovados -->
<div class="col-md-3">
<div class="card border-0 shadow-sm">
<div class="card-body text-center">
<div class="avatar-circle bg-success bg-gradient mb-2 mx-auto">
<i class="bi bi-check-circle text-white"></i>
</div>
<div class="text-muted small">Aprovados</div>
<div class="h4 mb-0 fw-bold">{{ $stats['approved'] ?? 0 }}</div>
</div>
</div>
</div>
<!-- Orçamentos Pendentes -->
<div class="col-md-3">
<div class="card border-0 shadow-sm">
<div class="card-body text-center">
<div class="avatar-circle bg-warning bg-gradient mb-2 mx-auto">
<i class="bi bi-clock text-white"></i>
</div>
<div class="text-muted small">Pendentes</div>
<div class="h4 mb-0 fw-bold">{{ $stats['pending'] ?? 0 }}</div>
</div>
</div>
</div>
<!-- Valor Total -->
<div class="col-md-3">
<div class="card border-0 shadow-sm">
<div class="card-body text-center">
<div class="avatar-circle bg-info bg-gradient mb-2 mx-auto">
<i class="bi bi-currency-dollar text-white"></i>
</div>
<div class="text-muted small">Valor Total</div>
<div class="h4 mb-0 fw-bold">
R$ {{ number_format($stats['total_value'] ?? 0, 2, ',', '.') }}
</div>
</div>
</div>
</div>
</div>
<!-- Gráfico -->
@if($showChart && isset($stats['chart_data']))
<div class="row mt-3">
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-body">
<h6 class="card-title">Evolução de Orçamentos</h6>
<canvas id="budgetChart" width="400" height="100"></canvas>
</div>
</div>
</div>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('budgetChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: @json($stats['chart_data']),
options: {
responsive: true,
plugins: {
legend: { display: false }
}
}
});
});
</script>
@endpush
@endif
</div>
{{-- Dashboard --}}
<x-budget.budget-quick-stats :stats="$budgetStats" />
{{-- Listagem --}}
<x-budget.budget-card :budget="$budget" />
{{-- Detalhes --}}
<x-budget.budget-details :budget="$budget" />
{{-- Formulários --}}
<x-budget.budget-actions :budget="$budget" />
/* Budget Components Styles */
.modern-badge {
font-size: 0.75rem;
font-weight: 600;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid transparent;
}
.avatar-circle {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.info-item {
background: #f8f9fa;
padding: 12px;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.budget-actions .btn {
transition: all 0.2s ease;
}
.budget-actions .btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,,);
}
// budget-actions.js
document.addEventListener('DOMContentLoaded', function() {
// Modal de compartilhamento
const shareModals = document.querySelectorAll('[data-bs-target^="#shareModal"]');
shareModals.forEach(modal => {
modal.addEventListener('click', function() {
const budgetId = this.getAttribute('data-budget-id');
generateShareLink(budgetId);
});
});
// Geração de link público
function generateShareLink(budgetId) {
fetch(`/api/budgets/${budgetId}/share`, {
method: 'POST',
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
}
})
.then(response => response.json())
.then(data => {
const shareUrl = data.share_url;
(shareUrl);
});
}
});
// BudgetPolicy.php
public function view(User $user, Budget $budget)
{
return $user->tenant_id === $budget->tenant_id;
}
public function update(User $user, Budget $budget)
{
return $user->tenant_id === $budget->tenant_id &&
$budget->status->isEditable();
}
public function delete(User $user, Budget $budget)
{
return $user->tenant_id === $budget->tenant_id &&
$budget->status->isDeletable();
}
{{-- Budget Card com validação de permissões --}}
@can('view', $budget)
<x-budget.budget-card :budget="$budget" />
@endcan
{{-- Budget Actions com validação de status --}}
@can('update', $budget)
@if($budget->status->isEditable())
<x-budget.budget-actions :budget="$budget" />
@endif
@endcan
Este padrão de components para orçamentos garante consistência visual, reutilização de código e manutenibilidade, seguindo os mesmos princípios estabelecidos nos outros components do sistema.