awcodes / overlook

An app overview widget for Filament panels.

Overlook for Filament

A Filament plugin that adds an app overview widget to your admin panel.

Installation

You can install the package via composer:

composer require awcodes/overlook

In an effort to align with Filament's theming methodology you will need to use a custom theme to use this plugin.

Note If you have not set up a custom theme and are using a Panel follow the instructions in the Filament Docs first.

Add the plugin's views to your tailwind.config.js file.

content: [
    '<path-to-vendor>/awcodes/overlook/resources/**/*.blade.php',
]

Usage

Add the plugin and widget to your panel provider. You may use the sort and columns methods on the plugin to change the widget order and number of columns the widget will use to display its items.

use Awcodes\Overlook\OverlookPlugin;
use Awcodes\Overlook\Widgets\OverlookWidget;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            OverlookPlugin::make()
                ->sort(2)
                ->columns([
                    'default' => 1,
                    'sm' => 2,
                    'md' => 3,
                    'lg' => 4,
                    'xl' => 5,
                    '2xl' => null,
                ]),
        ])
        ->widgets([
            OverlookWidget::class,
        ]);
}      

Including and Excluding Items

By default, the widget will display all resources registered with Filament. You can use either the includes or excludes methods on the plugin to specify which resources to include or exclude.

These methods should not be used together

use Awcodes\Overlook\OverlookPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            OverlookPlugin::make()
                ->includes([
                    \App\Filament\Resources\Shop\ProductResource::class,
                    \App\Filament\Resources\Shop\OrderResource::class,
                ]),
        ]);
}      

use Awcodes\Overlook\OverlookPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            OverlookPlugin::make()
                ->excludes([
                    \App\Filament\Resources\Shop\ProductResource::class,
                    \App\Filament\Resources\Shop\OrderResource::class,
                ]),
        ]);
}      

Abbreviated Counts

You can disable abbreviated counts by passing false the abbreviateCount method on the plugin.

use Awcodes\Overlook\OverlookPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            OverlookPlugin::make()
                ->abbreviateCount(false),
        ]);
}      

Tooltips

When using abbreviated counts a tooltip will show on hover with the non abbreviated count. You can disable them by passing false the tooltips method on the plugin.

use Awcodes\Overlook\OverlookPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            OverlookPlugin::make()
                ->tooltips(false),
        ]);
}

Sorting the Items

By default, the items will be sorted in the order they are registered with Filament or as provided in the includes method. You can change this to sort them alphabetically with the alphabetical method on the plugin.

use Awcodes\Overlook\OverlookPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            OverlookPlugin::make()
                ->alphabetical(),
        ]);
}      

Customizing the Widget

By default, the overlook widget uses the getEloquentQuery() method of the Filament Resource, but you can customize the query by implementing the CustomizeOverlookWidget interface on the Filament Resource. The trait HandlesOverlookWidgetCustomization predefines existing customization that can be overriden on the resource class.

use Awcodes\Overlook\Contracts\CustomizeOverlookWidget;
use Awcodes\Overlook\Concerns\HandlesOverlookWidgetCustomization;

class UserResource extends Resource implements CustomizeOverlookWidget
{
    use HandlesOverlookWidgetCustomization;
}

Customize Widget Query

Override the getOverlookWidgetQuery() method to customize the query for the Overlook Widget. This method takes in the existing eloquent query as a parameter that can be used to make further customization.

use Illuminate\Database\Eloquent\Builder;

public static function getOverlookWidgetQuery(Builder $query): Builder
{
    return $query->where('status','=','PENDING');
}

Customize Widget Title

Override the getOverlookWidgetTitle() method to customize the title of the widget

public static function getOverlookWidgetTitle(): string
{
    return 'Pending Users';
}

Customize Widget Icon

By default, the icon will be loaded from the resource but you can override it by passing using the icons modifier on the plugin and passing it an array of icon names and resource names.

use Awcodes\Overlook\OverlookPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            OverlookPlugin::make()
                ->icons([
                    'heroicon-o-heart' => \App\Filament\Resources\Shop\ProductResource::class,
                    'heroicon-o-newspaper' => \App\Filament\Resources\Shop\OrderResource::class,
                ]),
        ]);
}      

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Adam Weston
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

overlook's Issues

Method Awcodes\Overlook\Overlook::getRoutes does not exist.

Method Awcodes\Overlook\Overlook::getRoutes does not exist.
at projectDir\vendor\laravel\framework\src\Illuminate\Macroable\Traits\Macroable.php:87

 83▕      */
 84▕     public static function __callStatic($method, $parameters)
 85▕     {
 86▕         if (! static::hasMacro($method)) {

➜ 87▕ throw new BadMethodCallException(sprintf(
88▕ 'Method %s::%s does not exist.', static::class, $method
89▕ ));
90▕ }
91▕

i Bad Method Call: Did you mean Awcodes\Overlook\Overlook::getRules() ?

Wrong height widget

Filament Version

v3

Plugin Version

2

PHP Version

8.2

Problem description

why my widget look like this :(

Expected behavior

how to setting height?

Steps to reproduce

how to setting height?

Reproduction repository

No response

Relevant log output

how to setting height?

overlook ist not registered for panel

Filament Version

v3

Plugin Version

v2.2

PHP Version

v8.3.3

Problem description

I get the error
Plugin [awcodes/overlook] is not registered for panel [admin].
when opening the dashboard.

Expected behavior

See a nice OVerview of my resources :)

Steps to reproduce

In the AdminPanelProvider register the widget like the following

->widgets([
  . . .
  OverlookWidget::class,
])

Reproduction repository

No response

Relevant log output

No response

add customization to widgets

Can you add customization like grid style of the widgets Or customizing the order of the widgets.

wrong issue templates

the issue templates of this Repo is broken and lead to 404 pages.

css not included on fresh install for Filament3

Filament Version

v3

Plugin Version

2.x

PHP Version

php 8.1

Problem description

I experienced the same problem as #23

The problem seems to stem from the css definitions not being available in the v2.x branch.

The widget refers to these classes:

overlook/resources/views/widget.blade.php

Line 26 in 49fe617

class="overlook-icon w-auto h-24 absolute left-0 top-8 text-primary-500 opacity-20 dark:opacity-20 transition group-hover:scale-110 group-hover:-rotate-12 group-hover:opacity-40 dark:group-hover:opacity-80"

But their definitions are, as far as i can see, only defined in the 1.x branch:

https://github.com/awcodes/overlook/blob/1.x/resources/dist/overlook.css

I manually injected the contents of this file in my theme.css and removed some stuff to make it look okay with my dark mode,
and now it looks beautiful.

As i'm quite new to filament I don't have a clue how to make the proper PR for this yet, but I hope this helps someone else.

Expected behavior

Icons should be properly styled.

Steps to reproduce

• install and configure plugin on fresh filament 3.x install (including enabling theme)
• observe icons being unstyled

Reproduction repository

No response

Relevant log output

No response

Class "NumberFormatter" not found

Filament Version

v3

Plugin Version

v2.2

PHP Version

PHP 8.3

Problem description

Class "NumberFormatter" not found

A class import is missing
You have a missing class import. Try importing this class: PhpOffice\PhpSpreadsheet\Style\NumberFormat\NumberFormatter.

Expected behavior

To Work Normally If I disable abbreviateCount it works

Steps to reproduce

1. Normally Update the Code
2. Opened Dashboard Found that I got this error

Reproduction repository

No response

Relevant log output

Error Share Link

https://flareapp.io/share/V7jdNAjm

Widgets should honor darkmode configuration toggle

If in filament.config, 'dark_mode' is false, then the widgets shouldn't be dark:

Unable to Publish Config

Issue: Error produced while trying to publish the config
Reproduction:

1. Run php artisan vendor:publish --tag="overlook-config"
2. Issue presented

Evidence of Issue:

Style Bug

Filament Version

v3

Plugin Version

v2.0.0

PHP Version

8.1.7

Problem description

Boxes has style problemhave

Expected behavior

The box fit the content

Steps to reproduce

Just add OverlookPlugin::make(), and OverlookWidget::class, and the problem will appear

Reproduction repository

No response

Relevant log output

No response