Klantportaal laten bouwen met Filament: zo pak je het aan

Een B2B-klantportaal met orders, facturen, retouren en documenten bouw je met Filament in weken in plaats van maanden. Filament is gratis, open source (MIT) en draait in je eigen Laravel-applicatie. Je zet één panel neer voor je team en één voor je klanten, op dezelfde database. Voor een klantportaal met vooral tabellen, formulieren en downloads is dat in de praktijk de snelste route.

Maar niet elk portaal hoort in Filament. Dit artikel laat zien wat Filament standaard regelt, wat je zelf bouwt, en wanneer een volledig custom frontend de betere keuze is.

Wat is een klantportaal met Filament precies?

Een Filament-klantportaal is een tweede panel in je Laravel-app, met eigen login, eigen URL en eigen navigatie, dat alleen de data van de ingelogde klant toont. Je admin-panel en klantportaal delen modellen, database en businesslogica.

Concreet ziet zo'n opzet er zo uit:

• /admin — je eigen team: alle klanten, alle orders, retouren afhandelen, content beheren.
• /portaal — de klant: alleen eigen orders, facturen, retouren en documenten.

Een nieuw panel maak je met php artisan make:filament-panel portaal. Je krijgt een eigen PanelProvider waarin je pad, login, kleuren en resources configureert. Wil je het portaal op een eigen subdomein, dan gebruik je ->domain('portaal.jouwbedrijf.nl').

Wij draaien onze eigen backoffice op Filament: blog, leads, afspraken, cases en een database met Magento-shops. Dezelfde bouwstenen gebruiken we voor klantportalen.

Welke functies heeft een B2B-klantportaal nodig?

Een bruikbaar B2B-portaal draait om vier dingen: orders, facturen, retouren en documenten. Alles daarbuiten is nice-to-have tot klanten erom vragen.

Het mooie van Filament: dit zijn allemaal standaard patronen. Tables met filters, zoeken en sorteren. Forms met validatie. Infolists voor read-only detailweergaves. Actions voor knoppen als "Download factuur" of "Retour aanmelden". Sinds v4 zitten forms en infolists samen in Schemas, wat detailpagina's simpeler maakt.

Wat je wél zelf bouwt: de businesslogica. Wanneer mag een orderregel retour? Welke factuurstatus komt uit je boekhouding? Dat is maatwerk, en dat hoort ook maatwerk te zijn.

Hoe regel je login, registratie en toegang per panel?

Filament heeft login, registratie, wachtwoord-reset, e-mailverificatie en een profielpagina ingebouwd; je zet ze per panel aan met één methode. Wie welk panel mag openen, bepaal je in je User-model.

In de PanelProvider van het klantportaal:

return $panel
    ->id('portaal')
    ->path('portaal')
    ->login()
    ->passwordReset()
    ->emailVerification()
    ->profile();

Registratie (->registration()) zetten wij bij B2B-portalen meestal níet aan. Je wilt niet dat iedereen zich aanmeldt. In de praktijk werkt een uitnodigingsflow beter: jij maakt het klantaccount aan in het admin-panel, de klant krijgt een mail en stelt zelf een wachtwoord in. Sinds v4 heeft Filament ook multi-factor authentication ingebouwd. Voor een portaal met facturen en prijsafspraken is dat geen luxe.

Toegang per panel regel je via het FilamentUser-contract:

use Filament\Models\Contracts\FilamentUser;
use Filament\Panel;

class User extends Authenticatable implements FilamentUser
{
    public function canAccessPanel(Panel $panel): bool
    {
        return match ($panel->getId()) {
            'admin' => $this->is_staff,
            'portaal' => $this->customer_id !== null,
            default => false,
        };
    }
}

Eén users-tabel, twee doelgroepen. Medewerkers komen niet per ongeluk in het portaal terecht, klanten nooit in de admin.

Hoe zorg je dat klanten alleen hun eigen data zien?

Je scoped elke query in het klantportaal op het bedrijf van de ingelogde gebruiker. Dat doe je per resource met getEloquentQuery(), of centraal met Filament multi-tenancy.

De simpelste variant, per resource:

public static function getEloquentQuery(): Builder
{
    return parent::getEloquentQuery()
        ->where('customer_id', auth()->user()->customer_id);
}

