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

feat: checkpoint API migration and dzikir UX updates

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-03-16 00:30:32 +07:00
parent c4696f2d9f
commit a049129a35
85 changed files with 4285 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

773
lib/features/quran/presentation/quran_enrichment_screen.dart Normal file
View File

@@ -0,0 +1,773 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../app/theme/app_colors.dart';
import '../../../data/services/muslim_api_service.dart';
class QuranEnrichmentScreen extends StatefulWidget {
const QuranEnrichmentScreen({super.key});
@override
State<QuranEnrichmentScreen> createState() => _QuranEnrichmentScreenState();
}
class _QuranEnrichmentScreenState extends State<QuranEnrichmentScreen>
with SingleTickerProviderStateMixin {
late TabController _tabController;
final TextEditingController _searchController = TextEditingController();
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 = [];
List<Map<String, dynamic>> _asmaItems = [];
int _selectedSurahId = 1;
int _selectedPage = 1;
bool _loadingInit = true;
bool _loadingSearch = false;
bool _loadingTafsir = false;
bool _loadingAsbab = false;
bool _loadingPage = false;
String? _error;
final Set<String> _expandedWordByWord = {};
final Map<String, List<Map<String, dynamic>>> _wordByWord = {};
final Set<String> _loadingWordByWord = {};
@override
void initState() {
super.initState();
_tabController = TabController(length: 7, vsync: this);
_bootstrap();
}
@override
void dispose() {
_tabController.dispose();
_searchController.dispose();
_pageController.dispose();
super.dispose();
}
Future<void> _bootstrap() async {
setState(() {
_loadingInit = true;
_error = null;
});
try {
final surahs = await MuslimApiService.instance.getAllSurahs();
final juz = await MuslimApiService.instance.getJuzList();
final themes = await MuslimApiService.instance.getThemes();
final asma = await MuslimApiService.instance.getAsmaulHusna();
if (!mounted) return;
setState(() {
_surahs = surahs;
_selectedSurahId = surahs.isNotEmpty
? ((surahs.first['nomor'] as int?) ?? 1)
: 1;
_juzItems = juz;
_themeItems = themes;
_asmaItems = asma;
_loadingInit = false;
});
await _loadTafsirForSelectedSurah();
await _loadAsbabForSelectedSurah();
await _loadPageAyah();
} catch (_) {
if (!mounted) return;
setState(() {
_loadingInit = false;
_error = 'Gagal memuat data enrichment';
});
}
}
Future<void> _runSearch() async {
final query = _searchController.text.trim();
if (query.isEmpty) {
setState(() => _searchResults = []);
return;
}
setState(() => _loadingSearch = true);
final result = await MuslimApiService.instance.searchAyah(query);
if (!mounted) return;
setState(() {
_searchResults = result;
_loadingSearch = false;
});
}
Future<void> _loadTafsirForSelectedSurah() async {
setState(() => _loadingTafsir = true);
final result =
await MuslimApiService.instance.getTafsirBySurah(_selectedSurahId);
if (!mounted) return;
setState(() {
_tafsirItems = result;
_loadingTafsir = false;
});
}
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;
final safePage = page.clamp(1, 604);
final result = await MuslimApiService.instance.getAyahByPage(safePage);
if (!mounted) return;
setState(() {
_selectedPage = safePage;
_pageController.text = '$safePage';
_pageItems = result;
_loadingPage = false;
});
}
Future<void> _toggleWordByWord(Map<String, dynamic> ayah) async {
final surah = (ayah['surah'] as num?)?.toInt();
final ayahNum = (ayah['ayah'] as num?)?.toInt();
if (surah == null || ayahNum == null) return;
final key = '$surah:$ayahNum';
final expanded = _expandedWordByWord.contains(key);
if (expanded) {
setState(() => _expandedWordByWord.remove(key));
return;
}
if (_wordByWord.containsKey(key)) {
setState(() => _expandedWordByWord.add(key));
return;
}
setState(() {
_loadingWordByWord.add(key);
_expandedWordByWord.add(key);
});
final words = await MuslimApiService.instance.getWordByWord(surah, ayahNum);
if (!mounted) return;
setState(() {
_wordByWord[key] = words;
_loadingWordByWord.remove(key);
});
}
String _surahNameById(int surahId) {
for (final s in _surahs) {
if (s['nomor'] == surahId) {
return s['namaLatin']?.toString() ?? 'Surah $surahId';
}
}
return 'Surah $surahId';
}
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
return Scaffold(
appBar: AppBar(
title: const Text('Quran Enrichment'),
actions: [
IconButton(
onPressed: _bootstrap,
icon: const Icon(LucideIcons.refreshCw),
tooltip: 'Muat ulang',
),
],
bottom: TabBar(
controller: _tabController,
isScrollable: true,
labelColor: AppColors.primary,
unselectedLabelColor: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
indicatorColor: AppColors.primary,
tabs: const [
Tab(text: 'Cari'),
Tab(text: 'Tafsir'),
Tab(text: 'Asbab'),
Tab(text: 'Juz'),
Tab(text: 'Halaman'),
Tab(text: 'Tema'),
Tab(text: 'Asmaul Husna'),
],
),
),
body: _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),
_buildAsbabTab(context, isDark),
_buildJuzTab(context, isDark),
_buildPageTab(context, isDark),
_buildThemeTab(context, isDark),
_buildAsmaTab(context, isDark),
],
),
);
}
Widget _buildSearchTab(BuildContext context, bool isDark) {
return Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 8),
child: Row(
children: [
Expanded(
child: TextField(
controller: _searchController,
textInputAction: TextInputAction.search,
onSubmitted: (_) => _runSearch(),
decoration: InputDecoration(
hintText: 'Cari ayat, tema, atau kata kunci...',
prefixIcon: const Icon(LucideIcons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
),
const SizedBox(width: 8),
FilledButton(
onPressed: _runSearch,
child: const Text('Cari'),
),
],
),
),
Expanded(
child: _loadingSearch
? const Center(child: CircularProgressIndicator())
: _searchResults.isEmpty
? Center(
child: Text(
'Belum ada hasil pencarian',
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
)
: ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
itemCount: _searchResults.length,
itemBuilder: (context, index) {
final ayah = _searchResults[index];
final surahId = (ayah['surah'] as num?)?.toInt() ?? 0;
final ayahNum = (ayah['ayah'] as num?)?.toInt() ?? 0;
final key = '$surahId:$ayahNum';
final expanded = _expandedWordByWord.contains(key);
final words = _wordByWord[key] ?? const [];
final loadingWords = _loadingWordByWord.contains(key);
return Container(
margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: isDark
? 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(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
'${_surahNameById(surahId)} : $ayahNum',
style: const TextStyle(
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
TextButton.icon(
onPressed: () => _toggleWordByWord(ayah),
icon: Icon(
expanded
? LucideIcons.chevronUp
: LucideIcons.languages,
size: 16,
),
label: Text(
expanded ? 'Tutup' : 'Per Kata',
),
),
],
),
const SizedBox(height: 8),
Align(
alignment: Alignment.centerRight,
child: Text(
ayah['arab']?.toString() ?? '',
textAlign: TextAlign.right,
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 24,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
),
const SizedBox(height: 8),
Text(
ayah['text']?.toString() ?? '',
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
if (expanded) ...[
const SizedBox(height: 12),
if (loadingWords)
const Padding(
padding: EdgeInsets.symmetric(vertical: 8),
child: Center(
child: CircularProgressIndicator(),
),
)
else if (words.isEmpty)
Text(
'Data kata tidak tersedia untuk ayat ini.',
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
)
else
Wrap(
spacing: 8,
runSpacing: 8,
children: words.map((word) {
return Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: AppColors.primary
.withValues(alpha: 0.08),
borderRadius:
BorderRadius.circular(10),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
word['arab']?.toString() ?? '',
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 18,
fontWeight: FontWeight.w400,
),
),
const SizedBox(height: 2),
Text(
word['word']?.toString() ?? '',
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 12,
),
),
const SizedBox(height: 2),
Text(
word['indo']?.toString() ?? '',
style: TextStyle(
fontSize: 11,
color: isDark
? AppColors
.textSecondaryDark
: AppColors
.textSecondaryLight,
),
),
],
),
);
}).toList(),
),
],
],
),
);
},
),
),
],
);
}
Widget _buildTafsirTab(BuildContext context, bool isDark) {
return Column(
children: [
_buildSurahSelector(
onChanged: (value) {
setState(() => _selectedSurahId = value);
_loadTafsirForSelectedSurah();
},
),
Expanded(
child: _loadingTafsir
? const Center(child: CircularProgressIndicator())
: _tafsirItems.isEmpty
? _emptyText(isDark, 'Belum ada data tafsir untuk surah ini')
: ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
itemCount: _tafsirItems.length,
itemBuilder: (context, index) {
final item = _tafsirItems[index];
final ayah = item['nomorAyat']?.toString() ?? '-';
final wajiz = item['wajiz']?.toString() ?? '';
final tahlili = item['tahlili']?.toString() ?? '';
return _buildCard(
isDark,
title: 'Ayat $ayah',
body: '$wajiz\n\n$tahlili',
);
},
),
),
],
);
}
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');
}
return ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 16),
itemCount: _juzItems.length,
itemBuilder: (context, index) {
final item = _juzItems[index];
final number = item['number']?.toString() ?? '-';
final startName = item['name_start_id']?.toString() ?? '-';
final endName = item['name_end_id']?.toString() ?? '-';
final startVerse = item['verse_start']?.toString() ?? '-';
final endVerse = item['verse_end']?.toString() ?? '-';
return _buildCard(
isDark,
title: 'Juz $number',
body:
'Mulai: $startName ayat $startVerse\nSelesai: $endName ayat $endVerse',
);
},
);
}
Widget _buildPageTab(BuildContext context, bool isDark) {
return Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 8),
child: Row(
children: [
Expanded(
child: TextField(
controller: _pageController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Nomor Halaman (1-604)',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
),
const SizedBox(width: 8),
FilledButton(
onPressed: _loadPageAyah,
child: const Text('Tampilkan'),
),
],
),
),
Expanded(
child: _loadingPage
? const Center(child: CircularProgressIndicator())
: _pageItems.isEmpty
? _emptyText(isDark, 'Tidak ada data untuk halaman ini')
: ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
itemCount: _pageItems.length,
itemBuilder: (context, index) {
final item = _pageItems[index];
final surahId = (item['surah'] as num?)?.toInt() ?? 0;
final ayah = item['ayah']?.toString() ?? '-';
return _buildCard(
isDark,
title: '${_surahNameById(surahId)} : $ayah',
body:
'${item['arab']?.toString() ?? ''}\n\n${item['text']?.toString() ?? ''}',
);
},
),
),
],
);
}
Widget _buildThemeTab(BuildContext context, bool isDark) {
if (_themeItems.isEmpty) {
return _emptyText(isDark, 'Data tema belum tersedia');
}
return ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 16),
itemCount: _themeItems.length,
itemBuilder: (context, index) {
final item = _themeItems[index];
return _buildCard(
isDark,
title: 'Tema #${item['id'] ?? '-'}',
body: item['name']?.toString() ?? '',
);
},
);
}
Widget _buildAsmaTab(BuildContext context, bool isDark) {
if (_asmaItems.isEmpty) {
return _emptyText(isDark, 'Data Asmaul Husna tidak tersedia');
}
return ListView.builder(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 16),
itemCount: _asmaItems.length,
itemBuilder: (context, index) {
final item = _asmaItems[index];
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: Row(
children: [
Container(
width: 40,
height: 40,
alignment: Alignment.center,
decoration: BoxDecoration(
color: AppColors.primary.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'${item['id'] ?? '-'}',
style: const TextStyle(
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item['arab']?.toString() ?? '',
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 22,
fontWeight: FontWeight.w400,
),
),
Text(
item['latin']?.toString() ?? '',
style: const TextStyle(
fontWeight: FontWeight.w700,
color: AppColors.primary,
),
),
const SizedBox(height: 2),
Text(
item['indo']?.toString() ?? '',
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
),
),
],
),
);
},
);
}
Widget _buildSurahSelector({required ValueChanged<int> onChanged}) {
if (_surahs.isEmpty) {
return Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 8),
child: _emptyText(
Theme.of(context).brightness == Brightness.dark,
'Data surah tidak tersedia',
),
);
}
return Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 8),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
border: Border.all(color: AppColors.primary.withValues(alpha: 0.2)),
borderRadius: BorderRadius.circular(12),
),
child: DropdownButtonHideUnderline(
child: DropdownButton<int>(
value: _selectedSurahId,
isExpanded: true,
items: _surahs.map((surah) {
final id = (surah['nomor'] as num?)?.toInt() ?? 1;
final name = surah['namaLatin']?.toString() ?? 'Surah $id';
return DropdownMenuItem<int>(
value: id,
child: Text('$id. $name'),
);
}).toList(),
onChanged: (value) {
if (value == null) return;
onChanged(value);
},
),
),
),
);
}
Widget _buildCard(bool isDark, {required String title, required String body}) {
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),
Text(body, style: const TextStyle(height: 1.5)),
],
),
);
}
Widget _emptyText(bool isDark, String text) {
return Center(
child: Text(
text,
textAlign: TextAlign.center,
style: TextStyle(
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
);
}
}