budget-ui-components
Componentes de UI para orçamentos seguindo o padrão de components do Easy Budget.
16 stars
Best use case
budget-ui-components is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Componentes de UI para orçamentos seguindo o padrão de components do Easy Budget.
Teams using budget-ui-components should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
$curl -o ~/.claude/skills/budget-ui-components/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/design/budget-ui-components/SKILL.md"
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/budget-ui-components/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How budget-ui-components Compares
| Feature / Agent | budget-ui-components | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Componentes de UI para orçamentos seguindo o padrão de components do Easy Budget.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Componentes de UI para Orçamentos
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.
## Estrutura de Components
```
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
└── ...
```
## 1. Budget Card Component
Componente para exibição resumida de orçamentos em listas e dashboards.
### Uso Básico
```blade
<x-budget.budget-card :budget="$budget" :showCustomer="true" :showActions="true" />
```
### Parâmetros
| 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` |
### Estrutura
```blade
@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>
```
## 2. Budget Details Component
Componente para exibição detalhada de informações do orçamento.
### Uso Básico
```blade
<x-budget.budget-details :budget="$budget" :showServices="true" :showTotals="true" />
```
### Parâmetros
| 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` |
### Estrutura
```blade
@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>
```
## 3. Budget Status Component
Componente para exibição do status do orçamento com cores e ícones apropriados.
### Uso Básico
```blade
<x-budget.budget-status :budget="$budget" :showIcon="true" />
```
### Parâmetros
| 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` |
### Estrutura
```blade
@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>
```
## 4. Budget Totals Component
Componente para exibição detalhada dos totais e valores do orçamento.
### Uso Básico
```blade
<x-budget.budget-totals :budget="$budget" :showBreakdown="true" />
```
### Parâmetros
| 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` |
### Estrutura
```blade
@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>
```
## 5. Budget Actions Component
Componente para exibição de ações disponíveis para um orçamento.
### Uso Básico
```blade
<x-budget.budget-actions :budget="$budget" :showShare="true" :showDelete="false" />
```
### Parâmetros
| 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` |
### Estrutura
```blade
@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>
```
## 6. Budget Filters Component
Componente para filtros específicos de listagem de orçamentos.
### Uso Básico
```blade
<x-budget.budget-filters :filters="$filters" :showDateRange="true" />
```
### Parâmetros
| 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` |
### Estrutura
```blade
@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>
```
## 7. Budget Quick Stats Component
Componente para exibição de estatísticas rápidas de orçamentos.
### Uso Básico
```blade
<x-budget.budget-quick-stats :stats="$stats" :showChart="true" />
```
### Parâmetros
| 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` |
### Estrutura
```blade
@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>
```
## 8. Integração com Padrões Existentes
### Uso em Views
```blade
{{-- 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" />
```
### Estilos CSS
```css
/* 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,0,0.1);
}
```
## 9. JavaScript Interatividade
### Compartilhamento de Orçamentos
```javascript
// 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;
// Atualizar modal com URL gerada
updateShareModal(shareUrl);
});
}
});
```
## 10. Validação e Segurança
### Autorização
```php
// 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();
}
```
### Validations
```blade
{{-- 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.Related Skills
core-components
16
from diegosouzapw/awesome-omni-skill
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
private-vs-shared-components
16
from diegosouzapw/awesome-omni-skill
Rules for determining if a component should be private or shared, and where to place them based on their use-case.
aget-review-budget
16
from diegosouzapw/awesome-omni-skill
Review budget allocation and ROI
bgo
10
from diegosouzapw/awesome-omni-skill
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
Coding & Development
Empirical Validation
16
from diegosouzapw/awesome-omni-skill
Requires proof before marking work complete — no "trust me, it works"
dubstep
16
from diegosouzapw/awesome-omni-skill
Dubstep composition specialist - genre knowledge, sound design, and production patterns for LMMS
dotnet-ui-testing-core
16
from diegosouzapw/awesome-omni-skill
Tests UI across frameworks. Page objects, test selectors, async waits, accessibility.
dev-server-sandbox
16
from diegosouzapw/awesome-omni-skill
Run multiple isolated mux dev-server instances (temp MUX_ROOT + free ports)
detect-design
16
from diegosouzapw/awesome-omni-skill
Design system detection with drift findings and evidence blocks. Use when auditing design system consistency.
design_responsive
16
from diegosouzapw/awesome-omni-skill
Breakpoints, fluid typography, container queries ve modern CSS features.
design
16
from diegosouzapw/awesome-omni-skill
Design consistency and visual styling for the Svelte client UI. Use when creating or modifying visual elements, colors, typography, buttons, inputs, or cards.
Design Undo/Redo Systems
16
from diegosouzapw/awesome-omni-skill
CREATE comprehensive undo/redo systems with Command Pattern. Design state management for complex applications with canvas interactions, multiple stores, and user actions. Use when building new undo/redo functionality from scratch.