From 41cf6eb5308015e65d804b855b3d92f17cbb32e5 Mon Sep 17 00:00:00 2001
From: Amir <amirhussain@outlook.com>
Date: Tue, 15 Nov 2022 16:39:10 +0400
Subject: [PATCH] Structuring Menu with hierarchy Model

---
 app/Http/Livewire/Admin/Menu/MenuParent.php   |  33 +++--
 .../Admin/Menu/MenuParentDatatable.php        |   9 +-
 app/Models/Menu.php                           |   8 ++
 app/Traits/Data.php                           |   8 ++
 app/View/Components/Item/Select.php           |  28 +++++
 app/View/Components/Svg/Security.php          |  28 +++++
 composer.json                                 |   3 +-
 composer.lock                                 | 116 +++++++++++++++++-
 .../2022_11_09_085026_create_menus_table.php  |   6 +-
 .../components/item/elements/select.blade.php |  14 +++
 .../views/components/item/select.blade.php    |  40 ++++++
 .../views/components/layout/content.blade.php |   2 +-
 .../views/components/layout/main.blade.php    |   2 +-
 .../views/components/svg/security.blade.php   |   3 +
 .../views/livewire/admin/dashboard.blade.php  |  14 +++
 .../views/livewire/admin/menu/level.blade.php |   2 +-
 .../livewire/admin/menu/menu-parent.blade.php |  53 ++++++--
 tailwind.config.js                            |   2 +
 18 files changed, 346 insertions(+), 25 deletions(-)
 create mode 100644 app/View/Components/Item/Select.php
 create mode 100644 app/View/Components/Svg/Security.php
 create mode 100644 resources/views/components/item/elements/select.blade.php
 create mode 100644 resources/views/components/item/select.blade.php
 create mode 100644 resources/views/components/svg/security.blade.php
 create mode 100644 resources/views/livewire/admin/dashboard.blade.php

diff --git a/app/Http/Livewire/Admin/Menu/MenuParent.php b/app/Http/Livewire/Admin/Menu/MenuParent.php
index ef2a70a..bb30a63 100644
--- a/app/Http/Livewire/Admin/Menu/MenuParent.php
+++ b/app/Http/Livewire/Admin/Menu/MenuParent.php
@@ -3,6 +3,7 @@
 namespace App\Http\Livewire\Admin\Menu;
 
 use App\Models\Menu;
+use App\Traits\Data;
 use App\Traits\General;
 use Illuminate\Database\Eloquent\Model;
 use Livewire\Component;
@@ -10,13 +11,17 @@
 class MenuParent extends Component
 {
     use General;
+    use Data;
 
     public string $pageHeader = 'Menu';
     public array $menu;
     public ?int $rowID = null;
+    public ?int $menuID = null;
 
     public $menuRecord = null;
 
+    public array $parentData = [];
+
     protected $listeners = ['createMenu', 'editMenu', 'deleteMenu'];
 
 
@@ -37,12 +42,15 @@ public function resetForm()
         'menu.name.required' => 'Menu name is required.',
         'menu.name.min' => 'Menu must be at-least 4 letters long.',
         'menu.name.unique' => ':attribute menu already exists!.',
+        'menu.parent_id.integer' => ':attribute must be integer.',
+        'menu.parent_id.gt' => ':attribute must be positive integer.',
     ];
 
     protected function rules()
     {
         return [
-            'menu.name' => 'required|min:4|unique:menus,name,' . $this->rowID
+            'menu.name' => 'required|min:4|unique:menus,name,' . $this->rowID,
+            'menu.parent_id'=>'numeric|gt:0'
         ];
     }
 
@@ -50,25 +58,31 @@ protected function validationAttributes()
     {
         return [
             'menu.name' => $this->menu['name'],
+            'menu.menuID' => $this->menu['menuID'],
         ];
     }
 
     public function resetInput()
     {
-        $this->menu = ['name' => ''];
+        $this->menu = ['name' => '','menuID'=>null];
     }
 
     protected function getRecord($row)
     {
         $this->rowID = $row['id'];
-        $this->menuRecord = Menu::find($row)->first();
+        $this->menuRecord = Menu::find($this->rowID)->first();
     }
 
 
-    public function createMenu()
+    public function createMenu($id=null)
     {
+
+
         $this->resetForm();
+        if($id !== null) $this->menu['menuID']= $id;
         $this->modelInfo('create', 'Menu');
+        $this->parentData = $this->get_array_for_select_input(Menu::select('id', 'name')->where('parent_id',null)->where('id',$id)->get());
+
         $this->dispatchBrowserEvent('FirstModel', ['show' => true]);
     }
 
@@ -88,12 +102,13 @@ public function deleteMenu($row)
         $this->dispatchBrowserEvent('FirstModel', ['show' => true]);
     }
 
-    protected function afterSave($formType){
+    protected function afterSave($formType)
+    {
         $this->emit('refreshDatatable');
         $this->resetForm();
         $this->dispatchBrowserEvent('FirstModel', ['show' => false]);
 
-        switch($formType){
+        switch ($formType) {
             case 'create':
                 $this->dispatchBrowserEvent('Toast', ['show' => true, 'type' => 'success', 'message' => "'" . $this->menuRecord->name . "'" . ' was added to Menu Level!']);
                 break;
@@ -112,13 +127,13 @@ protected function afterSave($formType){
     public function submit()
     {
 
-
         switch ($this->formType) {
 
             case 'create':
                 $this->validate();
                 $this->menuRecord = new Menu();
                 $this->menuRecord->name = $this->menu['name'];
+                ($this->menu['menuID'] !== null) ? $this->menuRecord->parent_id = $this->menu['menuID'] : $this->menuRecord->parent_id=null;
                 $this->menuRecord->save();
                 $this->afterSave($this->formType);
                 break;
@@ -126,6 +141,7 @@ public function submit()
             case 'update':
                 $this->validate();
                 $this->menuRecord->name = $this->menu['name'];
+                $this->menuRecord->menus_id = $this->menu['menuID'];
                 $this->menuRecord->save();
                 $this->afterSave($this->formType);
                 break;
@@ -141,6 +157,7 @@ public function submit()
 
     public function render()
     {
-        return view('livewire.admin.menu.menu-parent');
+        $menus = Menu::with('childMenus')->where('parent_id','=',null)->get();
+        return view('livewire.admin.menu.menu-parent',['menus'=>$menus]);
     }
 }
diff --git a/app/Http/Livewire/Admin/Menu/MenuParentDatatable.php b/app/Http/Livewire/Admin/Menu/MenuParentDatatable.php
index 59e9be1..a4fa879 100644
--- a/app/Http/Livewire/Admin/Menu/MenuParentDatatable.php
+++ b/app/Http/Livewire/Admin/Menu/MenuParentDatatable.php
@@ -38,7 +38,11 @@ public function configure(): void
                     ];
                 } elseif ($column->isField('name')) {
                     return [
-                        'class' => '!w-[60%]',
+                        'class' => '!w-[50%]',
+                    ];
+                }elseif ($column->isField('parent_id')) {
+                    return [
+                        'class' => '!w-[10%]',
                     ];
                 } elseif ($column->isField('created_at')) {
                     return [
@@ -91,6 +95,9 @@ public function columns(): array
             Column::make("Name", "name")
                 ->searchable()
                 ->sortable(),
+            Column::make("Belongs to", "parent_id")
+                ->searchable()
+                ->sortable(),
             Column::make("Created at", "created_at")
                 ->format(fn($value, $row, Column $column) => $row->created_at->diffForHumans())
                 ->sortable(),
diff --git a/app/Models/Menu.php b/app/Models/Menu.php
index 17f7ad2..b78a6fe 100644
--- a/app/Models/Menu.php
+++ b/app/Models/Menu.php
@@ -4,8 +4,16 @@
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Staudenmeir\LaravelAdjacencyList\Eloquent\HasRecursiveRelationships;
 
 class Menu extends Model
 {
     use HasFactory;
+//    use HasRecursiveRelationships;
+    public function childMenus()
+    {
+        return $this->hasMany(Menu::class, 'parent_id', 'id')->with('childMenus');
+    }
+
+
 }
diff --git a/app/Traits/Data.php b/app/Traits/Data.php
index 05dd26a..e512832 100644
--- a/app/Traits/Data.php
+++ b/app/Traits/Data.php
@@ -8,4 +8,12 @@ public static function uri_guard($request)
     {
         return explode('/', $request->getRequestUri())[1];
     }
+
+    public function get_array_for_select_input($record){
+        $array=[];
+        foreach ($record as $data){
+            $array[$data->id]=$data->name;
+        }
+        return $array;
+    }
 }
diff --git a/app/View/Components/Item/Select.php b/app/View/Components/Item/Select.php
new file mode 100644
index 0000000..cd902a5
--- /dev/null
+++ b/app/View/Components/Item/Select.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Item;
+
+use Illuminate\View\Component;
+
+class Select extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.item.select');
+    }
+}
diff --git a/app/View/Components/Svg/Security.php b/app/View/Components/Svg/Security.php
new file mode 100644
index 0000000..06cb8d9
--- /dev/null
+++ b/app/View/Components/Svg/Security.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components\Svg;
+
+use Illuminate\View\Component;
+
+class Security extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.svg.security');
+    }
+}
diff --git a/composer.json b/composer.json
index c0690d7..1d99075 100644
--- a/composer.json
+++ b/composer.json
@@ -12,7 +12,8 @@
         "laravel/sanctum": "^3.0",
         "laravel/tinker": "^2.7",
         "livewire/livewire": "^2.5",
-        "rappasoft/laravel-livewire-tables": "^2.8"
+        "rappasoft/laravel-livewire-tables": "^2.8",
+        "staudenmeir/laravel-adjacency-list": "^1.0"
     },
     "require-dev": {
         "fakerphp/faker": "^1.9.1",
diff --git a/composer.lock b/composer.lock
index e3eb0c6..f8b26be 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "a2a64ee96004e20af95f2c5f858ad79d",
+    "content-hash": "c9957c2f9b85047599db787249004b91",
     "packages": [
         {
             "name": "bacon/bacon-qr-code",
@@ -3583,6 +3583,120 @@
             ],
             "time": "2022-10-11T06:37:42+00:00"
         },
+        {
+            "name": "staudenmeir/laravel-adjacency-list",
+            "version": "v1.11.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/staudenmeir/laravel-adjacency-list.git",
+                "reference": "4c0ead376cc7c4023e57a0179637adaccc260864"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/staudenmeir/laravel-adjacency-list/zipball/4c0ead376cc7c4023e57a0179637adaccc260864",
+                "reference": "4c0ead376cc7c4023e57a0179637adaccc260864",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/database": "^9.0",
+                "php": "^8.0.2",
+                "staudenmeir/laravel-cte": "^1.6"
+            },
+            "require-dev": {
+                "barryvdh/laravel-ide-helper": "^2.12",
+                "doctrine/dbal": "^3.3",
+                "mockery/mockery": "^1.5",
+                "phpunit/phpunit": "^9.5"
+            },
+            "suggest": {
+                "barryvdh/laravel-ide-helper": "Provide type hints for attributes and relations."
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Staudenmeir\\LaravelAdjacencyList\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jonas Staudenmeir",
+                    "email": "mail@jonas-staudenmeir.de"
+                }
+            ],
+            "description": "Recursive Laravel Eloquent relationships with CTEs",
+            "support": {
+                "issues": "https://github.com/staudenmeir/laravel-adjacency-list/issues",
+                "source": "https://github.com/staudenmeir/laravel-adjacency-list/tree/v1.11.4"
+            },
+            "funding": [
+                {
+                    "url": "https://paypal.me/JonasStaudenmeir",
+                    "type": "custom"
+                }
+            ],
+            "time": "2022-09-25T20:31:12+00:00"
+        },
+        {
+            "name": "staudenmeir/laravel-cte",
+            "version": "v1.6.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/staudenmeir/laravel-cte.git",
+                "reference": "064b0e3e04ac24365bb1d33763a35059d517e758"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/staudenmeir/laravel-cte/zipball/064b0e3e04ac24365bb1d33763a35059d517e758",
+                "reference": "064b0e3e04ac24365bb1d33763a35059d517e758",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/database": "^9.0",
+                "php": "^8.0.2"
+            },
+            "require-dev": {
+                "orchestra/testbench": "^7.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Staudenmeir\\LaravelCte\\DatabaseServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Staudenmeir\\LaravelCte\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jonas Staudenmeir",
+                    "email": "mail@jonas-staudenmeir.de"
+                }
+            ],
+            "description": "Laravel queries with common table expressions",
+            "support": {
+                "issues": "https://github.com/staudenmeir/laravel-cte/issues",
+                "source": "https://github.com/staudenmeir/laravel-cte/tree/v1.6.2"
+            },
+            "funding": [
+                {
+                    "url": "https://paypal.me/JonasStaudenmeir",
+                    "type": "custom"
+                }
+            ],
+            "time": "2022-03-16T21:45:21+00:00"
+        },
         {
             "name": "symfony/console",
             "version": "v6.1.6",
diff --git a/database/migrations/2022_11_09_085026_create_menus_table.php b/database/migrations/2022_11_09_085026_create_menus_table.php
index d96ec9d..4f25d10 100644
--- a/database/migrations/2022_11_09_085026_create_menus_table.php
+++ b/database/migrations/2022_11_09_085026_create_menus_table.php
@@ -17,11 +17,11 @@ public function up()
             $table->id();
             $table->string('name')->unique();
             $table->string('svg')->unique()->nullable();
-            $table->unsignedBigInteger('menu_levels_id');
+            $table->unsignedBigInteger('parent_id')->nullable();
             $table->timestamps();
 
             //FOREIGN KEYS
-            $table->foreign('menu_levels_id','menus_fk0')->on('menu_levels')->references('id')->onUpdate('cascade')->onDelete('cascade');
+            $table->foreign('parent_id','menus_fk0')->on('menus')->references('id')->onUpdate('cascade')->onDelete('cascade');
         });
     }
 
