Kitchen Order Dashboard - Copy this Html, Tailwind Component to your project
Quero que me faça uma pagina que é parte do sistema de POS , essa sera a pagina que a cozinha ou a área de preparação dos pedidos, exemplo dos dados que deve conter <div wire:key="01J713BB10ECS63NXT1CNGP0KF" class="select none sortable item relative mb 2 px 2 py 2 border border gray 200 rounded md max h screen overflow auto"> <div id="3" class="absolute top 2 right 2 bg red 500 text white rounded full px 2 py 1 text xs"> 1 week ago </div> <! Order Number > <div class="font bold text xl">Order #: 3</div> <! Customer Name > <span class="font light text sm text gray 400"> (1) </span> <! Order Items > <div class="mt 2"> <! Single Item Container > <div class="flex items center py 2 px 4 bg white rounded lg shadow sm"> <div class="flex flex 1 items center"> <div class="ml 2"> <p class="text xl font semibold text gray 700">Wine</p> <span class="text lg text gray 500">Qty: 1</span> <! Product Category > <div class="text sm text gray 400">Category : Entrees</div> </div> </div> <! Mark as Done Button > <div class="ml 4 text white text sm"> <! [if BLOCK]><![endif] > <svg wire:click="markAsDone(75)" class="h 5 w 5 text gray 500 dark:text gray 400 cursor pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke width="1.5" stroke="currentColor" aria hidden="true" data slot="icon"> <path stroke linecap="round" stroke linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1 18 0 9 9 0 0 1 18 0Z"></path> </svg><! [if ENDBLOCK]><![endif] > </div> </div> </div> <! Display Customizations/Notes > <! Customization Section > <div class="bg yellow 100 text yellow 700 p 3 mt 1 rounded shadow md" x data="{ open: true }" data has alpine state="true"> <div class="cursor pointer" @click="open = !open"> <span>Customizations</span> <span x show="!open" style="display: none;">▼</span> <span x show="open">▲</span> </div> <div x show="open" x collapse=""> <! Customization Note (Hidden by default) > <div class="mt 2 overflow hidden"> <p>Food Temperature: Rare</p> </div> <div class="mt 2 overflow hidden"> <p>Cheese: Cheddar</p> </div> <div class="mt 2 overflow hidden"> <p>Bun: Brioche</p> </div> <! Display Options > </div> </div> </div>
