Create a sleek and modern dashboard UI for an online food ordering

application. The dashboard should have a clean layout with a clear

separation between different sections for better usability. It should consist of
a left sidebar navigation menu, a top bar for quick actions, and a central
content area displaying key statistics and interactive tables.

General Style and Layout

 Color Scheme: A combination of light backgrounds with primary

accents (like deep blue or emerald green) for highlights and active
states. Include subtle gradients and shadows to give a sense of depth.

 Font: Use a modern, sans-serif font (like Roboto, Poppins, or Inter).

Ensure readability with adequate spacing between elements.

 Spacing: Follow an 8px spacing rule to maintain visual consistency.

Keep plenty of white space around the key elements for a clean look.

Top Bar

 Content: Display a logo on the left, with the application’s name next
to it. Add a search bar in the middle for quickly finding menu items,
users, or orders. On the right, include user profile information,
notifications, and a settings dropdown.

 Style: Keep the top bar sticky for better accessibility, with a subtle
drop shadow to distinguish it from the content below.

Sidebar Navigation Menu

 Position: Positioned on the left, spanning from the top to the bottom
of the screen.

 Content: The sidebar should have clearly defined navigation items

with recognizable icons. Items should include: Dashboard (Home),
Orders, Menu Management, Categories, Users, Analytics, and Settings.

 Interactivity: Indicate active states with a colored background or a

subtle hover effect. Expandable sub-menus for certain items like
“Analytics” or “Settings” can be included.

 Style: Use a vertical layout with rounded edges for active items and
icons. The sidebar should be collapsible to allow more screen space
when necessary.

Main Content Area

1. Dashboard Overview (Default View):

o Cards for Key Metrics: Display key statistics in rectangular

cards at the top of the dashboard, such as "Total Orders,"
"Revenue," "Active Users," and "Pending Orders". Each card
should have an icon, a number, and a small label, with color
coding to differentiate between metrics.

o Graph Section: Include a large, interactive line graph or bar

chart in the middle to show revenue trends or order statistics
over time. Users should be able to filter data by day, week, or
month using a dropdown.

2. Orders Management View:

o Interactive Table: Create a table that lists all orders with

columns like "Order ID," "Customer Name," "Order Amount,"
"Order Date," "Status," and "Actions". Use color-coded status
badges to indicate order states such as "Pending," "Preparing,"
and "Delivered." Add pagination at the bottom of the table.

o Actions Column: Add icons for actions like "Edit," "View

Details," or "Change Status" on each row. Clicking an order row
should open a modal or a detailed view on the side with full order
details.

3. Menu Management View:

o Table with Filtering Options: Similar to the Orders view, but

list food items with columns for "Food Name," "Category,"
"Price," "Available Stock," and "Actions."

o Add/Edit Item Form: A button at the top-right labeled "Add

Item" should open a form with fields like "Food Name,"
"Description," "Price," "Category," and "Image Upload". Keep the
form minimalistic with clear labels and inline error messages.

4. Users Management View:

o User List Table: A table displaying user data, such as "User ID,"
"Name," "Email," "Role," and "Actions". Add role-based color tags
(Admin, Customer, etc.) for easier identification.

o Role Management: Provide an option to change user roles

using a dropdown or a button in the “Actions” column.
Menu Items Management Page Design Prompt

Design an Admin Menu Items Management page that enables

administrators to efficiently view, add, edit, and delete food items in the
online ordering system. The page should prioritize usability, clarity, and
consistency with the rest of the admin dashboard.

Overall Layout & Style

 Page Layout: The page should have a full-width layout to display a

large amount of information. Divide the page into a header section
for actions and filters, and a main section for displaying the list of
items.

 Color Scheme & Fonts: Use a clean and consistent color scheme that
matches the rest of the admin dashboard, with accent colors for key
actions. Use a sans-serif font like "Inter" or "Roboto" for readability.

 Spacing & Consistency: Follow consistent spacing (e.g., 8px or 16px

between elements) to create a balanced, easy-to-read page.

Header Section

 Page Title: At the top, include a clear title like "Manage Menu Items"
in a larger font size. Place this title in a fixed header section for easy
navigation.

 Add New Item Button: On the right side of the header, include a
prominent "Add New Item" button with a plus (+) icon. The button
 should stand out with a primary accent color to encourage admins to
add new items.

o Interactivity: When clicked, the button should open a modal

window or redirect to a separate "Add/Edit Item" page where
the admin can input details like name, description, price,
category, and upload an image.

Filter & Search Bar

 Search Functionality: Below the page title, add a search bar that
allows the admin to search for menu items by name. The search bar
should have an accompanying search icon.

 Filter Options: Include dropdown filters for categories, stock status,

and availability. For example, filters like "All Categories," "Main Dishes,"
"Drinks," and "Desserts" will help narrow down the list. Use clear,
labeled dropdowns with multi-select options.

Main Section - Items Table

 Interactive Table Layout: The main section should have a table

layout to display all menu items in a structured format. Each row
should represent a single menu item with the following columns:

o Image: A small thumbnail image of the item.

o Item Name: The name of the food item.

o Category: The category to which the item belongs (e.g., Main

Dish, Dessert, Drinks).

o Price: The price of the item in the preferred currency format.

o Stock Status: Display stock status (e.g., "In Stock" or "Out of

Stock") with color-coded labels.

o Availability Toggle: A switch or toggle button to enable/disable

the visibility of the item on the user-facing menu.

o Actions: Add action icons like an edit pencil for editing and a
trash can icon for deleting the item.

Row Interactivity & Actions

  Hover Effect: When hovering over a row, subtly highlight it to indicate
interactivity. This gives the admin a clear sense of which item they’re
selecting.

 Inline Editing: Allow admins to click on the item name, price, or stock
status directly in the table to quickly make inline edits. When editing
an inline field, display a small “Save” and “Cancel” button to confirm or
discard changes.

 Bulk Actions: Provide checkboxes on each row to allow for bulk

selection of items. Include bulk action buttons at the top for mass
deletion or enabling/disabling multiple items.

Pagination & Navigation

 Pagination: If there are more than 10-15 items, include pagination at

the bottom of the table to improve navigation. Display page numbers
and provide options to select the number of rows per page (e.g., 10,
25, 50 items per page).

 Scroll Behavior: Ensure that the page supports smooth scrolling for
tables with large amounts of data.

Add/Edit Item Modal

 Form Layout: The modal should have a form layout that includes
fields for "Item Name," "Description," "Category," "Price," "Stock
Status," and an "Upload Image" button.

o Image Upload: Provide a drag-and-drop area or an "Upload

Image" button with a preview of the uploaded image.

o Field Validation: Add inline validation for required fields,

displaying clear error messages if fields are left blank or contain
invalid data.

Additional Features

 Search Suggestions: While typing in the search bar, show

suggestions based on the food items available.

 Responsive Design: Ensure that the table and form adapt well to
different screen sizes. On smaller screens, switch the table to a card
layout where each item displays as a vertical card for better
readability.