@@ -32,7 +32,7 @@ public function up()
      */
     public function down()
     {
-        Schema::table('menu_items', function (Blueprint $table) {
+        Schema::table('menus', function (Blueprint $table) {
             $table->dropForeign('menus_fk0');
         });
         Schema::dropIfExists('menus');
diff --git a/resources/views/components/item/elements/select.blade.php b/resources/views/components/item/elements/select.blade.php
new file mode 100644
index 0000000..f6e83b2
--- /dev/null
+++ b/resources/views/components/item/elements/select.blade.php
@@ -0,0 +1,14 @@
+@props([
+'wireName',
+'size'=>'small',
+'label',
+'name',
+'placeholder',
+'data'=>[]
+])
+
+<div {{ $attributes->merge(['class']) }}>
+    <x-item.label for="{{$name}}" label="{{$label}}"></x-item.label>
+    <x-item.select wire:model="{{$wireName}}" name="{{$name}}" placeholder="{{$placeholder}}" :data=$data size="{{$size}}"></x-item.select>
+    <x-item.validation-error name="{{$wireName}}"></x-item.validation-error>
+</div>
diff --git a/resources/views/components/item/select.blade.php b/resources/views/components/item/select.blade.php
new file mode 100644
index 0000000..7d1b652
--- /dev/null
+++ b/resources/views/components/item/select.blade.php
@@ -0,0 +1,40 @@
+@props([
+'name'=>'',
+'placeholder'=>'',
+'data'=>[],
+'size'=>'small',
+'sizeSmall'=>'disabled py-2 px-3 pr-9 text-sm block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-oblue-300 dark:border-gray-700 dark:text-gray-400 invalid:text-red-500',
+'sizeMedium'=>'py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-oblue-300 dark:border-gray-700 dark:text-gray-400 sm:p-4',
+'sizeLarge'=>'py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-oblue-300 dark:border-gray-700 dark:text-gray-400 sm:p-5',
+
+])
+
+
+<div class="relative" >
+    <select id="{{$name}}"
+    @switch($size)
+        @case('small')
+            {{ $attributes->merge(['class' => $sizeSmall])}}
+            @break
+
+            @case('medium')
+            {{ $attributes->merge(['class' => $sizeMedium])}}
+            @break
+
+            @case('large')
+            {{ $attributes->merge(['class' => $sizeLarge])}}
+            @break
+        @endswitch
+       >
+        @if($placeholder !== '')
+        @if(count($data) > 0)
+        <option hidden selected value=null>{{$placeholder}}</option>
+        @else
+            <option hidden selected value=null>Not parent menu available</option>
+            @endif
+        @endif
+        @foreach($data as $key=>$value)
+            <option id="{{$key}}" value="{{$key}}">{{$value}}</option>
+       @endforeach
+    </select>
+</div>
diff --git a/resources/views/components/layout/content.blade.php b/resources/views/components/layout/content.blade.php
index 5796e9d..158f8e3 100644
--- a/resources/views/components/layout/content.blade.php
+++ b/resources/views/components/layout/content.blade.php
@@ -1,3 +1,3 @@
-<main class="flex flex-col w-full py-10 px-4 sm:px-6 md:px-8 lg:pl-72 h-full">
+<main class="flex flex-grow flex-col w-full py-10 px-4 sm:px-6 md:px-8 lg:pl-72 h-full">
     {{$slot}}
 </main>
diff --git a/resources/views/components/layout/main.blade.php b/resources/views/components/layout/main.blade.php
index e642a1c..679c571 100644
--- a/resources/views/components/layout/main.blade.php
+++ b/resources/views/components/layout/main.blade.php
@@ -1,5 +1,5 @@
 @props(['pageHeader'])
-<div x-data=" Wire($wire,{ }) " class="flex flex-col min-h-screen">
+<div x-data=" Wire($wire,{ }) " class="flex h-full flex-col flex-grow min-h-screen">
     @livewire('layout.navigation')
     @livewire('layout.toggle')
     @livewire('layout.sidebar')
diff --git a/resources/views/components/svg/security.blade.php b/resources/views/components/svg/security.blade.php
new file mode 100644
index 0000000..ede5ef8
--- /dev/null
+++ b/resources/views/components/svg/security.blade.php
@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'flex-none w-3.5 h-3.5']) }}  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
+    <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+</svg>
diff --git a/resources/views/livewire/admin/dashboard.blade.php b/resources/views/livewire/admin/dashboard.blade.php
new file mode 100644
index 0000000..382abdc
--- /dev/null
+++ b/resources/views/livewire/admin/dashboard.blade.php
@@ -0,0 +1,14 @@
+<div>
+    @livewire('layout.navigation')
+    @livewire('layout.toggle')
+    @livewire('layout.sidebar')
+    @livewire('layout.header',['header'=>$pageHeader])
+
+    <!-- Page Content -->
+    <x-layout.content>
+        <div class="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-900/[.9] dark:text-gray-400">
+            Some quick example text to build on the card title and make up the bulk of the card's content.
+        </div>
+    </x-layout.content>
+
+</div>
diff --git a/resources/views/livewire/admin/menu/level.blade.php b/resources/views/livewire/admin/menu/level.blade.php
index 4ca51e3..328d2e8 100644
--- a/resources/views/livewire/admin/menu/level.blade.php
+++ b/resources/views/livewire/admin/menu/level.blade.php
@@ -28,7 +28,7 @@
 
         <!-- Menu datatable -->
         <div class="mt-3">
