User Story #675
openEPIC #670: Package Catalogue Management - 2 days front end and 2 days backend
Feature #674: Package CRUD
Frontend – Create Package
0%
Description
User Story¶
As a Super Admin, I want to create a new travel package by entering all mandatory package information so that it becomes available for further enrichment, review, and publishing on the platform.
Business Background¶
Travel packages are the primary product offered through the Halal Travels Club platform. Every package begins with the creation of its master record, which serves as the foundation for adding itinerary details, inclusions, halal facilities, package groups, images, pricing, and other content. The package is initially saved in a Draft state and can only be published after all mandatory information has been completed, supporting the enquiry-based booking workflow described in the build specification.
Objective¶
Allow Super Admin to:
- Create a new package
- Enter mandatory package information
- Save as Draft
- Continue editing later
- Prevent duplicate package creation
Preconditions¶
- User is authenticated.
- User has Package Management permission.
- Country and City master data exist.
- Package Categories (if applicable) are configured.
Screen Name¶
Create Package
Screen Sections¶
Section 1 – Basic Information¶
Fields
- Package Name *
- Package Code (Auto Generated)
- Country *
- City *
- Duration (Days / Nights) *
- Package Type *
- Short Description
- Package Status (Default: Draft)
Section 2 – Overview¶
Fields
- Overview
- Highlights
- Suitable For
- Best Travel Season
Rich Text Editor supported.
Section 3 – Additional Information¶
Fields
- Display Order
- Featured Package
- Package Visibility
Field Validation¶
| Field | Validation |
|---|---|
| Package Name | Required, Maximum 200 characters |
| Country | Required |
| City | Required |
| Duration | Required, Positive numeric value |
| Package Type | Required |
| Package Code | Auto-generated, Unique |
| Overview | Maximum configured character limit |
| Display Order | Numeric only |
Buttons¶
Save Draft¶
Action
- Validate mandatory fields.
- Save package.
- Keep package in Draft status.
- Redirect to Edit Package page.
Save & Continue¶
Action
- Save current information.
- Remain on same page.
- Display success notification.
Cancel¶
Action
- Prompt confirmation if unsaved changes exist.
- Return to Package Listing.
Confirmation Dialog¶
When Cancel is clicked with unsaved changes:
Title
Discard Changes?
Message
You have unsaved changes. Are you sure you want to leave this page?
Buttons
- Leave
- Stay
Success Messages¶
| Scenario | Message |
|---|---|
| Package created | Package created successfully. |
| Draft saved | Draft saved successfully. |
| Information updated | Package information saved successfully. |
User-facing Error Messages¶
| Scenario | Message |
|---|---|
| Package Name missing | Package Name is required. |
| Country not selected | Please select a country. |
| City not selected | Please select a city. |
| Duration missing | Please enter the package duration. |
| Duplicate package | A package with the same name already exists. |
| Save failed | Unable to save the package. Please try again. |
User Interface Behaviour¶
- Mandatory fields are marked with "*".
- Package Code is read-only.
- Save buttons remain disabled while saving.
- Country selection refreshes the available City list.
- Validation errors appear directly below the affected field.
- Form retains entered values after validation errors.
- Unsaved changes are tracked throughout the session.
Responsive Behaviour¶
Desktop
- Two-column form layout.
Tablet
- Single-column layout with grouped sections.
Mobile
- Fully responsive stacked layout with sticky action buttons.
Accessibility¶
- Keyboard navigation across all fields.
- Labels associated with form controls.
- Required fields announced to screen readers.
- Visible focus indicators.
- Accessible validation messages.
Acceptance Criteria¶
AC-1¶
Given the Super Admin opens the Create Package page
When the page loads
Then all mandatory fields shall be displayed.
AC-2¶
Given all mandatory fields are completed
When Save Draft is clicked
Then the package shall be created with Draft status.
AC-3¶
Given mandatory information is missing
When Save Draft is clicked
Then validation messages shall be displayed.
AC-4¶
Given the selected Country changes
When a new Country is selected
Then the City list shall refresh based on the selected Country.
AC-5¶
Given the Package Name already exists
When the user attempts to save
Then the user shall be notified that a duplicate package exists.
AC-6¶
Given unsaved changes exist
When Cancel is clicked
Then a confirmation dialog shall be displayed.
AC-7¶
Given the package is successfully created
When the operation completes
Then the user shall be redirected to continue enriching the package.
In Scope¶
- Create package
- Draft creation
- Mandatory field validation
- Country and City selection
- Auto-generated Package Code
- Save and Continue
- Unsaved changes warning
Out of Scope¶
- Itinerary management
- Inclusions & Exclusions
- Halal Facilities
- Package Groups
- Image Upload
- Banner Management
- Blog Management
- Publish workflow
Dependencies¶
- Authentication
- Role & Permission Management
- Country Master
- City Master
- Package Listing
Edge Cases¶
- Duplicate package name entered concurrently by another administrator.
- Country is removed while the form is open.
- Browser refresh before saving.
- Network interruption during save.
- User session expires during package creation.
- Auto-generated Package Code conflict.
Definition of Done¶
- Create Package screen implemented.
- Mandatory validations completed.
- Draft creation verified.
- Country–City dependency verified.
- Unsaved changes confirmation implemented.
- Responsive and accessibility testing completed.
- Product Owner acceptance completed.
No data to display