feat: Implement staff navigation items with profile completion requirements

This commit is contained in:
Achintha Isuru
2026-02-19 10:25:00 -05:00
parent c9c61411f3
commit c48dab6786
4 changed files with 99 additions and 43 deletions

View File

@@ -1,8 +1,8 @@
import 'dart:ui';
import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:staff_main/src/utils/index.dart';
/// A custom bottom navigation bar for the Staff app.
///
@@ -36,7 +36,6 @@ class StaffMainBottomBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
final t = Translations.of(context);
// Staff App colors from design system
// Using primary (Blue) for active as per prototype
const Color activeColor = UiColors.primary;
@@ -73,40 +72,12 @@ class StaffMainBottomBar extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
_buildNavItem(
index: 0,
icon: UiIcons.briefcase,
label: t.staff.main.tabs.shifts,
activeColor: activeColor,
inactiveColor: inactiveColor,
),
_buildNavItem(
index: 1,
icon: UiIcons.dollar,
label: t.staff.main.tabs.payments,
activeColor: activeColor,
inactiveColor: inactiveColor,
),
_buildNavItem(
index: 2,
icon: UiIcons.home,
label: t.staff.main.tabs.home,
activeColor: activeColor,
inactiveColor: inactiveColor,
),
_buildNavItem(
index: 3,
icon: UiIcons.clock,
label: t.staff.main.tabs.clock_in,
activeColor: activeColor,
inactiveColor: inactiveColor,
),
_buildNavItem(
index: 4,
icon: UiIcons.users,
label: t.staff.main.tabs.profile,
activeColor: activeColor,
inactiveColor: inactiveColor,
...defaultStaffNavItems.map(
(item) => _buildNavItem(
item: item,
activeColor: activeColor,
inactiveColor: inactiveColor,
),
),
],
),
@@ -122,30 +93,31 @@ class StaffMainBottomBar extends StatelessWidget {
/// - Spacing uses [UiConstants.space1]
/// - Typography uses [UiTypography.footnote2m]
/// - Colors are passed as parameters from design system
///
/// The [item.requireProfileCompletion] flag can be used to conditionally
/// disable or style the item based on profile completion status.
Widget _buildNavItem({
required int index,
required IconData icon,
required String label,
required StaffNavItem item,
required Color activeColor,
required Color inactiveColor,
}) {
final bool isSelected = currentIndex == index;
final bool isSelected = currentIndex == item.index;
return Expanded(
child: GestureDetector(
onTap: () => onTap(index),
onTap: () => onTap(item.index),
behavior: HitTestBehavior.opaque,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(
icon,
item.icon,
color: isSelected ? activeColor : inactiveColor,
size: UiConstants.iconLg,
),
const SizedBox(height: UiConstants.space1),
Text(
label,
item.label,
style: UiTypography.footnote2m.copyWith(
color: isSelected ? activeColor : inactiveColor,
),

View File

@@ -0,0 +1,2 @@
export 'staff_nav_item.dart';
export 'staff_nav_items_config.dart';

View File

@@ -0,0 +1,38 @@
import 'package:flutter/material.dart';
/// Represents a single navigation item in the staff main bottom navigation bar.
///
/// This data class encapsulates all properties needed to define a navigation item,
/// making it easy to add, remove, or modify items in the bottom bar without
/// touching the UI code.
class StaffNavItem {
/// Creates a [StaffNavItem].
const StaffNavItem({
required this.index,
required this.icon,
required this.label,
required this.tabKey,
this.requireProfileCompletion = false,
});
/// The index of this navigation item in the bottom bar.
final int index;
/// The icon to display for this navigation item.
final IconData icon;
/// The label text to display below the icon.
final String label;
/// The unique key identifying this tab in the main navigation system.
///
/// This is used internally for routing and state management.
final String tabKey;
/// Whether this navigation item requires the user's profile to be complete.
///
/// If true, this item may be disabled or show a prompt until the profile
/// is fully completed. This is useful for gating access to features that
/// require profile information.
final bool requireProfileCompletion;
}

View File

@@ -0,0 +1,44 @@
import 'package:design_system/design_system.dart';
import 'package:staff_main/src/utils/staff_nav_item.dart';
/// Predefined navigation items for the Staff app bottom navigation bar.
///
/// This list defines all available navigation items. To add, remove, or modify
/// items, simply update this list. The UI will automatically adapt.
final List<StaffNavItem> defaultStaffNavItems = [
StaffNavItem(
index: 0,
icon: UiIcons.briefcase,
label: 'Shifts',
tabKey: 'shifts',
requireProfileCompletion: false,
),
StaffNavItem(
index: 1,
icon: UiIcons.dollar,
label: 'Payments',
tabKey: 'payments',
requireProfileCompletion: true,
),
StaffNavItem(
index: 2,
icon: UiIcons.home,
label: 'Home',
tabKey: 'home',
requireProfileCompletion: false,
),
StaffNavItem(
index: 3,
icon: UiIcons.clock,
label: 'Clock In',
tabKey: 'clock_in',
requireProfileCompletion: true,
),
StaffNavItem(
index: 4,
icon: UiIcons.users,
label: 'Profile',
tabKey: 'profile',
requireProfileCompletion: false,
),
];