📋 O que é o WebSpot Assets?

WebSpot Assets é um sistema centralizado de componentes e layouts para projetos Laravel. Ele fornece:

Layout padrão WebSpot com menu lateral, header com produtos e footer
Componentes prontos como tabelas responsivas, seletores, menus, etc.
Atualização centralizada - atualize aqui e todos os projetos recebem as mudanças
Zero duplicação de código - reutilize tudo entre projetos

🎯 Filosofia: Você foca apenas no conteúdo específico da sua aplicação. Todo o layout, componentes e funcionalidades comuns vêm prontos do WebSpot Assets.

🚀 Instalação Rápida (3 passos)

1️⃣ Adicionar ao composer.json

{
    "repositories": [{
        "type": "path",
        "url": "/var/www/assets/laravel-package"
    }],
    "require": {
        "webspot/theme-assets": "*"
    }
}
            

2️⃣ Instalar e configurar

# Instalar o package
composer install

# Publicar configuração (opcional, mas recomendado)
php artisan vendor:publish --tag=theme-assets-config

# Limpar cache
php artisan cache:clear
php artisan view:clear
php artisan config:clear
            

3️⃣ Configurar .env

ASSET_CDN_URL=https://assets.webspot.com.br
APP_NAME="Nome do Seu Sistema"
            

✅ Pronto! Agora você pode usar todos os componentes WebSpot no seu projeto.

💻 Uso Básico

Criar uma página com layout WebSpot

@extends('theme-assets::layouts.webspot') @section('title', 'Dashboard') @section('sidebar') @endsection @section('header-left') @endsection @section('header-right') @endsection @section('content')

Meu Dashboard

Nome Email Ações @foreach($users as $user) {{ $user->name }} {{ $user->email }} Editar @endforeach @endsection

⚙️ Configuração

Arquivo config/theme-assets.php

return [
    // URL do CDN
    'asset_cdn_url' => env('ASSET_CDN_URL', 'https://assets.webspot.com.br'),
    
    // Rota padrão do dashboard
    'dashboard_route' => 'admin.dashboard',
    
    // Menu de produtos (aparece no header)
    'products' => [
        [
            'name' => 'Monitor',
            'url' => 'https://monitor.webspot.com.br',
            'icon' => 'bi-display',
            'description' => 'Monitoramento de sistemas',
            'active' => true // marca como ativo se for o produto atual
        ],
        [
            'name' => 'Faturamento',
            'url' => 'https://faturamento.webspot.com.br',
            'icon' => 'bi-receipt',
            'description' => 'Sistema de faturamento'
        ],
        // ... outros produtos
    ],
    
    // Menu lateral
    'menu' => [
        [
            'title' => 'Dashboard',
            'route' => 'admin.dashboard',
            'icon' => 'bi-speedometer2',
            'active' => 'admin.dashboard' // rota para marcar como ativo
        ],
        [
            'title' => 'Usuários',
            'route' => 'admin.users.index',
            'icon' => 'bi-people',
            'active' => 'admin.users.*'
        ],
        [
            'title' => 'Relatórios',
            'icon' => 'bi-graph-up',
            'submenu' => [
                [
                    'title' => 'Vendas',
                    'route' => 'admin.reports.sales',
                    'active' => 'admin.reports.sales'
                ],
                [
                    'title' => 'Financeiro',
                    'route' => 'admin.reports.financial',
                    'active' => 'admin.reports.financial'
                ]
            ]
        ]
    ]
];
            

🧩 Componentes Disponíveis

Layout e Navegação

webspot-sidebar-nav

Menu lateral responsivo com submenus

<x-webspot-sidebar-nav />

webspot-products-menu

Menu de produtos no header (desktop/mobile)

<x-webspot-products-menu />

webspot-user-menu

Dropdown do usuário com logout

<x-webspot-user-menu />

webspot-header

Header completo com slots personalizáveis

<x-webspot-header />

Tabelas e Dados

webspot-table

Tabela responsiva com paginação, busca e ordenação

<x-webspot-table :paginator="$data" />

webspot-data-table

Tabela avançada com filtros e exportação

<x-webspot-data-table :data="$data" />

webspot-table-expand

Botão para expandir linhas em mobile

<x-webspot-table-expand />

Formulários e Seletores

webspot-select

Select estilizado com Bootstrap

<x-webspot-select :options="$options" />

webspot-searchable-select

Select com busca integrada

<x-webspot-searchable-select />

webspot-country-select

Seletor de países com bandeiras

<x-webspot-country-select />

webspot-client-selector

Seletor de cliente/hotel com logo e busca

<x-webspot-client-selector :clients="$clients" :current-client="$selected" />

Cards e UI

webspot-card-header-with-actions

Header de card com ações

<x-webspot-card-header-with-actions />

webspot-selectable-cards

Cards selecionáveis (radio/checkbox)

<x-webspot-selectable-cards />

webspot-refresh-button

Botão de atualização com animação

<x-webspot-refresh-button />

Utilitários

webspot-server-time

Relógio com hora do servidor

<x-webspot-server-time />

webspot-roles-manager

Gerenciador de permissões

<x-webspot-roles-manager />

📝 Exemplos Práticos

Tabela com busca e paginação

ID Nome Email Criado em Ações @foreach($users as $user) {{ $user->id }} {{ $user->name }} {{ $user->email }} {{ $user->created_at->format('d/m/Y') }} @endforeach

Menu lateral com submenus

// Em config/theme-assets.php
'menu' => [
    [
        'title' => 'Dashboard',
        'route' => 'dashboard',
        'icon' => 'bi-speedometer2'
    ],
    [
        'title' => 'Cadastros',
        'icon' => 'bi-folder',
        'submenu' => [
            ['title' => 'Clientes', 'route' => 'clients.index'],
            ['title' => 'Fornecedores', 'route' => 'suppliers.index'],
            ['title' => 'Produtos', 'route' => 'products.index']
        ]
    ]
]
            

Formulário com componentes

Seletor de Cliente (Header)

{{-- No header-right do layout --}}
@section('header-right')
    
@endsection

🔧 Troubleshooting

Componentes não aparecem

Problema: Os componentes x-webspot-* não são renderizados
Solução:

php artisan cache:clear
php artisan view:clear
php artisan config:clear
composer dump-autoload
                

Erro "Class webspot/theme-assets not found"

Problema: Composer não encontra o package
Solução: Verifique se o caminho no repositories está correto:

"repositories": [{
    "type": "path",
    "url": "/var/www/assets/laravel-package"  // Caminho absoluto
}]
                

Assets (CSS/JS) não carregam

Problema: Arquivos CSS/JS retornam 404
Solução: Verifique a variável ASSET_CDN_URL no .env:

ASSET_CDN_URL=https://assets.webspot.com.br # Sem barra no final

Menu não aparece

Problema: Menu lateral vazio
Solução: Publique e configure o arquivo de configuração:

php artisan vendor:publish --tag=theme-assets-config
# Edite config/theme-assets.php com seus menus
                

🔗 Links e Recursos

🎨 Ver Demo WebSpot 📚 Documentação Técnica 🤖 Instruções para Claude

WebSpot Assets - Sistema Centralizado de Componentes

Desenvolvido pela equipe WebSpot para máxima produtividade e consistência.