Componentes de UI para Clientes

Esta skill define os componentes Blade específicos para a gestão de clientes no Easy Budget, seguindo o padrão de components estabelecido no sistema.

Estrutura de Components

resources/views/components/
├── customer/
│   ├── customer-card.blade.php       # Card resumido de cliente
│   ├── customer-details.blade.php    # Detalhes completos do cliente
│   ├── customer-form.blade.php       # Formulário de criação/edição
│   ├── customer-status.blade.php     # Badge de status do cliente
│   ├── customer-contact.blade.php    # Informações de contato
│   ├── customer-address.blade.php    # Endereço do cliente
│   ├── customer-actions.blade.php    # Ações disponíveis para cliente
│   ├── customer-filters.blade.php    # Filtros específicos para clientes
│   ├── customer-interactions.blade.php # Histórico de interações
│   └── customer-summary.blade.php    # Resumo do cliente
└── ...

1. Customer Card Component

Componente para exibição resumida de clientes em listas e dashboards.

Uso Básico

blade

<x-customer.customer-card :customer="$customer" :showType="true" :showStatus="true" />

Parâmetros

Parâmetro	Tipo	Descrição	Padrão
`customer`	`Customer`	Modelo do cliente	Obrigatório
`showType`	`bool`	Exibir tipo de cliente (PF/PJ)	`true`
`showStatus`	`bool`	Exibir status do cliente	`true`
`variant`	`string`	Estilo do card (primary, secondary, etc.)	`primary`

Estrutura

blade