-            <livewire:admin.menu.menu-level-table/>
+            <livewire:admin.menu.menu-level-datatable/>
         </div>
     </x-layout.content>
 
diff --git a/resources/views/livewire/admin/menu/menu-parent.blade.php b/resources/views/livewire/admin/menu/menu-parent.blade.php
index d302796..955ae03 100644
--- a/resources/views/livewire/admin/menu/menu-parent.blade.php
+++ b/resources/views/livewire/admin/menu/menu-parent.blade.php
@@ -5,7 +5,8 @@
         <!-- Menu create -->
 
         <x-item.button wire:click.prevent="createMenu" size="small" class="!block w-auto">
-                <x-svg.add class="flex w-4 h-4"></x-svg.add> <span class="flex ml-1">{{__('Create')}}</span>
+            <x-svg.add class="flex w-4 h-4"></x-svg.add>
+            <span class="flex ml-1">{{__('Create')}}</span>
         </x-item.button>
 
         <x-item.modal size="small" type="{{$formType}}" modalHeader="{{$modalHeader}}">
@@ -14,21 +15,57 @@
                     <div class="grid grid-cols-1 gap-4">
                         <x-item.elements.input wireName="menu.name" updating="defer" name="menu-name" label="Name"
                                                placeholder="Enter a name for menu "></x-item.elements.input>
