diff --git a/assets/images/Integrations_icon.svg b/assets/images/Integrations_icon.svg new file mode 100644 index 00000000..e3ef7e16 --- /dev/null +++ b/assets/images/Integrations_icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/access_icon.svg b/assets/images/access_icon.svg new file mode 100644 index 00000000..d04fa641 --- /dev/null +++ b/assets/images/access_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/asset_icon.svg b/assets/images/asset_icon.svg new file mode 100644 index 00000000..b7649b97 --- /dev/null +++ b/assets/images/asset_icon.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/construction_Icon.svg b/assets/images/construction_Icon.svg new file mode 100644 index 00000000..7efad965 --- /dev/null +++ b/assets/images/construction_Icon.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/devices_icon.svg b/assets/images/devices_icon.svg new file mode 100644 index 00000000..fbe784d1 --- /dev/null +++ b/assets/images/devices_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/energy_icon.svg b/assets/images/energy_icon.svg new file mode 100644 index 00000000..cd4ebbf9 --- /dev/null +++ b/assets/images/energy_icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/images/movein_icon.svg b/assets/images/movein_icon.svg new file mode 100644 index 00000000..7cf319bc --- /dev/null +++ b/assets/images/movein_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/spase_management_icon.svg b/assets/images/spase_management_icon.svg new file mode 100644 index 00000000..0a52816c --- /dev/null +++ b/assets/images/spase_management_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/lib/main.dart b/lib/main.dart index c7b31392..d52c6541 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -2,6 +2,7 @@ import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart'; import 'package:syncrow_web/pages/auth/view/login_page.dart'; +import 'package:syncrow_web/pages/home/view/home_page.dart'; import 'package:syncrow_web/services/locator.dart'; import 'package:syncrow_web/utils/color_manager.dart'; @@ -35,11 +36,9 @@ class MyApp extends StatelessWidget { theme: ThemeData( textTheme: const TextTheme( bodySmall: TextStyle( - fontSize: 13, - color: ColorsManager.whiteColors, - fontWeight: FontWeight.bold), + fontSize: 13, color: ColorsManager.whiteColors, fontWeight: FontWeight.bold), bodyMedium: TextStyle(color: Colors.black87, fontSize: 14), - bodyLarge: TextStyle(fontSize: 16,color: Colors.white), + bodyLarge: TextStyle(fontSize: 16, color: Colors.white), headlineSmall: TextStyle(color: Colors.black87, fontSize: 18), headlineMedium: TextStyle(color: Colors.black87, fontSize: 20), headlineLarge: TextStyle( @@ -48,11 +47,10 @@ class MyApp extends StatelessWidget { fontWeight: FontWeight.bold, ), ), - colorScheme: ColorScheme.fromSeed( - seedColor: Colors.deepPurple), // Set up color scheme + colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // Set up color scheme useMaterial3: true, // Enable Material 3 ), - home:LoginPage(), + home: isLoggedIn == 'Success' ? const HomePage() : const LoginPage(), ); } } diff --git a/lib/pages/auth/bloc/auth_state.dart b/lib/pages/auth/bloc/auth_state.dart index 9814955a..4b6359eb 100644 --- a/lib/pages/auth/bloc/auth_state.dart +++ b/lib/pages/auth/bloc/auth_state.dart @@ -35,13 +35,13 @@ class LoginInvalid extends AuthState { List get props => [error]; } -class InitialForgetState extends AuthState{} +class InitialForgetState extends AuthState {} -class LoadingForgetState extends AuthState{} +class LoadingForgetState extends AuthState {} -class SuccessForgetState extends AuthState{} +class SuccessForgetState extends AuthState {} -class PasswordVisibleState extends AuthState{} +class PasswordVisibleState extends AuthState {} class FailureForgetState extends AuthState { final String error; @@ -51,7 +51,7 @@ class FailureForgetState extends AuthState { } class TimerState extends AuthState { - final bool isButtonEnabled ; + final bool isButtonEnabled; final int remainingTime; const TimerState({required this.isButtonEnabled, required this.remainingTime}); @@ -60,7 +60,6 @@ class TimerState extends AuthState { List get props => [isButtonEnabled, remainingTime]; } - class AuthError extends AuthState { final String message; String? code; @@ -70,7 +69,7 @@ class AuthError extends AuthState { class AuthTokenError extends AuthError { AuthTokenError({required super.message, super.code}); } + class AuthSuccess extends AuthState {} class AuthTokenSuccess extends AuthSuccess {} - diff --git a/lib/pages/auth/view/login_mobile_page.dart b/lib/pages/auth/view/login_mobile_page.dart index 4cb00cf5..a2877bf5 100644 --- a/lib/pages/auth/view/login_mobile_page.dart +++ b/lib/pages/auth/view/login_mobile_page.dart @@ -26,7 +26,7 @@ class LoginMobilePage extends StatelessWidget { // Navigate to home screen after successful login Navigator.pushReplacement( context, - MaterialPageRoute(builder: (context) => const HomePage()), + MaterialPageRoute(builder: (context) => HomePage()), ); } else if (state is LoginFailure) { // Show error message diff --git a/lib/pages/auth/view/login_web_page.dart b/lib/pages/auth/view/login_web_page.dart index 401b4b2d..1a473df7 100644 --- a/lib/pages/auth/view/login_web_page.dart +++ b/lib/pages/auth/view/login_web_page.dart @@ -35,7 +35,7 @@ class _LoginWebPageState extends State { // Navigate to home screen after successful login Navigator.pushReplacement( context, - MaterialPageRoute(builder: (context) => const HomePage()), + MaterialPageRoute(builder: (context) => HomePage()), ); } else if (state is LoginFailure) { // Show error message diff --git a/lib/pages/home/view/home_card.dart b/lib/pages/home/view/home_card.dart new file mode 100644 index 00000000..287bb4f4 --- /dev/null +++ b/lib/pages/home/view/home_card.dart @@ -0,0 +1,72 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; + +class HomeCard extends StatelessWidget { + final bool active; + final String img; + final int index; + final String name; + final Function()? onTap; + const HomeCard({ + super.key, + required this.name, + required this.index, + this.active = false, + required this.img, + required this.onTap, + }); + @override + Widget build(BuildContext context) { + bool evenNumbers = index % 2 == 0; + return InkWell( + onTap: active ? onTap : null, + child: Container( + padding: const EdgeInsets.only(left: 10,right: 10,bottom: 10), + decoration: BoxDecoration( + color: evenNumbers && active? + ColorsManager.blueColor.withOpacity(0.8) : + (active ?ColorsManager.blueColor + : ColorsManager.blueColor.withOpacity(0.2)), + borderRadius: BorderRadius.circular(30), + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + FittedBox( + fit: BoxFit.scaleDown, + child: Text( + name, + style: const TextStyle( + fontSize: 20, + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), + ), + ], + ), + ), + const SizedBox(height: 10), + Expanded( + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + SizedBox( + child: SvgPicture.asset( + img, + ), + ), + ], + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/pages/home/view/home_page.dart b/lib/pages/home/view/home_page.dart index de8f0821..b4225ae2 100644 --- a/lib/pages/home/view/home_page.dart +++ b/lib/pages/home/view/home_page.dart @@ -1,30 +1,16 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_bloc/flutter_bloc.dart'; -import 'package:syncrow_web/pages/home/bloc/home_bloc.dart'; -import 'package:syncrow_web/pages/home/view/tree_page.dart'; -import 'package:syncrow_web/utils/style.dart'; -import 'package:syncrow_web/web_layout/web_scaffold.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:syncrow_web/pages/home/view/home_page_mobile.dart'; +import 'package:syncrow_web/pages/home/view/home_page_web.dart'; +import 'package:syncrow_web/utils/responsive_layout.dart'; class HomePage extends StatelessWidget { const HomePage({super.key}); + @override Widget build(BuildContext context) { - return WebScaffold( - appBarTitle: 'Space Management', - appBarBody:[ - Text( - 'Community structure', - style: appBarTextStyle, - ), - Text( - 'Community ', - style: appBarTextStyle - ), - ], - scaffoldBody: BlocProvider( - create: (context) => HomeBloc(), - child: const TreeWidget(), - ), + return ResponsiveLayout( + desktopBody: HomeWebPage(), + mobileBody:HomeMobilePage() ); } } diff --git a/lib/pages/home/view/home_page_mobile.dart b/lib/pages/home/view/home_page_mobile.dart new file mode 100644 index 00000000..1b868906 --- /dev/null +++ b/lib/pages/home/view/home_page_mobile.dart @@ -0,0 +1,118 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:syncrow_web/pages/home/bloc/home_bloc.dart'; +import 'package:syncrow_web/pages/home/view/home_card.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; +import 'package:syncrow_web/utils/constants/assets.dart'; +import 'package:syncrow_web/web_layout/web_scaffold.dart'; + +class HomeMobilePage extends StatelessWidget { + HomeMobilePage({super.key}); + @override + Widget build(BuildContext context) { + Size size = MediaQuery.of(context).size; + return WebScaffold( + enableMenuSideba: false, + appBarTitle: Row( + children: [ + SvgPicture.asset( + Assets.loginLogo, + width: 150, + ), + ], + ), + scaffoldBody: BlocProvider( + create: (context) => HomeBloc(), + child: SizedBox( + height: size.height, + width: size.width, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox(height: size.height * 0.05), + const Text( + 'ACCESS YOUR APPS', + style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700), + ), + const SizedBox(height: 30), + Expanded( + flex: 4, + child: SizedBox( + height: size.height * 0.6, + width: size.width * 0.68, + child: GridView.builder( + itemCount: 8, + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 2, + crossAxisSpacing: 20.0, + mainAxisSpacing: 20.0, + childAspectRatio: 1.5, + ), + itemBuilder: (context, index) { + return HomeCard( + index: index, + active: homeItems[index]['active'], + name: homeItems[index]['title'], + img: homeItems[index]['icon'], + onTap: () {}, + ); + }, + ), + ), + ), + ], + ), + ), + ), + ); + } + + dynamic homeItems = [ + { + 'title': 'Access', + 'icon': Assets.accessIcon, + 'active': true, + }, + { + 'title': 'Space\nManagement', + 'icon': Assets.spaseManagementIcon, + 'color': ColorsManager.primaryColor, + 'active': true, + }, + { + 'title': 'Devices', + 'icon': Assets.devicesIcon, + 'active': true, + }, + { + 'title': 'Move in', + 'icon': Assets.moveinIcon, + 'active': false, + }, + { + 'title': 'Construction', + 'icon': Assets.constructionIcon, + 'active': false, + }, + { + 'title': 'Energy', + 'icon': Assets.energyIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, + { + 'title': 'Integrations', + 'icon': Assets.integrationsIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, + { + 'title': 'Asset', + 'icon': Assets.assetIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, + ]; +} diff --git a/lib/pages/home/view/home_page_web.dart b/lib/pages/home/view/home_page_web.dart new file mode 100644 index 00000000..f7c4e988 --- /dev/null +++ b/lib/pages/home/view/home_page_web.dart @@ -0,0 +1,119 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:syncrow_web/pages/home/bloc/home_bloc.dart'; +import 'package:syncrow_web/pages/home/view/home_card.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; +import 'package:syncrow_web/utils/constants/assets.dart'; +import 'package:syncrow_web/web_layout/web_scaffold.dart'; + +class HomeWebPage extends StatelessWidget { + HomeWebPage({super.key}); + @override + Widget build(BuildContext context) { + Size size = MediaQuery.of(context).size; + return WebScaffold( + enableMenuSideba:false , + appBarTitle: Row( + children: [ + SvgPicture.asset( + Assets.loginLogo, + width: 150, + ), + ], + ), + scaffoldBody: BlocProvider( + create: (context) => HomeBloc(), + child: SizedBox( + height: size.height, + width: size.width, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox(height: size.height * 0.1), + const Text( + 'ACCESS YOUR APPS', + style: TextStyle(fontSize: 40, fontWeight: FontWeight.w700), + ), + const SizedBox(height: 30), + Expanded( + flex: 4, + child: SizedBox( + height: size.height * 0.6, + width: size.width * 0.68, + child: GridView.builder( + itemCount: 8, + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 4, + crossAxisSpacing: 20.0, + mainAxisSpacing: 20.0, + childAspectRatio: 1.5, + ), + itemBuilder: (context, index) { + return HomeCard( + index:index, + active:ceilingSensorButtons[index]['active'], + name: ceilingSensorButtons[index]['title'], + img:ceilingSensorButtons[index]['icon'] , + onTap: () { + + },); + }, + ), + ), + ), + ], + ), + ), + ), + ); + } + + dynamic ceilingSensorButtons = + [ + { + 'title': 'Access', + 'icon': Assets.accessIcon, + 'active': true, + }, + { + 'title': 'Space\nManagement', + 'icon': Assets.spaseManagementIcon, + 'color': ColorsManager.primaryColor, + 'active': true, + }, + { + 'title': 'Devices', + 'icon':Assets.devicesIcon, + 'active': true, + }, + { + 'title': 'Move in', + 'icon': Assets.moveinIcon, + 'active': false, + }, + { + 'title': 'Construction', + 'icon': Assets.constructionIcon, + 'active': false, + }, + { + 'title': 'Energy', + 'icon': Assets.energyIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, + { + 'title': 'Integrations', + 'icon': Assets.integrationsIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, { + 'title': 'Asset', + 'icon': Assets.assetIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, + ]; +} diff --git a/lib/utils/color_manager.dart b/lib/utils/color_manager.dart index 96e7a43a..46cb4383 100644 --- a/lib/utils/color_manager.dart +++ b/lib/utils/color_manager.dart @@ -28,4 +28,5 @@ abstract class ColorsManager { static const Color graysColor = Color(0xffEBEBEB); static const Color textGray = Color(0xffD5D5D5); static const Color btnColor = Color(0xFF00008B); + static const Color blueColor = Color(0xFF0036E6); } diff --git a/lib/utils/constants/assets.dart b/lib/utils/constants/assets.dart index 0758fa9a..0d0b3924 100644 --- a/lib/utils/constants/assets.dart +++ b/lib/utils/constants/assets.dart @@ -15,4 +15,12 @@ class Assets { static const String facebook = "assets/images/facebook.svg"; static const String invisiblePassword = "assets/images/Password_invisible.svg"; static const String visiblePassword = "assets/images/Password_visible.svg"; + static const String accessIcon = "assets/images/access_icon.svg"; + static const String spaseManagementIcon = "assets/images/spase_management_icon.svg"; + static const String devicesIcon = "assets/images/devices_icon.svg"; + static const String moveinIcon = "assets/images/movein_icon.svg"; + static const String constructionIcon = "assets/images/construction_icon.svg"; + static const String energyIcon = "assets/images/energy_icon.svg"; + static const String integrationsIcon = "assets/images/Integrations_icon.svg"; + static const String assetIcon = "assets/images/asset_icon.svg"; } diff --git a/lib/web_layout/web_app_bar.dart b/lib/web_layout/web_app_bar.dart index 7d28032d..4163e168 100644 --- a/lib/web_layout/web_app_bar.dart +++ b/lib/web_layout/web_app_bar.dart @@ -2,25 +2,23 @@ import 'package:flutter/material.dart'; import 'package:syncrow_web/utils/color_manager.dart'; class WebAppBar extends StatelessWidget { - final String? title; - final List? body; - const WebAppBar({super.key,this.title,this.body}); + final Widget? title; + final List? body; + const WebAppBar({super.key, this.title, this.body}); @override Widget build(BuildContext context) { return Container( height: 120, - decoration: const BoxDecoration(color:ColorsManager.secondaryColor ), + decoration: const BoxDecoration(color: ColorsManager.secondaryColor), padding: const EdgeInsets.all(10), child: Expanded( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Expanded( - child: Text( - title!, - style: Theme.of(context).textTheme.headlineLarge,) - ), + Expanded( + child: title!, + ), if (body != null) Expanded( flex: 2, @@ -31,9 +29,9 @@ class WebAppBar extends StatelessWidget { ), Row( children: [ - IconButton(onPressed: () {}, - icon: const Icon(Icons.apps_sharp,color: Colors.white,)), - const SizedBox(width: 10,), + const SizedBox( + width: 10, + ), const SizedBox.square( dimension: 40, child: CircleAvatar( @@ -47,13 +45,18 @@ class WebAppBar extends StatelessWidget { ), ), ), - const SizedBox(width: 10,), - Text('mohamamd alnemer ',style:Theme.of(context).textTheme.bodyLarge ,), + const SizedBox( + width: 10, + ), + Text( + 'mohamamd alnemer ', + style: Theme.of(context).textTheme.bodyLarge, + ), ], ) ], ), - ) , + ), ); } -} \ No newline at end of file +} diff --git a/lib/web_layout/web_scaffold.dart b/lib/web_layout/web_scaffold.dart index 1f697739..e190dac1 100644 --- a/lib/web_layout/web_scaffold.dart +++ b/lib/web_layout/web_scaffold.dart @@ -6,7 +6,7 @@ import 'menu_sidebar.dart'; class WebScaffold extends StatelessWidget { final bool enableMenuSideba; - final String? appBarTitle; + final Widget? appBarTitle; final List? appBarBody; final Widget? scaffoldBody; const WebScaffold({super.key,this.appBarTitle,this.appBarBody,this.scaffoldBody,this.enableMenuSideba=true}); @@ -24,6 +24,7 @@ class WebScaffold extends StatelessWidget { fit: BoxFit.cover, ), ), + Container(color: Colors.white.withOpacity(0.7),), Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [