Actions

Copy link

User Story #672

open

EPIC #670: Package Catalogue Management - 2 days front end and 2 days backend

Feature #671: Package Listing

Front end - Manage Package Listing

Added by Islam Mansoori about 1 month ago. Updated about 1 month ago.

Status:

To Do

Priority:

low

Assignee:

Target version:

V1-HTC

Start date:

Due date:

% Done:

Estimated time:

Description

As a Super Admin, I want to view and manage all travel packages from a centralized listing page so that I can quickly search, filter, review, and perform actions on package records efficiently.

Business Background¶

The Package Listing screen is the entry point for package management. Since all package information displayed on the customer website is maintained by the Super Admin, the listing page should provide quick access to package records and their current status. This screen supports efficient package administration and acts as the starting point for viewing, editing, publishing, or deleting packages, aligning with the package management capability described in the build specification.

Objective¶

Provide a centralized interface to:

View all packages
Search packages
Filter packages
Sort packages
Navigate through large datasets
View package status
Perform package actions

Preconditions¶

User is authenticated.
User has Super Admin role.
Package management permission is assigned.
At least one package may or may not exist.

Screen Name¶

Package Catalogue

Screen Layout¶

Header¶

Page Title
Breadcrumb
Create Package Button

Search Area¶

Global Search

Search by

Package Name
Package Code
Country
City

Placeholder

Search packages...

Search should begin after three characters.

Filter Panel¶

Available filters

Country
City
Package Status
Featured Package
Created Date
Updated Date

Multiple filters can be applied simultaneously.

Sorting¶

User can sort by

Package Name
Country
City
Created Date
Updated Date
Status

Ascending

Descending

Package Grid¶

Each row displays

Package Image Thumbnail
Package Name
Package Code
Country
City
Duration
Status
Last Updated
Created By
Action Menu

Status Badge¶

Possible values

Draft
Published
Archived
Inactive

Each status should have a visually distinct badge.

Action Menu¶

Each package row shall provide:

View
Edit
Publish
Archive
Delete

Only actions permitted by the user's role should be displayed.

Pagination¶

Display:

Current Page
Total Pages
Total Records
Records per Page (10 / 25 / 50 / 100)

Navigation:

First
Previous
Next
Last

Empty State¶

When no packages exist:

Illustration

Message:

No packages available.

Primary Button:

Create Package

No Search Result¶

Message

No matching packages found.

Button

Clear Filters

Loading State¶

Display:

Skeleton Loader for table rows
Disabled action buttons until loading completes

Success Messages¶

Scenario	Message
Package loaded	Packages loaded successfully.
Filter applied	Filter applied successfully.
Search completed	Search results updated.

User-facing Error Messages¶

Scenario	Message
Unable to load packages	Unable to load packages. Please refresh the page.
Network interruption	Connection lost. Please try again.
Unauthorized access	You do not have permission to access this page.

Validation Rules¶

Search input accepts up to 200 characters.
Search ignores leading/trailing spaces.
Invalid special characters are not allowed.
Filter selections must use predefined values.
Page size must match supported options.

Responsive Behaviour¶

Desktop

Full table layout.

Tablet

Compact table with horizontal scrolling.

Mobile

Card-based package list with collapsible actions.

Accessibility¶

Keyboard navigation supported.
Focus indicators visible.
Screen-reader friendly labels.
Minimum color contrast for status badges.
Buttons include accessible names.

Acceptance Criteria¶

AC-1¶

Given the Super Admin is logged in

When the Package Catalogue page is opened

Then the system shall display all available packages.

AC-2¶

Given packages exist

When the user enters a valid search keyword

Then matching packages shall be displayed.

AC-3¶

Given filters are selected

When the user applies them

Then only matching packages shall be shown.

AC-4¶

Given sorting is selected

When the user changes the sort order

Then the package list shall refresh accordingly.

AC-5¶

Given there are multiple pages of data

When the user changes the page

Then the corresponding package records shall be displayed.

AC-6¶

Given no matching records exist

When a search or filter is applied

Then an appropriate empty-state message shall be displayed.

AC-7¶

Given the user opens the action menu

When an action is selected

Then the corresponding screen or confirmation dialog shall be opened.

In Scope¶

Package listing
Search
Filter
Sort
Pagination
Status badges
Row actions
Empty state
Loading state
Responsive layout

Out of Scope¶

Package creation
Package editing
Package publishing workflow
Image management
Package preview
Package validation before publishing

Dependencies¶

Authentication
Role & Permission Management
Package Master Data
Country & City Management

Edge Cases¶

More than 10,000 packages.
Package deleted by another administrator while viewing.
Search returns no results.
Invalid filter combinations.
Session timeout while browsing.
Slow network response.
Simultaneous updates by multiple administrators.

Definition of Done¶

Listing page implemented according to design.
Search, filter, sorting, and pagination function correctly.
Status badges display accurately.
Empty and loading states implemented.
Accessibility requirements met.
Responsive behaviour verified.
Acceptance criteria passed.
Product Owner approval obtained.