First look at MoonShine

My name is Danil Shchutsky, I am the author of the CutCode project. In this article I wanted to tell you about MoonShine – an administration panel for your Laravel projects.

I’m working on MoonShine with members of the CutCode community. This is an open-source project, the main task of which is to make the admin panel as simple as possible (for beginner developers) and at the same time functional and customizable (for experienced ones).

In my opinion, it is very difficult for beginners to master other administration panels that have already gained popularity, and to give them a tool with a low entry threshold in terms of knowledge. At the same time, for seasoned developers, the MoonShine architecture allows you to create very functional things.

TAL (Tailwindcss, Alpine.js, Laravel) was chosen as the stack; in my opinion, it is both functional and promising.

At the time of writing, the current version of MoonShine is 1.62. For MoonShine to work you need:

php>=8.0

laravel >= 9.0

MoonShine is written for comfortable use documentationand also filmed detailed video guide.

I’ll tell you and show you what MoonShine is.

After installing the admin panel, you will be greeted by the login page:

Let’s get inside and briefly go over the functionality.
This is what a section with standard CRUD looks like:

Filters and decorations

There are many possibilities for filtering data for different cases.

For fans of customization – decorations, Heroicons service, UI components, badges and a bunch of other features.

For convenience, you can add tabs to the form and group fields:

use MoonShine\Decorations\Block;
use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
use MoonShine\Fields\Text;

//...

public function fields(): array
{
   return [
       Block::make('Основное', [
           Tabs::make([
               Tab::make('Seo', [
                   Text::make('Seo title')
                       ->fieldContainer(false),
                   //...
               ]),
               Tab::make('Categories', [
                   //...
               ])
           ])
       ]),
   ];
}
//...

Grid with columns

use MoonShine\Decorations\Column;

//...
public function fields(): array
{
   return [
       Grid::make([
           Column::make([
               Block::make('Main information', [
                   // Fields here
               ])
           ])->columnSpan(6), // 6 из 12 - половина экрана

           Column::make([
               Block::make('Contact information', [
                   // Fields here
               ])
           ])->columnSpan(6), // 6 из 12 - половина экрана
       ])
   ];
}
//...

Creating dashboards

Several tools have been created for the graphic design of the main page of the admin panel.

Display as goal progress

namespace MoonShine\Resources;
use MoonShine\Metrics\ValueMetric;

class PostResource extends Resource
{
   //...

   public function metrics(): array
   {
       return [
           ValueMetric::make('Open tasks')
               ->value(Task::opened()->count())
               ->progress(200) // Конечная цель
       ];
   }
   //...
}

Draw a graph

namespace MoonShine\Resources;
use MoonShine\Metrics\LineChartMetric;

class PostResource extends Resource
{
   //...

   public function metrics(): array
   {
       return [
           LineChartMetric::make('Orders')
               ->line([
                   'Profit' => Order::query()
                       ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
                       ->groupBy('date')
                       ->pluck('sum','date')
                       ->toArray(),
                   'Avg' => Order::query()
                       ->selectRaw('AVG(price) as avg, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
                       ->groupBy('date')
                       ->pluck('avg','date')
                       ->toArray()
               ],[
                   'red', 'blue'
               ])
       ];
   }
   //...
}

Search by admin panel

To organize a global search in MoonShine, you can use the package Algolia search for MoonShine

This package uses a search engine Algoliawhich takes into account the context and type of request, possible typos, synonyms and word forms, entering a request in different languages, and much more.