dwindown/jamshalat-diary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish navigation, Quran flows, and sharing UX

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-03-18 00:07:10 +07:00
parent a049129a35
commit 2d09b5b356
59 changed files with 11835 additions and 3184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
lib/features/checklist/presentation/checklist_screen.dart
View File

@@ -5,6 +5,7 @@ import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:intl/intl.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/notification_bell_button.dart';
import '../../../core/widgets/progress_bar.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/app_settings.dart';
@@ -27,7 +28,13 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
late Box<AppSettings> _settingsBox;
late AppSettings _settings;
final List<String> _fardhuPrayers = ['Subuh', 'Dzuhur', 'Ashar', 'Maghrib', 'Isya'];
final List<String> _fardhuPrayers = [
'Subuh',
'Dzuhur',
'Ashar',
'Maghrib',
'Isya'
];
@override
void initState() {
@@ -45,7 +52,7 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
for (final p in _fardhuPrayers) {
shalatLogs[p.toLowerCase()] = ShalatLog();
}
_logBox.put(
_todayKey,
DailyWorshipLog(
@@ -69,7 +76,8 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
final log = _todayLog;
// Lazily attach Dzikir and Puasa if user toggles them mid-day
if (_settings.trackDzikir && log.dzikirLog == null) log.dzikirLog = DzikirLog();
if (_settings.trackDzikir && log.dzikirLog == null)
log.dzikirLog = DzikirLog();
if (_settings.trackPuasa && log.puasaLog == null) log.puasaLog = PuasaLog();
int total = 0;
@@ -155,17 +163,16 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
Text(
DateFormat('EEEE, d MMM yyyy').format(DateTime.now()),
style: theme.textTheme.bodySmall?.copyWith(
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
),
centerTitle: false,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(LucideIcons.bell),
),
const NotificationBellButton(),
IconButton(
onPressed: () => context.push('/settings'),
icon: const Icon(LucideIcons.settings),
@@ -246,14 +253,16 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
decoration: BoxDecoration(
color: AppColors.primary.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(12),
),
child: Row(
children: [
const Icon(LucideIcons.star, color: AppColors.primary, size: 14),
const Icon(LucideIcons.star,
color: AppColors.primary, size: 14),
const SizedBox(width: 4),
Text(
'${log.totalPoints} pts',
@@ -334,7 +343,9 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
border: Border.all(
color: isCompleted
? AppColors.primary.withValues(alpha: 0.3)
: (isDark ? AppColors.primary.withValues(alpha: 0.08) : AppColors.cream),
: (isDark
? AppColors.primary.withValues(alpha: 0.08)
: AppColors.cream),
),
),
child: Theme(
@@ -347,10 +358,14 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
decoration: BoxDecoration(
color: isCompleted
? AppColors.primary.withValues(alpha: 0.15)
: (isDark ? AppColors.primary.withValues(alpha: 0.08) : AppColors.cream.withValues(alpha: 0.5)),
: (isDark
? AppColors.primary.withValues(alpha: 0.08)
: AppColors.cream.withValues(alpha: 0.5)),
borderRadius: BorderRadius.circular(12),
),
child: Icon(LucideIcons.building, size: 22, color: isCompleted ? AppColors.primary : AppColors.sage),
child: Icon(LucideIcons.building,
size: 22,
color: isCompleted ? AppColors.primary : AppColors.sage),
),
title: Text(
'Sholat $prayerName',
@@ -362,7 +377,9 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
),
),
subtitle: log.location != null
? Text('Di ${log.location}', style: const TextStyle(fontSize: 12, color: AppColors.primary))
? Text('Di ${log.location}',
style:
const TextStyle(fontSize: 12, color: AppColors.primary))
: null,
trailing: _CustomCheckbox(
value: isCompleted,
@@ -371,14 +388,17 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
_recalculateProgress();
},
),
childrenPadding: const EdgeInsets.only(left: 16, right: 16, bottom: 16),
childrenPadding:
const EdgeInsets.only(left: 16, right: 16, bottom: 16),
children: [
const Divider(),
const SizedBox(height: 8),
// Location Radio
Row(
children: [
const Text('Pelaksanaan:', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600)),
const Text('Pelaksanaan:',
style:
TextStyle(fontSize: 13, fontWeight: FontWeight.w600)),
const SizedBox(width: 16),
_radioOption('Masjid', log, () {
log.location = 'Masjid';
@@ -422,7 +442,9 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
color: selected ? AppColors.primary : Colors.grey,
),
const SizedBox(width: 4),
Text(title, style: TextStyle(fontSize: 13, color: selected ? AppColors.primary : null)),
Text(title,
style: TextStyle(
fontSize: 13, color: selected ? AppColors.primary : null)),
],
),
);
@@ -453,7 +475,9 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
border: Border.all(
color: log.isCompleted
? AppColors.primary.withValues(alpha: 0.3)
: (isDark ? AppColors.primary.withValues(alpha: 0.08) : AppColors.cream),
: (isDark
? AppColors.primary.withValues(alpha: 0.08)
: AppColors.cream),
),
),
child: Column(
@@ -467,10 +491,15 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
decoration: BoxDecoration(
color: log.isCompleted
? AppColors.primary.withValues(alpha: 0.15)
: (isDark ? AppColors.primary.withValues(alpha: 0.08) : AppColors.cream.withValues(alpha: 0.5)),
: (isDark
? AppColors.primary.withValues(alpha: 0.08)
: AppColors.cream.withValues(alpha: 0.5)),
borderRadius: BorderRadius.circular(12),
),
child: Icon(LucideIcons.bookOpen, size: 22, color: log.isCompleted ? AppColors.primary : AppColors.sage),
child: Icon(LucideIcons.bookOpen,
size: 22,
color:
log.isCompleted ? AppColors.primary : AppColors.sage),
),
const SizedBox(width: 14),
Expanded(
@@ -482,13 +511,17 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: log.isCompleted && isDark ? AppColors.textSecondaryDark : null,
decoration: log.isCompleted ? TextDecoration.lineThrough : null,
color: log.isCompleted && isDark
? AppColors.textSecondaryDark
: null,
decoration:
log.isCompleted ? TextDecoration.lineThrough : null,
),
),
Text(
'Target: ${log.targetValue} ${log.targetUnit}',
style: const TextStyle(fontSize: 12, color: AppColors.primary),
style: const TextStyle(
fontSize: 12, color: AppColors.primary),
),
],
),
@@ -516,14 +549,17 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
),
if (log.autoSync)
Tooltip(
message: 'Sinkron dari Al-Quran',
child: Icon(LucideIcons.refreshCw, size: 16, color: AppColors.primary),
child: Icon(LucideIcons.refreshCw,
size: 16, color: AppColors.primary),
),
IconButton(
icon: const Icon(LucideIcons.minusCircle, size: 20),
@@ -536,7 +572,8 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
: null,
),
IconButton(
icon: const Icon(LucideIcons.plusCircle, size: 20, color: AppColors.primary),
icon: const Icon(LucideIcons.plusCircle,
size: 20, color: AppColors.primary),
visualDensity: VisualDensity.compact,
onPressed: () {
log.rawAyatRead++;
@@ -568,7 +605,8 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
children: [
Icon(LucideIcons.sparkles, size: 20, color: AppColors.sage),
const SizedBox(width: 8),
const Text('Dzikir Harian', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 15)),
const Text('Dzikir Harian',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 15)),
],
),
const SizedBox(height: 12),
@@ -599,13 +637,17 @@ class _ChecklistScreenState extends ConsumerState<ChecklistScreen> {
children: [
const Icon(LucideIcons.moonStar, size: 20, color: AppColors.sage),
const SizedBox(width: 8),
const Expanded(child: Text('Puasa Sunnah', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 15))),
const Expanded(
child: Text('Puasa Sunnah',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 15))),
DropdownButton<String>(
value: log.jenisPuasa,
hint: const Text('Jenis', style: TextStyle(fontSize: 12)),
underline: const SizedBox(),
items: ['Senin', 'Kamis', 'Ayyamul Bidh', 'Daud', 'Lainnya']
.map((e) => DropdownMenuItem(value: e, child: Text(e, style: const TextStyle(fontSize: 13))))
.map((e) => DropdownMenuItem(
value: e,
child: Text(e, style: const TextStyle(fontSize: 13))))
.toList(),
onChanged: (v) {
log.jenisPuasa = v;
@@ -644,7 +686,9 @@ class _CustomCheckbox extends StatelessWidget {
borderRadius: BorderRadius.circular(6),
border: value ? null : Border.all(color: Colors.grey, width: 2),
),
child: value ? const Icon(LucideIcons.check, size: 16, color: Colors.white) : null,
child: value
? const Icon(LucideIcons.check, size: 16, color: Colors.white)
: null,
),
);
}

136
lib/features/dashboard/data/prayer_times_provider.dart
View File

