brontomark/flux
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

ok, design pulito e gorouter perfezionato

Browse Source
This commit is contained in:
Mark M2 Macbook
2026-04-29 11:39:40 +02:00
parent 1dff8ab90d
commit f7fd7c763d
5 changed files with 708 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

627
lib/features/home/ui/home_screen.dart
View File

@@ -2,323 +2,384 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flux/core/blocs/session/session_cubit.dart';
import 'package:flux/core/theme/theme.dart';
import 'package:flux/features/auth/bloc/auth_cubit.dart';
import 'package:flux/features/master_data/master_data_hub_content.dart';
import 'package:flux/features/services/blocs/services_cubit.dart';
import 'package:flux/features/services/ui/services_screen.dart';
import 'package:get_it/get_it.dart';
import 'dashboard_content.dart';
import 'package:flux/features/home/ui/quick_actions_widget.dart';
import 'package:flux/features/master_data/staff/blocs/staff_cubit.dart';
import 'package:go_router/go_router.dart';
class HomeScreen extends StatefulWidget {
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _selectedIndex = 0;
bool _extendRailway = false;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
context.read<ServicesCubit>().loadServices();
});
}
@override
Widget build(BuildContext context) {
return BlocBuilder<SessionCubit, SessionState>(
builder: (context, state) {
return LayoutBuilder(
builder: (context, constraints) {
final bool isLargeScreen = constraints.maxWidth > 900;
final bool veryLargeScreen = constraints.maxWidth > 1200;
final bool isMenuExtended = veryLargeScreen ? true : _extendRailway;
final theme = Theme.of(context);
return Scaffold(
// --- APPBAR (Solo Mobile) ---
appBar: isLargeScreen
? null
: AppBar(
title: const Text(
'FLUX Gestionale',
style: TextStyle(fontWeight: FontWeight.bold),
),
elevation: 0,
actions: [
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: _buildUserMenu(context, isExtended: false),
),
],
),
body: Row(
children: [
// --- SIDEBAR (Desktop) ---
if (isLargeScreen) _buildDesktopSidebar(isMenuExtended),
// --- CONTENUTO DINAMICO ---
Expanded(
child: _buildPageContent(_selectedIndex, isLargeScreen),
),
],
),
// --- BOTTOM BAR (Solo Mobile) ---
bottomNavigationBar: isLargeScreen
? null
: _buildBottomNavigationBar(_selectedIndex),
);
},
);
},
);
}
// ===========================================================================
// COMPONENTI UI
// ===========================================================================
// Costruisce l'intera colonna laterale (Rail + Menu Utente in fondo)
Widget _buildDesktopSidebar(bool isExtended) {
return MouseRegion(
// Spostiamo qui la logica dell'hover!
onEnter: (_) => setState(() => _extendRailway = true),
onExit: (_) => setState(() => _extendRailway = false),
child: Container(
color: context.background, // Mantiene lo stesso colore della Rail
return Scaffold(
backgroundColor: theme.colorScheme.surface,
body: SafeArea(
child: Column(
children: [
// ==========================================
// 1. HEADER FISSO (Non scrolla mai)
// ==========================================
Container(
padding: const EdgeInsets.all(24.0),
// Un leggero colore di sfondo aiuta a staccare l'header quando il contenuto ci passa sotto
color: theme.colorScheme.surface,
child: _buildHeader(context, theme),
),
// ==========================================
// 2. CORPO DELLA DASHBOARD (Scrollabile)
// ==========================================
Expanded(
child: _buildNavigationRail(isExtended), // Ora la Rail è "nuda"
),
// --- AVATAR E MENU IN FONDO ALLA SIDEBAR ---
Padding(
padding: const EdgeInsets.only(bottom: 24.0, top: 8.0),
child: _buildUserMenu(context, isExtended: isExtended),
),
],
),
),
);
}
Widget _buildNavigationRail(bool isExtended) {
return NavigationRail(
extended: isExtended,
selectedIndex: _selectedIndex,
onDestinationSelected: (index) => setState(() => _selectedIndex = index),
backgroundColor: Colors
.transparent, // Impostato trasparente per prendere il colore del Container padre
indicatorColor: context.accent.withValues(alpha: 0.2),
leading: _buildRailHeader(isExtended),
selectedIconTheme: IconThemeData(color: context.accent, size: 28),
unselectedIconTheme: IconThemeData(
color: context.secondaryText,
size: 24,
),
selectedLabelTextStyle: TextStyle(
color: context.accent,
fontWeight: FontWeight.bold,
),
unselectedLabelTextStyle: TextStyle(color: context.secondaryText),
destinations: const [
NavigationRailDestination(
icon: Icon(Icons.dashboard_outlined),
selectedIcon: Icon(Icons.dashboard),
label: Text('Dashboard'),
),
NavigationRailDestination(
icon: Icon(Icons.receipt_long_outlined),
selectedIcon: Icon(Icons.receipt_long),
label: Text('Servizi'),
),
NavigationRailDestination(
icon: Icon(Icons.folder_shared_outlined),
selectedIcon: Icon(Icons.folder_shared),
label: Text('Anagrafiche'),
),
],
);
}
// --- MENU UTENTE (Il "Pro" Avatar) ---
Widget _buildUserMenu(BuildContext context, {required bool isExtended}) {
// Il PopupMenuButton gestisce da solo l'apertura a tendina
return PopupMenuButton<String>(
offset: const Offset(
0,
-120,
), // Apre il menu verso l'alto su desktop se necessario
tooltip: 'Profilo e Impostazioni',
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
onSelected: (value) {
if (value == 'logout') {
_showLogoutDialog(context);
}
},
itemBuilder: (BuildContext context) => [
const PopupMenuItem(
value: 'profile',
child: ListTile(
leading: Icon(Icons.person_outline),
title: Text('Il mio Profilo'),
contentPadding: EdgeInsets.zero,
),
),
const PopupMenuDivider(),
const PopupMenuItem(
value: 'logout',
child: ListTile(
leading: Icon(Icons.logout, color: Colors.red),
title: Text(
'Esci',
style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
),
contentPadding: EdgeInsets.zero,
),
),
],
// L'aspetto del pulsante (Icona tonda o Icona + Nome se esteso)
child: isExtended
? Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: context.accent.withValues(alpha: 0.1),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(
radius: 16,
backgroundColor: context.accent,
child: const Icon(
Icons.person,
color: Colors.white,
size: 20,
child: CustomScrollView(
slivers: [
// --- QUICK ACTIONS: AZIONI RAPIDE ---
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: _buildQuickActions(context),
),
),
const SizedBox(width: 12),
Text(
GetIt.I.get<SessionCubit>().state.company?.ragioneSociale ??
"Utente",
style: TextStyle(
fontWeight: FontWeight.bold,
color: context.accent,
const SliverToBoxAdapter(child: SizedBox(height: 32)),
// --- I WIDGET DELLA DASHBOARD (Responsive Grid) ---
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
sliver: SliverGrid(
gridDelegate:
const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 500,
mainAxisSpacing: 16,
crossAxisSpacing: 16,
childAspectRatio: 1.3,
),
delegate: SliverChildListDelegate([
_buildDashboardWidget(
title: 'Contratti in Scadenza',
icon: Icons.assignment_late_outlined,
color: Colors.orange,
context: context,
),
_buildDashboardWidget(
title: 'Sticky Notes',
icon: Icons.sticky_note_2_outlined,
color: Colors.yellow.shade700,
context: context,
),
_buildDashboardWidget(
title: 'I miei Task',
icon: Icons.check_box_outlined,
color: Colors.green,
context: context,
),
_buildDashboardWidget(
title: 'Ultimi Servizi',
icon: Icons.design_services_outlined,
color: Colors.blue,
context: context,
),
_buildDashboardWidget(
title: 'Ultime Assistenze',
icon: Icons.support_agent_outlined,
color: Colors.purple,
context: context,
),
]),
),
),
// Spazio finale per non far attaccare l'ultima card al fondo
const SliverToBoxAdapter(child: SizedBox(height: 40)),
],
),
)
: CircleAvatar(
radius: 18,
backgroundColor: context.accent,
child: const Icon(Icons.person, color: Colors.white),
),
],
),
),
);
}
// --- DIALOG DI CONFERMA LOGOUT ---
void _showLogoutDialog(BuildContext context) {
showDialog(
context: context,
builder: (dialogContext) => AlertDialog(
title: const Row(
children: [
Icon(Icons.logout, color: Colors.red),
SizedBox(width: 8),
Text("Chiudi sessione"),
],
),
content: const Text("Sei sicuro di voler uscire dal gestionale?"),
actions: [
TextButton(
onPressed: () => Navigator.pop(dialogContext),
child: const Text("Annulla"),
// ==========================================
// WIDGET BUILDERS
// ==========================================
Widget _buildHeader(BuildContext context, ThemeData theme) {
final user = context.watch<SessionCubit>().state.currentStaffMember;
final currentStore = context.watch<SessionCubit>().state.currentStore;
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Bentornato, ${user!.name}! 👋",
style: theme.textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.bold,
letterSpacing: -0.5,
color: context.primaryText, // Uso dell'estensione!
),
),
const SizedBox(height: 8),
InkWell(
onTap: () => _showStoreSelector(context, theme),
borderRadius: BorderRadius.circular(8),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: context.primary.withValues(
alpha: 0.08,
), // Sfondo delicato
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: context.primary.withValues(
alpha: 0.2,
), // Bordino netto
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.storefront, size: 16, color: context.primary),
const SizedBox(width: 8),
Text(
currentStore?.nome ?? "Nessun negozio",
style: TextStyle(
fontWeight: FontWeight.w600,
color: context.primary,
),
),
const SizedBox(width: 4),
Icon(Icons.arrow_drop_down, color: context.primary),
],
),
),
),
],
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
),
onPressed: () {
Navigator.pop(dialogContext); // Chiude la Dialog
context.read<AuthCubit>().requestLogout(); // Esegue il logout
),
CircleAvatar(
radius: 24,
// Usiamo il Turchese (accent) in trasparenza per l'avatar
backgroundColor: context.accent.withValues(alpha: 0.15),
child: Icon(Icons.person, color: context.accent, size: 26),
),
],
);
}
Widget _buildQuickActions(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
QuickActionButton(
icon: Icons.add,
label: "Servizio",
color: Colors.blue,
onTap: () {
// Entriamo nel form! Nessun parametro extra = Nuovo Servizio
context.push('/service-form');
},
),
const SizedBox(width: 12),
QuickActionButton(
icon: Icons.handyman,
label: "Assistenza",
color: Colors.redAccent,
onTap: () {
// TODO: Quando avrai la rotta per la nuova assistenza
// context.push('/assistance-form');
},
),
const SizedBox(width: 12),
QuickActionButton(
icon: Icons.note_add,
label: "Nota",
color: Colors.amber,
onTap: () {
// TODO: Quando faremo il modale/pagina delle note
},
),
const SizedBox(width: 12),
QuickActionButton(
icon: Icons.task_alt,
label: "Task",
color: Colors.teal,
onTap: () {
// TODO: Quando faremo i task
},
child: const Text("Esci"),
),
],
),
);
}
// ... mantieni gli altri tuoi metodi intatti (_buildRailHeader, _buildPageContent, _buildBottomNavigationBar)
Widget _buildDashboardWidget({
required BuildContext context,
required String title,
required IconData icon,
required Color color,
}) {
final theme = Theme.of(context);
Widget _buildRailHeader(bool veryLargeScreen) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 24),
child: GestureDetector(
onTap: veryLargeScreen
? null
: () => setState(() => _extendRailway = !_extendRailway),
child: _extendRailway
? Text(
'FLUX',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
color: context.accent,
return Card(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
side: BorderSide(color: theme.dividerColor.withValues(alpha: 0.5)),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(icon, color: color, size: 20),
),
)
: Icon(Icons.bolt, color: context.accent, size: 32),
const SizedBox(width: 12),
Expanded(
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: context.primaryText,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
IconButton(
icon: Icon(
Icons.more_vert,
size: 20,
color: context.secondaryText,
),
onPressed: () {},
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
),
],
),
const Spacer(),
Center(
child: Text(
"(Coming Soon)",
style: TextStyle(
color: context.secondaryText.withValues(alpha: 0.7),
fontStyle: FontStyle.italic,
fontSize: 13,
),
),
),
const Spacer(),
],
),
),
);
}
Widget _buildBottomNavigationBar(int selectedIndex) {
return BottomNavigationBar(
currentIndex: selectedIndex,
onTap: (index) => setState(() => _selectedIndex = index),
selectedItemColor: context.accent,
unselectedItemColor: context.secondaryText,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.dashboard),
label: 'Dashboard',
),
BottomNavigationBarItem(
icon: Icon(Icons.receipt_long),
label: 'Servizi',
),
BottomNavigationBarItem(
icon: Icon(Icons.folder_shared),
label: 'Anagrafiche',
),
],
);
}
void _showStoreSelector(BuildContext context, ThemeData theme) {
showModalBottomSheet(
context: context,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
),
builder: (context) {
// Leggiamo la lista dei negozi dal Cubit dedicato (se ce l'hai lì)
// Oppure adatta il blocco se li salvi altrove!
final staffState = context.watch<StaffCubit>().state;
final currentStoreId = context
.read<SessionCubit>()
.state
.currentStore
?.id;
final currentStaffId = context
.read<SessionCubit>()
.state
.currentStaffMember
?.id;
Widget _buildPageContent(int index, bool isLargeScreen) {
return IndexedStack(
index: index,
children: [
DashboardContent(
isLargeScreen: isLargeScreen,
onTabRequested: (idx) => setState(() => _selectedIndex = 2),
),
const ServicesScreen(),
MasterDataHubContent(
onOpenPage: (widget) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => widget),
);
},
),
],
return SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 24.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: Text(
"Seleziona Negozio",
style: theme.textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(height: 16),
if (staffState.status == StaffStatus.loading)
const Center(child: CircularProgressIndicator())
else if (staffState.storesByStaff[currentStaffId] == null)
const Padding(
padding: EdgeInsets.all(24.0),
child: Text("Nessun negozio disponibile."),
)
else
...staffState.storesByStaff[currentStaffId]!.map((store) {
final isSelected = store.id == currentStoreId;
return ListTile(
contentPadding: const EdgeInsets.symmetric(
horizontal: 24.0,
),
leading: Icon(
Icons.storefront,
color: isSelected
? theme.colorScheme.primary
: theme.iconTheme.color,
),
title: Text(
store.nome,
style: TextStyle(
fontWeight: isSelected
? FontWeight.bold
: FontWeight.normal,
color: isSelected ? theme.colorScheme.primary : null,
),
),
trailing: isSelected
? Icon(
Icons.check_circle,
color: theme.colorScheme.primary,
)
: null,
onTap: () {
// Cambiamo il negozio nel SessionCubit!
context.read<SessionCubit>().changeStore(store);
Navigator.pop(context);
},
);
}),
],
),
),
);
},
);
}
}