Menu Item on Partner Portal Tab Bar

Description / Background

The current Partner Portal system includes QR code functionality for menus. However, restaurant staff face limitations in menu management as they cannot directly modify or upload menu images without contacting the HH team for assistance. This creates an operational bottleneck and reduces efficiency in menu management.

Glossary

Private (https://app.clickup.com/9003122396/docs/8ca1fpw-35796/8ca1fpw-41516)

Objectives

• Owner can have the Menu Items setting on Partner Portal

• Owner can see the main and optional language of the menu items
• Owner can search the menu item name
• Owner can filter menu item for display of menu item without image

• Owner can pick the pagination for the table list

• Owner can see:
  1. No → list number
  2. Image → Image of the menu item
     1. If the menu item have image, it will show Change Image button
     2. If the menu item doesn't have image, it will show Upload Image button
  3. Name → Name of the menu item (the first one was the main language, and the second one was the optional language)
  4. Description → Description of the menu item (the first one was the main language, and the second one was the optional language)
  5. Category → Category of the menu
  6. Price → Price for the menu item
  7. Action → It will display the Remove Image button if the image of the menu item exists.
• The menu item will be displayed on both the individual and group logins to the Partner Portal.

Scope

new feature menu item on partner portal.

Location

Partner Portal

Sequence Diagram / Flow

ERD

-

Backend Implementation

• Minor formatting adjustment on my images controller.
• Pagination Library Switch:
  • Removed JSONAPI::Pagination.
  • Added Pagy::Backend for pagination.
• Filtering Enhancements:
  • Added filtering for menus without images: menus.left_outer_joins(:my_image).where(my_images: { id: nil }).
  • Added filtering for menu names: menus.where('title_th LIKE :name OR title_en LIKE :name', name: "%#{name_filter}%").
• Pagination Implementation:
  • Implemented pagination using Pagy: pagy, paginated_menus = pagy(menus, page: params.dig(:page, :number), items: params.dig(:page, :size)).
  • Added metadata and links for pagination.

[

github.com

https://github.com/hungryhub-team/hh-menu/pull/237/files

](https://github.com/hungryhub-team/hh-menu/pull/237/files)

Hybrid Implementation

-

Frontend Implementation

• Added jsona dependency.
• Updated dependencies and added jsona and sanitize-html.
• Added menuV2.js, bg-image.png, NoResult.vue, MenuItems.js, MenuList.scss, MenuList.vue, ImageUpload.vue, RemoveImage.vue, menuv2.route.js, menuv2.store.js files.
• Added APP_HH_MENU_API_URL configuration.
• Added new menu items for V2.
• Updated sidebar logic to exclude menu if loginAsGroup is true.
• Updated menu.js for Chinese (cn), English (en), and Thai (th) to add new translations.

[

github.com

https://github.com/hungryhub-team/book-bite/pull/768

](https://github.com/hungryhub-team/book-bite/pull/768)

PRD & Task

Private (https://app.clickup.com/9003122396/docs/8ca1fpw-30456/8ca1fpw-43576)

Private (https://app.clickup.com/t/86cwyhv7r)

Design

[

www.figma.com

https://www.figma.com/design/ymdLN2ZKzfI0oyX4kps2GQ/Partner-Portal-Desktop?node-id=14028-131&p=f&t=GxpjJ0hS5vSg5IRe-0

](https://www.figma.com/design/ymdLN2ZKzfI0oyX4kps2GQ/Partner-Portal-Desktop?node-id=14028-131&p=f&t=GxpjJ0hS5vSg5IRe-0)

API Blueprint

Using the hh-menu API:

[

menu.hh-engineering.my.id

https://menu.hh-engineering.my.id/api-docs/index.html

](https://menu.hh-engineering.my.id/api-docs/index.html)

New Query

-

DB Schema / Database Migration

HH menu V2:

HH menu V3:

Improvement: