Implement Notifications and Pad Tracking Enhancements

This commit is contained in:
2026-01-08 15:46:28 -06:00
parent 9ae77e7ab0
commit 512577b092
19 changed files with 3059 additions and 1576 deletions

View File

@@ -37,7 +37,7 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
final entries = ref.watch(cycleEntriesProvider);
final user = ref.watch(userProfileProvider);
final isIrregular = user?.isIrregularCycle ?? false;
int cycleLength = user?.averageCycleLength ?? 28;
if (isIrregular) {
if (_predictionMode == PredictionMode.short) {
@@ -46,237 +46,257 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
cycleLength = user?.maxCycleLength ?? 35;
}
}
final lastPeriodStart = user?.lastPeriodStartDate;
return ProtectedContentWrapper(
title: 'Calendar',
isProtected: user?.isCalendarProtected ?? false,
userProfile: user,
child: SafeArea(
child: SingleChildScrollView(
child: Column(
children: [
// Header
Padding(
padding: const EdgeInsets.all(20),
child: Column(
children: [
Row(
title: 'Calendar',
isProtected: user?.isCalendarProtected ?? false,
userProfile: user,
child: SafeArea(
child: SingleChildScrollView(
child: Column(
children: [
// Header
Padding(
padding: const EdgeInsets.all(20),
child: Column(
children: [
Expanded(
child: Text(
'Calendar',
style: GoogleFonts.outfit(
fontSize: 28,
fontWeight: FontWeight.w600,
color: AppColors.charcoal,
),
),
),
_buildLegendButton(),
],
),
if (isIrregular) ...[
const SizedBox(height: 16),
_buildPredictionToggle(),
],
],
),
),
// Calendar
Container(
margin: const EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 15,
offset: const Offset(0, 5),
),
],
),
child: TableCalendar(
firstDay: DateTime.now().subtract(const Duration(days: 365)),
lastDay: DateTime.now().add(const Duration(days: 365)),
focusedDay: _focusedDay,
calendarFormat: _calendarFormat,
selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
onDaySelected: (selectedDay, focusedDay) {
setState(() {
_selectedDay = selectedDay;
_focusedDay = focusedDay;
});
},
onFormatChanged: (format) {
setState(() => _calendarFormat = format);
},
onPageChanged: (focusedDay) {
_focusedDay = focusedDay;
},
calendarStyle: CalendarStyle(
outsideDaysVisible: false,
defaultTextStyle: GoogleFonts.outfit(
fontSize: 14,
color: Theme.of(context).textTheme.bodyMedium?.color ?? AppColors.charcoal,
),
weekendTextStyle: GoogleFonts.outfit(
fontSize: 14,
color: Theme.of(context).textTheme.bodyMedium?.color ?? AppColors.charcoal,
),
todayDecoration: BoxDecoration(
color: AppColors.sageGreen.withOpacity(0.3),
shape: BoxShape.circle,
),
todayTextStyle: GoogleFonts.outfit(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.sageGreen,
),
selectedDecoration: const BoxDecoration(
color: AppColors.sageGreen,
shape: BoxShape.circle,
),
selectedTextStyle: GoogleFonts.outfit(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
headerStyle: HeaderStyle(
formatButtonVisible: false,
titleCentered: true,
titleTextStyle: GoogleFonts.outfit(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Theme.of(context).textTheme.titleLarge?.color ?? AppColors.charcoal,
),
leftChevronIcon: Icon(
Icons.chevron_left,
color: Theme.of(context).iconTheme.color ?? AppColors.warmGray,
),
rightChevronIcon: Icon(
Icons.chevron_right,
color: Theme.of(context).iconTheme.color ?? AppColors.warmGray,
),
),
daysOfWeekStyle: DaysOfWeekStyle(
weekdayStyle: GoogleFonts.outfit(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Theme.of(context).textTheme.bodySmall?.color ?? AppColors.warmGray,
),
weekendStyle: GoogleFonts.outfit(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Theme.of(context).textTheme.bodySmall?.color ?? AppColors.warmGray,
),
),
calendarBuilders: CalendarBuilders(
defaultBuilder: (context, day, focusedDay) {
return _buildCalendarDay(day, focusedDay, entries, lastPeriodStart, cycleLength, isSelected: false, isToday: false);
},
todayBuilder: (context, day, focusedDay) {
return _buildCalendarDay(day, focusedDay, entries, lastPeriodStart, cycleLength, isToday: true);
},
selectedBuilder: (context, day, focusedDay) {
return _buildCalendarDay(day, focusedDay, entries, lastPeriodStart, cycleLength, isSelected: true);
},
markerBuilder: (context, date, events) {
final entry = _getEntryForDate(date, entries);
if (entry == null) {
final phase =
_getPhaseForDate(date, lastPeriodStart, cycleLength);
if (phase != null) {
return Positioned(
bottom: 4,
child: Container(
width: 5,
height: 5,
decoration: BoxDecoration(
color: _getPhaseColor(phase),
shape: BoxShape.circle,
),
),
);
}
return null;
}
// If we have an entry, show icons/markers
return Positioned(
bottom: 4,
child: Row(
mainAxisSize: MainAxisSize.min,
Row(
children: [
if (entry.isPeriodDay)
Container(
width: 6,
height: 6,
margin: const EdgeInsets.symmetric(horizontal: 1),
decoration: const BoxDecoration(
color: AppColors.menstrualPhase,
shape: BoxShape.circle,
),
),
if (entry.mood != null ||
entry.energyLevel != 3 ||
entry.hasSymptoms)
Container(
width: 6,
height: 6,
margin: const EdgeInsets.symmetric(horizontal: 1),
decoration: const BoxDecoration(
color: AppColors.softGold,
shape: BoxShape.circle,
Expanded(
child: Text(
'Calendar',
style: GoogleFonts.outfit(
fontSize: 28,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.textTheme
.headlineLarge
?.color,
),
),
),
_buildLegendButton(),
],
),
);
},
if (isIrregular) ...[
const SizedBox(height: 16),
_buildPredictionToggle(),
],
],
),
),
),
),
const SizedBox(height: 24),
// Divider / Header for Day Info
if (_selectedDay != null) ...[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: [
Text(
'Daily Log',
style: GoogleFonts.outfit(
fontSize: 16,
// Calendar
Container(
margin: const EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 15,
offset: const Offset(0, 5),
),
],
),
child: TableCalendar(
firstDay:
DateTime.now().subtract(const Duration(days: 365)),
lastDay: DateTime.now().add(const Duration(days: 365)),
focusedDay: _focusedDay,
calendarFormat: _calendarFormat,
selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
onDaySelected: (selectedDay, focusedDay) {
setState(() {
_selectedDay = selectedDay;
_focusedDay = focusedDay;
});
},
onFormatChanged: (format) {
setState(() => _calendarFormat = format);
},
onPageChanged: (focusedDay) {
_focusedDay = focusedDay;
},
calendarStyle: CalendarStyle(
outsideDaysVisible: false,
defaultTextStyle: GoogleFonts.outfit(
fontSize: 14,
color: Theme.of(context).textTheme.bodyMedium?.color ??
AppColors.charcoal,
),
weekendTextStyle: GoogleFonts.outfit(
fontSize: 14,
color: Theme.of(context).textTheme.bodyMedium?.color ??
AppColors.charcoal,
),
todayDecoration: BoxDecoration(
color: AppColors.sageGreen.withOpacity(0.3),
shape: BoxShape.circle,
),
todayTextStyle: GoogleFonts.outfit(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.warmGray,
letterSpacing: 1,
color: AppColors.sageGreen,
),
selectedDecoration: const BoxDecoration(
color: AppColors.sageGreen,
shape: BoxShape.circle,
),
selectedTextStyle: GoogleFonts.outfit(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
const SizedBox(width: 12),
const Expanded(child: Divider(color: AppColors.lightGray)),
],
headerStyle: HeaderStyle(
formatButtonVisible: false,
titleCentered: true,
titleTextStyle: GoogleFonts.outfit(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Theme.of(context).textTheme.titleLarge?.color ??
AppColors.charcoal,
),
leftChevronIcon: Icon(
Icons.chevron_left,
color: Theme.of(context).iconTheme.color ??
AppColors.warmGray,
),
rightChevronIcon: Icon(
Icons.chevron_right,
color: Theme.of(context).iconTheme.color ??
AppColors.warmGray,
),
),
daysOfWeekStyle: DaysOfWeekStyle(
weekdayStyle: GoogleFonts.outfit(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Theme.of(context).textTheme.bodySmall?.color ??
AppColors.warmGray,
),
weekendStyle: GoogleFonts.outfit(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Theme.of(context).textTheme.bodySmall?.color ??
AppColors.warmGray,
),
),
calendarBuilders: CalendarBuilders(
defaultBuilder: (context, day, focusedDay) {
return _buildCalendarDay(day, focusedDay, entries,
lastPeriodStart, cycleLength,
isSelected: false, isToday: false);
},
todayBuilder: (context, day, focusedDay) {
return _buildCalendarDay(day, focusedDay, entries,
lastPeriodStart, cycleLength,
isToday: true);
},
selectedBuilder: (context, day, focusedDay) {
return _buildCalendarDay(day, focusedDay, entries,
lastPeriodStart, cycleLength,
isSelected: true);
},
markerBuilder: (context, date, events) {
final entry = _getEntryForDate(date, entries);
if (entry == null) {
final phase = _getPhaseForDate(
date, lastPeriodStart, cycleLength);
if (phase != null) {
return Positioned(
bottom: 4,
child: Container(
width: 5,
height: 5,
decoration: BoxDecoration(
color: _getPhaseColor(phase),
shape: BoxShape.circle,
),
),
);
}
return null;
}
// If we have an entry, show icons/markers
return Positioned(
bottom: 4,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (entry.isPeriodDay)
Container(
width: 6,
height: 6,
margin:
const EdgeInsets.symmetric(horizontal: 1),
decoration: const BoxDecoration(
color: AppColors.menstrualPhase,
shape: BoxShape.circle,
),
),
if (entry.mood != null ||
entry.energyLevel != 3 ||
entry.hasSymptoms)
Container(
width: 6,
height: 6,
margin:
const EdgeInsets.symmetric(horizontal: 1),
decoration: const BoxDecoration(
color: AppColors.softGold,
shape: BoxShape.circle,
),
),
],
),
);
},
),
),
),
),
const SizedBox(height: 12),
// Day Info (No longer Expanded)
_buildDayInfo(
_selectedDay!, lastPeriodStart, cycleLength, entries, user),
const SizedBox(height: 40), // Bottom padding
],
],
),
),
));
const SizedBox(height: 24),
// Divider / Header for Day Info
if (_selectedDay != null) ...[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: [
Text(
'Daily Log',
style: GoogleFonts.outfit(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppColors.warmGray,
letterSpacing: 1,
),
),
const SizedBox(width: 12),
const Expanded(
child: Divider(color: AppColors.lightGray)),
],
),
),
const SizedBox(height: 12),
// Day Info (No longer Expanded)
_buildDayInfo(_selectedDay!, lastPeriodStart, cycleLength,
entries, user),
const SizedBox(height: 40), // Bottom padding
],
],
),
),
));
}
Widget _buildPredictionToggle() {
@@ -288,9 +308,12 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
),
child: Row(
children: [
_buildToggleItem(PredictionMode.short, 'Short (-)', AppColors.menstrualPhase),
_buildToggleItem(PredictionMode.regular, 'Regular', AppColors.sageGreen),
_buildToggleItem(PredictionMode.long, 'Long (+)', AppColors.lutealPhase),
_buildToggleItem(
PredictionMode.short, 'Short (-)', AppColors.menstrualPhase),
_buildToggleItem(
PredictionMode.regular, 'Regular', AppColors.sageGreen),
_buildToggleItem(
PredictionMode.long, 'Long (+)', AppColors.lutealPhase),
],
),
);
@@ -415,8 +438,8 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
);
}
Widget _buildDayInfo(DateTime date, DateTime? lastPeriodStart, int cycleLength,
List<CycleEntry> entries, UserProfile? user) {
Widget _buildDayInfo(DateTime date, DateTime? lastPeriodStart,
int cycleLength, List<CycleEntry> entries, UserProfile? user) {
final phase = _getPhaseForDate(date, lastPeriodStart, cycleLength);
final entry = _getEntryForDate(date, entries);
@@ -487,17 +510,18 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
.bodyMedium
?.copyWith(color: AppColors.warmGray),
),
if (user?.isPadTrackingEnabled == true &&
phase != CyclePhase.menstrual &&
(user?.padSupplies?.any((s) => s.type == PadType.pantyLiner) ?? false)) ...[
if (user?.isPadTrackingEnabled == true &&
phase != CyclePhase.menstrual &&
(user?.padSupplies?.any((s) => s.type == PadType.pantyLiner) ??
false)) ...[
const SizedBox(height: 16),
_buildPantylinerPrompt(date, null),
],
] else ...[
// Period Detail
if (entry.isPeriodDay)
_buildDetailRow(Icons.water_drop, 'Period Day',
AppColors.menstrualPhase,
_buildDetailRow(
Icons.water_drop, 'Period Day', AppColors.menstrualPhase,
value: entry.flowIntensity?.label),
// Mood Detail
@@ -524,11 +548,11 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
if (user?.isPadTrackingEnabled == true) ...[
const SizedBox(height: 16),
if (entry.usedPantyliner)
_buildDetailRow(Icons.layers_outlined, 'Supplies Used', AppColors.menstrualPhase,
_buildDetailRow(Icons.layers_outlined, 'Supplies Used',
AppColors.menstrualPhase,
value: '${entry.pantylinerCount}'),
if (!entry.usedPantyliner && !entry.isPeriodDay)
_buildPantylinerPrompt(date, entry),
_buildPantylinerPrompt(date, entry),
],
// Notes
@@ -544,16 +568,15 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
fontWeight: FontWeight.w600,
color: AppColors.warmGray)),
const SizedBox(height: 4),
Text(entry.notes!,
style: GoogleFonts.outfit(fontSize: 14)),
Text(entry.notes!, style: GoogleFonts.outfit(fontSize: 14)),
],
),
),
],
if (user?.isPadTrackingEnabled == true) ...[
const SizedBox(height: 16),
_buildManualSupplyEntryButton(date),
const SizedBox(height: 16),
_buildManualSupplyEntryButton(date),
],
const SizedBox(height: 24),
@@ -581,17 +604,17 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
? Icons.edit_note
: Icons.add_circle_outline),
label: Text(entry != null ? 'Edit Log' : 'Add Log'),
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.sageGreen,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.sageGreen,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
),
),
),
),
],
),
],
),
],
),
);
@@ -608,33 +631,38 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
),
child: Row(
children: [
const Icon(Icons.help_outline, color: AppColors.menstrualPhase, size: 20),
const Icon(Icons.help_outline,
color: AppColors.menstrualPhase, size: 20),
const SizedBox(width: 12),
Expanded(
child: Text(
'Did you use pantyliners today?',
style: GoogleFonts.outfit(fontSize: 14, color: AppColors.charcoal),
style:
GoogleFonts.outfit(fontSize: 14, color: AppColors.charcoal),
),
),
TextButton(
onPressed: () {
if (entry != null) {
ref.read(cycleEntriesProvider.notifier).updateEntry(
entry.copyWith(usedPantyliner: true, pantylinerCount: 1),
);
} else {
final newEntry = CycleEntry(
id: const Uuid().v4(),
date: date,
usedPantyliner: true,
pantylinerCount: 1,
createdAt: DateTime.now(),
updatedAt: DateTime.now(),
);
ref.read(cycleEntriesProvider.notifier).addEntry(newEntry);
}
if (entry != null) {
ref.read(cycleEntriesProvider.notifier).updateEntry(
entry.copyWith(usedPantyliner: true, pantylinerCount: 1),
);
} else {
final newEntry = CycleEntry(
id: const Uuid().v4(),
date: date,
usedPantyliner: true,
pantylinerCount: 1,
createdAt: DateTime.now(),
updatedAt: DateTime.now(),
);
ref.read(cycleEntriesProvider.notifier).addEntry(newEntry);
}
},
child: Text('Yes', style: GoogleFonts.outfit(color: AppColors.menstrualPhase, fontWeight: FontWeight.bold)),
child: Text('Yes',
style: GoogleFonts.outfit(
color: AppColors.menstrualPhase,
fontWeight: FontWeight.bold)),
),
],
),
@@ -656,7 +684,8 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
style: OutlinedButton.styleFrom(
foregroundColor: AppColors.menstrualPhase,
side: const BorderSide(color: AppColors.menstrualPhase),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
),
),
);
@@ -832,16 +861,12 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
return entry?.isPeriodDay ?? false;
}
Widget _buildCalendarDay(
DateTime day,
DateTime focusedDay,
List<CycleEntry> entries,
DateTime? lastPeriodStart,
int cycleLength,
Widget _buildCalendarDay(DateTime day, DateTime focusedDay,
List<CycleEntry> entries, DateTime? lastPeriodStart, int cycleLength,
{bool isSelected = false, bool isToday = false, bool isWeekend = false}) {
final phase = _getPhaseForDate(day, lastPeriodStart, cycleLength);
final isDark = Theme.of(context).brightness == Brightness.dark;
// Determine the Day of Cycle
int? doc;
if (lastPeriodStart != null) {
@@ -876,14 +901,22 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
// Text style
TextStyle textStyle = GoogleFonts.outfit(
fontSize: (isOvulationDay || isPeriodStart) ? 18 : 14,
fontWeight: (isOvulationDay || isPeriodStart) ? FontWeight.bold : FontWeight.normal,
color: isSelected ? Colors.white : (isToday ? AppColors.sageGreen : (Theme.of(context).textTheme.bodyMedium?.color)),
fontWeight: (isOvulationDay || isPeriodStart)
? FontWeight.bold
: FontWeight.normal,
color: isSelected
? Colors.white
: (isToday
? AppColors.sageGreen
: (Theme.of(context).textTheme.bodyMedium?.color)),
);
if (isOvulationDay) {
textStyle = textStyle.copyWith(color: isSelected ? Colors.white : AppColors.ovulationPhase);
textStyle = textStyle.copyWith(
color: isSelected ? Colors.white : AppColors.ovulationPhase);
} else if (isPeriodStart) {
textStyle = textStyle.copyWith(color: isSelected ? Colors.white : AppColors.menstrualPhase);
textStyle = textStyle.copyWith(
color: isSelected ? Colors.white : AppColors.menstrualPhase);
}
return Container(