@@ -1,7 +1,12 @@
import 'dart:async';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:intl/intl.dart';
import '../../../data/services/notification_orchestrator_service.dart';
import '../../../data/services/notification_event_producer_service.dart';
import '../../../data/services/myquran_sholat_service.dart';
import '../../../data/services/notification_service.dart';
import '../../../data/services/prayer_service.dart';
import '../../../data/services/location_service.dart';
import '../../../data/local/hive_boxes.dart';
@@ -25,7 +30,8 @@ class DaySchedule {
final String province;
final String date; // yyyy-MM-dd
final String tanggal; // formatted date from API
final Map<String, String> times; // {imsak, subuh, terbit, dhuha, dzuhur, ashar, maghrib, isya}
final Map<String, String>
times; // {imsak, subuh, terbit, dhuha, dzuhur, ashar, maghrib, isya}
DaySchedule({
required this.cityName,
@@ -65,7 +71,8 @@ class DaySchedule {
activeIndex = 1; // 0=Imsak, 1=Subuh
} else {
for (int i = 0; i < prayers.length; i++) {
if (prayers[i].time != '-' && prayers[i].time.compareTo(currentTime) > 0) {
if (prayers[i].time != '-' &&
prayers[i].time.compareTo(currentTime) > 0) {
activeIndex = i;
break;
}
@@ -135,10 +142,10 @@ final prayerTimesProvider = FutureProvider<DaySchedule?>((ref) async {
// All prayers passed, fetch tomorrow's schedule
final tomorrow = DateTime.now().add(const Duration(days: 1));
final tomorrowStr = DateFormat('yyyy-MM-dd').format(tomorrow);
final tmrwJadwal =
await MyQuranSholatService.instance.getDailySchedule(cityId, tomorrowStr);
final tmrwJadwal = await MyQuranSholatService.instance
.getDailySchedule(cityId, tomorrowStr);
if (tmrwJadwal != null) {
final cityInfo = await MyQuranSholatService.instance.getCityInfo(cityId);
schedule = DaySchedule(
@@ -152,37 +159,106 @@ final prayerTimesProvider = FutureProvider<DaySchedule?>((ref) async {
}
if (schedule != null) {
unawaited(_syncAdhanNotifications(cityId, schedule));
return schedule;
}
// Fallback to adhan package
final position = await LocationService.instance.getCurrentLocation();
double lat = position?.latitude ?? -6.2088;
double lng = position?.longitude ?? 106.8456;
final lat = position?.latitude ?? -6.2088;
final lng = position?.longitude ?? 106.8456;
final locationUnavailable = position == null;
final result = PrayerService.instance.getPrayerTimes(lat, lng, DateTime.now());
if (result != null) {
final timeFormat = DateFormat('HH:mm');
return DaySchedule(
cityName: 'Jakarta',
province: 'DKI Jakarta',
date: today,
tanggal: DateFormat('EEEE, dd/MM/yyyy').format(DateTime.now()),
times: {
'imsak': timeFormat.format(result.fajr.subtract(const Duration(minutes: 10))),
'subuh': timeFormat.format(result.fajr),
'terbit': timeFormat.format(result.sunrise),
'dhuha': timeFormat.format(result.sunrise.add(const Duration(minutes: 15))),
'dzuhur': timeFormat.format(result.dhuhr),
'ashar': timeFormat.format(result.asr),
'maghrib': timeFormat.format(result.maghrib),
'isya': timeFormat.format(result.isha),
},
final result =
PrayerService.instance.getPrayerTimes(lat, lng, DateTime.now());
final timeFormat = DateFormat('HH:mm');
final fallbackSchedule = DaySchedule(
cityName: 'Jakarta',
province: 'DKI Jakarta',
date: today,
tanggal: DateFormat('EEEE, dd/MM/yyyy').format(DateTime.now()),
times: {
'imsak':
timeFormat.format(result.fajr.subtract(const Duration(minutes: 10))),
'subuh': timeFormat.format(result.fajr),
'terbit': timeFormat.format(result.sunrise),
'dhuha':
timeFormat.format(result.sunrise.add(const Duration(minutes: 15))),
'dzuhur': timeFormat.format(result.dhuhr),
'ashar': timeFormat.format(result.asr),
'maghrib': timeFormat.format(result.maghrib),
'isya': timeFormat.format(result.isha),
},
);
unawaited(
NotificationEventProducerService.instance.emitScheduleFallback(
settings: Hive.box<AppSettings>(HiveBoxes.settings).get('default') ??
AppSettings(),
cityId: cityId,
locationUnavailable: locationUnavailable,
),
);
unawaited(_syncAdhanNotifications(cityId, fallbackSchedule));
return fallbackSchedule;
});
Future<void> _syncAdhanNotifications(
String cityId, DaySchedule schedule) async {
try {
final settingsBox = Hive.box<AppSettings>(HiveBoxes.settings);
final settings = settingsBox.get('default') ?? AppSettings();
final adhanEnabled = settings.adhanEnabled.values.any((v) => v);
if (adhanEnabled) {
final permissionStatus =
await NotificationService.instance.getPermissionStatus();
await NotificationEventProducerService.instance
.emitPermissionWarningsIfNeeded(
settings: settings,
permissionStatus: permissionStatus,
);
}
final schedulesByDate = <String, Map<String, String>>{
schedule.date: schedule.times,
};
final baseDate = DateTime.tryParse(schedule.date);
if (baseDate != null) {
final nextDate = DateFormat('yyyy-MM-dd')
.format(baseDate.add(const Duration(days: 1)));
if (!schedulesByDate.containsKey(nextDate)) {
final nextSchedule = await MyQuranSholatService.instance
.getDailySchedule(cityId, nextDate);
if (nextSchedule != null) {
schedulesByDate[nextDate] = nextSchedule;
}
}
}
await NotificationService.instance.syncPrayerNotifications(
cityId: cityId,
adhanEnabled: settings.adhanEnabled,
iqamahOffset: settings.iqamahOffset,
schedulesByDate: schedulesByDate,
);
await NotificationService.instance.syncHabitNotifications(
settings: settings,
);
await NotificationOrchestratorService.instance.runPassivePass(
settings: settings,
);
} catch (_) {
// Don't block UI when scheduling notifications fails.
unawaited(
NotificationEventProducerService.instance.emitNotificationSyncFailed(
settings: Hive.box<AppSettings>(HiveBoxes.settings).get('default') ??
AppSettings(),
cityId: cityId,
),
);
}
return null;
});
}
/// Provider for monthly prayer schedule (for Imsakiyah screen).
final monthlyScheduleProvider =
@@ -200,7 +276,7 @@ final cityNameProvider = FutureProvider<String>((ref) async {
if (stored.contains('|')) {
return stored.split('|').first;
}
final cityId = ref.watch(selectedCityIdProvider);
final info = await MyQuranSholatService.instance.getCityInfo(cityId);
if (info != null) {

846
lib/features/dashboard/presentation/dashboard_screen.dart
View File

File diff suppressed because it is too large Load Diff

281
lib/features/doa/presentation/doa_screen.dart
View File

@@ -1,6 +1,10 @@
import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/arabic_text.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/app_settings.dart';
import '../../../data/services/muslim_api_service.dart';
class DoaScreen extends StatefulWidget {
@@ -70,6 +74,62 @@ class _DoaScreenState extends State<DoaScreen> {
});
}
void _showArabicFontSettings() {
final settingsBox = Hive.box<AppSettings>(HiveBoxes.settings);
final settings = settingsBox.get('default') ?? AppSettings();
if (!settings.isInBox) {
settingsBox.put('default', settings);
}
double arabicFontSize = settings.arabicFontSize;
showModalBottomSheet(
context: context,
isScrollControlled: true,
useSafeArea: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (ctx) => StatefulBuilder(
builder: (context, setModalState) {
final keyboardInset = MediaQuery.of(context).viewInsets.bottom;
return Padding(
padding: EdgeInsets.fromLTRB(16, 20, 16, 20 + keyboardInset),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Pengaturan Tampilan',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 16),
const Text('Ukuran Font Arab'),
Slider(
value: arabicFontSize,
min: 16,
max: 40,
divisions: 12,
label: '${arabicFontSize.round()}pt',
activeColor: AppColors.primary,
onChanged: (value) {
setModalState(() => arabicFontSize = value);
settings.arabicFontSize = value;
if (settings.isInBox) {
settings.save();
} else {
settingsBox.put('default', settings);
}
},
),
const SizedBox(height: 8),
],
),
);
},
),
);
}
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
@@ -78,128 +138,139 @@ class _DoaScreenState extends State<DoaScreen> {
appBar: AppBar(
automaticallyImplyLeading: !widget.isSimpleModeTab,
title: const Text('Kumpulan Doa'),
actionsPadding: const EdgeInsets.only(right: 8),
actions: [
IconButton(
onPressed: _loadDoa,
icon: const Icon(LucideIcons.refreshCw),
tooltip: 'Muat ulang',
),
IconButton(
onPressed: _showArabicFontSettings,
icon: const Icon(LucideIcons.settings2),
tooltip: 'Pengaturan tampilan',
),
],
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 12),
child: TextField(
controller: _searchController,
onChanged: _onSearchChanged,
decoration: InputDecoration(
hintText: 'Cari judul atau isi doa...',
prefixIcon: const Icon(LucideIcons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
body: SafeArea(
top: false,
bottom: !widget.isSimpleModeTab,
child: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 12),
child: TextField(
controller: _searchController,
onChanged: _onSearchChanged,
decoration: InputDecoration(
hintText: 'Cari judul atau isi doa...',
prefixIcon: const Icon(LucideIcons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
),
),
Expanded(
child: _loading
? const Center(child: CircularProgressIndicator())
: _error != null
? Center(
child: Text(
_error!,
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
)
: _filteredDoa.isEmpty
? Center(
child: Text(
'Doa tidak ditemukan',
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
)
: ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
itemCount: _filteredDoa.length,
itemBuilder: (context, index) {
final item = _filteredDoa[index];
return Container(
margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
Expanded(
child: _loading
? const Center(child: CircularProgressIndicator())
: _error != null
? Center(
child: Text(
_error!,
style: TextStyle(
color: isDark
? AppColors.surfaceDark
: AppColors.surfaceLight,
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: isDark
? AppColors.primary.withValues(alpha: 0.1)
: AppColors.cream,
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
)
: _filteredDoa.isEmpty
? Center(
child: Text(
'Doa tidak ditemukan',
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item['judul']?.toString() ?? '-',
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
const SizedBox(height: 10),
Align(
alignment: Alignment.centerRight,
child: Text(
item['arab']?.toString() ?? '',
textAlign: TextAlign.right,
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 24,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
),
const SizedBox(height: 8),
Text(
item['indo']?.toString() ?? '',
style: TextStyle(
height: 1.5,
)
: ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
itemCount: _filteredDoa.length,
itemBuilder: (context, index) {
final item = _filteredDoa[index];
return Container(
margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
if ((item['source']?.toString().isNotEmpty ??
false)) ...[
const SizedBox(height: 10),
Text(
'Sumber: ${item['source']}',
style: const TextStyle(
fontSize: 12,
color: AppColors.primary,
fontWeight: FontWeight.w600,
? AppColors.surfaceDark
: AppColors.surfaceLight,
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: isDark
? AppColors.primary
.withValues(alpha: 0.1)
: AppColors.cream,
),
),
],
],
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
item['judul']?.toString() ?? '-',
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
const SizedBox(height: 10),
Align(
alignment: Alignment.centerRight,
child: ArabicText(
item['arab']?.toString() ?? '',
textAlign: TextAlign.right,
baseFontSize: 24,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
const SizedBox(height: 8),
Text(
item['indo']?.toString() ?? '',
style: TextStyle(
height: 1.5,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
if ((item['source']
?.toString()
.isNotEmpty ??
false)) ...[
const SizedBox(height: 10),
Text(
'Sumber: ${item['source']}',
style: const TextStyle(
fontSize: 12,
color: AppColors.primary,
fontWeight: FontWeight.w600,
),
),
],
],
),
);
},
),
);
},
),
),
],
),
],
),
),
);
}

1266
lib/features/dzikir/presentation/dzikir_screen.dart
View File

File diff suppressed because it is too large Load Diff

306
lib/features/hadits/presentation/hadits_screen.dart
View File

@@ -1,6 +1,10 @@
import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/arabic_text.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/app_settings.dart';
import '../../../data/services/muslim_api_service.dart';
class HaditsScreen extends StatefulWidget {
@@ -75,6 +79,62 @@ class _HaditsScreenState extends State<HaditsScreen> {
});
}
void _showArabicFontSettings() {
final settingsBox = Hive.box<AppSettings>(HiveBoxes.settings);
final settings = settingsBox.get('default') ?? AppSettings();
if (!settings.isInBox) {
settingsBox.put('default', settings);
}
double arabicFontSize = settings.arabicFontSize;
showModalBottomSheet(
context: context,
isScrollControlled: true,
useSafeArea: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (ctx) => StatefulBuilder(
builder: (context, setModalState) {
final keyboardInset = MediaQuery.of(context).viewInsets.bottom;
return Padding(
padding: EdgeInsets.fromLTRB(16, 20, 16, 20 + keyboardInset),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Pengaturan Tampilan',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 16),
const Text('Ukuran Font Arab'),
Slider(
value: arabicFontSize,
min: 16,
max: 40,
divisions: 12,
label: '${arabicFontSize.round()}pt',
activeColor: AppColors.primary,
onChanged: (value) {
setModalState(() => arabicFontSize = value);
settings.arabicFontSize = value;
if (settings.isInBox) {
settings.save();
} else {
settingsBox.put('default', settings);
}
},
),
const SizedBox(height: 8),
],
),
);
},
),
);
}
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
@@ -83,140 +143,150 @@ class _HaditsScreenState extends State<HaditsScreen> {
appBar: AppBar(
automaticallyImplyLeading: !widget.isSimpleModeTab,
title: const Text("Hadits Arba'in"),
actionsPadding: const EdgeInsets.only(right: 8),
actions: [
IconButton(
onPressed: _loadHadits,
icon: const Icon(LucideIcons.refreshCw),
tooltip: 'Muat ulang',
),
IconButton(
onPressed: _showArabicFontSettings,
icon: const Icon(LucideIcons.settings2),
tooltip: 'Pengaturan tampilan',
),
],
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 12),
child: TextField(
controller: _searchController,
onChanged: _onSearchChanged,
decoration: InputDecoration(
hintText: 'Cari judul atau isi hadits...',
prefixIcon: const Icon(LucideIcons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
body: SafeArea(
top: false,
bottom: !widget.isSimpleModeTab,
child: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 12),
child: TextField(
controller: _searchController,
onChanged: _onSearchChanged,
decoration: InputDecoration(
hintText: 'Cari judul atau isi hadits...',
prefixIcon: const Icon(LucideIcons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
),
),
Expanded(
child: _loading
? const Center(child: CircularProgressIndicator())
: _error != null
? Center(
child: Text(
_error!,
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
)
: _filteredHadits.isEmpty
? Center(
child: Text(
'Hadits tidak ditemukan',
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
)
: ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
itemCount: _filteredHadits.length,
itemBuilder: (context, index) {
final item = _filteredHadits[index];
return Container(
margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
Expanded(
child: _loading
? const Center(child: CircularProgressIndicator())
: _error != null
? Center(
child: Text(
_error!,
style: TextStyle(
color: isDark
? AppColors.surfaceDark
: AppColors.surfaceLight,
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: isDark
? AppColors.primary.withValues(alpha: 0.1)
: AppColors.cream,
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
)
: _filteredHadits.isEmpty
? Center(
child: Text(
'Hadits tidak ditemukan',
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
width: 34,
height: 34,
alignment: Alignment.center,
decoration: BoxDecoration(
color: AppColors.primary
.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'${item['no'] ?? '-'}',
style: const TextStyle(
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
),
const SizedBox(width: 10),
Expanded(
child: Text(
item['judul']?.toString() ?? '-',
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
),
],
),
const SizedBox(height: 10),
Align(
alignment: Alignment.centerRight,
child: Text(
item['arab']?.toString() ?? '',
textAlign: TextAlign.right,
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 24,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
),
const SizedBox(height: 8),
Text(
item['indo']?.toString() ?? '',
style: TextStyle(
height: 1.5,
)
: ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
itemCount: _filteredHadits.length,
itemBuilder: (context, index) {
final item = _filteredHadits[index];
return Container(
margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
? AppColors.surfaceDark
: AppColors.surfaceLight,
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: isDark
? AppColors.primary
.withValues(alpha: 0.1)
: AppColors.cream,
),
),
),
],
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
width: 34,
height: 34,
alignment: Alignment.center,
decoration: BoxDecoration(
color: AppColors.primary
.withValues(alpha: 0.12),
borderRadius:
BorderRadius.circular(10),
),
child: Text(
'${item['no'] ?? '-'}',
style: const TextStyle(
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
),
const SizedBox(width: 10),
Expanded(
child: Text(
item['judul']?.toString() ?? '-',
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
),
],
),
const SizedBox(height: 10),
Align(
alignment: Alignment.centerRight,
child: ArabicText(
item['arab']?.toString() ?? '',
textAlign: TextAlign.right,
baseFontSize: 24,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
const SizedBox(height: 8),
Text(
item['indo']?.toString() ?? '',
style: TextStyle(
height: 1.5,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
),
);
},
),
);
},
),
),
],
),
],
),
),
);
}

120
lib/features/imsakiyah/presentation/imsakiyah_screen.dart
View File

@@ -6,6 +6,7 @@ import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:intl/intl.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/notification_bell_button.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/app_settings.dart';
import '../../../data/services/prayer_service.dart';
@@ -56,8 +57,7 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
List<_DayRow> _createRows(Map<String, Map<String, String>>? apiData) {
final selected = _months[_selectedMonthIndex];
final daysInMonth =
DateTime(selected.year, selected.month + 1, 0).day;
final daysInMonth = DateTime(selected.year, selected.month + 1, 0).day;
final rows = <_DayRow>[];
for (int d = 1; d <= daysInMonth; d++) {
@@ -102,7 +102,8 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
context: context,
builder: (ctx) => StatefulBuilder(
builder: (ctx, setDialogState) => AlertDialog(
insetPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 24),
insetPadding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 24),
title: const Text('Cari Kota/Kabupaten'),
content: SizedBox(
width: MediaQuery.of(context).size.width * 0.85,
@@ -123,7 +124,7 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
final res = await MyQuranSholatService.instance
.searchCity(searchCtrl.text.trim());
if (mounted) {
setDialogState(() {
setDialogState(() {
results = res;
isSearching = false;
});
@@ -133,21 +134,23 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
),
onChanged: (val) {
if (val.trim().length < 3) return;
if (debounce?.isActive ?? false) debounce!.cancel();
debounce = Timer(const Duration(milliseconds: 500), () async {
debounce =
Timer(const Duration(milliseconds: 500), () async {
if (!mounted) return;
setDialogState(() => isSearching = true);
try {
final res = await MyQuranSholatService.instance.searchCity(val.trim());
final res = await MyQuranSholatService.instance
.searchCity(val.trim());
if (mounted) {
setDialogState(() {
results = res;
});
}
} catch (e) {
debugPrint('Error searching city: $e');
debugPrint('Error searching city: $e');
} finally {
if (mounted) {
setDialogState(() {
@@ -175,7 +178,8 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
if (isSearching)
const Center(child: CircularProgressIndicator())
else if (results.isEmpty)
const Text('Tidak ada hasil', style: TextStyle(color: Colors.grey))
const Text('Tidak ada hasil',
style: TextStyle(color: Colors.grey))
else
SizedBox(
height: 200,
@@ -193,11 +197,11 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
if (id != null && name != null) {
_settings.lastCityName = '$name|$id';
_settings.save();
// Update providers to refresh data
ref.invalidate(selectedCityIdProvider);
ref.invalidate(cityNameProvider);
Navigator.pop(ctx);
}
},
@@ -224,9 +228,11 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
final today = DateTime.now();
const tableBottomSpacing = 28.0;
final selectedMonth = _months[_selectedMonthIndex];
final monthArg = '${selectedMonth.year}-${selectedMonth.month.toString().padLeft(2, '0')}';
final monthArg =
'${selectedMonth.year}-${selectedMonth.month.toString().padLeft(2, '0')}';
final cityNameAsync = ref.watch(cityNameProvider);
final monthlyDataAsync = ref.watch(monthlyScheduleProvider(monthArg));
@@ -235,10 +241,7 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
title: const Text('Kalender Sholat'),
centerTitle: false,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(LucideIcons.bell),
),
const NotificationBellButton(),
IconButton(
onPressed: () => context.push('/settings'),
icon: const Icon(LucideIcons.settings),
@@ -266,7 +269,9 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
decoration: BoxDecoration(
color: isSelected
? AppColors.primary
: (isDark ? AppColors.surfaceDark : AppColors.surfaceLight),
: (isDark
? AppColors.surfaceDark
: AppColors.surfaceLight),
borderRadius: BorderRadius.circular(50),
border: isSelected
? null
@@ -306,7 +311,8 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
color:
isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: isDark
@@ -314,40 +320,40 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
: AppColors.cream,
),
),
child: Row(
children: [
const Icon(LucideIcons.mapPin,
color: AppColors.primary, size: 24),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Lokasi Anda',
style: theme.textTheme.bodySmall?.copyWith(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
child: Row(
children: [
const Icon(LucideIcons.mapPin,
color: AppColors.primary, size: 24),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Lokasi Anda',
style: theme.textTheme.bodySmall?.copyWith(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
),
Text(
cityNameAsync.value ?? 'Jakarta, Indonesia',
style: const TextStyle(
fontWeight: FontWeight.w600, fontSize: 15),
),
],
Text(
cityNameAsync.value ?? 'Jakarta, Indonesia',
style: const TextStyle(
fontWeight: FontWeight.w600, fontSize: 15),
),
],
),
),
),
Icon(LucideIcons.chevronDown,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight),
],
Icon(LucideIcons.chevronDown,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight),
],
),
),
),
),
),
const SizedBox(height: 16),
// ── Table Header ──
@@ -378,7 +384,12 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
data: (apiData) {
final rows = _createRows(apiData);
return ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 16),
padding: const EdgeInsets.fromLTRB(
16,
0,
16,
tableBottomSpacing,
),
itemCount: rows.length,
itemBuilder: (context, i) {
final row = rows[i];
@@ -453,7 +464,12 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
error: (_, __) {
final rows = _createRows(null); // fallback
return ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 16),
padding: const EdgeInsets.fromLTRB(
16,
0,
16,
tableBottomSpacing,
),
itemCount: rows.length,
itemBuilder: (context, i) {
final row = rows[i];
@@ -536,7 +552,7 @@ class _ImsakiyahScreenState extends ConsumerState<ImsakiyahScreen> {
child: Center(
child: Text(
text,
style: TextStyle(
style: const TextStyle(
fontSize: 9,
fontWeight: FontWeight.w700,
letterSpacing: 1,

199
lib/features/laporan/presentation/laporan_screen.dart
View File

@@ -5,11 +5,10 @@ import 'package:hive_flutter/hive_flutter.dart';
import 'package:intl/intl.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/progress_bar.dart';
import '../../../core/widgets/notification_bell_button.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/app_settings.dart';
import '../../../data/local/models/daily_worship_log.dart';
import '../../../data/local/models/checklist_item.dart';
class LaporanScreen extends ConsumerStatefulWidget {
const LaporanScreen({super.key});
@@ -74,48 +73,60 @@ class _LaporanScreenState extends ConsumerState<LaporanScreen>
final date = now.subtract(Duration(days: i));
final key = DateFormat('yyyy-MM-dd').format(date);
final log = logBox.get(key);
if (log != null && log.totalItems > 0) {
daysChecked++;
// Fardhu
totalCounts['fardhu'] = (totalCounts['fardhu'] ?? 0) + 5;
int completedFardhu = log.shalatLogs.values.where((l) => l.completed).length;
completionCounts['fardhu'] = (completionCounts['fardhu'] ?? 0) + completedFardhu;
int completedFardhu =
log.shalatLogs.values.where((l) => l.completed).length;
completionCounts['fardhu'] =
(completionCounts['fardhu'] ?? 0) + completedFardhu;
// Rawatib
int rawatibTotal = 0;
int rawatibCompleted = 0;
for (var sLog in log.shalatLogs.values) {
if (sLog.qabliyah != null) { rawatibTotal++; if (sLog.qabliyah!) rawatibCompleted++; }
if (sLog.badiyah != null) { rawatibTotal++; if (sLog.badiyah!) rawatibCompleted++; }
if (sLog.qabliyah != null) {
rawatibTotal++;
if (sLog.qabliyah!) rawatibCompleted++;
}
if (sLog.badiyah != null) {
rawatibTotal++;
if (sLog.badiyah!) rawatibCompleted++;
}
}
if (rawatibTotal > 0) {
totalCounts['rawatib'] = (totalCounts['rawatib'] ?? 0) + rawatibTotal;
completionCounts['rawatib'] = (completionCounts['rawatib'] ?? 0) + rawatibCompleted;
totalCounts['rawatib'] = (totalCounts['rawatib'] ?? 0) + rawatibTotal;
completionCounts['rawatib'] =
(completionCounts['rawatib'] ?? 0) + rawatibCompleted;
}
// Tilawah
if (log.tilawahLog != null) {
totalCounts['tilawah'] = (totalCounts['tilawah'] ?? 0) + 1;
if (log.tilawahLog!.isCompleted) {
completionCounts['tilawah'] = (completionCounts['tilawah'] ?? 0) + 1;
}
totalCounts['tilawah'] = (totalCounts['tilawah'] ?? 0) + 1;
if (log.tilawahLog!.isCompleted) {
completionCounts['tilawah'] =
(completionCounts['tilawah'] ?? 0) + 1;
}
}
// Dzikir
if (log.dzikirLog != null) {
totalCounts['dzikir'] = (totalCounts['dzikir'] ?? 0) + 2;
int dCompleted = (log.dzikirLog!.pagi ? 1 : 0) + (log.dzikirLog!.petang ? 1 : 0);
completionCounts['dzikir'] = (completionCounts['dzikir'] ?? 0) + dCompleted;
totalCounts['dzikir'] = (totalCounts['dzikir'] ?? 0) + 2;
int dCompleted =
(log.dzikirLog!.pagi ? 1 : 0) + (log.dzikirLog!.petang ? 1 : 0);
completionCounts['dzikir'] =
(completionCounts['dzikir'] ?? 0) + dCompleted;
}
// Puasa
if (log.puasaLog != null) {
totalCounts['puasa'] = (totalCounts['puasa'] ?? 0) + 1;
if (log.puasaLog!.completed) {
completionCounts['puasa'] = (completionCounts['puasa'] ?? 0) + 1;
}
totalCounts['puasa'] = (totalCounts['puasa'] ?? 0) + 1;
if (log.puasaLog!.completed) {
completionCounts['puasa'] = (completionCounts['puasa'] ?? 0) + 1;
}
}
}
}
@@ -170,7 +181,7 @@ class _LaporanScreenState extends ConsumerState<LaporanScreen>
Widget build(BuildContext context) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
final settingsBox = Hive.box<AppSettings>(HiveBoxes.settings);
final isSimpleMode = settingsBox.get('default')?.simpleMode ?? false;
@@ -180,10 +191,7 @@ class _LaporanScreenState extends ConsumerState<LaporanScreen>
title: const Text('Riwayat Ibadah'),
centerTitle: false,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(LucideIcons.bell),
),
const NotificationBellButton(),
IconButton(
onPressed: () => context.push('/settings'),
icon: const Icon(LucideIcons.settings),
@@ -204,10 +212,7 @@ class _LaporanScreenState extends ConsumerState<LaporanScreen>
title: const Text('Laporan Kualitas Ibadah'),
centerTitle: false,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(LucideIcons.bell),
),
const NotificationBellButton(),
IconButton(
onPressed: () => context.push('/settings'),
icon: const Icon(LucideIcons.settings),
@@ -253,7 +258,8 @@ class _LaporanScreenState extends ConsumerState<LaporanScreen>
child: TabBarView(
controller: _tabController,
children: [
_buildWeeklyView(context, isDark, weekData, avgPercent, insights),
_buildWeeklyView(
context, isDark, weekData, avgPercent, insights),
_buildComingSoon(context, 'Bulanan'),
_buildComingSoon(context, 'Tahunan'),
],
@@ -332,57 +338,71 @@ class _LaporanScreenState extends ConsumerState<LaporanScreen>
const SizedBox(height: 20),
// ── Bar Chart ──
SizedBox(
height: 140,
child: Builder(
builder: (context) {
final maxPts = weekData.map((d) => d.value).fold<double>(0.0, (a, b) => a > b ? a : b).clamp(50.0, 300.0);
return Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: weekData.map((d) {
final ratio = (d.value / maxPts).clamp(0.05, 1.0);
return Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
child: Container(
width: double.infinity,
height: 120 * ratio,
decoration: BoxDecoration(
color: d.isToday
? AppColors.primary
: AppColors.primary
.withValues(alpha: 0.3 + ratio * 0.4),
borderRadius: BorderRadius.circular(6),
),
),
height: 162,
child: Builder(builder: (context) {
final maxPts = weekData
.map((d) => d.value)
.fold<double>(0.0, (a, b) => a > b ? a : b)
.clamp(50.0, 300.0);
return Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: weekData.map((d) {
final ratio = (d.value / maxPts).clamp(0.05, 1.0);
return Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
'${d.value.round()}',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w700,
color: d.isToday
? AppColors.primary
: (isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight),
),
const SizedBox(height: 8),
Text(
d.label,
style: TextStyle(
fontSize: 10,
fontWeight: d.isToday
? FontWeight.w700
: FontWeight.w400,
),
const SizedBox(height: 8),
Flexible(
child: Container(
width: double.infinity,
height: 120 * ratio,
decoration: BoxDecoration(
color: d.isToday
? AppColors.primary
: (isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight),
: AppColors.primary.withValues(
alpha: 0.3 + ratio * 0.4),
borderRadius: BorderRadius.circular(6),
),
),
],
),
),
const SizedBox(height: 8),
Text(
d.label,
style: TextStyle(
fontSize: 10,
fontWeight: d.isToday
? FontWeight.w700
: FontWeight.w400,
color: d.isToday
? AppColors.primary
: (isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight),
),
),
],
),
);
}).toList(),
);
}
),
),
);
}).toList(),
);
}),
),
],
),
@@ -587,9 +607,11 @@ class _LaporanScreenState extends ConsumerState<LaporanScreen>
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(LucideIcons.history, size: 64, color: AppColors.sage.withValues(alpha: 0.5)),
Icon(LucideIcons.history,
size: 64, color: AppColors.sage.withValues(alpha: 0.5)),
const SizedBox(height: 16),
const Text('Belum ada riwayat ibadah', style: TextStyle(color: AppColors.sage)),
const Text('Belum ada riwayat ibadah',
style: TextStyle(color: AppColors.sage)),
],
),
);
@@ -602,10 +624,11 @@ class _LaporanScreenState extends ConsumerState<LaporanScreen>
itemBuilder: (context, index) {
final log = logs[index];
final isToday = log.date == DateFormat('yyyy-MM-dd').format(now);
// Build summary text
final List<String> finished = [];
int fardhuCount = log.shalatLogs.values.where((l) => l.completed).length;
int fardhuCount =
log.shalatLogs.values.where((l) => l.completed).length;
if (fardhuCount > 0) finished.add('$fardhuCount Fardhu');
if (log.tilawahLog?.isCompleted == true) finished.add('Tilawah');
if (log.dzikirLog != null) {
@@ -635,7 +658,8 @@ class _LaporanScreenState extends ConsumerState<LaporanScreen>
color: AppColors.primary.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(LucideIcons.checkCircle2, color: AppColors.primary),
child: const Icon(LucideIcons.checkCircle2,
color: AppColors.primary),
),
const SizedBox(width: 16),
Expanded(
@@ -643,7 +667,10 @@ class _LaporanScreenState extends ConsumerState<LaporanScreen>
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
isToday ? 'Hari Ini' : DateFormat('EEEE, d MMM yyyy').format(DateTime.parse(log.date)),
isToday
? 'Hari Ini'
: DateFormat('EEEE, d MMM yyyy')
.format(DateTime.parse(log.date)),
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 15,
@@ -651,10 +678,14 @@ class _LaporanScreenState extends ConsumerState<LaporanScreen>
),
const SizedBox(height: 4),
Text(
finished.isNotEmpty ? finished.join(' • ') : 'Belum ada aktivitas',
finished.isNotEmpty
? finished.join(' • ')
: 'Belum ada aktivitas',
style: TextStyle(
fontSize: 13,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
height: 1.4,
),
),

879
lib/features/notifications/presentation/notification_center_screen.dart Normal file
View File

@@ -0,0 +1,879 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import '../../../app/icons/app_icons.dart';
import '../../../app/theme/app_colors.dart';
import '../../../data/services/notification_analytics_service.dart';
import '../../../data/services/notification_inbox_service.dart';
import '../../../data/services/notification_service.dart';
class NotificationCenterScreen extends StatefulWidget {
const NotificationCenterScreen({super.key});
@override
State<NotificationCenterScreen> createState() =>
_NotificationCenterScreenState();
}
class _NotificationCenterScreenState extends State<NotificationCenterScreen>
with TickerProviderStateMixin {
late final TabController _tabController;
late Future<List<NotificationPendingAlert>> _alarmsFuture;
@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
unawaited(NotificationInboxService.instance.removeByType('prayer'));
_alarmsFuture = NotificationService.instance.pendingAlerts();
NotificationAnalyticsService.instance.track(
'notif_inbox_opened',
dimensions: const <String, dynamic>{'screen': 'notification_center'},
);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
Future<void> _refreshAlarms() async {
setState(() {
_alarmsFuture = NotificationService.instance.pendingAlerts();
});
await _alarmsFuture;
}
Future<void> _markAllRead() async {
await NotificationInboxService.instance.markAllRead();
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Semua pesan sudah ditandai terbaca.')),
);
}
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final inboxListenable = NotificationInboxService.instance.listenable();
return Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () => context.pop(),
icon: const AppIcon(glyph: AppIcons.backArrow),
),
title: const Text('Pemberitahuan'),
centerTitle: false,
actions: [
ListenableBuilder(
listenable: _tabController.animation!,
builder: (context, _) {
final tabIndex = _tabController.index;
if (tabIndex == 0) {
return IconButton(
onPressed: _refreshAlarms,
icon: Icon(
Icons.refresh_rounded,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
);
}
return ValueListenableBuilder(
valueListenable: inboxListenable,
builder: (context, _, __) {
final unread =
NotificationInboxService.instance.unreadCount();
if (unread <= 0) return const SizedBox.shrink();
return TextButton(
onPressed: _markAllRead,
child: const Text('Tandai semua'),
);
},
);
},
),
const SizedBox(width: 6),
],
bottom: TabBar(
controller: _tabController,
indicatorColor: AppColors.primary,
labelColor: AppColors.primary,
unselectedLabelColor: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
tabs: [
FutureBuilder<List<NotificationPendingAlert>>(
future: _alarmsFuture,
builder: (context, snapshot) {
final count = snapshot.data?.length ?? 0;
return Tab(text: count > 0 ? 'Alarm ($count)' : 'Alarm');
},
),
ValueListenableBuilder(
valueListenable: inboxListenable,
builder: (context, _, __) {
final unread = NotificationInboxService.instance.unreadCount();
return Tab(text: unread > 0 ? 'Pesan ($unread)' : 'Pesan');
},
),
],
),
),
body: SafeArea(
top: false,
child: TabBarView(
controller: _tabController,
children: [
_AlarmTab(future: _alarmsFuture, onRefresh: _refreshAlarms),
_InboxTab(),
],
),
),
);
}
}
class _AlarmTab extends StatefulWidget {
const _AlarmTab({
required this.future,
required this.onRefresh,
});
final Future<List<NotificationPendingAlert>> future;
final Future<void> Function() onRefresh;
@override
State<_AlarmTab> createState() => _AlarmTabState();
}
class _AlarmTabState extends State<_AlarmTab> {
String _alarmFilter = 'upcoming';
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
return FutureBuilder<List<NotificationPendingAlert>>(
future: widget.future,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(child: CircularProgressIndicator());
}
final alarms = snapshot.data ?? const <NotificationPendingAlert>[];
final now = DateTime.now();
final upcoming = alarms
.where((alarm) =>
alarm.scheduledAt == null || !alarm.scheduledAt!.isBefore(now))
.toList();
final passed = alarms
.where((alarm) =>
alarm.scheduledAt != null && alarm.scheduledAt!.isBefore(now))
.toList();
final visible = _alarmFilter == 'past' ? passed : upcoming;
if (alarms.isEmpty) {
return RefreshIndicator(
onRefresh: widget.onRefresh,
child: ListView(
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.fromLTRB(16, 16, 16, 24),
children: [
_buildAlarmFilters(
isDark: isDark,
upcomingCount: 0,
passedCount: 0,
),
const SizedBox(height: 20),
AppIcon(
glyph: AppIcons.notification,
size: 40,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
const SizedBox(height: 12),
Text(
'Belum ada alarm aktif',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w700,
),
),
const SizedBox(height: 8),
Text(
'Alarm adzan dan iqamah akan muncul di sini saat sudah dijadwalkan.',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
),
);
}
return RefreshIndicator(
onRefresh: widget.onRefresh,
child: ListView(
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.fromLTRB(16, 16, 16, 24),
children: [
_buildAlarmFilters(
isDark: isDark,
upcomingCount: upcoming.length,
passedCount: passed.length,
),
const SizedBox(height: 12),
if (visible.isEmpty)
Container(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 24,
),
decoration: BoxDecoration(
color: isDark
? AppColors.surfaceDarkElevated
: AppColors.surfaceLight,
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: isDark
? AppColors.primary.withValues(alpha: 0.14)
: AppColors.cream,
),
),
child: Text(
_alarmFilter == 'upcoming'
? 'Tidak ada alarm akan datang.'
: 'Belum ada alarm sudah lewat.',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
),
for (final alarm in visible) ...[
_buildAlarmItem(context, isDark: isDark, alarm: alarm),
const SizedBox(height: 10),
],
],
),
);
},
);
}
Widget _buildAlarmItem(
BuildContext context, {
required bool isDark,
required NotificationPendingAlert alarm,
}) {
final chipColor = _chipColor(alarm.type);
final when = _formatAlarmTime(alarm.scheduledAt);
return Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: isDark ? AppColors.surfaceDarkElevated : AppColors.surfaceLight,
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: isDark
? AppColors.primary.withValues(alpha: 0.16)
: AppColors.cream,
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: chipColor.withValues(alpha: 0.14),
borderRadius: BorderRadius.circular(12),
),
child: Center(
child: AppIcon(
glyph: AppIcons.notification,
size: 18,
color: chipColor,
),
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
alarm.title,
style: Theme.of(context).textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.w700,
),
),
const SizedBox(height: 4),
if (alarm.body.isNotEmpty)
Text(
alarm.body,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
const SizedBox(height: 8),
Row(
children: [
_TypeBadge(
label: _alarmLabel(alarm.type),
color: chipColor,
),
const SizedBox(width: 8),
Text(
when,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
),
],
),
),
],
),
);
}
Widget _buildAlarmFilters({
required bool isDark,
required int upcomingCount,
required int passedCount,
}) {
return Wrap(
spacing: 8,
runSpacing: 8,
children: [
_FilterChip(
label: upcomingCount > 0
? 'Akan Datang ($upcomingCount)'
: 'Akan Datang',
selected: _alarmFilter == 'upcoming',
isDark: isDark,
onTap: () => setState(() => _alarmFilter = 'upcoming'),
),
_FilterChip(
label: passedCount > 0 ? 'Sudah Lewat ($passedCount)' : 'Sudah Lewat',
selected: _alarmFilter == 'past',
isDark: isDark,
onTap: () => setState(() => _alarmFilter = 'past'),
),
],
);
}
Color _chipColor(String type) {
switch (type) {
case 'adhan':
return AppColors.primary;
case 'iqamah':
return const Color(0xFF7B61FF);
case 'checklist':
return const Color(0xFF2D98DA);
case 'system':
return const Color(0xFFE17055);
default:
return AppColors.sage;
}
}
String _alarmLabel(String type) {
switch (type) {
case 'adhan':
return 'Adzan';
case 'iqamah':
return 'Iqamah';
case 'checklist':
return 'Checklist';
case 'system':
return 'Sistem';
default:
return 'Alarm';
}
}
String _formatAlarmTime(DateTime? value) {
if (value == null) return 'Waktu tidak diketahui';
try {
return DateFormat('EEE, d MMM • HH:mm', 'id_ID').format(value);
} catch (_) {
return DateFormat('d/MM • HH:mm').format(value);
}
}
}
class _InboxTab extends StatefulWidget {
@override
State<_InboxTab> createState() => _InboxTabState();
}
class _InboxTabState extends State<_InboxTab> {
String _filter = 'all';
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final inbox = NotificationInboxService.instance;
return ValueListenableBuilder(
valueListenable: inbox.listenable(),
builder: (context, _, __) {
final items = inbox.allItems(filter: _filter);
if (items.isEmpty) {
return ListView(
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.fromLTRB(16, 16, 16, 24),
children: [
_buildFilters(isDark),
const SizedBox(height: 20),
AppIcon(
glyph: AppIcons.notification,
size: 40,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
const SizedBox(height: 12),
Text(
'Belum ada pesan',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w700,
),
),
const SizedBox(height: 8),
Text(
'Pesan sistem dan ringkasan ibadah akan muncul di sini.',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
);
}
return ListView(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 24),
children: [
_buildFilters(isDark),
const SizedBox(height: 12),
...items.map((item) {
final accent = _inboxAccent(item.type);
return Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Dismissible(
key: ValueKey(item.id),
background: _swipeBackground(
isDark: isDark,
icon: item.isRead ? Icons.mark_email_unread : Icons.done,
label: item.isRead ? 'Belum dibaca' : 'Tandai dibaca',
alignment: Alignment.centerLeft,
color: AppColors.primary,
),
secondaryBackground: _swipeBackground(
isDark: isDark,
icon: Icons.delete_outline,
label: 'Hapus',
alignment: Alignment.centerRight,
color: AppColors.errorLight,
),
confirmDismiss: (direction) async {
if (direction == DismissDirection.startToEnd) {
if (item.isRead) {
await inbox.markUnread(item.id);
} else {
await inbox.markRead(item.id);
}
return false;
}
await inbox.remove(item.id);
return true;
},
child: InkWell(
borderRadius: BorderRadius.circular(14),
onTap: () async {
if (!item.isRead) {
await inbox.markRead(item.id);
}
await NotificationAnalyticsService.instance.track(
'notif_inbox_opened',
dimensions: <String, dynamic>{
'event_type': item.type,
'deeplink': item.deeplink ?? '',
},
);
if (!context.mounted) return;
final deeplink = item.deeplink;
if (deeplink != null && deeplink.isNotEmpty) {
if (deeplink.startsWith('/')) {
context.go(deeplink);
} else {
context.push(deeplink);
}
}
},
child: Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: isDark
? AppColors.surfaceDarkElevated
: AppColors.surfaceLight,
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: !item.isRead
? accent.withValues(alpha: isDark ? 0.4 : 0.32)
: (isDark
? AppColors.primary.withValues(alpha: 0.14)
: AppColors.cream),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: accent.withValues(alpha: 0.14),
borderRadius: BorderRadius.circular(12),
),
child: Center(
child: AppIcon(
glyph: _inboxGlyph(item.type),
size: 18,
color: accent,
),
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
item.title,
style: Theme.of(context)
.textTheme
.titleSmall
?.copyWith(
fontWeight: FontWeight.w700),
),
),
if (item.isPinned)
const Padding(
padding: EdgeInsets.only(right: 6),
child: Icon(
Icons.push_pin_rounded,
size: 15,
color: AppColors.navActiveGoldDeep,
),
),
if (!item.isRead)
Container(
width: 8,
height: 8,
decoration: const BoxDecoration(
color: AppColors.primary,
shape: BoxShape.circle,
),
),
],
),
const SizedBox(height: 6),
Text(
item.body,
style: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
const SizedBox(height: 8),
Row(
children: [
_TypeBadge(
label: _inboxLabel(item.type),
color: accent,
),
const SizedBox(width: 8),
Text(
_formatInboxTime(item.createdAt),
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
),
],
),
),
IconButton(
onPressed: () => inbox.togglePinned(item.id),
icon: Icon(
item.isPinned
? Icons.push_pin_rounded
: Icons.push_pin_outlined,
size: 18,
color: item.isPinned
? AppColors.navActiveGoldDeep
: (isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight),
),
),
],
),
),
),
),
);
}),
],
);
},
);
}
Widget _buildFilters(bool isDark) {
return Wrap(
spacing: 8,
runSpacing: 8,
children: [
_FilterChip(
label: 'Semua',
selected: _filter == 'all',
isDark: isDark,
onTap: () => setState(() => _filter = 'all'),
),
_FilterChip(
label: 'Belum Dibaca',
selected: _filter == 'unread',
isDark: isDark,
onTap: () => setState(() => _filter = 'unread'),
),
_FilterChip(
label: 'Sistem',
selected: _filter == 'system',
isDark: isDark,
onTap: () => setState(() => _filter = 'system'),
),
],
);
}
Widget _swipeBackground({
required bool isDark,
required IconData icon,
required String label,
required Alignment alignment,
required Color color,
}) {
return Container(
alignment: alignment,
padding: const EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
color: color.withValues(alpha: isDark ? 0.18 : 0.12),
borderRadius: BorderRadius.circular(14),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 18, color: color),
const SizedBox(width: 6),
Text(
label,
style: TextStyle(
color: color,
fontWeight: FontWeight.w700,
fontSize: 12,
),
),
],
),
);
}
AppIconGlyph _inboxGlyph(String type) {
switch (type) {
case 'system':
return AppIcons.settings;
case 'summary':
case 'streak_risk':
return AppIcons.laporan;
case 'prayer':
return AppIcons.notification;
case 'content':
return AppIcons.notification;
default:
return AppIcons.notification;
}
}
Color _inboxAccent(String type) {
switch (type) {
case 'system':
return const Color(0xFFE17055);
case 'summary':
return const Color(0xFF7B61FF);
case 'prayer':
return AppColors.primary;
case 'content':
return const Color(0xFF00CEC9);
default:
return AppColors.sage;
}
}
String _inboxLabel(String type) {
switch (type) {
case 'system':
return 'Sistem';
case 'summary':
return 'Ringkasan';
case 'streak_risk':
return 'Pengingat';
case 'prayer':
return 'Sholat';
case 'content':
return 'Konten';
default:
return 'Pesan';
}
}
String _formatInboxTime(DateTime value) {
final now = DateTime.now();
final isToday = now.year == value.year &&
now.month == value.month &&
now.day == value.day;
try {
if (isToday) {
return DateFormat('HH:mm', 'id_ID').format(value);
}
return DateFormat('d MMM • HH:mm', 'id_ID').format(value);
} catch (_) {
if (isToday) {
return DateFormat('HH:mm').format(value);
}
return DateFormat('d/MM • HH:mm').format(value);
}
}
}
class _FilterChip extends StatelessWidget {
const _FilterChip({
required this.label,
required this.selected,
required this.isDark,
required this.onTap,
});
final String label;
final bool selected;
final bool isDark;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(999),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: selected
? AppColors.primary.withValues(alpha: isDark ? 0.22 : 0.16)
: (isDark
? AppColors.surfaceDarkElevated
: AppColors.surfaceLightElevated),
borderRadius: BorderRadius.circular(999),
border: Border.all(
color: selected
? AppColors.primary
: (isDark
? AppColors.primary.withValues(alpha: 0.2)
: AppColors.cream),
),
),
child: Text(
label,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
color: selected
? AppColors.primary
: (isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight),
),
),
),
);
}
}
class _TypeBadge extends StatelessWidget {
const _TypeBadge({
required this.label,
required this.color,
});
final String label;
final Color color;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.14),
borderRadius: BorderRadius.circular(10),
),
child: Text(
label,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
color: color,
),
),
);
}
}

