diff --git a/app_petty_cash/lib/app/constant.dart b/app_petty_cash/lib/app/constant.dart index ddd2fe0..870c5dd 100644 --- a/app_petty_cash/lib/app/constant.dart +++ b/app_petty_cash/lib/app/constant.dart @@ -535,6 +535,14 @@ class Constant { ); } + //homepage + static TextStyle titleH6_700({required BuildContext context}) { + return TextStyle( + fontSize: Constant.getActualYPhone(context: context, y: 18), + fontWeight: FontWeight.w700, + ); + } + // pendaftaran pasien static TextStyle titleH5_600({required BuildContext context}) { return TextStyle( diff --git a/app_petty_cash/lib/screen/home/homepage_screen.dart b/app_petty_cash/lib/screen/home/homepage_screen.dart index 0c3813c..2b102a7 100644 --- a/app_petty_cash/lib/screen/home/homepage_screen.dart +++ b/app_petty_cash/lib/screen/home/homepage_screen.dart @@ -1,3 +1,5 @@ +import 'package:app_petty_cash/model/history_transaksi_model.dart'; +import 'package:app_petty_cash/widget/homepage_row_transaksi.dart'; import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; @@ -12,6 +14,12 @@ class HomePageScreen extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final listSearchHistory = useState>( + List.empty( + growable: true, + ), + ); + useEffect(() { WidgetsBinding.instance.addPostFrameCallback((timeStamp) async { final userID = ref.read(currentUserProvider)?.model.M_UserID ?? "0"; @@ -27,190 +35,241 @@ class HomePageScreen extends HookConsumerWidget { return () {}; }, []); - return Padding( - padding: EdgeInsets.only( - top: Constant.getActualYPhone(context: context, y: 30), - ), - child: Scaffold( - appBar: AppBar( - title: Text( - 'Home Screen', - style: TextStyle(color: Constant.textWhite), - ), - backgroundColor: Constant.pcBtnBackgroundColor, - iconTheme: IconThemeData( - color: Constant.textWhite, - ), + return Scaffold( + appBar: AppBar( + title: Text( + 'Home Screen', + style: TextStyle(color: Constant.textWhite), ), - drawer: CustomDrawer(), - body: SafeArea( - child: Center( - child: Container( - width: Constant.getActualXPhone(context: context, x: 390), - height: Constant.getActualYPhone(context: context, y: 844), - child: Column( - children: [ - SizedBox( - height: Constant.getActualYPhone(context: context, y: 36), - ), - //Card - Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20), - image: DecorationImage( - image: AssetImage('images/background_card.png'), - fit: BoxFit.cover, - ), + backgroundColor: Constant.pcBtnBackgroundColor, + iconTheme: IconThemeData( + color: Constant.textWhite, + ), + ), + drawer: CustomDrawer(), + body: SafeArea( + child: Padding( + padding: EdgeInsets.only( + top: Constant.getActualYPhone(context: context, y: 36), + left: Constant.getActualXPhone(context: context, x: 34), + right: Constant.getActualXPhone(context: context, x: 34), + ), + child: Container( + width: Constant.getActualXPhone(context: context, x: 390), + height: Constant.getActualYPhone(context: context, y: 844), + child: Column( + children: [ + Container( + width: Constant.getActualXPhone(context: context, x: 332), + height: Constant.getActualYPhone(context: context, y: 173), + decoration: BoxDecoration( + // color: Colors.black12, + borderRadius: BorderRadius.circular(20), + image: DecorationImage( + image: AssetImage('images/background_card.png'), + fit: BoxFit.cover, ), - child: Padding( - padding: EdgeInsets.only( - left: Constant.getActualXPhone(context: context, x: 34), - right: - Constant.getActualXPhone(context: context, x: 34), + boxShadow: [ + BoxShadow( + color: Color.fromRGBO(145, 158, 171, 0.16), + offset: Offset(0, 24), + blurRadius: 48, ), - child: Container( - width: - Constant.getActualXPhone(context: context, x: 332), - height: - Constant.getActualYPhone(context: context, y: 173), - - //Isi Card - child: Container( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, + ], + ), + //Isi Card + child: Container( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + // Text1 & Text2 + Padding( + padding: EdgeInsets.only( + top: Constant.getActualYPhone( + context: context, y: 17), + left: Constant.getActualXPhone( + context: context, x: 81), + right: Constant.getActualXPhone( + context: context, x: 81), + ), + child: Container( + child: Column( children: [ - // Text1 & Text2 - Padding( - padding: EdgeInsets.only( - top: Constant.getActualYPhone( - context: context, y: 17), - left: Constant.getActualXPhone( - context: context, x: 81), - right: Constant.getActualXPhone( - context: context, x: 81), - ), - child: Container( - child: Column( - children: [ - Text('Account Balance'), - Text('Rp. 1,440,000'), - ], - )), + Text( + 'Account Balance', + style: Constant.body1(context: context) + .copyWith( + fontWeight: FontWeight.w400, + color: Constant.textWhite), ), - - SizedBox( - height: Constant.getActualYPhone( - context: context, y: 25), - ), - - //Debit dan Kredit - Row( - mainAxisAlignment: MainAxisAlignment - .center, // Menengahkan secara horizontal - children: [ - // Spasi di sebelah kiri "Check In" - Padding( - padding: EdgeInsets.only( - bottom: Constant.getActualYPhone( - context: context, y: 17), - left: Constant.getActualXPhone( - context: context, x: 20), - ), - child: Container( - child: Column( - children: [ - Text('Debit'), - Text('Rp. 2,000,000'), - ], - ), - ), - ), - - SizedBox( - width: Constant.getActualXPhone( - context: context, x: 51), - ), // Jarak antara "Check In" dan "Check Out" - - Padding( - padding: EdgeInsets.only( - bottom: Constant.getActualYPhone( - context: context, y: 17), - right: Constant.getActualXPhone( - context: context, x: 28), - ), - child: Container( - child: Column( - children: [ - Text('Credit'), - Text('Rp. 560,000'), - ], - ), - ), - ), - ], - ), - SizedBox( - height: Constant.getActualYPhone( - context: context, y: 16), + Text( + 'Rp. 1,440,000', + style: Constant.H4_700V2(context: context) + .copyWith( + fontSize: Constant.getActualYPhone( + context: context, y: 24), + fontWeight: FontWeight.w600, + color: Constant.textWhite), ), ], - ), + )), ), - ), - ), - ), - - SizedBox( - height: Constant.getActualYPhone(context: context, y: 44), - ), - - Padding( - padding: EdgeInsets.only( - left: Constant.getActualXPhone(context: context, x: 20), - right: Constant.getActualXPhone(context: context, x: 20), - ), - child: Container( - // color: Colors.amber, - alignment: Alignment.centerLeft, - - child: Column(children: [ - Text('Transaksi Terkini'), + SizedBox( - height: - Constant.getActualYPhone(context: context, y: 24), + height: Constant.getActualYPhone( + context: context, y: 27), ), - Container( - width: Constant.getActualXPhone( - context: context, x: 350), - child: Row( - children: [ - Column( - children: [ - Container( - child: Image( - image: - AssetImage('images/pizza_icon.png'), + + //Debit dan Kredit + Row( + mainAxisAlignment: MainAxisAlignment + .center, // Menengahkan secara horizontal + children: [ + // Spasi di sebelah kiri "Check In" + Padding( + padding: EdgeInsets.only( + left: Constant.getActualXPhone( + context: context, x: 20), + ), + child: Container( + child: Column( + children: [ + Text( + 'Debit', + style: Constant.body1(context: context) + .copyWith( + fontWeight: FontWeight.w400, + color: Constant.textWhite), ), - ), - ], + Text( + 'Rp. 2,000,000', + style: Constant.titleH6_700( + context: context) + .copyWith( + color: Constant.textWhite), + ), + ], + ), ), - SizedBox( - width: Constant.getActualXPhone( - context: context, x: 12), + ), + + SizedBox( + width: Constant.getActualXPhone( + context: context, x: 51), + ), + + Padding( + padding: EdgeInsets.only( + right: Constant.getActualXPhone( + context: context, x: 28), ), - - Container( - - ) - - ], - ), - ) - ]), + child: Container( + child: Column( + children: [ + Text( + 'Credit', + style: Constant.body1(context: context) + .copyWith( + fontWeight: FontWeight.w400, + color: Constant.textWhite), + ), + Text( + 'Rp. 560,000', + style: Constant.titleH6_700( + context: context) + .copyWith( + color: Constant.textWhite), + ), + ], + ), + ), + ), + ], + ), + SizedBox( + height: Constant.getActualYPhone( + context: context, y: 17), + ), + ], ), - ) - ], - ), + ), + ), + //Card + SizedBox( + height: Constant.getActualYPhone(context: context, y: 36), + ), + + SizedBox( + height: Constant.getActualYPhone(context: context, y: 44), + ), + + Padding( + padding: EdgeInsets.only( + left: Constant.getActualXPhone(context: context, x: 20), + right: Constant.getActualXPhone(context: context, x: 20), + ), + child: Container( + // color: Colors.amber, + alignment: Alignment.centerLeft, + + child: Column(children: [ + Text( + 'Transaksi Terkini', + style: Constant.titleH5_600(context: context) + .copyWith(color: Constant.textBlack), + ), + SizedBox( + height: + Constant.getActualYPhone(context: context, y: 24), + ), + // Expanded( + // child: ListView.builder( + // itemCount: listSearchHistory.value.length, + // itemBuilder: (context, idx) { + // return Padding( + // padding: EdgeInsets.only( + // bottom: Constant.getActualYPhone( + // context: context, + // y: 10, + // ), + // ), + // child: Card( + // elevation: 2.0, + // child: Padding( + // padding: EdgeInsets.all(10), + // child: Column( + // // crossAxisAlignment: CrossAxisAlignment.start, + // // mainAxisAlignment: MainAxisAlignment.start, + // children: [ + // // atas + // HomepageRowTransaksiWidget( + // icon_category_id: listSearchHistory + // .value[idx].kategoriid + // .toString(), + // icon_category_name: listSearchHistory + // .value[idx].kategoriname + // .toString(), + // amount: listSearchHistory + // .value[idx].amount + // .toString(), + // tglTransaksi: listSearchHistory + // .value[idx].tanggaltransaksi + // .toString(), + // tipe: listSearchHistory.value[idx].tipe + // .toString(), + // ), + // ], + // ), + // ), + // ), + // ); + // }, + // ), + // ), + ]), + ), + ) + ], ), ), ), diff --git a/app_petty_cash/lib/widget/homepage_row_transaksi.dart b/app_petty_cash/lib/widget/homepage_row_transaksi.dart new file mode 100644 index 0000000..01f2ae2 --- /dev/null +++ b/app_petty_cash/lib/widget/homepage_row_transaksi.dart @@ -0,0 +1,177 @@ +import 'package:app_petty_cash/widget/sankbar_widget.dart'; +import 'package:dio/dio.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:hooks_riverpod/hooks_riverpod.dart'; + +import '../app/constant.dart'; + +class HomepageRowTransaksiWidget extends HookConsumerWidget { + final String icon_category_id; + final String icon_category_name; + final String amount; + final String tipe; + final String tglTransaksi; + + const HomepageRowTransaksiWidget({ + Key? key, + required this.icon_category_id, + required this.icon_category_name, + required this.amount, + required this.tipe, + required this.tglTransaksi, + }) : super(key: key); + + @override + Widget build(BuildContext context, WidgetRef ref) { + + // check file exist + Future checkFileExistence(String fileUrl) async { + try { + final dio = Dio(); + final response = await dio.head(fileUrl); + if (response.statusCode == 200) { + return SvgPicture.network( + fileUrl, + semanticsLabel: 'Icon pizza', + placeholderBuilder: (BuildContext context) => Container( + padding: const EdgeInsets.all(30.0), + child: const CircularProgressIndicator(), + ), + ); + } else { + return SvgPicture.network( + 'https://devone.aplikasi.web.id/pettycash-media/icon/icon_13.svg', + semanticsLabel: 'Icon pizza', + placeholderBuilder: (BuildContext context) => Container( + padding: const EdgeInsets.all(30.0), + child: const CircularProgressIndicator(), + ), + ); + } + } catch (e) { + // print('Error checking file existence: $e'); + return SvgPicture.network( + 'https://devone.aplikasi.web.id/pettycash-media/icon/icon_13.svg', + semanticsLabel: 'Icon pizza', + placeholderBuilder: (BuildContext context) => Container( + padding: const EdgeInsets.all(30.0), + child: const CircularProgressIndicator(), + ), + ); + } + } + + return Row( + children: [ + // kiri + Container( + width: Constant.getActualXPhone(context: context, x: 38), + height: Constant.getActualYPhone(context: context, y: 38), + decoration: BoxDecoration( + color: Color.fromRGBO(241, 90, 41, 0.08), + borderRadius: BorderRadius.all( + Radius.circular(8.0), + ), + ), + // child: Text('s'), + child: FutureBuilder( + future: checkFileExistence('https://devone.aplikasi.web.id/pettycash-media/icon/icon_$icon_category_id.svg'), + builder: (context, snapshot) { + if (snapshot.connectionState == ConnectionState.waiting) { + return CircularProgressIndicator(); + } else if (snapshot.hasError) { + return Icon( + Icons.error, + color: Colors.red, + ); + } else { + return snapshot.data ?? + Container(); + } + }, + ), + ), + + // tengah + Expanded( + child: Padding( + padding: EdgeInsets.only( + left: Constant.getActualYPhone(context: context, y: 20), + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Text( + icon_category_name, + style: Constant.body2_600(context: context).copyWith( + fontWeight: FontWeight.w600, + color: Constant.textBlack, + ), + ), + SizedBox( + height: Constant.getActualYPhone( + context: context, + y: 8, + ), + ), + Text( + amount, + style: Constant.body1_600(context: context).copyWith( + fontWeight: FontWeight.w600, + color: Constant.pcBtnBackgroundColor), + ), + ], + ), + ), + ), + + // kanan + Expanded( + child: Padding( + padding: EdgeInsets.only( + right: Constant.getActualYPhone(context: context, y: 8), + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.end, + mainAxisAlignment: MainAxisAlignment.end, + children: [ + Container( + // width: Constant.getActualXPhone(context: context, x: 32), + height: Constant.getActualYPhone(context: context, y: 19), + decoration: BoxDecoration( + color: Constant.bgIconHistory, + borderRadius: BorderRadius.all( + Radius.circular(6.0), + ), + ), + child: Padding( + padding: EdgeInsets.all(2.0), + child: Text( + tipe, + style: Constant.body1_600(context: context).copyWith( + fontWeight: FontWeight.w600, + color: Constant.pcBtnBackgroundColor), + ), + ), + ), + SizedBox( + height: Constant.getActualYPhone( + context: context, + y: 8, + ), + ), + Text( + tglTransaksi, + style: Constant.body1_600(context: context).copyWith( + fontWeight: FontWeight.w600, color: Constant.textGreyv2), + ), + ], + ), + ), + ), + ], + ); + } +}