Overview

The Travelio App is a native Flutter app for Android and iOS. It is one app, not several: after sign-in it reads the account's role and opens the matching experience — customer, agent, tour guide or staff. There is one codebase to configure, one package ID to set, one binary to sign and one listing to publish.

The app runs against the same backend and database as the admin panel, so anything done in the app appears instantly in the panel and vice-versa.

Requirements

Verify your toolchain before opening the project:

flutter --version
flutter doctor

Package & Source Code

The Flutter source is in AppSourceCode/ inside Main_Files.zip — one project, covering every role. There is no second project and no second APK: an account with the Agent role simply lands on the agent dashboard instead of the customer home screen. Open the folder and pull the dependencies:

cd AppSourceCode
flutter pub get
flutter run

The layout that matters:

lib/
├─ main.dart              App entry point
├─ screens/               Every screen (customer + agent/)
├─ controllers/           GetX controllers — one per feature
├─ services/urls.dart     API base URL and every endpoint   <-- configure this
├─ models/                Response models
├─ widgets/               Shared UI components
└─ utils/                 Theme, colours, helpers
assets/images/            App images
assets/fonts/             Kumbh Sans font family

App Configuration (API URL)

The app talks to your Laravel backend over /api/v1. You do not edit Dart code to set it — the host lives in an environment file, so the same source builds against a local server or a live one:

env/
├─ dev.json     <-- your machine while developing
├─ prod.json    <-- your live server; edit this before building for the stores
└─ README.md

Each file holds one value:

// env/prod.json
{
  "API_HOST": "https://yourdomain.com"
}

Pass the file to Flutter when you run or build:

flutter run --dart-define-from-file=env/dev.json

flutter build apk       --release --dart-define-from-file=env/prod.json
flutter build appbundle --release --dart-define-from-file=env/prod.json
flutter build ipa       --release --dart-define-from-file=env/prod.json

Do not include /api/v1 in the value; the app appends it.

App Name, Package ID & Icon

App name — Android: android/app/src/main/AndroidManifest.xml → android:label="Travelio". iOS: ios/Runner/Info.plist → CFBundleDisplayName.

Package / bundle ID — ships as com.bugbuild.travelio. Change it to your own before publishing:

• Android — applicationId in android/app/build.gradle.kts.
• iOS — open ios/Runner.xcworkspace in Xcode → Runner target → Signing & Capabilities → Bundle Identifier.

App icon — replace the icon sets:

• Android — android/app/src/main/res/mipmap-*/ (one image per density).
• iOS — ios/Runner/Assets.xcassets/AppIcon.appiconset/.

Colours and fonts — the theme lives in lib/utils/; the bundled font family is Kumbh Sans, declared at the bottom of pubspec.yaml.

Build & Release

Debug builds need no setup at all — plug in a device and run:

flutter pub get
flutter run --dart-define=API_HOST=https://yourdomain.com

Release builds

flutter build appbundle --release   # .aab — required by Google Play
flutter build apk --release        # .apk — direct install / your own site
flutter build ipa --release        # iOS — macOS with Xcode only

The full procedure — generating the keystore with keytool, the exact contents of key.properties, the signingConfigs block in build.gradle.kts, verifying the signature, and the complete iOS path (certificates, provisioning profiles, App Store Connect and TestFlight) — is documented once in Common Setup → Release Signing & Store Distribution. There is one build to sign and publish, so it is documented alongside the other setup you do once, rather than repeated here.

Customer Role

What a signed-in customer sees. Same build, same configuration as above — only the screens below are role-specific.

Onboarding, Sign Up & Login

First launch shows a splash, a short onboarding carousel and a welcome screen. From there a traveller can sign up, log in, or keep browsing as a guest.

• Sign Up — name, email, phone and password; the account is created through the API and appears in the admin panel under Customers.
• Login — email and password; the API returns the role, which decides whether the customer or the agent experience opens.
• Forgot Password — request a reset, receive a one-time code by email, verify it and set a new password.
• Change Password — from inside the profile once signed in.

Home, Explore & Services

The bottom navigation carries the five main areas: Home, Explore, Bookings, Services and Profile.

• Home — hero slider, quick search, featured tour packages and current offers, all driven by what you publish in the admin panel.
• Explore — browse destinations and packages by category.
• Services — the full service menu: flights, hotels, transport, visa, Hajj & Umrah, insurance and the rest.

Tours, Flights, Hotels & Transport

Every product the agency sells is searchable and bookable from the app. The lists mirror the records you maintain in the admin panel.

• Tours — package list with price, duration and destination; the detail screen shows the itinerary, inclusions, gallery and the booking form.
• Flights — search a route and date, review the fare, request the booking.
• Hotels — properties with rating, location and room types.
• Transport — bus, train, launch, car rental and airport transfer.

A booking made here lands in the admin panel immediately, ready for your staff to confirm.

Visa & Hajj / Umrah

• Visa Services — the destinations you process visas for, with requirements and fees.
• Visa Applications — the customer's own applications and their current stage.
• Track Visa — follow an application by reference number, mirroring the status you set in the admin panel.
• Hajj & Umrah Packages — pilgrimage packages with full details.
• Hajj / Umrah Registrations — the customer's registrations, documents and payment progress.

My Bookings

Everything the customer has booked, split by type, each with its status and documents.

• Bookings / My Bookings — the combined list with status and amount.
• Booked Flights — PNR, route, travel date and the issued ticket.
• Booked Hotels — property, room, check-in and check-out.
• Booked Transport — vehicle, route and pickup time.

Profile, Notifications & Support

• Profile — personal details, travel documents and account settings.
• Notifications — booking confirmations, visa status changes and announcements published from the admin panel.
• Support — raise a ticket and follow the replies; the same thread your staff sees under Support Center.
• Help & FAQ — the knowledge base and FAQs you publish from the CMS.
• Contact Us — agency address, phone and email, straight from your general settings.
• Become an Agent — a customer can apply to become a travel agent; the application arrives in your admin panel.

Agent Role

What a signed-in agent sees in the very same app. Nothing extra to install, configure or publish — the role on the account decides which experience opens.

Agent Sign-in & Access

The agent signs in with the credentials created for them in the admin panel under Users (role: Agent) or approved from a Become an Agent application.

• Onboarding and Welcome — a short intro on first launch.
• Login — the API returns the agent role and opens the agent dashboard.
• Forgot Password — a one-time code by email, then a new password.
• Change Password — from inside settings.

Dashboard, Bookings & Customers

• Dashboard — sales, commission and wallet balance at a glance, with recent activity.
• Bookings — every booking the agent created, with customer, value and status.
• Customers — the customers registered under this agent.

Finance — Wallet, Commission & Invoices

The Finance area carries four tabs, all matching what your accounts team sees under Finance → Agent Finance in the admin panel.

• Wallet — current balance and payout history.
• Commission — commission earned per booking, paid and pending.
• Transactions — the full money movement log.
• Invoices — invoices raised and their settlement status.

Reports, Profile & Support

• Reports — the agent's own sales and commission figures over a period.
• More — the secondary menu holding everything outside the bottom navigation.
• Edit Profile — company and contact details.
• Settings — language, theme and password.
• Notifications — booking updates, commission approvals and announcements.
• Support — raise a ticket to the agency; it appears in your Support Center.

Troubleshooting

Covers every role — the first rows apply to any sign-in, the last few are agent-specific.