Files
ms1readerv4/public_html/raven-demo/index-restaurant.html
2026-07-17 11:48:07 -04:00

997 lines
60 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raven - Admin Dashboard</title>
<link rel="icon" href="images/favicon.png" type="image/png">
<!--Simplebar-->
<link rel="stylesheet" href="vendor/css/simplebar.css">
<!--:Fonts:-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
<!--:Main Style:-->
<link rel="stylesheet" href="css/style.css" />
<!--:Page css:-->
<link rel="stylesheet" href="vendor/css/sweetalert2.min.css">
<link rel="stylesheet" href="vendor/css/tom-select.min.css">
<link href="vendor/css/jsvectormap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="vendor/css/daterangepicker.css" />
<link rel="stylesheet" href="vendor/css/swiper-bundle.min.css">
</head>
<body
class="font-theme flex flex-col h-full text-base font-normal bg-zinc-50 dark:bg-zinc-950 text-zinc-600 dark:text-zinc-300 text-left rtl:text-right">
<aside
class="shadow-card bg-white dark:bg-zinc-900 fixed start-0 transition-all ltr:-translate-x-full ltr:lg:-translate-x-0 rtl:translate-x-full rtl:lg:translate-x-0 top-0 w-64 h-full flex flex-col z-[52] app-sidebar">
<div class="shrink-0 h-16 px-5 flex items-center">
<div class="relative flex items-center justify-between w-full">
<a href="index.html" class="flex items-center relative z-[1]">
<span
class="flex size-8 items-center justify-center rounded-full bg-gradient-to-tl from-primary via-primary-deep to-primary-deep text-white shrink-0 font-normal">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px"
fill="currentColor">
<path
d="m400-240-51 123q-6 15-21.5 21.5T297-95q-15-6-21.5-21.5T275-147l43-104q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l191 78q13 5 12.5 18.5T512-742l-112 42v60l426 271q7 5 11 11.5t6 14.5l28 140q3 17-7.5 30T836-160h-14q-11 0-19-5.5T790-180l-30-60H560v120q0 17-11.5 28.5T520-80q-17 0-28.5-11.5T480-120v-120h-80ZM240-680q-17 0-28.5-11.5T200-720q0-17 11.5-28.5T240-760q17 0 28.5 11.5T280-720q0 17-11.5 28.5T240-680Zm160 320Zm0 40h353l-63-40H400q-36 0-67.5-14.5T279-415q-13-14-25-38.5T242-498q0-17 11.5-28.5T282-538q15 0 26 10t14 24q5 28 27 46t51 18h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70Z" />
</svg>
</span>
<div class="flex-grow logo-text ms-3">
<h5 class="text-xl font-display leading-none">Raven</h5>
<small class="opacity-50 text-xs">Restaurant</small>
</div>
</a>
<!--Sidebar mini for lg screen-->
<button id="isSidebarMini"
class="btn-sidebar-min hidden lg:flex size-7 flex items-center justify-center hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-md cursor-w-resize">
<span class="icon-[lucide--sidebar] rtl:rotate-180"></span>
</button>
</div>
</div>
<div class="flex flex-col h-full overflow-y-auto" data-simplebar>
<div class="flex flex-col py-3 px-3">
<nav class="flex flex-col space-y-0.5" id="SidebarCollapseGroup">
<a href="index-restaurant.html" class="sidebar-link active">
<span class="sidebar-icon">
<span class="icon-[ph--chart-donut-duotone]"></span>
</span>
<span class="sidebar-text">Dashboard</span>
</a>
<div class="static">
<a data-bs-toggle="collapse" href="#cOrders"
class="sidebar-link ">
<span class="sidebar-icon">
<span class="icon-[ph--shopping-cart-duotone]"></span>
</span>
<span class="sidebar-text">Orders</span>
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
</a>
<div data-bs-parent="#SidebarCollapseGroup" id="cOrders"
class="collapse sidebar-collapse w-48 z-50 ">
<div class="py-1">
<a href="#!" class="sidebar-collapse-item @@orders_ongoing">Ongoing </a>
<a href="#!" class="sidebar-collapse-item @@app_inbox">Completed</a>
<a href="#!" class="sidebar-collapse-item @@app_chat">Canceled</a>
</div>
</div>
</div>
<div class="static">
<a data-bs-toggle="collapse" href="#menuManagement"
class="sidebar-link ">
<span class="sidebar-icon">
<span class="icon-[ph--book-open-text-duotone]"></span>
</span>
<span class="sidebar-text">Menu Management</span>
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
</a>
<div data-bs-parent="#SidebarCollapseGroup" id="menuManagement"
class="collapse sidebar-collapse w-48 z-50 ">
<div class="py-1">
<a href="#!" class="sidebar-collapse-item @@menuManagement_add_edit">Add/Edit Items </a>
<a href="#!" class="sidebar-collapse-item @@menuManagement_categories">Categories</a>
</div>
</div>
</div>
<div class="static">
<a data-bs-toggle="collapse" href="#cInventory"
class="sidebar-link ">
<span class="sidebar-icon">
<span class="icon-[ph--storefront-duotone]"></span>
</span>
<span class="sidebar-text">Inventory</span>
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
</a>
<div data-bs-parent="#SidebarCollapseGroup" id="cInventory"
class="collapse sidebar-collapse w-48 z-50 ">
<div class="py-1">
<a href="#!" class="sidebar-collapse-item @@inventory_stock">Stock Levels</a>
<a href="#!" class="sidebar-collapse-item @@inventory_expiry_alerts">Expiry Alerts</a>
</div>
</div>
</div>
<a href="#!"
class="sidebar-link flex items-center ">
<span class="sidebar-icon">
<span class="icon-[ph--users-three-duotone]"></span>
</span>
<span class="sidebar-text">Customers</span>
</a>
<a href="#!"
class="sidebar-link flex items-center ">
<span class="sidebar-icon">
<span class="icon-[ph--receipt-duotone]"></span>
</span>
<span class="sidebar-text">Transactions</span>
</a>
<a href="#!"
class="sidebar-link flex items-center ">
<span class="sidebar-icon">
<span class="icon-[ph--calendar-check-duotone]"></span>
</span>
<span class="sidebar-text">Reservations</span>
</a>
<a href="#!"
class="sidebar-link flex items-center ">
<span class="sidebar-icon">
<span class="icon-[ph--chef-hat-duotone]"></span>
</span>
<span class="sidebar-text">Staff</span>
</a>
<a href="#!"
class="sidebar-link flex items-center ">
<span class="sidebar-icon">
<span class="icon-[ph--user-circle-gear-duotone]"></span>
</span>
<span class="sidebar-text">Settings</span>
</a>
<a href="#!"
class="sidebar-link disabled [.disabled]:pointer-events-none [.disabled]:opacity-70 flex items-center ">
<span class="sidebar-icon !opacity-100">
<span class="icon-[ph--bell-simple-slash-duotone]"></span>
</span>
<span class="sidebar-text">Disabled Menu</span>
</a>
<div class="static">
<a data-bs-toggle="collapse" href="#cMLevels" class="sidebar-link">
<span class="sidebar-icon">
<span class="icon-[ph--align-left-duotone]"></span>
</span>
<span class="sidebar-text">Multi level</span>
<span class="icon-[lucide--chevron-up] sidebar-link-arrow"></span>
</a>
<div data-bs-parent="#SidebarCollapseGroup" id="cMLevels"
class="collapse sidebar-collapse ">
<div class="py-1">
<a href="#!" class="sidebar-collapse-item">Level 1</a>
<a href="#!" class="sidebar-collapse-item">Level 1</a>
<a href="#cMLevel2" data-bs-toggle="collapse"
class="sidebar-collapse-item flex items-center">Level 2
<span class="icon-[lucide--chevron-up] sidebar-collapse-item-arrow ms-auto"></span></a>
<div class="sidebar-collapse-level-1">
<div id="cMLevel2"
class="collapse sidebar-collapse ">
<div class="py-1">
<a href="#!" class="sidebar-collapse-item">Level 1</a>
<a href="#!" class="sidebar-collapse-item">Level 1</a>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<!--:CTA:-->
<div class="text-center sidebar-cta pt-12">
<div class="p-4 rounded-xl bg-zinc-800">
<img src="images/restaurant/burger.png" alt="" class="w-32 relative -mt-12 mx-auto block">
<h5 class="p-3 !text-white mb-2">
Organize your food menu through link below
</h5>
<button type="button"
class="btn btn-sm bg-white text-zinc-700 hover:bg-zinc-100 hover:text-primary gap-1">
Add Menu <span class="icon-[lucide--plus] text-base"></span>
</button>
</div>
</div>
</div>
</div>
</aside>
<main class="flex-1 lg:ms-64 flex flex-col app-content">
<div
class="bg-zinc-50/80 backdrop-blur-sm dark:bg-zinc-950 flex shrink-0 items-center justify-between px-4 lg:px-8 h-16 z-50 sticky top-0 app-header">
<div class="shrink-0 flex items-center space-x-1">
<!--:Sidebar toggler:-->
<button type="button" data-toggle="app_sidebar"
class="cursor-pointer relative flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 hover:text-black dark:hover:text-white dark:hover:bg-zinc-800 lg:hidden">
<span class="icon-[iconoir--menu] text-lg"></span>
</button>
<!--:Search:-->
<button data-bs-target="#modal_search" data-bs-toggle="modal"
class="cursor-pointer relative flex items-center justify-center w-8 h-8 lg:w-auto lg:ps-3 lg:pe-2 lg:bg-white dark:lg:bg-zinc-800 lg:rounded-md rounded-lg hover:bg-zinc-200 lg:hover:bg-white lg:dark:hover:bg-zinc-800 dark:hover:text-white dark:hover:bg-zinc-800 relative">
<span class="icon-[lucide--search] text-lg lg:text-base"></span>
<span class="text-muted ms-2 hidden lg:flex items-center gap-2">Search <span class="border border-zinc-200 dark:border-zinc-600 block px-1.5 rounded-sm text-sm">Ctrl+k</span></span>
</button>
</div>
<div class="flex items-center space-x-2">
<!--:TLang:-->
<!--:Theme Lang switcher:-->
<div class="relative">
<button data-bs-auto-close="outside" type="button"
class="cursor-pointer relative flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 hover:text-black dark:hover:text-white dark:hover:bg-zinc-800"
data-bs-toggle="dropdown" data-bs-display="static">
<img src="images/countries/US.png" class="size-4 rounded-full" alt="">
</button>
<div class="dropdown-menu absolute min-w-36 abslute ltr:right-0 rtl:left-0 top-full z-50 mt-4.5">
<a href="#!" class="dropdown-item active group gap-2.5">
<img src="images/countries/US.png" class="size-5 rounded-full" alt=""> English
<span class="icon-[lucide--check] ml-auto hidden group-[.active]:block"></span>
</a>
<a href="#!" class="dropdown-item group gap-2.5">
<img src="images/countries/ES.png" class="size-5 rounded-full" alt=""> Espanol
<span class="icon-[lucide--check] ml-auto hidden group-[.active]:block"></span>
</a>
<a href="#!" class="dropdown-item group gap-2.5">
<img src="images/countries/JP.png" class="size-5 rounded-full" alt=""> Japanese
<span class="icon-[lucide--check] ml-auto hidden group-[.active]:block"></span>
</a>
</div>
</div>
<!--:Notifications:-->
<div class="sm:relative">
<button data-bs-auto-close="outside" type="button"
class="cursor-pointer relative flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 hover:text-black dark:hover:text-white dark:hover:bg-zinc-800 relative"
data-bs-toggle="dropdown" data-bs-display="static">
<span class="icon-[lucide--bell] text-lg"></span>
<!--:Notification badge with animation:-->
<span class="absolute right-1 top-1 flex size-2">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-orange-400 opacity-75"></span>
<span class="relative inline-flex size-2 rounded-full bg-orange-500"></span>
</span>
</button>
<div class="dropdown-menu absolute w-[94%] left-[3%] sm:w-96 abslute rtl:sm:left-0 ltr:sm:right-0 sm:left-auto top-full z-50 !p-0 mt-0.5 lg:mt-4.5 overflow-hidden">
<div class="px-3 pt-3 flex justify-between items-center">
<h5 class="text-lg">Notifications</h5>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Mark all as read" class="hover:text-primary cursor-pointer">
<span class="icon-[lucide--mail-open]"></span>
</button>
</div>
<div class="p-3 space-y-0.5 max-h-96 overflow-y-auto" data-simplebar>
<!--:Notification item:-->
<a href="#!" class="px-3 py-2 gap-3 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 flex">
<span class="size-8 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center shrink-0">
📦
</span>
<div class="flex-grow">
<div class="leading-normal">
<h6>
New Online Order Received!
</h6>
<span class="text-sm">
Order #8421 — 2x Chicken Biryani, 1x Coke
</span>
<span class="block">
Total: $26.50
</span>
</div>
<span class="text-zinc-400 text-sm">2 mins ago</span>
</div>
</a>
<!--:Notification item:-->
<a href="#!" class="px-3 py-2 gap-3 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 flex">
<span class="size-8 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center shrink-0">
🔔
</span>
<div class="flex-grow">
<div class="leading-normal">
<h6>
Dine-In Order Added
</h6>
<span class="text-sm">
Table #6 placed a new order
</span>
<span class="block">
Total: $48.00
</span>
</div>
<span class="text-zinc-400 text-sm">4 mins ago</span>
</div>
</a>
<!--:Notification item:-->
<a href="#!" class="px-3 py-2 gap-3 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 flex">
<span class="size-8 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center shrink-0">
🚚
</span>
<div class="flex-grow">
<div class="leading-normal">
<h6>
Order #8395 Out for Delivery
</h6>
<span class="text-sm">
Rider: John M. ETA: 15 mins
</span>
</div>
<span class="text-zinc-400 text-sm">5 mins ago</span>
</div>
</a>
</div>
<div class="px-4 py-2.5 text-center border-t border-zinc-100 dark:border-zinc-800">
<a href="#!"
class="inline-block border-b border-dashed text-primary font-semibold hover:text-primary-deep text-sm">View
All</a>
</div>
</div>
</div>
<!--:Theme color switcher:-->
<div class="relative">
<button type="button"
class="cursor-pointer relative flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 hover:text-black dark:hover:text-white dark:hover:bg-zinc-800"
data-bs-toggle="dropdown" data-bs-display="static" data-bs-auto-close="outside">
<span class="icon-[lucide--settings] text-lg"></span>
</button>
<div class="dropdown-menu absolute min-w-56 abslute ltr:right-0 rtl:left-0 top-full z-50 !p-2 mt-4.5">
<div class="mb-3 px-3 pt-2">
<h5>Theme</h5>
</div>
<div class="flex flex-wrap px-3 pb-2 gap-2">
<button id="indigoTheme" class="theme-switcher cursor-pointer">
<span class="flex items-center justify-center size-7 rounded-full text-white"
style="background-color: #636DFF;">
<span class="icon-[lucide--check] theme-check text-lg"></span>
</span>
</button>
<button id="navyTheme" class="theme-switcher cursor-pointer">
<span class="flex items-center justify-center size-7 rounded-full text-white"
style="background-color: #0E6DD9;">
<span class="icon-[lucide--check] theme-check text-lg"></span>
</span>
</button>
<button id="emeraldTheme" class="theme-switcher cursor-pointer">
<span class="flex items-center justify-center size-7 rounded-full text-white"
style="background-color: #049772;">
<span class="icon-[lucide--check] theme-check text-lg"></span>
</span>
</button>
<button id="purpleTheme" class="theme-switcher cursor-pointer">
<span class="flex items-center justify-center size-7 rounded-full text-white"
style="background-color: #D300C5;">
<span class="icon-[lucide--check] theme-check text-lg"></span>
</span>
</button>
</div>
<div class="pt-2 mt-2 border-t border-dashed border-zinc-200 dark:border-zinc-700">
<label class="flex items-center cursor-pointer dropdown-item">
<span class="icon-[lucide--sun-moon] me-1"></span>
<span class="flex-grow text-sm me-2">Dark mode</span>
<input class="input-switch" data-theme-switch="dark" name="check_theme" type="checkbox" value="1">
</label>
</div>
<div class="pt-2 mt-2 border-t border-dashed border-zinc-200 dark:border-zinc-700">
<label for="toggleRTL" class="flex items-center justify-between cursor-pointer dropdown-item">
<span class="text-sm">Enable RTL</span>
<input type="checkbox" class="input-switch" id="toggleRTL" />
</label>
</div>
<div class="pt-2 dark:hidden mt-2 border-t border-dashed border-zinc-200 dark:border-zinc-700">
<h5 class="px-3 mb-2">Sidebar</h5>
<div class="radio-group flex items-center">
<div class="radio-option flex-grow">
<input class="appearance-none hidden" type="radio" id="sidebarLight" name="sidebarTheme" value="light" checked>
<label for="sidebarLight" class="block text-center cursor-pointer sidebar-label">
<span class="w-24 h-16 mb-2 overflow-hidden flex mx-auto p-1 rounded-sm bg-zinc-100 dark:bg-zinc-950 border border-dashed border-zinc-200">
<span class="w-6 h-full bg-white rounded-sm"></span>
</span>
<span class="block text-sm text-zinc-400">
Light
</span>
</label>
</div>
<div class="radio-option flex-grow">
<input class="appearance-none hidden" type="radio" id="sidebarDark" name="sidebarTheme" value="dark">
<label for="sidebarDark" class="block text-center cursor-pointer sidebar-label">
<span class="w-24 h-16 mb-2 overflow-hidden flex mx-auto p-1 rounded-sm bg-zinc-100 dark:bg-zinc-950 border border-dashed border-zinc-200">
<span class="w-6 h-full bg-zinc-900 rounded-sm"></span>
</span>
<span class="block text-sm text-zinc-400">
Dark
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<!--:User/Admin:-->
<div class="sm:relative">
<button data-bs-auto-close="outside" type="button"
class="cursor-pointer relative flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 hover:text-black dark:hover:text-white dark:hover:bg-zinc-800 relative"
data-bs-toggle="dropdown" data-bs-display="static">
<img src="images/avatars/thumb-1.jpg" class="w-6 shrink-0 rounded-md shrink-0" alt="">
</button>
<div class="dropdown-menu absolute w-36 abslute rtl:sm:left-0 ltr:sm:right-0 sm:left-auto top-full z-50 !p-0 mt-0.5 lg:mt-4.5 overflow-hidden">
<div class="p-3 space-y-0.5">
<a href="account-profile.html" class="dropdown-item">
<span class="dropdown-icon">
<span class="icon-[lucide--user]"></span>
</span>Profile</a>
<a href="account-settings.html" class="dropdown-item">
<span class="dropdown-icon">
<span class="icon-[lucide--settings]"></span>
</span>Settings</a>
<hr class="border-zinc-100 dark:border-zinc-800 my-2">
<a href="auth-signin.html" class="dropdown-item">
<span class="dropdown-icon">
<span class="icon-[lucide--log-out]"></span>
</span>Sign out</a>
</div>
</div>
</div>
</div>
</div>
<!--:Search Modal:-->
<div id="modal_search" role="dialog" class="modal fade fixed w-full h-full left-0 top-0 z-[60]"
tabindex="-1">
<div class="modal-dialog relative m-4 pointer-events-none">
<!--:Content:-->
<div class="modal-content max-w-[30rem] mx-auto overflow-hidden bg-white dark:bg-zinc-900 rounded-xl w-full pointer-events-auto">
<div class="relative">
<span
class="pointer-events-none text-base absolute rtl:right-3 ltr:left-3 top-1/2 -translate-y-1/2 opacity-50 leading-none">
<span class="icon-[lucide--search] text-lg"></span>
</span>
<button type="button"
class="absolute rtl:left-0 ltr:right-0 top-1/2 -translate-y-1/2 w-8 text-center me-3 cursor-pointer text-sm text-muted"
data-bs-dismiss="modal">
Esc
</button>
<input name="search" type="text"
class="w-full pl-4 !pl-9 !pr-10 py-2 h-12 focus:outline-0 rounded-t-xl border-0" placeholder="Search food..."
autofocus />
</div>
<!--:Search results:-->
<div class="border-t border-zinc-200 dark:border-zinc-800 max-h-[340px]" data-simplebar>
<h5 class="mb-2 px-4 pt-4 text-muted">Trending items</h5>
<div class="flex items-center flex-wrap gap-2 px-4 pb-4">
<a href="#!" class="btn btn-sm btn-default">
<img src="images/restaurant/food/pizza.png" class="w-8 rounded-full me-2" alt="">
Pizza
</a>
<a href="#!" class="btn btn-sm btn-default">
<img src="images/restaurant/food/french-fries.png" class="w-8 rounded-full me-2" alt="">
French Fries
</a>
<a href="#!" class="btn btn-sm btn-default">
<img src="images/restaurant/food/donut.png" class="w-8 rounded-full me-2" alt="">
Donut
</a>
<a href="#!" class="btn btn-sm btn-default">
<img src="images/restaurant/food/taco.png" class="w-8 rounded-full me-2" alt="">
Taco
</a>
<a href="#!" class="btn btn-sm btn-default">
<img src="images/restaurant/food/coffee.png" class="w-8 rounded-full me-2" alt="">
Coffee
</a>
<a href="#!" class="btn btn-sm btn-default">
<img src="images/restaurant/food/burger.png" class="w-8 rounded-full me-2" alt="">
Burger
</a>
<a href="#!" class="btn btn-sm btn-default">
<img src="images/restaurant/food/hotdogs.png" class="w-8 rounded-full me-2" alt="">
Hotdogs
</a>
<a href="#!" class="btn btn-sm btn-default">
<img src="images/restaurant/food/chips.png" class="w-8 rounded-full me-2" alt="">
Chips
</a>
</div>
</div>
</div>
</div>
</div>
<!--:Page Header:-->
<div class="px-4 lg:px-8 pt-4 pb-4 flex flex-col sm:flex-row sm:items-center">
<div class="flex-grow mb-3 sm:mb-0">
<h2 class="text-xl font-semibold text-black dark:text-white">Welcome back Emily!</h2>
</div>
<div class="flex flex-col">
<small class="text-muted block mb-1">Data showing for</small>
<div class="inline-flex w-auto max-w-xs dark:bg-zinc-900 items-center gap-1 cursor-pointer text-sm"
id="reportrange">
<i class="icon-[lucide--calendar-days]"></i>
<span></span><i class="icon-[lucide--chevron-down]"></i>
</div>
</div>
</div>
<!--:Page content:-->
<div class="content lg:px-4 flex-grow relative">
<!--:Prelaoder:-->
<div id="preloader" class="absolute inset-0 w-full h-[75vh] flex items-center justify-center z-50">
<div class="size-12 bg-white shadow-xl rounded-full flex items-center justify-center">
<div class="animate-spin rounded-full size-10 border-b-2 border-primary"></div>
</div>
</div>
<div class="px-4 grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<!--:card:-->
<div class="rounded-xl relative p-4 bg-white dark:bg-zinc-900 shadow-card overflow-hidden">
<span class="absolute end-0 top-0 me-2 mt-2 inline-flex items-center text-green-500 text-xs gap-1">
<span class="icon-[lucide--trending-up]"></span>
<span>13%</span>
</span>
<div class="flex items-center gap-5">
<div class="w-16 shrink-0 flex items-center justify-center">
<img src="images/restaurant/icons/food-delivery.svg" class="w-12" alt="">
</div>
<div class="flex-grow">
<h4 class="text-2xl">23</h4>
<p>Total orders</p>
</div>
</div>
</div>
<!--:card:-->
<div class="rounded-xl relative p-4 bg-white dark:bg-zinc-900 shadow-card overflow-hidden">
<span class="absolute end-0 top-0 me-2 mt-2 inline-flex items-center text-green-500 text-xs gap-1">
<span class="icon-[lucide--trending-up]"></span>
<span>22%</span>
</span>
<div class="flex items-center gap-5">
<div class="w-16 shrink-0 flex items-center justify-center">
<img src="images/restaurant/icons/food-payment.svg" class="w-12" alt="">
</div>
<div class="flex-grow">
<h4 class="text-2xl">$3278</h4>
<p>Revenue generated</p>
</div>
</div>
</div>
<!--:card:-->
<div class="rounded-xl relative p-4 bg-white dark:bg-zinc-900 shadow-card overflow-hidden">
<span class="absolute end-0 top-0 me-2 mt-2 inline-flex items-center text-red-500 text-xs gap-1">
<span class="icon-[lucide--trending-down]"></span>
<span>2%</span>
</span>
<div class="flex items-center gap-5">
<div class="w-16 shrink-0 flex items-center justify-center">
<img src="images/restaurant/icons/food-canceled.svg" class="w-12" alt="">
</div>
<div class="flex-grow">
<h4 class="text-2xl">7</h4>
<p>Order canceled</p>
</div>
</div>
</div>
</div>
<div class="px-4 mb-4 gap-4 grid grid-cols-1 md:grid-cols-12">
<div class="md:col-span-7 lg:col-span-8">
<div class="rounded-xl relative bg-white dark:bg-zinc-900 shadow-card overflow-hidden">
<div class="flex items-center px-4 pt-4 gap-4 justify-between">
<div class="flex-grow">
<h5 class="text-lg">Orders flow</h5>
</div>
<nav class="flex nav items-center gap-1" role="tablist">
<button class="px-2 py-1 text-sm block rounded-md hover:bg-primary-subtle hover:text-primary cursor-pointer [.active]:bg-primary [.active]:text-white active" type="button" data-bs-toggle="tab" data-bs-target="#t1" aria-selected="true" role="tab">Daily</button>
<button class="px-2 py-1 text-sm block rounded-md hover:bg-primary-subtle hover:text-primary cursor-pointer [.active]:bg-primary [.active]:text-white" type="button" data-bs-toggle="tab" data-bs-target="#t2" aria-selected="false" role="tab" tabindex="-1">Weekly</button>
<button class="px-2 py-1 text-sm block rounded-md hover:bg-primary-subtle hover:text-primary cursor-pointer [.active]:bg-primary [.active]:text-white" type="button" data-bs-toggle="tab" data-bs-target="#t3" aria-selected="false" role="tab" tabindex="-1">Monthly</button>
</nav>
</div>
<div class="p-4" dir="ltr">
<div id="chart_orders" class="w-full h-76"></div>
</div>
</div>
</div>
<div class="md:col-span-5 lg:col-span-4">
<div class="rounded-xl relative bg-white dark:bg-zinc-900 shadow-card overflow-hidden">
<div class="flex items-center px-4 pt-4 gap-4 justify-between">
<div class="flex-grow">
<h5 class="text-lg">Ongoing orders</h5>
<div class="inline-flex items-center gap-2 bg-red-500/10 text-red-500 badge">
<span class="relative flex size-2">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400"></span>
<span class="relative inline-flex size-2 rounded-full bg-red-500"></span>
</span>
<span class="text-xs">Live</span>
</div>
</div>
<div class="shrink-0">
<div class="flex flex-col shrink-0">
<div class="swiper-orders-next text-lg leading-none cursor-pointer">
<span class="icon-[lucide--chevron-up]"></span>
</div>
<div class="swiper-orders-prev text-lg leading-none cursor-pointer">
<span class="icon-[lucide--chevron-down]"></span>
</div>
</div>
</div>
</div>
<div class="p-4">
<div class="swiper swiper-orders" style="height:280px;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!--:Order:-->
<div class="flex items-center gap-4">
<img src="images/restaurant/popular4.jpg" alt="Burger"
class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-700 skrink-0" />
<div class="flex-1">
<h4>Cheese Burger
Combo</h4>
<p class="text-sm text-zinc-400">Order #8421 • Emma Johnson</p>
<div class="flex justify-between items-center mt-2">
<span class="text-sm text-zinc-400">$18.50</span>
<span class="badge bg-green-500/10 text-green-500">Preparing</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<!--:Order:-->
<div class="flex items-center gap-4">
<img src="images/restaurant/popular6.jpg" alt="Burger"
class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-700 skrink-0" />
<div class="flex-1">
<h4>
Margherita Pizza
</h4>
<p class="text-sm text-zinc-400">Order #8427 • Olivia Brown</p>
<div class="flex justify-between items-center mt-2">
<span class="text-sm text-zinc-400">$16.75</span>
<span class="badge bg-sky-500/10 text-sky-500">Ready for
Pickup</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<!--:Order:-->
<div class="flex items-center gap-4">
<img src="images/restaurant/popular5.jpg" alt="Burger"
class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-700 skrink-0" />
<div class="flex-1">
<h4>
Fried Chicken
</h4>
<p class="text-sm text-zinc-400">Order #8429 • Sophia Patel</p>
<div class="flex justify-between items-center mt-2">
<span class="text-sm text-zinc-400">$20.50</span>
<span class="badge bg-red-500/10 text-red-500">Out for
Delivery</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<!--:Order:-->
<div class="flex items-center gap-4">
<img src="images/restaurant/food/taco.png" alt="Burger"
class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-700 p-1.5 skrink-0" />
<div class="flex-1">
<h4>
Taco 3x
</h4>
<p class="text-sm text-zinc-400">Order #8430 • Liam Carter</p>
<div class="flex justify-between items-center mt-2">
<span class="text-sm text-zinc-400">$9.50</span>
<span class="badge bg-green-500/10 text-green-500">Preparing</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<!--:Order:-->
<div class="flex items-center gap-4">
<img src="images/restaurant/food/coffee.png" alt="Burger"
class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-700 p-1.5 skrink-0" />
<div class="flex-1">
<h4>
Cold Coffee
</h4>
<p class="text-sm text-zinc-400">Order #8430 • Celina Jetly</p>
<div class="flex justify-between items-center mt-2">
<span class="text-sm text-zinc-400">$5.50</span>
<span class="badge bg-sky-500/10 text-sky-500">Ready For
Pickup</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="px-4 grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div class="rounded-xl relative bg-white dark:bg-zinc-900 shadow-card overflow-hidden">
<div class="px-4 pt-4 flex justify-between items-center">
<h5 class="mb-0 text-lg">Best selling items</h5>
<a href="#!" class="border-b border-dashed text-primary hover:text-current cursor-pointer">View
All</a>
</div>
<div class="px-4 pt-4 divide-y divide-zinc-200 dark:divide-zinc-800">
<a href="#!" class="flex items-center gap-5 py-3">
<img src="images/restaurant/popular1.jpg" class="w-20 rounded-xl shrink-0" alt="">
<div class="flex-grow">
<h5 class="mb-1">Babka Cake with Chocolate</h5>
<p class="flex items-center gap-1 mb-2">
<span class="icon-[lucide--shopping-cart]"></span> 589
</p>
<p class="flex items-center text-amber-500">
<span class="text-lg">★★★★☆</span>
<span class="text-zinc-400 text-sm">(389)</span>
</p>
</div>
</a>
<a href="#!" class="flex items-center gap-5 py-3">
<img src="images/restaurant/popular2.jpg" class="w-20 rounded-xl shrink-0" alt="">
<div class="flex-grow">
<h5 class="mb-1">Vegetable salad</h5>
<p class="flex items-center gap-1 mb-2">
<span class="icon-[lucide--shopping-cart]"></span> 453
</p>
<p class="flex items-center text-amber-500">
<span class="text-lg">★★★★☆</span>
<span class="text-zinc-400 text-sm">(321)</span>
</p>
</div>
</a>
<a href="#!" class="flex items-center gap-5 py-3">
<img src="images/restaurant/popular4.jpg" class="w-20 rounded-xl shrink-0" alt="">
<div class="flex-grow">
<h5 class="mb-1">Mushroom Swiss Burger</h5>
<p class="flex items-center gap-1 mb-2">
<span class="icon-[lucide--shopping-cart]"></span> 421
</p>
<p class="flex items-center text-amber-500">
<span class="text-lg">★★★★☆</span>
<span class="text-zinc-400 text-sm">(304)</span>
</p>
</div>
</a>
<a href="#!" class="flex items-center gap-5 py-3">
<img src="images/restaurant/popular5.jpg" class="w-20 rounded-xl shrink-0" alt="">
<div class="flex-grow">
<h5 class="mb-1">Grilled Steaks with Potatoes</h5>
<p class="flex items-center gap-1 mb-2">
<span class="icon-[lucide--shopping-cart]"></span> 408
</p>
<p class="flex items-center text-amber-500">
<span class="text-lg">★★★★☆</span>
<span class="text-zinc-400 text-sm">(294)</span>
</p>
</div>
</a>
</div>
</div>
<div class="rounded-xl relative bg-white dark:bg-zinc-900 shadow-card overflow-hidden">
<div class="px-4 pt-4 flex justify-between items-center">
<h5 class="mb-0 text-lg">Latest reviews</h5>
<a href="#!" class="border-b border-dashed text-primary hover:text-current cursor-pointer">View
All</a>
</div>
<ul class="divide-y pt-4 px-4 pb-1 divide-zinc-200 dark:divide-zinc-800">
<li class="py-3">
<div class="flex items-center gap-3 mb-3">
<img src="images/avatars/thumb-2.jpg" alt="user"
class="size-8 rounded-full object-cover" />
<div class="flex-grow">
<h4 class="mb-1">Liam Carter</h4>
<p class="text-xs text-zinc-400">Oct 27, 2025</p>
</div>
<span class="text-amber-500">★★★★☆</span>
</div>
<p class="leading-relaxed">
Loved the pizza! Crispy crust and cheesy topping were perfect. Could use a little more
spice
next time.
</p>
<p class="text-xs text-zinc-400 mt-2">Ordered: Margherita Pizza</p>
</li>
<li class="py-3">
<div class="flex items-center gap-3 mb-3">
<img src="images/avatars/thumb-3.jpg" alt="user"
class="size-8 rounded-full object-cover" />
<div class="flex-grow">
<h4 class="mb-1">Sophia Patel</h4>
<p class="text-xs text-zinc-400">Oct 25, 2025</p>
</div>
<span class="text-amber-500">★★★★★</span>
</div>
<p class="leading-relaxed">
Best dining experience Ive had recently. The ambiance was cozy and the staff were super
friendly!
</p>
<p class="text-xs text-zinc-400 mt-2">Dine-in Experience</p>
</li>
<li class="py-3">
<div class="flex items-center gap-3 mb-3">
<img src="images/avatars/thumb-8.jpg" alt="user"
class="size-8 rounded-full object-cover" />
<div class="flex-grow">
<h4 class="mb-1">Ethan Brooks</h4>
<p class="text-xs text-zinc-400">Oct 23, 2025</p>
</div>
<span class="text-amber-500">★★★☆☆</span>
</div>
<p class="leading-relaxed">
The pasta was good but arrived slightly cold. Customer service handled it well and
offered a replacement.
</p>
<p class="text-xs text-zinc-400 mt-2">Ordered: Alfredo Pasta</p>
</li>
</ul>
</div>
</div>
<div class="px-4 grid grid-cols-1 gap-4">
<div class="rounded-xl relative bg-white dark:bg-zinc-900 shadow-card overflow-hidden">
<div class="px-4 pt-4 flex justify-between items-center">
<h5 class="mb-0 text-lg">Inventory</h5>
<a href="#!" class="border-b border-dashed text-primary hover:text-current cursor-pointer">View
All</a>
</div>
<div class="px-4 pt-4 overflow-x-auto">
<table class="table-default whitespace-nowrap mb-0">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Category</th>
<th scope="col">Stock</th>
<th scope="col">Unit Price</th>
<th scope="col">Status</th>
<th scope="col">Last Updated</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><h6>Cheddar Cheese</h6></td>
<td>Dairy</td>
<td>24 kg</td>
<td>$5.50 /kg</td>
<td><span class="badge bg-green-500/10 text-green-500">In Stock</span></td>
<td>Nov 3, 2025</td>
<td class="text-end"><button type="button" class="btn btn-sm bg-zinc-700 text-white hover:bg-zinc-800 disabled:pointer-events-none disabled:opacity-50" disabled>Order</button></td>
</tr>
<tr>
<td><h6>Beef Patties</h6></td>
<td>Meat</td>
<td>8 kg</td>
<td>$9.75 /kg</td>
<td><span class="badge bg-amber-500/10 text-amber-500">Low Stock</span></td>
<td>Nov 2, 2025</td>
<td class="text-end"><button type="button" class="btn btn-sm bg-zinc-700 text-white hover:bg-zinc-800 disabled:pointer-events-none disabled:opacity-50">Order</button></td>
</tr>
<tr>
<td><h6>Tomato Sauce</h6></td>
<td>Condiments</td>
<td>18 L</td>
<td>$3.20 /L</td>
<td><span class="badge bg-green-500/10 text-green-500">In Stock</span></td>
<td>Nov 1, 2025</td>
<td class="text-end"><button type="button" class="btn btn-sm bg-zinc-700 text-white hover:bg-zinc-800 disabled:pointer-events-none disabled:opacity-50" disabled>Order</button></td>
</tr>
<tr>
<td><h6>Burger Buns</h6></td>
<td>Bakery</td>
<td>60 pcs</td>
<td>$0.80 /pc</td>
<td><span class="badge bg-red-500/10 text-red-500">Out of Stock</span></td>
<td>Oct 31, 2025</td>
<td class="text-end"><button type="button" class="btn btn-sm bg-zinc-700 text-white hover:bg-zinc-800 disabled:pointer-events-none disabled:opacity-50">Order</button></td>
</tr>
<tr>
<td><h6>Fresh Lettuce</h6></td>
<td>Vegetables</td>
<td>12 kg</td>
<td>$2.50 /kg</td>
<td><span class="badge bg-green-500/10 text-green-500">In Stock</span></td>
<td>Nov 3, 2025</td>
<td class="text-end"><button type="button" class="btn btn-sm bg-zinc-700 text-white hover:bg-zinc-800 disabled:pointer-events-none disabled:opacity-50" disabled>Order</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--:Footer:-->
<footer class="footer px-4 lg:px-8 py-4">
<div class="grid grid-cols-1 md:grid-cols-12 gap-2">
<div class="md:col-span-5 order-last md:order-1">
<span class="text-sm text-muted text-center md:text-start block">
&copy; Copyright 2025. <strong>Raven</strong> all rights reserved
</span>
</div>
<div class="md:col-span-7 md:order-last order-1">
<ul class="flex flex-wrap w-full items-center gap-1.5 text-sm md:justify-end justify-center">
<li><a href="#!" class="text-muted hover:!text-primary">Support</a></li>
<li class="size-1 bg-current rounded-full mx-1 opacity-30"></li>
<li><a href="#!" class="text-muted hover:!text-primary">Changelog</a></li>
<li class="size-1 bg-current rounded-full mx-1 opacity-30"></li>
<li><a href="#!" class="text-muted hover:!text-primary">Privacy policy</a></li>
<li class="size-1 bg-current rounded-full mx-1 opacity-30"></li>
<li><a href="#!" class="text-muted hover:!text-primary">Terms & conditions</a></li>
</ul>
</div>
</div>
</footer>
</main>
<!--:Scripts:-->
<script src="js/theme.js"></script>
<!--:Dashboard scripts:-->
<script type="text/javascript" src="vendor/js/sweetalert2.all.min.js"></script>
<script type="text/javascript" src="vendor/js/echarts.min.js"></script>
<script type="text/javascript" src="js/dashboard-restaurant.js"></script>
<!--:Dashboard data range picker:-->
<script type="text/javascript" src="vendor/js/jquery.min.js"></script>
<script type="text/javascript" src="vendor/js/moment.min.js"></script>
<script type="text/javascript" src="vendor/js/daterangepicker.js"></script>
<script type="text/javascript">
$(function () {
var start = moment().subtract(0, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMM D, YY') + ' - ' + end.format('MMM D, YY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
cb(start, end);
});
</script>
<script src="vendor/js/swiper-bundle.min.js"></script>
<script>
const verticalSwiper = new Swiper(".swiper-orders", {
direction: "vertical",
slidesPerView: 3,
spaceBetween: 10,
loop: true,
mousewheel: false,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-orders-next",
prevEl: ".swiper-orders-prev",
},
});
</script>
</body>
</html>