1034
lib/features/qibla/presentation/qibla_screen.dart
View File

File diff suppressed because it is too large Load Diff

384
lib/features/quran/presentation/quran_bookmarks_screen.dart
View File

@@ -4,12 +4,18 @@ import 'package:lucide_icons/lucide_icons.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/arabic_text.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/quran_bookmark.dart';
import '../../../data/local/models/app_settings.dart';
import '../../../data/services/muslim_api_service.dart';
class QuranBookmarksScreen extends StatefulWidget {
const QuranBookmarksScreen({super.key});
final bool isSimpleModeTab;
const QuranBookmarksScreen({
super.key,
this.isSimpleModeTab = false,
});
@override
State<QuranBookmarksScreen> createState() => _QuranBookmarksScreenState();
@@ -18,6 +24,8 @@ class QuranBookmarksScreen extends StatefulWidget {
class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
bool _showLatin = true;
bool _showTerjemahan = true;
final Map<int, Future<Map<String, dynamic>?>> _surahFutureCache = {};
final Map<dynamic, Future<_ResolvedBookmarkContent?>> _bookmarkFutureCache = {};
String _readingRoute(int surahId, int verseId) {
final isSimple =
@@ -39,13 +47,16 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
void _showDisplaySettings() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
useSafeArea: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (ctx) => StatefulBuilder(
builder: (context, setModalState) {
final keyboardInset = MediaQuery.of(context).viewInsets.bottom;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
padding: EdgeInsets.fromLTRB(16, 20, 16, 20 + keyboardInset),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
@@ -90,6 +101,59 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
);
}
Future<Map<String, dynamic>?> _getSurah(int surahId) {
return _surahFutureCache.putIfAbsent(
surahId,
() => MuslimApiService.instance.getSurah(surahId),
);
}
Future<_ResolvedBookmarkContent?> _loadResolvedBookmarkContent(
QuranBookmark bookmark,
) async {
final surah = await _getSurah(bookmark.surahId);
final verses = List<Map<String, dynamic>>.from(surah?['ayat'] ?? []);
final verseIndex = bookmark.verseId - 1;
if (verseIndex < 0 || verseIndex >= verses.length) return null;
final verse = verses[verseIndex];
final resolved = _ResolvedBookmarkContent(
verseText: verse['teksArab']?.toString().trim().isNotEmpty == true
? verse['teksArab'].toString().trim()
: bookmark.verseText,
verseLatin: verse['teksLatin']?.toString().trim().isNotEmpty == true
? verse['teksLatin'].toString().trim()
: bookmark.verseLatin,
verseTranslation:
verse['teksIndonesia']?.toString().trim().isNotEmpty == true
? verse['teksIndonesia'].toString().trim()
: bookmark.verseTranslation,
);
final needsUpdate = bookmark.verseText != resolved.verseText ||
bookmark.verseLatin != resolved.verseLatin ||
bookmark.verseTranslation != resolved.verseTranslation;
if (needsUpdate) {
bookmark.verseText = resolved.verseText;
bookmark.verseLatin = resolved.verseLatin;
bookmark.verseTranslation = resolved.verseTranslation;
await bookmark.save();
}
return resolved;
}
Future<_ResolvedBookmarkContent?> _getResolvedBookmarkContent(
QuranBookmark bookmark,
) {
final bookmarkKey = bookmark.key ?? '${bookmark.surahId}_${bookmark.verseId}';
return _bookmarkFutureCache.putIfAbsent(
bookmarkKey,
() => _loadResolvedBookmarkContent(bookmark),
);
}
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
@@ -105,94 +169,106 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
),
],
),
body: ValueListenableBuilder(
valueListenable: Hive.box<QuranBookmark>(HiveBoxes.bookmarks).listenable(),
builder: (context, Box<QuranBookmark> box, _) {
if (box.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
LucideIcons.bookmark,
size: 64,
color: AppColors.primary.withValues(alpha: 0.3),
),
const SizedBox(height: 16),
Text(
'Belum ada markah',
body: SafeArea(
top: false,
bottom: !widget.isSimpleModeTab,
child: ValueListenableBuilder(
valueListenable:
Hive.box<QuranBookmark>(HiveBoxes.bookmarks).listenable(),
builder: (context, Box<QuranBookmark> box, _) {
if (box.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
LucideIcons.bookmark,
size: 64,
color: AppColors.primary.withValues(alpha: 0.3),
),
const SizedBox(height: 16),
Text(
'Belum ada markah',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: isDark ? Colors.white : Colors.black87,
),
),
const SizedBox(height: 8),
Text(
'Tandai ayat saat membaca Al-Quran',
style: TextStyle(
fontSize: 14,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
textAlign: TextAlign.center,
),
],
),
);
}
// Filter bookmarks
final allBookmarks = box.values.toList();
final lastRead = allBookmarks.where((b) => b.isLastRead).toList();
final favorites = allBookmarks.where((b) => !b.isLastRead).toList()
..sort((a, b) => b.savedAt.compareTo(a.savedAt));
return ListView(
padding: const EdgeInsets.all(16),
children: [
if (lastRead.isNotEmpty) ...[
const Text(
'TERAKHIR DIBACA',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: isDark ? Colors.white : Colors.black87,
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 1.5,
color: AppColors.sage,
),
),
const SizedBox(height: 8),
Text(
'Tandai ayat saat membaca Al-Quran',
style: TextStyle(
fontSize: 14,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 12),
_buildBookmarkCard(context, lastRead.first, isDark, box,
isLastRead: true),
const SizedBox(height: 24),
],
),
if (favorites.isNotEmpty) ...[
const Text(
'AYAT FAVORIT',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 1.5,
color: AppColors.sage,
),
),
const SizedBox(height: 12),
...favorites.map((fav) => Padding(
padding: const EdgeInsets.only(bottom: 12),
child: _buildBookmarkCard(context, fav, isDark, box,
isLastRead: false),
)),
],
],
);
}
// Filter bookmarks
final allBookmarks = box.values.toList();
final lastRead = allBookmarks.where((b) => b.isLastRead).toList();
final favorites = allBookmarks.where((b) => !b.isLastRead).toList()
..sort((a, b) => b.savedAt.compareTo(a.savedAt));
return ListView(
padding: const EdgeInsets.all(16),
children: [
if (lastRead.isNotEmpty) ...[
const Text(
'TERAKHIR DIBACA',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 1.5,
color: AppColors.sage,
),
),
const SizedBox(height: 12),
_buildBookmarkCard(context, lastRead.first, isDark, box, isLastRead: true),
const SizedBox(height: 24),
],
if (favorites.isNotEmpty) ...[
const Text(
'AYAT FAVORIT',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 1.5,
color: AppColors.sage,
),
),
const SizedBox(height: 12),
...favorites.map((fav) => Padding(
padding: const EdgeInsets.only(bottom: 12),
child: _buildBookmarkCard(context, fav, isDark, box, isLastRead: false),
)),
],
],
);
},
},
),
),
);
}
Widget _buildBookmarkCard(BuildContext context, QuranBookmark bookmark, bool isDark, Box<QuranBookmark> box, {required bool isLastRead}) {
Widget _buildBookmarkCard(BuildContext context, QuranBookmark bookmark,
bool isDark, Box<QuranBookmark> box,
{required bool isLastRead}) {
final dateStr = DateFormat('dd MMM yyyy, HH:mm').format(bookmark.savedAt);
final resolvedFuture = _getResolvedBookmarkContent(bookmark);
return InkWell(
onTap: () => context.push(_readingRoute(bookmark.surahId, bookmark.verseId)),
onTap: () =>
context.push(_readingRoute(bookmark.surahId, bookmark.verseId)),
borderRadius: BorderRadius.circular(16),
child: Container(
padding: const EdgeInsets.all(16),
@@ -200,18 +276,22 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
color: isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: isLastRead
? AppColors.primary.withValues(alpha: 0.3)
: (isDark ? AppColors.primary.withValues(alpha: 0.1) : AppColors.cream),
color: isLastRead
? AppColors.primary.withValues(alpha: 0.3)
: (isDark
? AppColors.primary.withValues(alpha: 0.1)
: AppColors.cream),
width: isLastRead ? 1.5 : 1.0,
),
boxShadow: isLastRead ? [
BoxShadow(
color: AppColors.primary.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 4),
)
] : null,
boxShadow: isLastRead
? [
BoxShadow(
color: AppColors.primary.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 4),
)
]
: null,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -220,7 +300,8 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: AppColors.primary.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(8),
@@ -229,7 +310,8 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
mainAxisSize: MainAxisSize.min,
children: [
if (isLastRead) ...[
const Icon(LucideIcons.pin, size: 12, color: AppColors.primary),
const Icon(LucideIcons.pin,
size: 12, color: AppColors.primary),
const SizedBox(width: 4),
],
Text(
@@ -244,7 +326,8 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
),
),
IconButton(
icon: const Icon(LucideIcons.trash2, color: Colors.red, size: 20),
icon: const Icon(LucideIcons.trash2,
color: Colors.red, size: 20),
onPressed: () => box.delete(bookmark.key),
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
@@ -252,76 +335,93 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
],
),
const SizedBox(height: 16),
Align(
alignment: Alignment.centerRight,
child: Text(
bookmark.verseText,
textAlign: TextAlign.right,
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 22,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
),
if (_showLatin && bookmark.verseLatin != null) ...[
const SizedBox(height: 12),
Text(
bookmark.verseLatin!,
style: const TextStyle(
fontSize: 13,
fontStyle: FontStyle.italic,
color: AppColors.primary,
),
),
],
if (_showTerjemahan && bookmark.verseTranslation != null) ...[
const SizedBox(height: 8),
Text(
bookmark.verseTranslation!,
style: TextStyle(
fontSize: 14,
height: 1.6,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
),
),
],
FutureBuilder<_ResolvedBookmarkContent?>(
future: resolvedFuture,
builder: (context, snapshot) {
final content = snapshot.data ??
_ResolvedBookmarkContent(
verseText: bookmark.verseText,
verseLatin: bookmark.verseLatin,
verseTranslation: bookmark.verseTranslation,
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerRight,
child: ArabicText(
content.verseText,
textAlign: TextAlign.right,
baseFontSize: 22,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
if (_showLatin && content.verseLatin != null) ...[
const SizedBox(height: 12),
Text(
content.verseLatin!,
style: const TextStyle(
fontSize: 13,
fontStyle: FontStyle.italic,
color: AppColors.primary,
),
),
],
if (_showTerjemahan &&
content.verseTranslation != null) ...[
const SizedBox(height: 8),
Text(
content.verseTranslation!,
style: TextStyle(
fontSize: 14,
height: 1.6,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
],
);
},
),
const SizedBox(height: 16),
if (isLastRead) ...[
SizedBox(
width: double.infinity,
child: FilledButton.icon(
onPressed: () =>
context.push(_readingRoute(bookmark.surahId, bookmark.verseId)),
onPressed: () => context
.push(_readingRoute(bookmark.surahId, bookmark.verseId)),
icon: const Icon(LucideIcons.bookOpen, size: 18),
label: const Text('Lanjutkan Membaca'),
style: FilledButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
),
),
const SizedBox(height: 12),
],
Row(
children: [
Icon(
LucideIcons.clock,
size: 12,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
const SizedBox(width: 4),
Text(
'${isLastRead ? 'Ditandai' : 'Disimpan'}: $dateStr',
style: TextStyle(
fontSize: 10,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
@@ -332,3 +432,15 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
);
}
}
class _ResolvedBookmarkContent {
const _ResolvedBookmarkContent({
required this.verseText,
this.verseLatin,
this.verseTranslation,
});
final String verseText;
final String? verseLatin;
final String? verseTranslation;
}

264
lib/features/quran/presentation/quran_enrichment_screen.dart
View File

@@ -1,10 +1,18 @@
import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/arabic_text.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/app_settings.dart';
import '../../../data/services/muslim_api_service.dart';
class QuranEnrichmentScreen extends StatefulWidget {
const QuranEnrichmentScreen({super.key});
final bool isSimpleModeTab;
const QuranEnrichmentScreen({
super.key,
this.isSimpleModeTab = false,
});
@override
State<QuranEnrichmentScreen> createState() => _QuranEnrichmentScreenState();
@@ -15,12 +23,12 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
late TabController _tabController;
final TextEditingController _searchController = TextEditingController();
final TextEditingController _pageController = TextEditingController(text: '1');
final TextEditingController _pageController =
TextEditingController(text: '1');
List<Map<String, dynamic>> _surahs = [];
List<Map<String, dynamic>> _searchResults = [];
List<Map<String, dynamic>> _tafsirItems = [];
List<Map<String, dynamic>> _asbabItems = [];
List<Map<String, dynamic>> _juzItems = [];
List<Map<String, dynamic>> _pageItems = [];
List<Map<String, dynamic>> _themeItems = [];
@@ -31,7 +39,6 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
bool _loadingInit = true;
bool _loadingSearch = false;
bool _loadingTafsir = false;
bool _loadingAsbab = false;
bool _loadingPage = false;
String? _error;
@@ -42,7 +49,7 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
@override
void initState() {
super.initState();
_tabController = TabController(length: 7, vsync: this);
_tabController = TabController(length: 6, vsync: this);
_bootstrap();
}
@@ -69,9 +76,8 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
if (!mounted) return;
setState(() {
_surahs = surahs;
_selectedSurahId = surahs.isNotEmpty
? ((surahs.first['nomor'] as int?) ?? 1)
: 1;
_selectedSurahId =
surahs.isNotEmpty ? ((surahs.first['nomor'] as int?) ?? 1) : 1;
_juzItems = juz;
_themeItems = themes;
_asmaItems = asma;
@@ -79,7 +85,6 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
});
await _loadTafsirForSelectedSurah();
await _loadAsbabForSelectedSurah();
await _loadPageAyah();
} catch (_) {
if (!mounted) return;
@@ -117,16 +122,6 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
});
}
Future<void> _loadAsbabForSelectedSurah() async {
setState(() => _loadingAsbab = true);
final result = await MuslimApiService.instance.getAsbabBySurah(_selectedSurahId);
if (!mounted) return;
setState(() {
_asbabItems = result;
_loadingAsbab = false;
});
}
Future<void> _loadPageAyah() async {
setState(() => _loadingPage = true);
final page = int.tryParse(_pageController.text.trim()) ?? _selectedPage;
@@ -181,6 +176,62 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
return 'Surah $surahId';
}
void _showArabicFontSettings() {
final settingsBox = Hive.box<AppSettings>(HiveBoxes.settings);
final settings = settingsBox.get('default') ?? AppSettings();
if (!settings.isInBox) {
settingsBox.put('default', settings);
}
double arabicFontSize = settings.arabicFontSize;
showModalBottomSheet(
context: context,
isScrollControlled: true,
useSafeArea: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (ctx) => StatefulBuilder(
builder: (context, setModalState) {
final keyboardInset = MediaQuery.of(context).viewInsets.bottom;
return Padding(
padding: EdgeInsets.fromLTRB(16, 20, 16, 20 + keyboardInset),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Pengaturan Tampilan',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 16),
const Text('Ukuran Font Arab'),
Slider(
value: arabicFontSize,
min: 16,
max: 40,
divisions: 12,
label: '${arabicFontSize.round()}pt',
activeColor: AppColors.primary,
onChanged: (value) {
setModalState(() => arabicFontSize = value);
settings.arabicFontSize = value;
if (settings.isInBox) {
settings.save();
} else {
settingsBox.put('default', settings);
}
},
),
const SizedBox(height: 8),
],
),
);
},
),
);
}
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
@@ -188,12 +239,18 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
return Scaffold(
appBar: AppBar(
title: const Text('Quran Enrichment'),
actionsPadding: const EdgeInsets.only(right: 8),
actions: [
IconButton(
onPressed: _bootstrap,
icon: const Icon(LucideIcons.refreshCw),
tooltip: 'Muat ulang',
),
IconButton(
onPressed: _showArabicFontSettings,
icon: const Icon(LucideIcons.settings2),
tooltip: 'Pengaturan tampilan',
),
],
bottom: TabBar(
controller: _tabController,
@@ -206,7 +263,6 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
tabs: const [
Tab(text: 'Cari'),
Tab(text: 'Tafsir'),
Tab(text: 'Asbab'),
Tab(text: 'Juz'),
Tab(text: 'Halaman'),
Tab(text: 'Tema'),
@@ -214,31 +270,34 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
],
),
),
body: _loadingInit
? const Center(child: CircularProgressIndicator())
: _error != null
? Center(
child: Text(
_error!,
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
body: SafeArea(
top: false,
bottom: !widget.isSimpleModeTab,
child: _loadingInit
? const Center(child: CircularProgressIndicator())
: _error != null
? Center(
child: Text(
_error!,
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
)
: TabBarView(
controller: _tabController,
children: [
_buildSearchTab(context, isDark),
_buildTafsirTab(context, isDark),
_buildJuzTab(context, isDark),
_buildPageTab(context, isDark),
_buildThemeTab(context, isDark),
_buildAsmaTab(context, isDark),
],
),
)
: TabBarView(
controller: _tabController,
children: [
_buildSearchTab(context, isDark),
_buildTafsirTab(context, isDark),
_buildAsbabTab(context, isDark),
_buildJuzTab(context, isDark),
_buildPageTab(context, isDark),
_buildThemeTab(context, isDark),
_buildAsmaTab(context, isDark),
],
),
),
);
}
@@ -342,15 +401,12 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
const SizedBox(height: 8),
Align(
alignment: Alignment.centerRight,
child: Text(
child: ArabicText(
ayah['arab']?.toString() ?? '',
textAlign: TextAlign.right,
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 24,
fontWeight: FontWeight.w400,
height: 1.8,
),
baseFontSize: 24,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
const SizedBox(height: 8),
@@ -396,13 +452,10 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
ArabicText(
word['arab']?.toString() ?? '',
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 18,
fontWeight: FontWeight.w400,
),
baseFontSize: 18,
fontWeight: FontWeight.w400,
),
const SizedBox(height: 2),
Text(
@@ -474,41 +527,6 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
);
}
Widget _buildAsbabTab(BuildContext context, bool isDark) {
return Column(
children: [
_buildSurahSelector(
onChanged: (value) {
setState(() => _selectedSurahId = value);
_loadAsbabForSelectedSurah();
},
),
Expanded(
child: _loadingAsbab
? const Center(child: CircularProgressIndicator())
: _asbabItems.isEmpty
? _emptyText(
isDark,
'Belum ada data asbabun nuzul untuk surah ini',
)
: ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
itemCount: _asbabItems.length,
itemBuilder: (context, index) {
final item = _asbabItems[index];
final ayah = item['nomorAyat']?.toString() ?? '-';
return _buildCard(
isDark,
title: 'Ayat $ayah',
body: item['text']?.toString() ?? '',
);
},
),
),
],
);
}
Widget _buildJuzTab(BuildContext context, bool isDark) {
if (_juzItems.isEmpty) {
return _emptyText(isDark, 'Data juz tidak tersedia');
@@ -575,11 +593,11 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
final surahId = (item['surah'] as num?)?.toInt() ?? 0;
final ayah = item['ayah']?.toString() ?? '-';
return _buildCard(
return _buildArabicCard(
isDark,
title: '${_surahNameById(surahId)} : $ayah',
body:
'${item['arab']?.toString() ?? ''}\n\n${item['text']?.toString() ?? ''}',
arabic: item['arab']?.toString() ?? '',
translation: item['text']?.toString() ?? '',
);
},
),
@@ -652,13 +670,10 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
ArabicText(
item['arab']?.toString() ?? '',
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 22,
fontWeight: FontWeight.w400,
),
baseFontSize: 22,
fontWeight: FontWeight.w400,
),
Text(
item['latin']?.toString() ?? '',
@@ -727,7 +742,54 @@ class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
);
}
Widget _buildCard(bool isDark, {required String title, required String body}) {
Widget _buildArabicCard(
bool isDark, {
required String title,
required String arabic,
required String translation,
}) {
return Container(
margin: const EdgeInsets.only(bottom: 10),
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isDark
? AppColors.primary.withValues(alpha: 0.1)
: AppColors.cream,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
const SizedBox(height: 8),
Align(
alignment: Alignment.centerRight,
child: ArabicText(
arabic,
textAlign: TextAlign.right,
baseFontSize: 22,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
const SizedBox(height: 8),
Text(translation, style: const TextStyle(height: 1.5)),
],
),
);
}
Widget _buildCard(bool isDark,
{required String title, required String body}) {
return Container(
margin: const EdgeInsets.only(bottom: 10),
padding: const EdgeInsets.all(14),

1102
lib/features/quran/presentation/quran_murattal_screen.dart
View File

File diff suppressed because it is too large Load Diff

1190
lib/features/quran/presentation/quran_reading_screen.dart
View File

File diff suppressed because it is too large Load Diff

252
lib/features/quran/presentation/quran_screen.dart
View File

@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:hive_flutter/hive_flutter.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/arabic_text.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/app_settings.dart';
import '../../../data/local/models/quran_bookmark.dart';
@@ -47,13 +48,16 @@ class _QuranScreenState extends ConsumerState<QuranScreen> {
void _showDisplaySettings() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
useSafeArea: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (ctx) => StatefulBuilder(
builder: (context, setModalState) {
final keyboardInset = MediaQuery.of(context).viewInsets.bottom;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
padding: EdgeInsets.fromLTRB(16, 20, 16, 20 + keyboardInset),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
@@ -134,140 +138,148 @@ class _QuranScreenState extends ConsumerState<QuranScreen> {
),
],
),
body: Column(
children: [
// Search bar
Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 12),
child: Container(
decoration: BoxDecoration(
color: isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isDark
? AppColors.primary.withValues(alpha: 0.1)
: AppColors.cream,
body: SafeArea(
top: false,
bottom: !widget.isSimpleModeTab,
child: Column(
children: [
// Search bar
Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 12),
child: Container(
decoration: BoxDecoration(
color:
isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isDark
? AppColors.primary.withValues(alpha: 0.1)
: AppColors.cream,
),
),
),
child: TextField(
onChanged: (v) => setState(() => _searchQuery = v),
decoration: InputDecoration(
hintText: 'Cari surah...',
prefixIcon: Icon(LucideIcons.search,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight),
border: InputBorder.none,
contentPadding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
child: TextField(
onChanged: (v) => setState(() => _searchQuery = v),
decoration: InputDecoration(
hintText: 'Cari surah...',
prefixIcon: Icon(LucideIcons.search,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight),
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 14),
),
),
),
),
),
// Surah list
Expanded(
child: _loading
? const Center(child: CircularProgressIndicator())
: filtered.isEmpty
? Center(
child: Text(
_searchQuery.isEmpty
? 'Tidak dapat memuat data'
: 'Surah tidak ditemukan',
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
)
: ValueListenableBuilder(
valueListenable: Hive.box<QuranBookmark>(HiveBoxes.bookmarks).listenable(),
builder: (context, box, _) {
return ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 16),
itemCount: filtered.length,
separatorBuilder: (_, __) => Divider(
height: 1,
// Surah list
Expanded(
child: _loading
? const Center(child: CircularProgressIndicator())
: filtered.isEmpty
? Center(
child: Text(
_searchQuery.isEmpty
? 'Tidak dapat memuat data'
: 'Surah tidak ditemukan',
style: TextStyle(
color: isDark
? AppColors.primary.withValues(alpha: 0.08)
: AppColors.cream,
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
itemBuilder: (context, i) {
final surah = filtered[i];
final number = surah['nomor'] ?? (i + 1);
final nameLatin = surah['namaLatin'] ?? '';
final nameArabic = surah['nama'] ?? '';
final totalVerses = surah['jumlahAyat'] ?? 0;
final tempatTurun = surah['tempatTurun'] ?? '';
final arti = surah['arti'] ?? '';
final hasLastRead = box.values.any((b) => b.isLastRead && b.surahId == number);
),
)
: ValueListenableBuilder(
valueListenable:
Hive.box<QuranBookmark>(HiveBoxes.bookmarks)
.listenable(),
builder: (context, box, _) {
return ListView.separated(
padding:
const EdgeInsets.symmetric(horizontal: 16),
itemCount: filtered.length,
separatorBuilder: (_, __) => Divider(
height: 1,
color: isDark
? AppColors.primary.withValues(alpha: 0.08)
: AppColors.cream,
),
itemBuilder: (context, i) {
final surah = filtered[i];
final number = surah['nomor'] ?? (i + 1);
final nameLatin = surah['namaLatin'] ?? '';
final nameArabic = surah['nama'] ?? '';
final totalVerses = surah['jumlahAyat'] ?? 0;
final tempatTurun = surah['tempatTurun'] ?? '';
final arti = surah['arti'] ?? '';
return ListTile(
onTap: () => context.push(widget.isSimpleModeTab
? '/quran/$number'
: '/tools/quran/$number'),
contentPadding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 6),
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: AppColors.primary
.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
'$number',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primary,
final hasLastRead = box.values.any(
(b) => b.isLastRead && b.surahId == number);
return ListTile(
onTap: () => context.push(
widget.isSimpleModeTab
? '/quran/$number'
: '/tools/quran/$number'),
contentPadding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 6),
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: AppColors.primary
.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
'$number',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
),
),
),
title: Row(
children: [
Text(
nameLatin,
style: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 15,
title: Row(
children: [
Text(
nameLatin,
style: const TextStyle(
fontWeight: FontWeight.w600,
fontSize: 15,
),
),
),
if (hasLastRead) ...[
const SizedBox(width: 8),
const Icon(LucideIcons.pin, size: 14, color: AppColors.primary),
if (hasLastRead) ...[
const SizedBox(width: 8),
const Icon(LucideIcons.pin,
size: 14, color: AppColors.primary),
],
],
],
),
subtitle: Text(
'$arti • $totalVerses Ayat • $tempatTurun',
style: TextStyle(
fontSize: 12,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
trailing: Text(
nameArabic,
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 18,
subtitle: Text(
'$arti • $totalVerses Ayat • $tempatTurun',
style: TextStyle(
fontSize: 12,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
trailing: ArabicText(
nameArabic,
baseFontSize: 18,
fontWeight: FontWeight.w400,
),
),
);
},
);
},
),
),
],
);
},
);
},
),
),
],
),
),
);
}

1377
lib/features/settings/presentation/settings_screen.dart
View File

File diff suppressed because it is too large Load Diff

282
lib/features/tools/presentation/tools_screen.dart
View File

@@ -1,10 +1,15 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:hive_flutter/hive_flutter.dart';
import '../../../app/icons/app_icons.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/ayat_today_card.dart';
import '../../../core/widgets/notification_bell_button.dart';
import '../../../core/widgets/tool_card.dart';
import '../../../data/services/muslim_api_service.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/app_settings.dart';
class ToolsScreen extends ConsumerWidget {
const ToolsScreen({super.key});
@@ -12,19 +17,72 @@ class ToolsScreen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final isSimpleMode =
Hive.box<AppSettings>(HiveBoxes.settings).get('default')?.simpleMode ??
false;
final cards = <Widget>[
if (!isSimpleMode)
ToolCard(
icon: AppIcons.quran,
title: "Al-Qur'an\nTerjemahan",
color: const Color(0xFF00B894),
isDark: isDark,
onTap: () => context.push('/tools/quran'),
),
ToolCard(
icon: AppIcons.murattal,
title: "Qur'an\nMurattal",
color: const Color(0xFF7B61FF),
isDark: isDark,
onTap: () => context.push('/tools/quran/1/murattal'),
),
ToolCard(
icon: AppIcons.qibla,
title: 'Arah\nKiblat',
color: const Color(0xFF0984E3),
isDark: isDark,
onTap: () => context.push('/tools/qibla'),
),
if (!isSimpleMode)
ToolCard(
icon: AppIcons.dzikir,
title: 'Dzikir\nHarian',
color: AppColors.primary,
isDark: isDark,
onTap: () => context.push('/tools/dzikir'),
),
ToolCard(
icon: AppIcons.doa,
title: 'Kumpulan\nDoa',
color: const Color(0xFFE17055),
isDark: isDark,
onTap: () => context.push('/tools/doa'),
),
ToolCard(
icon: AppIcons.hadits,
title: "Hadits\nArba'in",
color: const Color(0xFF6C5CE7),
isDark: isDark,
onTap: () => context.push('/tools/hadits'),
),
ToolCard(
icon: AppIcons.quranEnrichment,
title: "Pendalaman\nAl-Qur'an",
color: const Color(0xFF00CEC9),
isDark: isDark,
onTap: () => context.push('/tools/quran/enrichment'),
),
];
return Scaffold(
appBar: AppBar(
title: const Text('Alat Islami'),
centerTitle: false,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(LucideIcons.bell),
),
const NotificationBellButton(),
IconButton(
onPressed: () => context.push('/settings'),
icon: const Icon(LucideIcons.settings),
icon: const AppIcon(glyph: AppIcons.settings),
),
const SizedBox(width: 8),
],
@@ -34,7 +92,7 @@ class ToolsScreen extends ConsumerWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
const Text(
'AKSES CEPAT',
style: TextStyle(
fontSize: 11,
@@ -44,193 +102,37 @@ class ToolsScreen extends ConsumerWidget {
),
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: ToolCard(
icon: LucideIcons.bookOpen,
title: 'Al-Quran\nTerjemahan',
color: const Color(0xFF00B894),
isDark: isDark,
onTap: () => context.push('/tools/quran'),
),
),
const SizedBox(width: 12),
Expanded(
child: ToolCard(
icon: LucideIcons.headphones,
title: 'Quran\nMurattal',
color: const Color(0xFF7B61FF),
isDark: isDark,
onTap: () => context.push('/tools/quran/1/murattal'),
),
),
],
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: ToolCard(
icon: LucideIcons.compass,
title: 'Arah\nKiblat',
color: const Color(0xFF0984E3),
isDark: isDark,
onTap: () => context.push('/tools/qibla'),
),
),
const SizedBox(width: 12),
Expanded(
child: ToolCard(
icon: LucideIcons.sparkles,
title: 'Dzikir\nHarian',
color: AppColors.primary,
isDark: isDark,
onTap: () => context.push('/tools/dzikir'),
),
),
],
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: ToolCard(
icon: LucideIcons.heart,
title: 'Kumpulan\nDoa',
color: const Color(0xFFE17055),
isDark: isDark,
onTap: () => context.push('/tools/doa'),
),
),
const SizedBox(width: 12),
Expanded(
child: ToolCard(
icon: LucideIcons.library,
title: "Hadits\nArba'in",
color: const Color(0xFF6C5CE7),
isDark: isDark,
onTap: () => context.push('/tools/hadits'),
),
),
],
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: ToolCard(
icon: LucideIcons.sparkles,
title: 'Quran\nEnrichment',
color: const Color(0xFF00CEC9),
isDark: isDark,
onTap: () => context.push('/tools/quran/enrichment'),
),
),
const Expanded(child: SizedBox()),
],
),
_buildQuickActionsGrid(cards),
const SizedBox(height: 28),
FutureBuilder<Map<String, dynamic>?>(
future: MuslimApiService.instance.getDailyAyat(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: isDark
? AppColors.primary.withValues(alpha: 0.08)
: const Color(0xFFF5F9F0),
borderRadius: BorderRadius.circular(16),
),
child: const Center(child: CircularProgressIndicator()),
);
}
if (!snapshot.hasData || snapshot.data == null) {
return const SizedBox.shrink();
}
final data = snapshot.data!;
return Container(
width: double.infinity,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: isDark
? AppColors.primary.withValues(alpha: 0.08)
: const Color(0xFFF5F9F0),
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Ayat Hari Ini',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
IconButton(
icon: Icon(
LucideIcons.share2,
size: 18,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
onPressed: () {},
),
],
),
const SizedBox(height: 12),
Align(
alignment: Alignment.centerRight,
child: Text(
data['teksArab'] ?? '',
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 24,
fontWeight: FontWeight.w400,
height: 1.8,
),
textAlign: TextAlign.right,
),
),
const SizedBox(height: 12),
Text(
'"${data['teksIndonesia'] ?? ''}"',
style: TextStyle(
fontSize: 14,
fontStyle: FontStyle.italic,
height: 1.5,
color: isDark ? Colors.white : Colors.black87,
),
),
const SizedBox(height: 12),
Text(
'QS. ${data['surahName']}: ${data['nomorAyat']}',
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.primary,
),
),
],
),
);
},
AyatTodayCard(
headerText: 'Ayat Hari Ini',
headerStyle: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
),
),
);
}
Widget _buildQuickActionsGrid(List<Widget> cards) {
const spacing = 12.0;
return LayoutBuilder(
builder: (context, constraints) {
final cardWidth = (constraints.maxWidth - spacing) / 2;
return Wrap(
spacing: spacing,
runSpacing: spacing,
children: [
for (final card in cards) SizedBox(width: cardWidth, child: card),
],
);
},
);
}
}