Desenvolvendo um Sistema em Laravel — Parte 4A: Arquitetura de Interface e Base do Sistema - MGC Brasil

Introdução

Após consolidar a arquitetura multiempresa e os mecanismos de segurança, o projeto entra em uma fase decisiva: transformar essa fundação técnica em um sistema utilizável. Nesta etapa, a construção da interface passa a se apoiar no Laravel Blade, o mecanismo de templates nativo do framework, permitindo o desenvolvimento de uma interface moderna, limpa e altamente integrada ao backend, sem a necessidade de frameworks JavaScript pesados.

O Blade fornece herança de layout, componentes reutilizáveis, diretivas e integração direta com o ecossistema do Laravel, oferecendo clareza arquitetural, produtividade e facilidade de manutenção — características essenciais para sistemas de gestão de médio e grande porte.

Centralização de Permissões

Antes de qualquer decisão de interface, foi criado um ponto único de controle de permissões no sistema:

config/permissions.php

return [

    'dashboards' => [
        'admin' => ['super_admin', 'admin'],
        'user'  => ['manager', 'operator', 'viewer'],
    ],

    'features' => [
        'manage_users' => ['super_admin', 'admin'],
        'view_reports_operational' => ['super_admin', 'admin', 'manager', 'operator', 'viewer'],
        'view_reports_managerial'  => ['super_admin', 'admin', 'manager'],
        'edit_records'   => ['super_admin', 'admin', 'manager', 'operator'],
        'delete_records' => ['super_admin', 'admin'],
        'export_data'    => ['super_admin', 'admin', 'manager'],
    ],
];

Essa abordagem evita regras espalhadas pela aplicação e permite que a lógica de autorização seja mantida de forma centralizada, previsível e fácil de evoluir.

Helpers: Conectando Regras de Negócio e Interface

O que são Helpers

Helpers são funções globais responsáveis por encapsular regras recorrentes da aplicação, permitindo que controllers e views consultem comportamentos complexos por meio de chamadas simples e legíveis.

Neste projeto, eles desempenham papel fundamental ao conectar o sistema de permissões com a camada de apresentação.

Criamos os helpers em:

app/Support/helpers.php

function can($feature): bool
{
    $user = Auth::user();
    $permissions = config('permissions.features');

    return $user && $user->role && isset($permissions[$feature])
           && in_array($user->role->name, $permissions[$feature]);
}

function dashboardType(): string
{
    $user = Auth::user();
    $dashboards = config('permissions.dashboards');

    foreach ($dashboards as $type => $roles) {
        if ($user && $user->role && in_array($user->role->name, $roles)) {
            return $type;
        }
    }

    return 'user';
}

Essas funções são carregadas automaticamente após o registro em composer.json:

"autoload": {
    "files": [
        "app/Support/helpers.php"
    ]
}

Convivência entre Breeze e o Layout do Sistema

O projeto utiliza o Laravel Breeze para autenticação e telas públicas. Seus layouts permanecem em:

resources/views/layouts/
    app.blade.php
    guest.blade.php
    navigation.blade.php

Já o sistema interno utiliza um layout próprio e isolado, evitando conflitos e oferecendo total controle sobre a interface principal.

Organização da Camada de Interface

A camada de interface do sistema foi organizada assim:

resources/views/components/   → componentes reutilizáveis do sistema
resources/views/             → telas de conteúdo do sistema

Essa separação mantém a arquitetura limpa e escalável.

Criação do Layout Principal do Sistema

Para a interface interna, foi criado um layout exclusivo:

resources/views/components/system-layout.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" 
      x-data="{ dark: false, sidebarOpen: window.innerWidth >= 1024 }"
      :class="{ 'dark': dark }">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">

<div class="flex h-screen overflow-hidden">

    <x-sidebar />

    <div class="flex flex-col flex-1">

        <x-header />

        <main class="flex-1 overflow-y-auto p-6">
            {{ $slot }}
        </main>

    </div>

</div>

</body>
</html>

Componentes de Interface

Header

resources/views/components/header.blade.php

<header class="flex items-center justify-between h-16 px-6 bg-white dark:bg-gray-800 border-b">
    <div class="flex items-center gap-4">
        <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden p-2">☰</button>
        <span class="font-semibold">{{ config('app.name') }}</span>
    </div>

    <div class="flex items-center gap-4">
        <button @click="dark = !dark">Dark</button>
        <span>{{ Auth::user()->name }}</span>
    </div>
</header>

Sidebar

resources/views/components/sidebar.blade.php

<aside x-show="sidebarOpen" class="w-64 bg-white dark:bg-gray-800 border-r flex flex-col">
    <nav class="p-4 space-y-2">
        <a href="{{ route('dashboard') }}">Dashboard</a>

        @if (can('manage_users'))
            <a href="#">Usuários</a>
        @endif

        @if (can('view_reports_operational'))
            <a href="#">Relatórios Operacionais</a>
        @endif

        @if (can('view_reports_managerial'))
            <a href="#">Relatórios Gerenciais</a>
        @endif
    </nav>
</aside>

Tela Inicial do Sistema

resources/views/dashboard.blade.php

<x-system-layout>
    <h1 class="text-2xl font-semibold mb-4">
        Bem-vindo ao Sistema
    </h1>

    <p>Dashboard carregado com sucesso.</p>
</x-system-layout>

Conclusão

Ao final desta etapa, o sistema passa a possuir uma base visual sólida, com controle de permissões centralizado, helpers conectando regras de negócio à interface e um layout desacoplado do scaffold do framework. Essa arquitetura prepara o projeto para a construção dos dashboards específicos por perfil e das funcionalidades operacionais que serão abordadas na próxima etapa.