Dit werkt prima bij een handvol resources. Heeft een gebruiker toegang tot meerdere bedrijven (inkoper bij een holding met drie BV's), dan is de ingebouwde tenancy van Filament sterker. De klant kiest dan zelf welk bedrijf actief is en Filament scoped automatisch. Hoe dat werkt lees je in ons artikel over multi-tenancy in Filament.

De eerlijke versie: dit is het onderdeel waar portalen lekken. Eén vergeten scope op een relation manager of een export, en klant A ziet facturen van klant B. Dek het af met policies én tests. Binnen een klantaccount wil je vaak ook rollen: de inkoper mag bestellen, de boekhouder alleen facturen zien. Daarvoor zie rollen en rechten met Filament Shield.

Hoe pas je een Filament-portaal aan aan je huisstijl?

Kleuren, logo en font pas je aan met een paar regels in de PanelProvider. Voor meer controle maak je een custom theme met Tailwind CSS.

De basis:

return $panel
    ->colors(['primary' => '#0f4c81'])
    ->brandLogo(asset('images/logo.svg'))
    ->darkModeBrandLogo(asset('images/logo-wit.svg'))
    ->font('Poppins');

Filament genereert uit één hex-waarde automatisch een volledig kleurenpalet. Wil je verder gaan, dan genereer je een theme met php artisan make:filament-theme portaal en registreer je het met ->viteTheme(...). Daarmee kun je eigen Tailwind-classes gebruiken en componenten restylen.

Wat niemand je vertelt: een Filament-portaal blijft herkenbaar als Filament. Sidebar, tabellen en formulieren hebben een vaste structuur. Voor een B2B-portaal is dat zelden een probleem; inkopers willen snel hun factuur vinden, geen designstatement. Wil je een portaal dat volledig aanvoelt als je merkwebsite, met eigen layouts en marketingcontent, dan loop je tegen grenzen aan. Daarover hieronder meer.

Hoe koppel je het portaal aan je ERP of webshop?

De data in een klantportaal komt bijna nooit uit Filament zelf, maar uit je ERP, boekhouding of webshop. Filament is de presentatielaag; de koppeling bouw je in Laravel met queues, scheduled jobs en webhooks.

Er zijn twee patronen:

In de praktijk kiezen wij bijna altijd synchroniseren, eventueel aangevuld met webhooks voor statuswijzigingen. Filament-tables zijn gebouwd op Eloquent. Lokale data betekent dat zoeken, sorteren en filteren gewoon werken, ook als je ERP even plat ligt.

Typische bronnen:

• ERP/boekhouding — Exact Online, AFAS, Twinfield: facturen, openstaande posten, klantgegevens.
• Webshop — Magento of Shopify: orders, track & trace, nabestellen. Bij een Magento B2B-setup kan het portaal bijvoorbeeld bedrijfsaccounts en offertes aanvullen die je in de shop niet kwijt kunt.
• WMS — verzendstatus en retourverwerking.
• DMS of fileserver — certificaten, tekeningen, handleidingen.

De koppelingen zelf zijn vaak het grootste deel van het werk. Meer over de architectuur lees je op onze pagina over Laravel-integraties.

Filament of een volledig custom frontend?

Kies Filament als je portaal vooral bestaat uit lijsten, detailpagina's, formulieren en downloads. Kies een custom frontend (Inertia, React, Vue of Livewire zonder Filament) als het portaal een merkbeleving moet zijn of afwijkende interacties heeft.

De rekenstap is simpel. Bij een gemiddeld B2B-portaal is het grootste deel van de schermen standaard: overzicht, detail, download. Elk standaardscherm dat je niet met de hand bouwt, is tijd die naar de ERP-koppeling en de businesslogica kan.

Er is ook een middenweg. Filament-componenten (tables, forms, actions) zijn losse packages. Je kunt ze in een eigen Livewire-layout gebruiken. Dan krijg je je eigen design met de tabellen en formulieren van Filament. Dat kost meer werk dan een panel, maar minder dan alles zelf bouwen.

Wanneer kies je Filament níet?

• Het portaal is onderdeel van je webshop en moet één geheel vormen met de checkout-flow.
• Je klanten zijn consumenten, geen inkopers. B2C-gebruikers verwachten een andere ervaring dan een admin-interface.
• Je hebt een productconfigurator of visuele tool als kern.
• Je bestaande stack is geen Laravel en je wilt die niet toevoegen.

Twijfel je tussen een Shopify-app en een eigen Laravel-portaal, lees dan B2B-klantportaal: Shopify of Laravel.

Wat kost een klantportaal met Filament?

Filament zelf kost niets. Je betaalt voor ontwikkeltijd, hosting en eventuele betaalde plugins van derden. De koppelingen met ERP en webshop bepalen meestal het grootste deel van het budget.

De kostenposten op een rij:

• Basis portaal — panels, auth, orders, facturen, documenten, huisstijl.
• Retourflow — regels per productgroep, termijnen, statussen, notificaties.
• Koppelingen — per bron (ERP, webshop, WMS) een eigen sync met foutafhandeling en monitoring.
• Rollen binnen klantaccounts — inkoper, boekhouder, beheerder.
• Hosting en onderhoud — server, back-ups, Laravel- en Filament-updates.

Een uitgebreide rekensom voor maatwerkportalen staat in wat kost een custom Laravel-klantportaal. Het verschil met Filament zit vooral in de eerste post: de standaardschermen zijn sneller klaar.

Stappenplan: een Filament-klantportaal in vijf fases

Begin klein. Een portaal met alleen facturen en orderstatus haalt al een groot deel van de "waar is mijn bestelling"-mails en telefoontjes weg.

1. Scope — welke vragen krijgt je binnendienst het vaakst? Die schermen eerst.
2. Datamodel en sync — orders en facturen lokaal, met een betrouwbare koppeling naar ERP of webshop.
3. Portaal-panel — tweede panel, login, scoping per klant, huisstijl.
4. Pilot — vijf tot tien klanten, feedback ophalen, gebruik meten.
5. Uitbreiden — retouren, documenten, gebruikersbeheer, nabestellen.

Zie het als product, niet als project. Het portaal groeit mee met wat klanten er echt mee doen. Meer over onze aanpak lees je op klantportalen met Laravel.

Samengevat

• Filament maakt een klantportaal een tweede panel naast je admin, in dezelfde Laravel-app.
• Login, wachtwoord-reset, e-mailverificatie, profiel en MFA zitten erin; toegang regel je met canAccessPanel().
• Data-scoping per klant is het kritieke punt: policies, scopes en tests.
• Huisstijl via kleuren, logo, font en een custom theme. Volledige design-vrijheid heb je niet.
• ERP- en webshopkoppelingen bepalen het grootste deel van het werk.
• Kies Filament voor data-zware B2B-portalen. Kies custom voor merkbeleving, B2C of configurators.

Veelgestelde vragen

Is Filament geschikt voor een klantportaal of alleen voor admin-panels?

Filament is prima geschikt voor een klantportaal. Je maakt een apart panel met eigen URL, login en navigatie, naast je admin-panel. Voor B2B-portalen met orders, facturen en documenten is het een van de snelste routes binnen Laravel.

Kunnen admin en klanten dezelfde gebruikerstabel gebruiken?

Ja. Je implementeert FilamentUser op je User-model en bepaalt in canAccessPanel() per panel-ID wie toegang heeft. Medewerkers komen in het admin-panel, klanten in het portaal.

Hoe voorkom ik dat klanten elkaars data zien?

Scope elke query op het klantaccount, via getEloquentQuery() per resource of via de ingebouwde multi-tenancy van Filament. Combineer dat met policies en geautomatiseerde tests. Vergeten scopes op exports en relation managers zijn de klassieke lekken.

Kan een Filament-portaal er uitzien als mijn eigen huisstijl?

Grotendeels. Kleuren, logo, dark-mode-logo en font stel je in de PanelProvider in, en met een custom theme pas je de styling verder aan via Tailwind CSS. De basisstructuur van sidebar, tabellen en formulieren blijft herkenbaar.

Kan ik een Filament-portaal koppelen aan Exact Online, AFAS of Magento?

Ja, maar die koppeling bouw je in Laravel, niet in Filament. Meestal synchroniseer je orders en facturen naar een lokale database met queues en webhooks. Filament toont daarna die data in tabellen en detailpagina's.

Wanneer is een volledig custom frontend beter?

Als het portaal een merkbeleving moet zijn, voor consumenten bedoeld is of draait om een configurator of afwijkende interacties. Een tussenvorm is ook mogelijk: losse Filament-packages zoals tables en forms in een eigen Livewire-layout.

Wil je weten of Filament past bij jouw portaal en je ERP-koppeling? Neem contact op, dan kijken we er samen naar.