@props([
    'customer',
    'showType' => true,
    'showStatus' => 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">
                    @if($customer->type === 'pf')
                        <i class="bi bi-person text-white"></i>
                    @else
                        <i class="bi bi-building text-white"></i>
                    @endif
                </div>
                <div>
                    <h6 class="mb-1 fw-bold">{{ $customer->display_name }}</h6>
                    <small class="text-muted">{{ $customer->created_at->format('d/m/Y') }}</small>
                </div>
            </div>
            @if($showStatus)
                <x-customer.customer-status :customer="$customer" />
            @endif
        </div>

        @if($showType)
            <div class="mb-3">
                <span class="badge bg-secondary">{{ $customer->type === 'pf' ? 'Pessoa Física' : 'Pessoa Jurídica' }}</span>
            </div>
        @endif

        @if($customer->contact)
            <div class="mb-3">
                <small class="text-muted">E-mail:</small>
                <div class="fw-semibold">{{ $customer->contact->email }}</div>
            </div>
        @endif

        @if($customer->address)
            <div class="mb-3">
                <small class="text-muted">Endereço:</small>
                <div class="fw-semibold">{{ $customer->address->city }}/{{ $customer->address->state }}</div>
            </div>
        @endif

        <div class="d-flex justify-content-between align-items-center">
            <div>
                <small class="text-muted">Total de Orçamentos</small>
                <div class="h6 mb-0 fw-bold text-{{ $variant }}">
                    {{ $customer->budgets->count() }}
                </div>
            </div>

            <div class="btn-group btn-group-sm" role="group">
                <a href="{{ route('provider.customers.show', $customer) }}" class="btn btn-outline-primary">
                    <i class="bi bi-eye"></i> Ver
                </a>
                <a href="{{ route('provider.customers.edit', $customer) }}" class="btn btn-outline-secondary">
                    <i class="bi bi-pencil"></i> Editar
                </a>
            </div>
        </div>
    </div>
</div>

2. Customer Details Component

Componente para exibição detalhada de informações do cliente.

Uso Básico

blade

<x-customer.customer-details :customer="$customer" :showContact="true" :showAddress="true" />

Parâmetros

Parâmetro	Tipo	Descrição	Padrão
`customer`	`Customer`	Modelo do cliente	Obrigatório
`showContact`	`bool`	Exibir informações de contato	`true`
`showAddress`	`bool`	Exibir endereço	`true`
`collapsible`	`bool`	Permitir colapsar seções	`false`

Estrutura

blade

@props([
    'customer',
    'showContact' => true,
    'showAddress' => true,
    'collapsible' => false
])

<div class="customer-details">
    <!-- Informações Básicas -->
    <div class="row g-3 mb-3">
        <div class="col-md-4">
            <div class="info-item">
                <label class="text-muted small">Nome/Razão Social</label>
                <div class="fw-bold">{{ $customer->display_name }}</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="info-item">
                <label class="text-muted small">Tipo</label>
                <div class="fw-bold">
                    <span class="badge bg-secondary">{{ $customer->type === 'pf' ? 'Pessoa Física' : 'Pessoa Jurídica' }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="info-item">
                <label class="text-muted small">Status</label>
                <x-customer.customer-status :customer="$customer" />
            </div>
        </div>
    </div>

    <!-- Dados Pessoais/Empresariais -->
    @if($customer->commonData)
        <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">{{ $customer->type === 'pf' ? 'Dados Pessoais' : 'Dados Empresariais' }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @if($customer->type === 'pf')
                                <div class="col-md-6">
                                    <div class="mb-2">
                                        <label class="text-muted small">Nome Completo</label>
                                        <div class="fw-bold">{{ $customer->commonData->first_name }} {{ $customer->commonData->last_name }}</div>
                                    </div>
                                    <div class="mb-2">
                                        <label class="text-muted small">Data de Nascimento</label>
                                        <div class="fw-bold">{{ $customer->commonData->birth_date?->format('d/m/Y') ?? 'Não informado' }}</div>
                                    </div>
                                    @if($customer->commonData->cpf)
                                        <div class="mb-2">
                                            <label class="text-muted small">CPF</label>
                                            <div class="fw-bold">{{ \App\Helpers\DocumentHelper::formatCpf($customer->commonData->cpf) }}</div>
                                        </div>
                                    @endif
                                </div>
                            @else
                                <div class="col-md-6">
                                    <div class="mb-2">
                                        <label class="text-muted small">Razão Social</label>
                                        <div class="fw-bold">{{ $customer->commonData->company_name }}</div>
                                    </div>
                                    @if($customer->commonData->cnpj)
                                        <div class="mb-2">
                                            <label class="text-muted small">CNPJ</label>
                                            <div class="fw-bold">{{ \App\Helpers\DocumentHelper::formatCnpj($customer->commonData->cnpj) }}</div>
                                        </div>
                                    @endif
                                    @if($customer->commonData->cpf)
                                        <div class="mb-2">
                                            <label class="text-muted small">CPF do Responsável</label>
                                            <div class="fw-bold">{{ \App\Helpers\DocumentHelper::formatCpf($customer->commonData->cpf) }}</div>
                                        </div>
                                    @endif
                                </div>
                            @endif

                            <div class="col-md-6">
                                @if($customer->commonData->areaOfActivity)
                                    <div class="mb-2">
                                        <label class="text-muted small">Área de Atuação</label>
                                        <div class="fw-bold">{{ $customer->commonData->areaOfActivity->name }}</div>
                                    </div>
                                @endif
                                @if($customer->commonData->profession)
                                    <div class="mb-2">
                                        <label class="text-muted small">Profissão</label>
                                        <div class="fw-bold">{{ $customer->commonData->profession->name }}</div>
                                    </div>
                                @endif
                                @if($customer->commonData->description)
                                    <div class="mb-2">
                                        <label class="text-muted small">Descrição</label>
                                        <div class="fw-bold">{{ $customer->commonData->description }}</div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Contato -->
    @if($showContact && $customer->contact)
        <x-customer.customer-contact :contact="$customer->contact" />
    @endif

    <!-- Endereço -->
    @if($showAddress && $customer->address)
        <x-customer.customer-address :address="$customer->address" />
    @endif

    <!-- Resumo -->
    <x-customer.customer-summary :customer="$customer" />
</div>

3. Customer Status Component

Componente para exibição do status do cliente com cores e ícones apropriados.

Uso Básico

blade

<x-customer.customer-status :customer="$customer" :showIcon="true" />

Parâmetros

Parâmetro	Tipo	Descrição	Padrão
`customer`	`Customer`	Modelo do cliente	Obrigatório
`showIcon`	`bool`	Exibir ícone ao lado do status	`true`
`size`	`string`	Tamanho do badge (sm, md, lg)	`md`

Estrutura

blade

@props([
    'customer',
    'showIcon' => true,
    'size' => 'md'
])

@php
    $status = $customer->status;
    $color = match($status) {
        'active' => '#198754', // Verde
        'inactive' => '#6c757d', // Cinza
        'pending' => '#ffc107', // Amarelo
        default => '#6c757d'
    };

    $icon = match($status) {
        'active' => 'check-circle',
        'inactive' => 'x-circle',
        'pending' => 'clock',
        default => 'circle'
    };

    $description = match($status) {
        'active' => 'Ativo',
        'inactive' => 'Inativo',
        'pending' => 'Pendente',
        default => 'Status Desconhecido'
    };

    $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 bi-{{ $icon }} me-1"></i>
    @endif
    {{ $description }}
</span>

4. Customer Contact Component

Componente para exibição de informações de contato do cliente.

Uso Básico

blade

<x-customer.customer-contact :contact="$contact" :showBusiness="true" />

Parâmetros

Parâmetro	Tipo	Descrição	Padrão
`contact`	`Contact`	Modelo de contato	Obrigatório
`showBusiness`	`bool`	Exibir contatos comerciais	`true`
`showWebsite`	`bool`	Exibir website	`true`

Estrutura

blade

@props([
    'contact',
    'showBusiness' => true,
    'showWebsite' => true
])

<div class="customer-contact">
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-0">
            <h6 class="mb-0">Informações de Contato</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="text-muted small">E-mail Principal</label>
                        <div class="fw-bold">{{ $contact->email }}</div>
                    </div>
                    @if($contact->phone)
                        <div class="mb-3">
                            <label class="text-muted small">Telefone</label>
                            <div class="fw-bold">{{ $contact->phone }}</div>
                        </div>
                    @endif
                </div>

                @if($showBusiness)
                    <div class="col-md-6">
                        @if($contact->email_business)
                            <div class="mb-3">
                                <label class="text-muted small">E-mail Comercial</label>
                                <div class="fw-bold">{{ $contact->email_business }}</div>
                            </div>
                        @endif
                        @if($contact->phone_business)
                            <div class="mb-3">
                                <label class="text-muted small">Telefone Comercial</label>
                                <div class="fw-bold">{{ $contact->phone_business }}</div>
                            </div>
                        @endif
                    </div>
                @endif
            </div>

            @if($showWebsite && $contact->website)
                <div class="row">
                    <div class="col-12">
                        <div class="mb-3">
                            <label class="text-muted small">Website</label>
                            <div class="fw-bold">
                                <a href="{{ $contact->website }}" target="_blank" class="text-decoration-none">
                                    {{ $contact->website }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

5. Customer Address Component

Componente para exibição de endereço do cliente.

Uso Básico

blade

<x-customer.customer-address :address="$address" />

Parâmetros

Parâmetro	Tipo	Descrição	Padrão
`address`	`Address`	Modelo de endereço	Obrigatório

Estrutura

blade

@props(['address'])

<div class="customer-address">
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-0">
            <h6 class="mb-0">Endereço</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <div class="mb-2">
                        <label class="text-muted small">Logradouro</label>
                        <div class="fw-bold">
                            {{ $address->address }}, {{ $address->address_number }}
                            @if($address->address_complement)
                                - {{ $address->address_complement }}
                            @endif
                        </div>
                    </div>
                    <div class="mb-2">
                        <label class="text-muted small">Bairro</label>
                        <div class="fw-bold">{{ $address->neighborhood }}</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-2">
                        <label class="text-muted small">CEP</label>
                        <div class="fw-bold">{{ $address->cep }}</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-2">
                        <label class="text-muted small">Cidade</label>
                        <div class="fw-bold">{{ $address->city }}</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-2">
                        <label class="text-muted small">Estado</label>
                        <div class="fw-bold">{{ $address->state }}</div>
                    </div>
                </div>
            </div>
            @if($address->country && $address->country !== 'Brasil')
                <div class="row">
                    <div class="col-12">
                        <div class="mb-2">
                            <label class="text-muted small">País</label>
                            <div class="fw-bold">{{ $address->country }}</div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

6. Customer Form Component

Componente para formulário de criação e edição de clientes.

Uso Básico

blade

<x-customer.customer-form :customer="$customer ?? null" :areasOfActivity="$areasOfActivity" :professions="$professions" />

Parâmetros

Parâmetro	Tipo	Descrição	Padrão
`customer`	`Customer	null`	Modelo do cliente (para edição)
`areasOfActivity`	`Collection`	Áreas de atuação disponíveis	Obrigatório
`professions`	`Collection`	Profissões disponíveis	Obrigatório
`type`	`string`	Tipo de cliente (pf/pj)	`pf`

Estrutura

blade

@props([
    'customer' => null,
    'areasOfActivity' => [],
    'professions' => [],
    'type' => 'pf'
])

<div class="customer-form">
    <form action="{{ isset($customer) ? route('provider.customers.update', $customer) : route('provider.customers.store') }}"
          method="POST"
          id="customerForm">
        @csrf
        @if(isset($customer)) @method('PUT') @endif

        <!-- Tipo de Cliente -->
        <div class="row g-3 mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">Tipo de Cliente *</label>
                                <div class="btn-group w-100" role="group">
                                    <input type="radio" class="btn-check" name="type" id="type_pf" value="pf"
                                           {{ (old('type', $customer->type ?? $type) == 'pf') ? 'checked' : '' }} required>
                                    <label class="btn btn-outline-primary" for="type_pf">
                                        <i class="bi bi-person me-2"></i>Pessoa Física
                                    </label>

                                    <input type="radio" class="btn-check" name="type" id="type_pj" value="pj"
                                           {{ (old('type', $customer->type ?? $type) == 'pj') ? 'checked' : '' }} required>
                                    <label class="btn btn-outline-secondary" for="type_pj">
                                        <i class="bi bi-building me-2"></i>Pessoa Jurídica
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Dados Pessoais/Empresariais -->
        <div class="row g-3 mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent border-0">
                        <h6 class="mb-0">{{ $type === 'pf' ? 'Dados Pessoais' : 'Dados Empresariais' }}</h6>
                    </div>
                    <div class="card-body">
                        @if($type === 'pf')
                            <!-- Pessoa Física -->
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted text-uppercase">Nome *</label>
                                    <input type="text"
                                           name="first_name"
                                           class="form-control @error('first_name') is-invalid @enderror"
                                           value="{{ old('first_name', $customer->commonData->first_name ?? '') }}" required>
                                    @error('first_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted text-uppercase">Sobrenome *</label>
                                    <input type="text"
                                           name="last_name"
                                           class="form-control @error('last_name') is-invalid @enderror"
                                           value="{{ old('last_name', $customer->commonData->last_name ?? '') }}" required>
                                    @error('last_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small fw-bold text-muted text-uppercase">Data de Nascimento</label>
                                    <input type="date"
                                           name="birth_date"
                                           class="form-control @error('birth_date') is-invalid @enderror"
                                           value="{{ old('birth_date', $customer->commonData->birth_date?->format('Y-m-d') ?? '') }}">
                                    @error('birth_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small fw-bold text-muted text-uppercase">CPF *</label>
                                    <input type="text"
                                           name="cpf"
                                           class="form-control @error('cpf') is-invalid @enderror"
                                           value="{{ old('cpf', $customer->commonData->cpf ?? '') }}" required>
                                    @error('cpf')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        @else
                            <!-- Pessoa Jurídica -->
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted text-uppercase">Razão Social *</label>
                                    <input type="text"
                                           name="company_name"
                                           class="form-control @error('company_name') is-invalid @enderror"
                                           value="{{ old('company_name', $customer->commonData->company_name ?? '') }}" required>
                                    @error('company_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted text-uppercase">CNPJ *</label>
                                    <input type="text"
                                           name="cnpj"
                                           class="form-control @error('cnpj') is-invalid @enderror"
                                           value="{{ old('cnpj', $customer->commonData->cnpj ?? '') }}" required>
                                    @error('cnpj')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted text-uppercase">CPF do Responsável</label>
                                    <input type="text"
                                           name="cpf"
                                           class="form-control @error('cpf') is-invalid @enderror"
                                           value="{{ old('cpf', $customer->commonData->cpf ?? '') }}">
                                    @error('cpf')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        @endif

                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">Área de Atuação</label>
                                <select name="area_of_activity_id" class="form-select @error('area_of_activity_id') is-invalid @enderror">
                                    <option value="">Selecione uma área</option>
                                    @foreach($areasOfActivity as $area)
                                        <option value="{{ $area->id }}"
                                                {{ (old('area_of_activity_id', $customer->commonData->area_of_activity_id ?? '') == $area->id) ? 'selected' : '' }}>
                                            {{ $area->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('area_of_activity_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">Profissão</label>
                                <select name="profession_id" class="form-select @error('profession_id') is-invalid @enderror">
                                    <option value="">Selecione uma profissão</option>
                                    @foreach($professions as $profession)
                                        <option value="{{ $profession->id }}"
                                                {{ (old('profession_id', $customer->commonData->profession_id ?? '') == $profession->id) ? 'selected' : '' }}>
                                            {{ $profession->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('profession_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-12">
                                <label class="form-label small fw-bold text-muted text-uppercase">Descrição</label>
                                <textarea name="description"
                                          class="form-control @error('description') is-invalid @enderror"
                                          rows="3"
                                          placeholder="Descrição do cliente...">{{ old('description', $customer->commonData->description ?? '') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contato -->
        <div class="row g-3 mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent border-0">
                        <h6 class="mb-0">Informações de Contato</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">E-mail Principal *</label>
                                <input type="email"
                                       name="email"
                                       class="form-control @error('email') is-invalid @enderror"
                                       value="{{ old('email', $customer->contact->email ?? '') }}" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">Telefone</label>
                                <input type="tel"
                                       name="phone"
                                       class="form-control @error('phone') is-invalid @enderror"
                                       value="{{ old('phone', $customer->contact->phone ?? '') }}">
                                @error('phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">E-mail Comercial</label>
                                <input type="email"
                                       name="email_business"
                                       class="form-control @error('email_business') is-invalid @enderror"
                                       value="{{ old('email_business', $customer->contact->email_business ?? '') }}">
                                @error('email_business')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">Telefone Comercial</label>
                                <input type="tel"
                                       name="phone_business"
                                       class="form-control @error('phone_business') is-invalid @enderror"
                                       value="{{ old('phone_business', $customer->contact->phone_business ?? '') }}">
                                @error('phone_business')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">Website</label>
                                <input type="url"
                                       name="website"
                                       class="form-control @error('website') is-invalid @enderror"
                                       value="{{ old('website', $customer->contact->website ?? '') }}">
                                @error('website')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Endereço -->
        <div class="row g-3 mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent border-0">
                        <h6 class="mb-0">Endereço</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <label class="form-label small fw-bold text-muted text-uppercase">Logradouro *</label>
                                <input type="text"
                                       name="address"
                                       class="form-control @error('address') is-invalid @enderror"
                                       value="{{ old('address', $customer->address->address ?? '') }}" required>
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small fw-bold text-muted text-uppercase">Número *</label>
                                <input type="text"
                                       name="address_number"
                                       class="form-control @error('address_number') is-invalid @enderror"
                                       value="{{ old('address_number', $customer->address->address_number ?? '') }}" required>
                                @error('address_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">Complemento</label>
                                <input type="text"
                                       name="address_complement"
                                       class="form-control @error('address_complement') is-invalid @enderror"
                                       value="{{ old('address_complement', $customer->address->address_complement ?? '') }}">
                                @error('address_complement')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">Bairro *</label>
                                <input type="text"
                                       name="neighborhood"
                                       class="form-control @error('neighborhood') is-invalid @enderror"
                                       value="{{ old('neighborhood', $customer->address->neighborhood ?? '') }}" required>
                                @error('neighborhood')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small fw-bold text-muted text-uppercase">CEP *</label>
                                <input type="text"
                                       name="cep"
                                       class="form-control @error('cep') is-invalid @enderror"
                                       value="{{ old('cep', $customer->address->cep ?? '') }}" required>
                                @error('cep')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small fw-bold text-muted text-uppercase">Cidade *</label>
                                <input type="text"
                                       name="city"
                                       class="form-control @error('city') is-invalid @enderror"
                                       value="{{ old('city', $customer->address->city ?? '') }}" required>
                                @error('city')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small fw-bold text-muted text-uppercase">Estado *</label>
                                <input type="text"
                                       name="state"
                                       class="form-control @error('state') is-invalid @enderror"
                                       value="{{ old('state', $customer->address->state ?? '') }}" required>
                                @error('state')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">País</label>
                                <input type="text"
                                       name="country"
                                       class="form-control @error('country') is-invalid @enderror"
                                       value="{{ old('country', $customer->address->country ?? 'Brasil') }}">
                                @error('country')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Ações -->
        <div class="d-flex justify-content-between">
            <a href="{{ route('provider.customers.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($customer) ? 'Atualizar' : 'Criar' }} Cliente
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Formatar CPF/CNPJ
    const cpfInput = document.querySelector('input[name="cpf"]');
    const cnpjInput = document.querySelector('input[name="cnpj"]');

    if (cpfInput) {
        cpfInput.addEventListener('input', function() {
            let value = this.value.replace(/\D/g, '');
            if (value.length > 11) value = value.slice(0, 11);
            if (value.length > 3) {
                value = value.replace(/(\d{3})(\d)/, '$1.$2');
            }
            if (value.length > 7) {
                value = value.replace(/(\d{3})(\d)/, '$1.$2');
            }
            if (value.length > 11) {
                value = value.replace(/(\d{3})(\d{1})$/, '$1-$2');
            }
            this.value = value;
        });
    }

    if (cnpjInput) {
        cnpjInput.addEventListener('input', function() {
            let value = this.value.replace(/\D/g, '');
            if (value.length > 14) value = value.slice(0, 14);
            if (value.length > 2) {
                value = value.replace(/(\d{2})(\d)/, '$1.$2');
            }
            if (value.length > 6) {
                value = value.replace(/(\d{3})(\d)/, '$1.$2');
            }
            if (value.length > 10) {
                value = value.replace(/(\d{3})(\d)/, '$1/$2');
            }
            if (value.length > 15) {
                value = value.replace(/(\d{4})(\d{1})$/, '$1-$2');
            }
            this.value = value;
        });
    }

    // Formatar CEP
    const cepInput = document.querySelector('input[name="cep"]');
    if (cepInput) {
        cepInput.addEventListener('input', function() {
            let value = this.value.replace(/\D/g, '');
            if (value.length > 8) value = value.slice(0, 8);
            if (value.length > 5) {
                value = value.replace(/(\d{5})(\d)/, '$1-$2');
            }
            this.value = value;
        });
    }
});
</script>
@endpush

7. Customer Actions Component

Componente para exibição de ações disponíveis para um cliente.

Uso Básico

blade

<x-customer.customer-actions :customer="$customer" :showBudget="true" :showInvoice="true" />

Parâmetros

Parâmetro	Tipo	Descrição	Padrão
`customer`	`Customer`	Modelo do cliente	Obrigatório
`showBudget`	`bool`	Exibir botão de novo orçamento	`true`
`showInvoice`	`bool`	Exibir botão de nova fatura	`true`
`showSendEmail`	`bool`	Exibir botão de envio de e-mail	`true`

Estrutura

blade

@props([
    'customer',
    'showBudget' => true,
    'showInvoice' => true,
    'showSendEmail' => true
])

<div class="customer-actions btn-group" role="group">
    <!-- Visualizar -->
    <a href="{{ route('provider.customers.show', $customer) }}"
       class="btn btn-outline-primary"
       title="Visualizar Cliente">
        <i class="bi bi-eye"></i> Visualizar
    </a>

    <!-- Editar -->
    <a href="{{ route('provider.customers.edit', $customer) }}"
       class="btn btn-outline-secondary"
       title="Editar Cliente">
        <i class="bi bi-pencil"></i> Editar
    </a>

    <!-- Novo Orçamento -->
    @if($showBudget)
        <a href="{{ route('provider.budgets.create') }}?customer_id={{ $customer->id }}"
           class="btn btn-outline-info"
           title="Novo Orçamento">
            <i class="bi bi-file-earmark-text"></i> Orçamento
        </a>
    @endif

    <!-- Nova Fatura -->
    @if($showInvoice)
        <a href="{{ route('provider.invoices.create') }}?customer_id={{ $customer->id }}"
           class="btn btn-outline-success"
           title="Nova Fatura">
            <i class="bi bi-receipt"></i> Fatura
        </a>
    @endif

    <!-- Enviar E-mail -->
    @if($showSendEmail)
        <button type="button"
                class="btn btn-outline-warning"
                data-bs-toggle="modal"
                data-bs-target="#emailModal-{{ $customer->id }}"
                title="Enviar E-mail">
            <i class="bi bi-envelope"></i> E-mail
        </button>
    @endif

    <!-- Excluir -->
    <button type="button"
            class="btn btn-outline-danger"
            data-bs-toggle="modal"
            data-bs-target="#deleteModal-{{ $customer->id }}"
            title="Excluir Cliente">
        <i class="bi bi-trash"></i> Excluir
    </button>
</div>

8. Customer Filters Component

Componente para filtros específicos de listagem de clientes.

Uso Básico

blade

<x-customer.customer-filters :filters="$filters" :showType="true" :showStatus="true" />

Parâmetros

Parâmetro	Tipo	Descrição	Padrão
`filters`	`array`	Filtros atuais	`[]`
`showType`	`bool`	Exibir filtro por tipo	`true`
`showStatus`	`bool`	Exibir filtro por status	`true`
`showDateRange`	`bool`	Exibir filtro por período	`true`

Estrutura

blade

@props([
    'filters' => [],
    'showType' => true,
    'showStatus' => true,
    'showDateRange' => true
])

<div class="customer-filters">
    <form action="{{ request()->url() }}" method="GET" class="row g-3">
        @if($showType)
            <div class="col-md-3">
                <label class="form-label small fw-bold text-muted text-uppercase">Tipo</label>
                <select name="type" class="form-select form-select-sm">
                    <option value="">Todos os tipos</option>
                    <option value="pf" {{ ($filters['type'] ?? '') == 'pf' ? 'selected' : '' }}>Pessoa Física</option>
                    <option value="pj" {{ ($filters['type'] ?? '') == 'pj' ? 'selected' : '' }}>Pessoa Jurídica</option>
                </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>
                    <option value="active" {{ ($filters['status'] ?? '') == 'active' ? 'selected' : '' }}>Ativo</option>
                    <option value="inactive" {{ ($filters['status'] ?? '') == 'inactive' ? 'selected' : '' }}>Inativo</option>
                    <option value="pending" {{ ($filters['status'] ?? '') == 'pending' ? 'selected' : '' }}>Pendente</option>
                </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 nome...">
        </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.customers.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 Cliente
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

9. Customer Interactions Component

Componente para exibição do histórico de interações do cliente.

Uso Básico

blade

<x-customer.customer-interactions :customer="$customer" :showRecent="true" />

Parâmetros

Parâmetro	Tipo	Descrição	Padrão
`customer`	`Customer`	Modelo do cliente	Obrigatório
`showRecent`	`bool`	Exibir apenas interações recentes	`true`
`limit`	`int`	Limite de interações a exibir	`10`

Estrutura

blade

@props([
    'customer',
    'showRecent' => true,
    'limit' => 10
])

<div class="customer-interactions">
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-0">
            <h6 class="mb-0">Histórico de Interações</h6>
        </div>
        <div class="card-body p-0">
            @if($customer->activities->isNotEmpty())
                <div class="list-group list-group-flush">
                    @foreach($customer->activities->take($limit) as $activity)
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">{{ $activity->description }}</h6>
                                <small class="text-muted">{{ $activity->created_at->diffForHumans() }}</small>
                            </div>
                            <p class="mb-1 text-muted small">{{ $activity->metadata }}</p>
                            <small class="text-muted">{{ $activity->action_type }}</small>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-4">
                    <i class="bi bi-chat-dots text-muted" style="font-size: 3rem;"></i>
                    <p class="text-muted mt-2">Nenhuma interação registrada</p>
                </div>
            @endif
        </div>
    </div>
</div>

10. Customer Summary Component

Componente para exibição de resumo do cliente.

Uso Básico

blade

<x-customer.customer-summary :customer="$customer" :showStats="true" />

Parâmetros

Parâmetro	Tipo	Descrição	Padrão
`customer`	`Customer`	Modelo do cliente	Obrigatório
`showStats`	`bool`	Exibir estatísticas	`true`
`showLastInteraction`	`bool`	Exibir última interação	`true`

Estrutura

blade

@props([
    'customer',
    'showStats' => true,
    'showLastInteraction' => true
])

<div class="customer-summary">
    <div class="row g-3">
        @if($showStats)
            <!-- Estatísticas -->
            <div class="col-md-4">
                <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">Orçamentos</div>
                        <div class="h4 mb-0 fw-bold">{{ $customer->budgets->count() }}</div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <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-receipt text-white"></i>
                        </div>
                        <div class="text-muted small">Faturas</div>
                        <div class="h4 mb-0 fw-bold">{{ $customer->invoices->count() }}</div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <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($customer->invoices->sum('total'), 2, ',', '.') }}
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>

    @if($showLastInteraction && $customer->activities->isNotEmpty())
        <div class="row mt-3">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent border-0">
                        <h6 class="mb-0">Última Interação</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex w-100 justify-content-between">
                            <div>
                                <h6 class="mb-1">{{ $customer->activities->first()->description }}</h6>
                                <p class="mb-0 text-muted small">{{ $customer->activities->first()->metadata }}</p>
                            </div>
                            <div class="text-end">
                                <small class="text-muted">{{ $customer->activities->first()->created_at->format('d/m/Y H:i') }}</small>
                                <br>
                                <small class="text-muted">{{ $customer->activities->first()->action_type }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

11. Integração com Padrões Existentes

Uso em Views

blade

{{-- Dashboard --}}
<x-customer.customer-card :customer="$customer" />

{{-- Listagem --}}
<x-customer.customer-details :customer="$customer" />

{{-- Formulários --}}
<x-customer.customer-form :customer="$customer" :areasOfActivity="$areasOfActivity" :professions="$professions" />

{{-- Ações --}}
<x-customer.customer-actions :customer="$customer" />

Estilos CSS

css

/* Customer Components Styles */
.customer-form .btn-check:checked + .btn {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.customer-form .btn-check:checked + .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.customer-actions .btn {
    transition: all 0.2s ease;
}

.customer-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.customer-summary .card {
    border-left: 4px solid #0d6efd;
}

12. JavaScript Interatividade

Formulário de Cliente

javascript

// customer-form.js
document.addEventListener('DOMContentLoaded', function() {
    // Alternar campos conforme tipo de cliente
    const typeRadios = document.querySelectorAll('input[name="type"]');
    const cpfField = document.querySelector('input[name="cpf"]');
    const cnpjField = document.querySelector('input[name="cnpj"]');

    function toggleFields() {
        const selectedType = document.querySelector('input[name="type"]:checked').value;

        if (selectedType === 'pf') {
            cnpjField.closest('.row').style.display = 'none';
            cpfField.closest('.row').style.display = 'block';
        } else {
            cnpjField.closest('.row').style.display = 'block';
            cpfField.closest('.row').style.display = 'block';
        }
    }

    typeRadios.forEach(radio => {
        radio.addEventListener('change', toggleFields);
    });

    // Inicializar campos
    toggleFields();
});

13. Validação e Segurança

Autorização

php

// CustomerPolicy.php
public function view(User $user, Customer $customer)
{
    return $user->tenant_id === $customer->tenant_id;
}

public function update(User $user, Customer $customer)
{
    return $user->tenant_id === $customer->tenant_id;
}

public function delete(User $user, Customer $customer)
{
    return $user->tenant_id === $customer->tenant_id &&
           $customer->budgets->isEmpty() &&
           $customer->invoices->isEmpty();
}

Validations

blade

{{-- Customer Card com validação de permissões --}}
@can('view', $customer)
    <x-customer.customer-card :customer="$customer" />
@endcan

{{-- Customer Actions com validação de status --}}
@can('update', $customer)
    <x-customer.customer-actions :customer="$customer" />
@endcan

Este padrão de components para clientes garante consistência visual, reutilização de código e manutenibilidade, seguindo os mesmos princípios estabelecidos nos outros components do sistema.

Search AI Tools

Install this agent skill to your Project

SKILL.md

Componentes de UI para Clientes

Estrutura de Components

1. Customer Card Component

Uso Básico

Parâmetros

Estrutura

2. Customer Details Component

Uso Básico

Parâmetros

Estrutura

3. Customer Status Component

Uso Básico

Parâmetros

Estrutura

4. Customer Contact Component

Uso Básico

Parâmetros

Estrutura

5. Customer Address Component

Uso Básico

Parâmetros

Estrutura

6. Customer Form Component

Uso Básico

Parâmetros

Estrutura

7. Customer Actions Component

Uso Básico

Parâmetros

Estrutura

8. Customer Filters Component

Uso Básico

Parâmetros

Estrutura

9. Customer Interactions Component

Uso Básico

Parâmetros

Estrutura

10. Customer Summary Component

Uso Básico

Parâmetros

Estrutura

11. Integração com Padrões Existentes

Uso em Views

Estilos CSS

12. JavaScript Interatividade

Formulário de Cliente

13. Validação e Segurança

Autorização

Validations