Back to skills
SKILL.md
Invoice Ui Components
ASecurityComponentes de UI para faturas seguindo o padrão de components do Easy Budget.
- 666 stars
- 0 votes
- 0 copies
- 6 views
- Added February 9, 2026
Works with
Security analysis
100/100npx -y skills add majiayu000/claude-skill-registry --skill invoice-ui-components --agent claude-codeAre you the author of Invoice Ui Components?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/majiayu000-invoice-ui-components)---
name: invoice-ui-components
description: Componentes de UI para faturas seguindo o padrão de components do Easy Budget.
---
# Componentes de UI para Faturas
Esta skill define os componentes Blade específicos para a gestão de faturas no Easy Budget, seguindo o padrão de components estabelecido no sistema.
## Estrutura de Components
```
resources/views/components/
├── invoice/
│ ├── invoice-card.blade.php # Card resumido de fatura
│ ├── invoice-details.blade.php # Detalhes completos da fatura
│ ├── invoice-form.blade.php # Formulário de criação/edição
│ ├── invoice-status.blade.php # Badge de status da fatura
│ ├── invoice-items.blade.php # Lista de itens da fatura
│ ├── invoice-actions.blade.php # Ações disponíveis para fatura
│ ├── invoice-filters.blade.php # Filtros específicos para faturas
│ ├── invoice-payments.blade.php # Histórico de pagamentos
│ └── invoice-totals.blade.php # Totais e valores da fatura
└── ...
```
## 1. Invoice Card Component
Componente para exibição resumida de faturas em listas e dashboards.
### Uso Básico
```blade
<x-invoice.invoice-card :invoice="$invoice" :showCustomer="true" :showDueDate="true" />
```
### Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|-----------|------|-----------|--------|
| `invoice` | `Invoice` | Modelo da fatura | Obrigatório |
| `showCustomer` | `bool` | Exibir informações do cliente | `true` |
| `showDueDate` | `bool` | Exibir data de vencimento | `true` |
| `variant` | `string` | Estilo do card (primary, secondary, etc.) | `primary` |
### Estrutura
```blade
@props([
'invoice',
'showCustomer' => true,
'showDueDate' => 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-receipt text-white"></i>
</div>
<div>
<h6 class="mb-1 fw-bold">{{ $invoice->code }}</h6>
<small class="text-muted">{{ $invoice->created_at->format('d/m/Y') }}</small>
</div>
</div>
<x-invoice.invoice-status :invoice="$invoice" />
</div>
@if($showCustomer && $invoice->customer)
<div class="mb-3">
<small class="text-muted">Cliente:</small>
<div class="fw-semibold">{{ $invoice->customer->display_name }}</div>
</div>
@endif
@if($showDueDate)
<div class="mb-3">
<small class="text-muted">Vencimento:</small>
<div class="fw-bold {{ $invoice->isOverdue() ? 'text-danger' : '' }}">
{{ $invoice->due_date?->format('d/m/Y') ?? 'Indeterminado' }}
@if($invoice->isOverdue())
<span class="badge bg-danger ms-2">Atrasado</span>
@endif
</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($invoice->total, 2, ',', '.') }}
</div>
</div>
<div class="btn-group btn-group-sm" role="group">
<a href="{{ route('provider.invoices.show', $invoice) }}" class="btn btn-outline-primary">
<i class="bi bi-eye"></i> Ver
</a>
@if($invoice->status->isEditable())
<a href="{{ route('provider.invoices.edit', $invoice) }}" class="btn btn-outline-secondary">
<i class="bi bi-pencil"></i> Editar
</a>
@endif
</div>
</div>
</div>
</div>
```
## 2. Invoice Details Component
Componente para exibição detalhada de informações da fatura.
### Uso Básico
```blade
<x-invoice.invoice-details :invoice="$invoice" :showItems="true" :showPayments="true" />
```
### Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|-----------|------|-----------|--------|
| `invoice` | `Invoice` | Modelo da fatura | Obrigatório |
| `showItems` | `bool` | Exibir itens da fatura | `true` |
| `showPayments` | `bool` | Exibir histórico de pagamentos | `true` |
| `collapsible` | `bool` | Permitir colapsar seções | `false` |
### Estrutura
```blade
@props([
'invoice',
'showItems' => true,
'showPayments' => true,
'collapsible' => false
])
<div class="invoice-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">{{ $invoice->code }}</div>
</div>
</div>
<div class="col-md-3">
<div class="info-item">
<label class="text-muted small">Data de Emissão</label>
<div class="fw-bold">{{ $invoice->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">Vencimento</label>
<div class="fw-bold {{ $invoice->isOverdue() ? 'text-danger' : '' }}">
{{ $invoice->due_date?->format('d/m/Y') ?? 'Indeterminado' }}
@if($invoice->isOverdue())
<span class="badge bg-danger ms-2">Atrasado</span>
@endif
</div>
</div>
</div>
<div class="col-md-3">
<div class="info-item">
<label class="text-muted small">Status</label>
<x-invoice.invoice-status :invoice="$invoice" />
</div>
</div>
</div>
<!-- Cliente -->
@if($invoice->customer)
<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">Informações do Cliente</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="mb-2">
<label class="text-muted small">Nome</label>
<div class="fw-bold">{{ $invoice->customer->display_name }}</div>
</div>
@if($invoice->customer->contact)
<div class="mb-2">
<label class="text-muted small">E-mail</label>
<div class="fw-bold">{{ $invoice->customer->contact->email }}</div>
</div>
<div class="mb-2">
<label class="text-muted small">Telefone</label>
<div class="fw-bold">{{ $invoice->customer->contact->phone }}</div>
</div>
@endif
</div>
<div class="col-md-6">
@if($invoice->customer->address)
<div class="mb-2">
<label class="text-muted small">Endereço</label>
<div class="fw-bold">
{{ $invoice->customer->address->address }}, {{ $invoice->customer->address->address_number }}
</div>
<div class="fw-bold">
{{ $invoice->customer->address->neighborhood }} - {{ $invoice->customer->address->city }}/{{ $invoice->customer->address->state }}
</div>
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
@endif
<!-- Itens da Fatura -->
@if($showItems && $invoice->invoiceItems->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">Itens da Fatura</h6>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Descrição</th>
<th>Quantidade</th>
<th>Valor Unitário</th>
<th>Valor Total</th>
</tr>
</thead>
<tbody>
@foreach($invoice->invoiceItems as $item)
<tr>
<td>{{ $item->description }}</td>
<td>{{ $item->quantity }}</td>
<td>R$ {{ number_format($item->unit_price, 2, ',', '.') }}</td>
<td class="fw-bold">
R$ {{ number_format($item->total, 2, ',', '.') }}
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endif
<!-- Histórico de Pagamentos -->
@if($showPayments && $invoice->payments->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">Histórico de Pagamentos</h6>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Data</th>
<th>Método</th>
<th>Valor</th>
<th>Status</th>
</tr>
</thead>
<tbody>
@foreach($invoice->payments as $payment)
<tr>
<td>{{ $payment->transaction_date?->format('d/m/Y H:i') }}</td>
<td>{{ $payment->payment_method }}</td>
<td class="fw-bold">
R$ {{ number_format($payment->transaction_amount, 2, ',', '.') }}
</td>
<td>
<span class="badge bg-success">{{ $payment->status }}</span>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endif
<!-- Totais -->
<x-invoice.invoice-totals :invoice="$invoice" />
</div>
```
## 3. Invoice Status Component
Componente para exibição do status da fatura com cores e ícones apropriados.
### Uso Básico
```blade
<x-invoice.invoice-status :invoice="$invoice" :showIcon="true" />
```
### Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|-----------|------|-----------|--------|
| `invoice` | `Invoice` | Modelo da fatura | Obrigatório |
| `showIcon` | `bool` | Exibir ícone ao lado do status | `true` |
| `size` | `string` | Tamanho do badge (sm, md, lg) | `md` |
### Estrutura
```blade
@props([
'invoice',
'showIcon' => true,
'size' => 'md'
])
@php
$status = $invoice->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'
};
// Lógica para status de atraso
$isOverdue = $invoice->isOverdue();
if ($isOverdue && $invoice->status->isPending()) {
$color = '#dc3545'; // Vermelho para faturas atrasadas
$icon = 'exclamation-triangle';
$description = 'Atrasada';
}
@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 }}
@if($isOverdue)
<span class="badge bg-danger ms-1">+{{ $invoice->daysOverdue() }} dias</span>
@endif
</span>
```
## 4. Invoice Items Component
Componente para exibição da lista de itens de uma fatura.
### Uso Básico
```blade
<x-invoice.invoice-items :invoice="$invoice" :editable="true" />
```
### Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|-----------|------|-----------|--------|
| `invoice` | `Invoice` | Modelo da fatura | Obrigatório |
| `editable` | `bool` | Permitir edição dos itens | `false` |
| `showTotal` | `bool` | Exibir total geral | `true` |
### Estrutura
```blade
@props([
'invoice',
'editable' => false,
'showTotal' => true
])
<div class="invoice-items">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Descrição</th>
<th class="text-center">Quantidade</th>
<th class="text-end">Valor Unitário</th>
<th class="text-end">Valor Total</th>
@if($editable)
<th class="text-center">Ações</th>
@endif
</tr>
</thead>
<tbody>
@foreach($invoice->invoiceItems as $item)
<tr>
<td>
@if($editable)
<input type="text"
name="items[{{ $item->id }}][description]"
class="form-control form-control-sm"
value="{{ $item->description }}"
placeholder="Descrição do item">
@else
<div class="fw-bold">{{ $item->description }}</div>
@endif
</td>
<td class="text-center">
@if($editable)
<input type="number"
name="items[{{ $item->id }}][quantity]"
class="form-control form-control-sm text-center"
value="{{ $item->quantity }}"
min="1"
style="width: 80px;">
@else
{{ $item->quantity }}
@endif
</td>
<td class="text-end">
@if($editable)
<input type="text"
name="items[{{ $item->id }}][unit_price]"
class="form-control form-control-sm text-end"
value="{{ number_format($item->unit_price, 2, ',', '.') }}"
style="width: 120px;">
@else
R$ {{ number_format($item->unit_price, 2, ',', '.') }}
@endif
</td>
<td class="text-end fw-bold">
R$ {{ number_format($item->total, 2, ',', '.') }}
</td>
@if($editable)
<td class="text-center">
<button class="btn btn-outline-danger btn-sm" title="Remover item">
<i class="bi bi-trash"></i>
</button>
</td>
@endif
</tr>
@endforeach
</tbody>
@if($showTotal)
<tfoot>
<tr class="table-active">
<td colspan="{{ $editable ? 3 : 2 }}" class="text-end fw-bold">Subtotal:</td>
<td class="text-end fw-bold">
R$ {{ number_format($invoice->invoiceItems->sum('total'), 2, ',', '.') }}
</td>
@if($editable)
<td></td>
@endif
</tr>
@if($invoice->discount > 0)
<tr>
<td colspan="{{ $editable ? 3 : 2 }}" class="text-end text-muted">Desconto:</td>
<td class="text-end text-danger fw-bold">
- R$ {{ number_format($invoice->discount, 2, ',', '.') }}
</td>
@if($editable)
<td></td>
@endif
</tr>
@endif
<tr class="table-active">
<td colspan="{{ $editable ? 3 : 2 }}" class="text-end fw-bold">Total da Fatura:</td>
<td class="text-end fw-bold h5">
R$ {{ number_format($invoice->total, 2, ',', '.') }}
</td>
@if($editable)
<td></td>
@endif
</tr>
</tfoot>
@endif
</table>
</div>
</div>
```
## 5. Invoice Form Component
Componente para formulário de criação e edição de faturas.
### Uso Básico
```blade
<x-invoice.invoice-form :invoice="$invoice ?? null" :customers="$customers" :services="$services" />
```
### Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|-----------|------|-----------|--------|
| `invoice` | `Invoice|null` | Modelo da fatura (para edição) | `null` |
| `customers` | `Collection` | Clientes disponíveis | Obrigatório |
| `services` | `Collection` | Serviços disponíveis | Obrigatório |
| `budget` | `Budget|null` | Orçamento vinculado | `null` |
### Estrutura
```blade
@props([
'invoice' => null,
'customers' => [],
'services' => [],
'budget' => null
])
<div class="invoice-form">
<form action="{{ isset($invoice) ? route('provider.invoices.update', $invoice) : route('provider.invoices.store') }}"
method="POST"
id="invoiceForm">
@csrf
@if(isset($invoice)) @method('PUT') @endif
<!-- Informações Básicas -->
<div class="row g-3 mb-4">
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Cliente *</label>
<select name="customer_id" class="form-select @error('customer_id') is-invalid @enderror" required>
<option value="">Selecione um cliente</option>
@foreach($customers as $customer)
<option value="{{ $customer->id }}"
{{ (old('customer_id', $invoice->customer_id ?? '') == $customer->id) ? 'selected' : '' }}>
{{ $customer->display_name }}
</option>
@endforeach
</select>
@error('customer_id')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Data de Vencimento *</label>
<input type="date"
name="due_date"
class="form-control @error('due_date') is-invalid @enderror"
value="{{ old('due_date', $invoice->due_date?->format('Y-m-d') ?? '') }}"
required>
@error('due_date')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Método de Pagamento</label>
<select name="payment_method" class="form-select @error('payment_method') is-invalid @enderror">
<option value="">Selecione um método</option>
<option value="dinheiro" {{ (old('payment_method', $invoice->payment_method ?? '') == 'dinheiro') ? 'selected' : '' }}>Dinheiro</option>
<option value="cartao" {{ (old('payment_method', $invoice->payment_method ?? '') == 'cartao') ? 'selected' : '' }}>Cartão</option>
<option value="boleto" {{ (old('payment_method', $invoice->payment_method ?? '') == 'boleto') ? 'selected' : '' }}>Boleto</option>
<option value="pix" {{ (old('payment_method', $invoice->payment_method ?? '') == 'pix') ? 'selected' : '' }}>PIX</option>
<option value="transferencia" {{ (old('payment_method', $invoice->payment_method ?? '') == 'transferencia') ? 'selected' : '' }}>Transferência</option>
</select>
@error('payment_method')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Observações</label>
<textarea name="notes"
class="form-control @error('notes') is-invalid @enderror"
rows="3"
placeholder="Observações sobre a fatura...">{{ old('notes', $invoice->notes ?? '') }}</textarea>
@error('notes')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
<!-- Itens da Fatura -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-transparent border-0">
<h6 class="mb-0">Itens da Fatura</h6>
</div>
<div class="card-body">
<div id="invoiceItems">
@if(isset($invoice) && $invoice->invoiceItems->isNotEmpty())
@foreach($invoice->invoiceItems as $item)
<div class="row g-3 item-row mb-3" data-item-id="{{ $item->id }}">
<div class="col-md-6">
<input type="text"
name="items[{{ $item->id }}][description]"
class="form-control description-input"
placeholder="Descrição do item"
value="{{ $item->description }}" required>
</div>
<div class="col-md-2">
<input type="number"
name="items[{{ $item->id }}][quantity]"
class="form-control quantity-input"
placeholder="Qtd"
value="{{ $item->quantity }}"
min="1" required>
</div>
<div class="col-md-2">
<input type="text"
name="items[{{ $item->id }}][unit_price]"
class="form-control price-input"
placeholder="Valor Unitário"
value="{{ number_format($item->unit_price, 2, ',', '.') }}"
required>
</div>
<div class="col-md-2">
<input type="text"
class="form-control item-total"
placeholder="Total"
value="R$ {{ number_format($item->total, 2, ',', '.') }}"
readonly>
</div>
</div>
@endforeach
@else
<div class="row g-3 item-row mb-3">
<div class="col-md-6">
<input type="text"
name="items[0][description]"
class="form-control description-input"
placeholder="Descrição do item" required>
</div>
<div class="col-md-2">
<input type="number"
name="items[0][quantity]"
class="form-control quantity-input"
placeholder="Qtd"
value="1"
min="1" required>
</div>
<div class="col-md-2">
<input type="text"
name="items[0][unit_price]"
class="form-control price-input"
placeholder="Valor Unitário" required>
</div>
<div class="col-md-2">
<input type="text"
class="form-control item-total"
placeholder="Total"
readonly>
</div>
</div>
@endif
</div>
<div class="row">
<div class="col-12">
<button type="button"
class="btn btn-outline-primary btn-sm"
id="addInvoiceItem">
<i class="bi bi-plus-circle me-2"></i>Adicionar Item
</button>
</div>
</div>
</div>
</div>
<!-- Totais -->
<div class="row mb-4">
<div class="col-md-8"></div>
<div class="col-md-4">
<div class="card border-0 bg-light">
<div class="card-body">
<div class="d-flex justify-content-between mb-2">
<span class="text-muted">Subtotal:</span>
<span id="subtotalDisplay">R$ 0,00</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span class="text-muted">Desconto:</span>
<input type="text"
name="discount"
class="form-control form-control-sm text-end"
id="discountInput"
value="{{ old('discount', $invoice->discount ?? '0') }}"
style="width: 120px; display: inline-block;">
</div>
<div class="d-flex justify-content-between fw-bold">
<span>Total:</span>
<span id="totalDisplay" class="h5">R$ 0,00</span>
</div>
</div>
</div>
</div>
</div>
<!-- Ações -->
<div class="d-flex justify-content-between">
<a href="{{ route('provider.invoices.index') }}" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left me-2"></i>Cancelar
</a>
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-circle me-2"></i>{{ isset($invoice) ? 'Atualizar' : 'Criar' }} Fatura
</button>
</div>
</form>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
// Lógica para cálculo de totais
function calculateTotals() {
let subtotal = 0;
document.querySelectorAll('.item-row').forEach(row => {
const quantity = parseFloat(row.querySelector('.quantity-input').value) || 0;
const unitPrice = parseFloat(row.querySelector('.price-input').value.replace(',', '.')) || 0;
const total = quantity * unitPrice;
row.querySelector('.item-total').value = 'R$ ' + total.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
subtotal += total;
});
const discount = parseFloat(document.getElementById('discountInput').value.replace(',', '.')) || 0;
const total = subtotal - discount;
document.getElementById('subtotalDisplay').textContent = 'R$ ' + subtotal.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
document.getElementById('totalDisplay').textContent = 'R$ ' + total.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
}
// Eventos
document.getElementById('addInvoiceItem').addEventListener('click', function() {
const itemsContainer = document.getElementById('invoiceItems');
const itemCount = itemsContainer.children.length;
const newRow = document.createElement('div');
newRow.className = 'row g-3 item-row mb-3';
newRow.innerHTML = `
<div class="col-md-6">
<input type="text" name="items[${itemCount}][description]" class="form-control description-input" placeholder="Descrição do item" required>
</div>
<div class="col-md-2">
<input type="number" name="items[${itemCount}][quantity]" class="form-control quantity-input" placeholder="Qtd" value="1" min="1" required>
</div>
<div class="col-md-2">
<input type="text" name="items[${itemCount}][unit_price]" class="form-control price-input" placeholder="Valor Unitário" required>
</div>
<div class="col-md-2">
<input type="text" class="form-control item-total" placeholder="Total" readonly>
</div>
`;
itemsContainer.appendChild(newRow);
calculateTotals();
});
document.getElementById('invoiceItems').addEventListener('input', calculateTotals);
document.getElementById('discountInput').addEventListener('input', calculateTotals);
// Inicializar cálculos
calculateTotals();
});
</script>
@endpush
```
## 6. Invoice Actions Component
Componente para exibição de ações disponíveis para uma fatura.
### Uso Básico
```blade
<x-invoice.invoice-actions :invoice="$invoice" :showPayment="true" :showSend="true" />
```
### Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|-----------|------|-----------|--------|
| `invoice` | `Invoice` | Modelo da fatura | Obrigatório |
| `showPayment` | `bool` | Exibir botão de pagamento | `true` |
| `showSend` | `bool` | Exibir botão de envio | `true` |
| `showPrint` | `bool` | Exibir botão de impressão | `true` |
### Estrutura
```blade
@props([
'invoice',
'showPayment' => true,
'showSend' => true,
'showPrint' => true
])
<div class="invoice-actions btn-group" role="group">
<!-- Visualizar -->
<a href="{{ route('provider.invoices.show', $invoice) }}"
class="btn btn-outline-primary"
title="Visualizar Fatura">
<i class="bi bi-eye"></i> Visualizar
</a>
<!-- Editar -->
@if($invoice->status->isEditable())
<a href="{{ route('provider.invoices.edit', $invoice) }}"
class="btn btn-outline-secondary"
title="Editar Fatura">
<i class="bi bi-pencil"></i> Editar
</a>
@endif
<!-- Receber Pagamento -->
@if($showPayment && $invoice->status->isPending())
<button type="button"
class="btn btn-outline-success"
data-bs-toggle="modal"
data-bs-target="#paymentModal-{{ $invoice->id }}"
title="Receber Pagamento">
<i class="bi bi-cash"></i> Receber
</button>
@endif
<!-- Enviar por E-mail -->
@if($showSend)
<button type="button"
class="btn btn-outline-info"
data-bs-toggle="modal"
data-bs-target="#sendModal-{{ $invoice->id }}"
title="Enviar por E-mail">
<i class="bi bi-envelope"></i> Enviar
</button>
@endif
<!-- Imprimir -->
@if($showPrint)
<a href="{{ route('provider.invoices.pdf', $invoice) }}"
class="btn btn-outline-warning"
target="_blank"
title="Imprimir Fatura">
<i class="bi bi-printer"></i> Imprimir
</a>
@endif
<!-- Excluir -->
@if($invoice->status->isDeletable())
<button type="button"
class="btn btn-outline-danger"
data-bs-toggle="modal"
data-bs-target="#deleteModal-{{ $invoice->id }}"
title="Excluir Fatura">
<i class="bi bi-trash"></i> Excluir
</button>
@endif
</div>
```
## 7. Invoice Filters Component
Componente para filtros específicos de listagem de faturas.
### Uso Básico
```blade
<x-invoice.invoice-filters :filters="$filters" :showCustomer="true" :showStatus="true" />
```
### Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|-----------|------|-----------|--------|
| `filters` | `array` | Filtros atuais | `[]` |
| `showCustomer` | `bool` | Exibir filtro por cliente | `true` |
| `showStatus` | `bool` | Exibir filtro por status | `true` |
| `showDateRange` | `bool` | Exibir filtro por período | `true` |
### Estrutura
```blade
@props([
'filters' => [],
'showCustomer' => true,
'showStatus' => true,
'showDateRange' => true
])
<div class="invoice-filters">
<form action="{{ request()->url() }}" method="GET" class="row g-3">
@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\InvoiceStatus::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-md-3">
<label class="form-label small fw-bold text-muted text-uppercase">Busca</label>
<input type="text"
name="search"
class="form-control form-control-sm"
value="{{ $filters['search'] ?? '' }}"
placeholder="Buscar por código...">
</div>
<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.invoices.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>Nova Fatura
</button>
</div>
</div>
</div>
</form>
</div>
```
## 8. Invoice Payments Component
Componente para exibição do histórico de pagamentos da fatura.
### Uso Básico
```blade
<x-invoice.invoice-payments :invoice="$invoice" :showAddPayment="true" />
```
### Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|-----------|------|-----------|--------|
| `invoice` | `Invoice` | Modelo da fatura | Obrigatório |
| `showAddPayment` | `bool` | Exibir botão para adicionar pagamento | `true` |
| `showBalance` | `bool` | Exibir saldo devedor | `true` |
### Estrutura
```blade
@props([
'invoice',
'showAddPayment' => true,
'showBalance' => true
])
<div class="invoice-payments">
<!-- Saldo Devedor -->
@if($showBalance && $invoice->status->isPending())
<div class="row mb-3">
<div class="col-12">
<div class="card border-0 bg-warning bg-gradient text-white">
<div class="card-body">
<div class="row align-items-center">
<div class="col-md-8">
<div class="small">Saldo Devedor</div>
<div class="h4 mb-0 fw-bold">
R$ {{ number_format($invoice->balance, 2, ',', '.') }}
</div>
</div>
<div class="col-md-4 text-end">
<span class="badge bg-light text-dark">{{ $invoice->status->getDescription() }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
@endif
<!-- Histórico de Pagamentos -->
<div class="card border-0 shadow-sm">
<div class="card-header bg-transparent border-0">
<h6 class="mb-0">Histórico de Pagamentos</h6>
</div>
<div class="card-body p-0">
@if($invoice->payments->isNotEmpty())
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Data</th>
<th>Método</th>
<th>Valor</th>
<th>Status</th>
<th class="text-end">Ações</th>
</tr>
</thead>
<tbody>
@foreach($invoice->payments as $payment)
<tr>
<td>{{ $payment->transaction_date?->format('d/m/Y H:i') }}</td>
<td>{{ $payment->payment_method }}</td>
<td class="fw-bold">
R$ {{ number_format($payment->transaction_amount, 2, ',', '.') }}
</td>
<td>
<span class="badge bg-success">{{ $payment->status }}</span>
</td>
<td class="text-end">
<button class="btn btn-outline-info btn-sm" title="Detalhes">
<i class="bi bi-eye"></i>
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@else
<div class="text-center py-4">
<i class="bi bi-receipt text-muted" style="font-size: 3rem;"></i>
<p class="text-muted mt-2">Nenhum pagamento registrado</p>
</div>
@endif
</div>
</div>
<!-- Adicionar Pagamento -->
@if($showAddPayment && $invoice->status->isPending())
<div class="row mt-3">
<div class="col-12">
<div class="card border-0">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-0">Receber Pagamento</h6>
<small class="text-muted">Registre o pagamento da fatura</small>
</div>
<button type="button"
class="btn btn-success"
data-bs-toggle="modal"
data-bs-target="#paymentModal-{{ $invoice->id }}">
<i class="bi bi-cash me-2"></i>Receber Pagamento
</button>
</div>
</div>
</div>
</div>
</div>
@endif
</div>
```
## 9. Invoice Totals Component
Componente para exibição detalhada dos totais e valores da fatura.
### Uso Básico
```blade
<x-invoice.invoice-totals :invoice="$invoice" :showBreakdown="true" />
```
### Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|-----------|------|-----------|--------|
| `invoice` | `Invoice` | Modelo da fatura | Obrigatório |
| `showBreakdown` | `bool` | Exibir detalhamento dos valores | `true` |
| `variant` | `string` | Estilo visual (primary, success, etc.) | `primary` |
### Estrutura
```blade
@props([
'invoice',
'showBreakdown' => true,
'variant' => 'primary'
])
<div class="invoice-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($invoice->invoiceItems->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($invoice->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($invoice->total, 2, ',', '.') }}
</div>
</div>
</div>
</div>
</div>
<!-- Pagamentos -->
@if($invoice->payments->isNotEmpty())
<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">Total Pago</div>
<div class="h5 mb-0 fw-bold text-success">
R$ {{ number_format($invoice->payments->sum('transaction_amount'), 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">Saldo Devedor</div>
<div class="h5 mb-0 fw-bold {{ $invoice->balance > 0 ? 'text-warning' : 'text-success' }}">
R$ {{ number_format($invoice->balance, 2, ',', '.') }}
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 bg-{{ $invoice->balance > 0 ? 'warning' : 'success' }} bg-gradient text-white">
<div class="card-body text-center">
<div class="small">Status</div>
<div class="h4 mb-0 fw-bold">
{{ $invoice->status->getDescription() }}
</div>
</div>
</div>
</div>
</div>
@endif
@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 da Fatura</div>
<div class="h3 mb-0 fw-bold">
R$ {{ number_format($invoice->total, 2, ',', '.') }}
</div>
</div>
<div class="col-md-4 text-end">
<x-invoice.invoice-status :invoice="$invoice" />
</div>
</div>
</div>
</div>
@endif
</div>
```
## 10. Integração com Padrões Existentes
### Uso em Views
```blade
{{-- Dashboard --}}
<x-invoice.invoice-card :invoice="$invoice" />
{{-- Listagem --}}
<x-invoice.invoice-details :invoice="$invoice" />
{{-- Formulários --}}
<x-invoice.invoice-form :invoice="$invoice" :customers="$customers" :services="$services" />
{{-- Ações --}}
<x-invoice.invoice-actions :invoice="$invoice" />
```
### Estilos CSS
```css
/* Invoice Components Styles */
.invoice-form .price-input {
text-align: right;
}
.invoice-form .item-total {
background-color: #f8f9fa;
font-weight: bold;
}
.invoice-actions .btn {
transition: all 0.2s ease;
}
.invoice-actions .btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.invoice-payments .card {
border-left: 4px solid #0d6efd;
}
.invoice-payments .card.bg-warning {
border-left-color: #ffc107;
}
```
## 11. JavaScript Interatividade
### Formulário de Fatura
```javascript
// invoice-form.js
document.addEventListener('DOMContentLoaded', function() {
// Formatar valores monetários
document.querySelectorAll('.price-input').forEach(input => {
input.addEventListener('input', function() {
let value = this.value.replace(/\D/g, '');
value = (value / 100).toFixed(2);
this.value = value.replace('.', ',');
calculateTotals();
});
});
// Calcular totais
function calculateTotals() {
let subtotal = 0;
document.querySelectorAll('.item-row').forEach(row => {
const quantity = parseFloat(row.querySelector('.quantity-input').value) || 0;
const unitPrice = parseFloat(row.querySelector('.price-input').value.replace(',', '.')) || 0;
const total = quantity * unitPrice;
row.querySelector('.item-total').value = 'R$ ' + total.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
subtotal += total;
});
const discount = parseFloat(document.getElementById('discountInput').value.replace(',', '.')) || 0;
const total = subtotal - discount;
document.getElementById('subtotalDisplay').textContent = 'R$ ' + subtotal.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
document.getElementById('totalDisplay').textContent = 'R$ ' + total.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
}
// Adicionar item
document.getElementById('addInvoiceItem').addEventListener('click', function() {
const itemsContainer = document.getElementById('invoiceItems');
const itemCount = itemsContainer.children.length;
const newRow = document.createElement('div');
newRow.className = 'row g-3 item-row mb-3';
newRow.innerHTML = `
<div class="col-md-6">
<input type="text" name="items[${itemCount}][description]" class="form-control description-input" placeholder="Descrição do item" required>
</div>
<div class="col-md-2">
<input type="number" name="items[${itemCount}][quantity]" class="form-control quantity-input" placeholder="Qtd" value="1" min="1" required>
</div>
<div class="col-md-2">
<input type="text" name="items[${itemCount}][unit_price]" class="form-control price-input" placeholder="Valor Unitário" required>
</div>
<div class="col-md-2">
<input type="text" class="form-control item-total" placeholder="Total" readonly>
</div>
`;
itemsContainer.appendChild(newRow);
calculateTotals();
});
// Eventos de cálculo
document.getElementById('invoiceItems').addEventListener('input', calculateTotals);
document.getElementById('discountInput').addEventListener('input', calculateTotals);
// Inicializar cálculos
calculateTotals();
});
```
## 12. Validação e Segurança
### Autorização
```php
// InvoicePolicy.php
public function view(User $user, Invoice $invoice)
{
return $user->tenant_id === $invoice->tenant_id;
}
public function update(User $user, Invoice $invoice)
{
return $user->tenant_id === $invoice->tenant_id &&
$invoice->status->isEditable();
}
public function delete(User $user, Invoice $invoice)
{
return $user->tenant_id === $invoice->tenant_id &&
$invoice->status->isDeletable();
}
public function receivePayment(User $user, Invoice $invoice)
{
return $user->tenant_id === $invoice->tenant_id &&
$invoice->status->isPending();
}
```
### Validations
```blade
{{-- Invoice Card com validação de permissões --}}
@can('view', $invoice)
<x-invoice.invoice-card :invoice="$invoice" />
@endcan
{{-- Invoice Actions com validação de status --}}
@can('update', $invoice)
@if($invoice->status->isEditable())
<x-invoice.invoice-actions :invoice="$invoice" />
@endif
@endcan
```
Este padrão de components para faturas garante consistência visual, reutilização de código e manutenibilidade, seguindo os mesmos princípios estabelecidos nos outros components do sistema.
Attribution
Comments
Loading comments…
Newsletter
Get the weekly list of safe new skills, and the ones we pulled.