I have a cashier page that goes to the layout page, I use the blade template in Laravel 11, namely {{ $slot }}, continuing with the problem, I experienced an error, namely Expecting a collection for the menu but getting an object. why is that??? and also when I click on the category that I am looping I make it a navbars Error: Expected a collection for items but got object, in a moment I will show the code and appearance of my website [enter image description here](https://i.sstatic.net/vTAsqP0o.png), I’ll explain in a moment if I click on all menus the error message that comes out is Error: Expected a collection for menus but got object. If I click on a category, for example food, an error will appear. Error: Expected a collection for items but got object.
<?php
namespace AppHttpControllersEmploye;
use AppModelsMenus;
use AppModelsCategory;
use IlluminateHttpRequest;
use AppHttpControllersController;
class CategoryController extends Controller
{
public function kasir(Request $request, $id = null)
{
$title = 'Kasir';
$menus = collect();
$items = collect();
if ($id === null) {
if ($request->is('all-menus')) {
$menus = Menus::all();
$title = 'All Menu';
} else {
$items = Category::all();
}
} else {
$category = Category::find($id);
if (!$category) {
abort(404, 'Category not found');
}
$title = $category->name;
$category->load('menus'); // <--- Eager load the menus relationship
$menus = $category->menus;
}
Log::info('Menus:', $menus->toArray());
Log::info('Items:', $items->toArray());
return view('employee.kasir', compact('menus', 'title', 'items'));
}
}
<x-employee.layout>
<x-slot:title>{{ $title }}</x-slot:title>
<div class="w-full lg:flex lg:justify-evenly lg:w-3/2 mx-auto">
<div class="px-4 w-full lg:w-2/3">
<h2 class="text-4xl font-bold mb-4 dark:text-primary">Kasir</h2>
<div class="scroll-container mb-5">
<ul class="category-list flex items-center">
<li>
<a href="{{ route('all.menus') }}"
class="{{ request()->fullUrl() === url('/page/employee/categories') ? 'text-orange border-b-2 border-yellow dark:text-primary dark:border-primary' : 'hover:text-yellow text-gray-600 dark:text-blue-100' }} pb-2">
All Menu
</a>
</li>
@if ($items instanceof IlluminateDatabaseEloquentCollection)
@foreach ($items as $object)
@if (is_object($object))
<li>
<a href="{{ route('category.show', $object->id) }}"
class="{{ request()->is('/page/employee/categories/' . $object->id) ? 'text-orange border-b-2 border-yellow dark:text-primary dark:border-primary' : 'hover:text-yellow text-gray-600 dark:text-blue-100' }} pb-2">
{{ $object->name }}
</a>
</li>
@else
<li>
<p>Error: Unexpected value of type {{ gettype($object) }} found in items collection.</p>
</li>
@endif
@endforeach
@else
<p>Error: Expected a collection for items but got {{ gettype($items) }}.</p>
@endif
</ul>
</div>
<div class="grid mx-auto pb-[420px] lg:pb-2 grid-cols-2 lg:grid-cols-3 md:grid-cols-4 gap-2">
@if ($menus instanceof IlluminateDatabaseEloquentCollection)
@foreach ($menus as $menu)
<div class="bg-white dark:bg-dark p-3 w-full transition-transform duration-200 ease-in-out mx-auto relative hover:scale-105 hover:border-orange hover:border dark:hover:border-primary rounded-xl cursor-pointer lg:w-60">
<div class="absolute right-2 top-2 group">
<button class="hover:bg-slate-100 dark:hover:bg-slate-500 w-8 h-8 rounded-lg relative">
<i class="bi bi-info-circle dark:text-primary"></i>
<div class="hidden group-hover:block absolute top-10 -right-5 min-w-56 bg-white shadow-lg rounded-lg p-4 z-50">
<h4 class="font-semibold dark:text-primary">{{ $menu->name }}</h4>
<p class="text-gray-600 text-sm">Kategori: {{ $menu->category->name }}</p>
<p class="text-gray-600 text-sm">Harga: Rp. {{ number_format($menu->price, 0, ',', '.') }}</p>
<p class="text-gray-600 text-sm">Bahan-bahan: {{ $menu->description }}</p>
</div>
</button>
</div>
<img src="{{ asset('storage/' . $menu->image) }}" class="w-2/3 lg:w-2/3 mx-auto" alt="{{ $menu->name }}">
<h4 class="mt-4 font-semibold text-sm lg:text-lg dark:text-primary">{{ $menu->name }}</h4>
<div class="flex justify-between items-center">
<p class="text-gray-600 text-xs lg:text-sm">{{ $menu->category->name }}</p>
<p class="text-orange font-semibold text-xs lg:text-sm dark:text-primary">Rp. {{ number_format($menu->price, 0, ',', '.') }}</p>
</div>
</div>
@endforeach
@else
<p>Error: Expected a collection for menus but got {{ gettype($menus) }}.</p>
@endif
</div>
</div>
<hr class="my-4 hidden sm:block">
<div
class="w-full fixed bottom-0 left-0 z-50 dark:bg-dark lg:border-none lg:rounded-xl dark:border dark:border-primary bg-white p-5 shadow-xl rounded-t-xl lg:relative lg:w-1/2 lg:bottom-auto lg:left-auto lg:shadow-none lg:bg-transparent lg:p-0 lg:z-0">
<div
class="lg:bg-white dark:bg-dark lg:dark:border lg:dark:border-primary lg:p-5 lg:w-full lg:rounded-xl overflow-x-auto">
<h4 class="text-xl md:text-2xl lg:text-3xl font-semibold mb-6 md:mb-5 dark:text-primary">Order #003</h4>
<div id="scroll-menu" class="p-5 w-full overflow-y-auto lg:max-h-52 ">
<div class="flex items-center mb-3">
<img src="{{ asset('dist/assets admin/dish_01.png') }}" alt="Cheesey Chicken"
class="w-12 h-12 md:w-16 md:h-16 rounded">
<div class="ml-4 flex-1">
<p class="font-semibold text-gray-800 text-xs md:text-base lg:text-lg dark:text-white">
Cheesey Chicken
</p>
<p class="text-gray-600 text-xs md:text-sm lg:text-base dark:text-white">Rp. 35,000</p>
</div>
<div class="flex items-center space-x-2 md:space-x-4">
<button
class="bg-gray-200 dark:bg-white hover:bg-gray-100 dark:hover:bg-slate-300 w-8 h-8 md:w-10 md:h-10 rounded-full">
<i class="bi bi-dash w-full dark:text-black"></i>
</button>
<p class="text-gray-800 text-sm md:text-base lg:text-lg dark:text-primary">1</p>
<button
class="bg-gray-200 dark:bg-white hover:bg-gray-100 dark:hover:bg-slate-300 w-8 h-8 md:w-10 md:h-10 rounded-full">
<i class="bi bi-plus dark:text-black"></i>
</button>
<p class="text-gray-800 font-bold text-sm md:text-base lg:text-lg dark:text-white">Rp.
35,000</p>
<button
class="bg-rose-100 dark:bg-rose-500 text-red-600 w-8 h-8 md:w-10 md:h-10 rounded-xl">
<i class="bi bi-trash dark:text-white"></i>
</button>
</div>
</div>
<div class="gradient-overlay"></div>
</div>
<hr class="my-4">
<div class="flex justify-between mb-2">
<p class="text-gray-600 text-sm md:text-base dark:text-primary">Subtotal</p>
<p class="text-gray-800 font-bold text-sm md:text-base dark:text-primary">Rp. 229,000</p>
</div>
<div class="flex justify-between">
<p class="text-gray-600 text-sm md:text-base dark:text-primary">Pajak</p>
<p class="text-gray-800 font-bold text-sm md:text-base dark:text-primary">Rp. 12,000</p>
</div>
<hr class="my-4 border-dashed">
<div class="flex justify-between mb-5">
<p class="text-gray-600 text-sm md:text-base dark:text-primary">Total</p>
<p class="text-gray-800 font-bold text-lg md:text-xl dark:text-primary">Rp. 241,000</p>
</div>
<button id="checkout-button" data-modal-target="authentication-modal"
data-modal-toggle="authentication-modal"
class="bg-green-600 dark:bg-slate-700 dark:hover:bg-slate-500 hover:bg-green-400 text-white py-2 md:py-3 w-full rounded-lg">
Checkout
</button>
</div>
</div>
</div>
<div id="authentication-modal" tabindex="-1" aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
Payment
</h3>
<button type="button"
class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-hide="authentication-modal">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close</span>
</button>
</div>
<div class="p-4 md:p-5">
<form class="space-y-4" action="#">
<div class="relative w-full">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-person-fill text-slate-400" viewBox="0 0 16 16">
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
</svg>
</div>
<input type="text" id="voice-search"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required />
</div>
<div class="relative w-full">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-cash-stack text-slate-400" viewBox="0 0 16 16">
<path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4" />
<path
d="M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2z" />
</svg>
</div>
<input type="text" inputmode="numeric" id="voice-search"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required />
</div>
<button
class="w-full bg-red p-2 rounded-lg hover:bg-rose-300 text-medium font-semibold text-white dark:bg-primary">Confirm</button>
</form>
</div>
</div>
</div>
</div>
</x-employee.layout>
I’ve asked friends and AI but it’s been more than 1 month now and I’m still experiencing this and confused about how to solve it, I hope you all can help me