+                        <x-item.elements.select wireName="menu.menuID" name="menu-menuID" label="Belongs to"
+                                                :data=$parentData
+                                                placeholder=""></x-item.elements.select>
                     </div>
+
+
+                    {{--                    <x-item.select name="sel" placeholder="fgdfgdf" :data=$parentData></x-item.select>--}}
+
                 @endif
 
-                    @if($formType === 'delete' )
-                        <div class="grid grid-cols-1 gap-4">
-                         <p class="text-gray-900 dark:text-white"> Are you sure you want to delete <span class="font-bold text-red-600">{{$menuRecord->name}}</span> ?</p>
-                        </div>
-                    @endif
+                @if($formType === 'delete' )
+                    <div class="grid grid-cols-1 gap-4">
+                        <p class="text-gray-900 dark:text-white"> Are you sure you want to delete <span
+                                class="font-bold text-red-600">{{$menuRecord->name}}</span> ?</p>
+                    </div>
+                @endif
                 <x-item.form-submit formType="{{$formType}}" type="submit" name="{{$submitName}}"></x-item.form-submit>
             </x-item.form>
         </x-item.modal>
 
         <!-- Menu datatable -->
-        <div class="mt-3">
-            <livewire:admin.menu.menu-parent-datatable/>
+        <div class="flex  justify-center items-center w-full mt-3">
+
+            <div class="flex flex-row flex-wrap w-full  justify-center"
+
+            >
+                @foreach($menus as $menu)
+                    <div
+                        class="flex flex-col w-72 mx-[10px] my-[10px] shadow-md bg-white border shadow-sm rounded-xl dark:bg-oblue-300 dark:border-gray-700 dark:border-oblue-100/[0.5]">
+                        <div class="class=flex flex-col bg-gray-100 border-b rounded-t-xl py-3 px-4 md:py-4 md:px-5 dark:bg-oblue-100 dark:border-olblue-800/[0.5]">
+                            <div class="flex items-center">
+                                <x-svg.security class="flex !w-5 !h-5 dark:text-olblue-300 mr-2"></x-svg.security>
+                                <p class="flex  flex-grow mt-1 text-md text-gray-500 dark:text-olblue-300 font-bold capitalize">
+                                    {{$menu->name}}
+                                </p>
+                            <div wire:click="deleteMenu({{$menu}})" class="transition-all duration-300 cursor-pointer  group hover:bg-red-600 hover:text-white hover:border-red-400 dark:hover:border-red-500  dark:hover:bg-red-700 flex w-8 h-8 border rounded-md border-gray-300 dark:border-olblue-800/[0.5] justify-center items-center">
+                                <x-svg.close class=" !w-3 !h-3 dark:text-olblue-300 dark:group-hover:text-white "></x-svg.close>
+                            </div>
+                            </div>
+                        </div>
+                        <div class="p-4 md:p-5">
+
+                            <div wire:click.prevent="createMenu({{$menu->id}})" class="transition-all duration-300 cursor-pointer  group hover:bg-red-600 hover:text-white hover:border-red-400 dark:hover:border-red-500  dark:hover:bg-red-700 flex w-8 h-8 border rounded-md border-gray-300 dark:border-olblue-800/[0.5] justify-center items-center">
+                                <x-svg.add class=" !w-4 !h-4 dark:text-olblue-300 dark:group-hover:text-white "></x-svg.add>
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+
+            {{--            <livewire:admin.menu.menu-parent-datatable/>--}}
         </div>
     </x-layout.content>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index cd6e69d..4ff0175 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,7 @@ module.exports = {
     variants: {
         scrollbar: ['dark']
     },
+
     theme: {
 
         colors: {
@@ -103,5 +104,6 @@ module.exports = {
         require('@tailwindcss/typography'),
         require('prettier-plugin-tailwindcss'),
         require('preline/plugin'),
+
     ],
 };