Initial commit

lib/app.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import 'routing/app_router.dart';
+import 'theme/app_theme.dart';
+
+class TasqApp extends ConsumerWidget {
+  const TasqApp({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final router = ref.watch(appRouterProvider);
+
+    return MaterialApp.router(
+      title: 'TasQ',
+      routerConfig: router,
+      theme: AppTheme.light(),
+      darkTheme: AppTheme.dark(),
+      themeMode: ThemeMode.system,
+    );
+  }
+}

lib/main.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import 'package:audioplayers/audioplayers.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+import 'package:flutter_dotenv/flutter_dotenv.dart';
+
+import 'app.dart';
+import 'providers/notifications_provider.dart';
+
+Future<void> main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+
+  await dotenv.load(fileName: '.env');
+
+  final supabaseUrl = dotenv.env['SUPABASE_URL'] ?? '';
+  final supabaseAnonKey = dotenv.env['SUPABASE_ANON_KEY'] ?? '';
+
+  if (supabaseUrl.isEmpty || supabaseAnonKey.isEmpty) {
+    runApp(const _MissingConfigApp());
+    return;
+  }
+
+  await Supabase.initialize(url: supabaseUrl, anonKey: supabaseAnonKey);
+
+  runApp(
+    ProviderScope(
+      observers: [NotificationSoundObserver()],
+      child: const TasqApp(),
+    ),
+  );
+}
+
+class NotificationSoundObserver extends ProviderObserver {
+  static final AudioPlayer _player = AudioPlayer();
+
+  @override
+  void didUpdateProvider(
+    ProviderBase provider,
+    Object? previousValue,
+    Object? newValue,
+    ProviderContainer container,
+  ) {
+    if (provider == unreadNotificationsCountProvider) {
+      final prev = previousValue as int?;
+      final next = newValue as int?;
+      if (prev != null && next != null && next > prev) {
+        _player.play(AssetSource('tasq_notification.wav'));
+      }
+    }
+  }
+}
+
+class _MissingConfigApp extends StatelessWidget {
+  const _MissingConfigApp();
+
+  @override
+  Widget build(BuildContext context) {
+    return const MaterialApp(
+      home: Scaffold(
+        body: Center(
+          child: Padding(
+            padding: EdgeInsets.all(24),
+            child: Text(
+              'Missing SUPABASE_URL or SUPABASE_ANON_KEY. '
+              'Provide them in the .env file.',
+              textAlign: TextAlign.center,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/models/notification_item.dart

@@ -0,0 +1,41 @@
+class NotificationItem {
+  NotificationItem({
+    required this.id,
+    required this.userId,
+    required this.actorId,
+    required this.ticketId,
+    required this.taskId,
+    required this.messageId,
+    required this.type,
+    required this.createdAt,
+    required this.readAt,
+  });
+
+  final String id;
+  final String userId;
+  final String? actorId;
+  final String? ticketId;
+  final String? taskId;
+  final int? messageId;
+  final String type;
+  final DateTime createdAt;
+  final DateTime? readAt;
+
+  bool get isUnread => readAt == null;
+
+  factory NotificationItem.fromMap(Map<String, dynamic> map) {
+    return NotificationItem(
+      id: map['id'] as String,
+      userId: map['user_id'] as String,
+      actorId: map['actor_id'] as String?,
+      ticketId: map['ticket_id'] as String?,
+      taskId: map['task_id'] as String?,
+      messageId: map['message_id'] as int?,
+      type: map['type'] as String? ?? 'mention',
+      createdAt: DateTime.parse(map['created_at'] as String),
+      readAt: map['read_at'] == null
+          ? null
+          : DateTime.parse(map['read_at'] as String),
+    );
+  }
+}

lib/models/office.dart

@@ -0,0 +1,10 @@
+class Office {
+  Office({required this.id, required this.name});
+
+  final String id;
+  final String name;
+
+  factory Office.fromMap(Map<String, dynamic> map) {
+    return Office(id: map['id'] as String, name: map['name'] as String? ?? '');
+  }
+}

lib/models/profile.dart

@@ -0,0 +1,15 @@
+class Profile {
+  Profile({required this.id, required this.role, required this.fullName});
+
+  final String id;
+  final String role;
+  final String fullName;
+
+  factory Profile.fromMap(Map<String, dynamic> map) {
+    return Profile(
+      id: map['id'] as String,
+      role: map['role'] as String? ?? 'standard',
+      fullName: map['full_name'] as String? ?? '',
+    );
+  }
+}

lib/models/task.dart

@@ -0,0 +1,50 @@
+class Task {
+  Task({
+    required this.id,
+    required this.ticketId,
+    required this.title,
+    required this.description,
+    required this.officeId,
+    required this.status,
+    required this.priority,
+    required this.queueOrder,
+    required this.createdAt,
+    required this.creatorId,
+    required this.startedAt,
+    required this.completedAt,
+  });
+
+  final String id;
+  final String? ticketId;
+  final String title;
+  final String description;
+  final String? officeId;
+  final String status;
+  final int priority;
+  final int? queueOrder;
+  final DateTime createdAt;
+  final String? creatorId;
+  final DateTime? startedAt;
+  final DateTime? completedAt;
+
+  factory Task.fromMap(Map<String, dynamic> map) {
+    return Task(
+      id: map['id'] as String,
+      ticketId: map['ticket_id'] as String?,
+      title: map['title'] as String? ?? 'Task',
+      description: map['description'] as String? ?? '',
+      officeId: map['office_id'] as String?,
+      status: map['status'] as String? ?? 'queued',
+      priority: map['priority'] as int? ?? 1,
+      queueOrder: map['queue_order'] as int?,
+      createdAt: DateTime.parse(map['created_at'] as String),
+      creatorId: map['creator_id'] as String?,
+      startedAt: map['started_at'] == null
+          ? null
+          : DateTime.parse(map['started_at'] as String),
+      completedAt: map['completed_at'] == null
+          ? null
+          : DateTime.parse(map['completed_at'] as String),
+    );
+  }
+}

lib/models/task_assignment.dart

@@ -0,0 +1,19 @@
+class TaskAssignment {
+  TaskAssignment({
+    required this.taskId,
+    required this.userId,
+    required this.createdAt,
+  });
+
+  final String taskId;
+  final String userId;
+  final DateTime createdAt;
+
+  factory TaskAssignment.fromMap(Map<String, dynamic> map) {
+    return TaskAssignment(
+      taskId: map['task_id'] as String,
+      userId: map['user_id'] as String,
+      createdAt: DateTime.parse(map['created_at'] as String),
+    );
+  }
+}

lib/models/ticket.dart

@@ -0,0 +1,46 @@
+class Ticket {
+  Ticket({
+    required this.id,
+    required this.subject,
+    required this.description,
+    required this.officeId,
+    required this.status,
+    required this.createdAt,
+    required this.creatorId,
+    required this.respondedAt,
+    required this.promotedAt,
+    required this.closedAt,
+  });
+
+  final String id;
+  final String subject;
+  final String description;
+  final String officeId;
+  final String status;
+  final DateTime createdAt;
+  final String? creatorId;
+  final DateTime? respondedAt;
+  final DateTime? promotedAt;
+  final DateTime? closedAt;
+
+  factory Ticket.fromMap(Map<String, dynamic> map) {
+    return Ticket(
+      id: map['id'] as String,
+      subject: map['subject'] as String? ?? '',
+      description: map['description'] as String? ?? '',
+      officeId: map['office_id'] as String? ?? '',
+      status: map['status'] as String? ?? 'pending',
+      createdAt: DateTime.parse(map['created_at'] as String),
+      creatorId: map['creator_id'] as String?,
+      respondedAt: map['responded_at'] == null
+          ? null
+          : DateTime.parse(map['responded_at'] as String),
+      promotedAt: map['promoted_at'] == null
+          ? null
+          : DateTime.parse(map['promoted_at'] as String),
+      closedAt: map['closed_at'] == null
+          ? null
+          : DateTime.parse(map['closed_at'] as String),
+    );
+  }
+}

lib/models/ticket_message.dart

@@ -0,0 +1,28 @@
+class TicketMessage {
+  TicketMessage({
+    required this.id,
+    required this.ticketId,
+    required this.taskId,
+    required this.senderId,
+    required this.content,
+    required this.createdAt,
+  });
+
+  final int id;
+  final String? ticketId;
+  final String? taskId;
+  final String? senderId;
+  final String content;
+  final DateTime createdAt;
+
+  factory TicketMessage.fromMap(Map<String, dynamic> map) {
+    return TicketMessage(
+      id: map['id'] as int,
+      ticketId: map['ticket_id'] as String?,
+      taskId: map['task_id'] as String?,
+      senderId: map['sender_id'] as String?,
+      content: map['content'] as String? ?? '',
+      createdAt: DateTime.parse(map['created_at'] as String),
+    );
+  }
+}

lib/models/user_office.dart

@@ -0,0 +1,13 @@
+class UserOffice {
+  UserOffice({required this.userId, required this.officeId});
+
+  final String userId;
+  final String officeId;
+
+  factory UserOffice.fromMap(Map<String, dynamic> map) {
+    return UserOffice(
+      userId: map['user_id'] as String,
+      officeId: map['office_id'] as String,
+    );
+  }
+}

lib/providers/admin_user_provider.dart

@@ -0,0 +1,105 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+
+import 'supabase_provider.dart';
+
+final adminUserControllerProvider = Provider<AdminUserController>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return AdminUserController(client);
+});
+
+class AdminUserStatus {
+  AdminUserStatus({required this.email, required this.bannedUntil});
+
+  final String? email;
+  final DateTime? bannedUntil;
+
+  bool get isLocked {
+    if (bannedUntil == null) return false;
+    return bannedUntil!.isAfter(DateTime.now().toUtc());
+  }
+}
+
+class AdminUserController {
+  AdminUserController(this._client);
+
+  final SupabaseClient _client;
+
+  Future<void> updateProfile({
+    required String userId,
+    required String fullName,
+    required String role,
+  }) async {
+    await _client
+        .from('profiles')
+        .update({'full_name': fullName, 'role': role})
+        .eq('id', userId);
+  }
+
+  Future<void> updateRole({
+    required String userId,
+    required String role,
+  }) async {
+    await _client.from('profiles').update({'role': role}).eq('id', userId);
+  }
+
+  Future<void> setPassword({
+    required String userId,
+    required String password,
+  }) async {
+    await _invokeAdminFunction(
+      action: 'set_password',
+      payload: {'userId': userId, 'password': password},
+    );
+  }
+
+  Future<void> setLock({required String userId, required bool locked}) async {
+    await _invokeAdminFunction(
+      action: 'set_lock',
+      payload: {'userId': userId, 'locked': locked},
+    );
+  }
+
+  Future<AdminUserStatus> fetchStatus(String userId) async {
+    final data = await _invokeAdminFunction(
+      action: 'get_user',
+      payload: {'userId': userId},
+    );
+    final user = (data as Map<String, dynamic>)['user'] as Map<String, dynamic>;
+    final bannedUntilRaw = user['banned_until'] as String?;
+    return AdminUserStatus(
+      email: user['email'] as String?,
+      bannedUntil: bannedUntilRaw == null
+          ? null
+          : DateTime.tryParse(bannedUntilRaw),
+    );
+  }
+
+  Future<dynamic> _invokeAdminFunction({
+    required String action,
+    required Map<String, dynamic> payload,
+  }) async {
+    final response = await _client.functions.invoke(
+      'admin_user_management',
+      body: {'action': action, ...payload},
+    );
+    if (response.status != 200) {
+      throw Exception(_extractErrorMessage(response.data));
+    }
+    return response.data;
+  }
+
+  String _extractErrorMessage(dynamic data) {
+    if (data is Map<String, dynamic>) {
+      final error = data['error'];
+      if (error is String && error.trim().isNotEmpty) {
+        return error;
+      }
+      final message = data['message'];
+      if (message is String && message.trim().isNotEmpty) {
+        return message;
+      }
+    }
+    return 'Admin request failed.';
+  }
+}

lib/providers/auth_provider.dart

@@ -0,0 +1,69 @@
+import 'dart:async';
+
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+
+import 'supabase_provider.dart';
+
+final authStateChangesProvider = StreamProvider<AuthState>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return client.auth.onAuthStateChange;
+});
+
+final sessionProvider = Provider<Session?>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return client.auth.currentSession;
+});
+
+final authControllerProvider = Provider<AuthController>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return AuthController(client);
+});
+
+class AuthController {
+  AuthController(this._client);
+
+  final SupabaseClient _client;
+
+  Future<AuthResponse> signInWithPassword({
+    required String email,
+    required String password,
+  }) {
+    return _client.auth.signInWithPassword(email: email, password: password);
+  }
+
+  Future<AuthResponse> signUp({
+    required String email,
+    required String password,
+    String? fullName,
+    List<String>? officeIds,
+  }) {
+    return _client.auth.signUp(
+      email: email,
+      password: password,
+      data: {
+        if (fullName != null && fullName.trim().isNotEmpty)
+          'full_name': fullName.trim(),
+        if (officeIds != null && officeIds.isNotEmpty) 'office_ids': officeIds,
+      },
+    );
+  }
+
+  Future<void> signInWithGoogle({String? redirectTo}) {
+    return _client.auth.signInWithOAuth(
+      OAuthProvider.google,
+      redirectTo: redirectTo,
+    );
+  }
+
+  Future<void> signInWithMeta({String? redirectTo}) {
+    return _client.auth.signInWithOAuth(
+      OAuthProvider.facebook,
+      redirectTo: redirectTo,
+    );
+  }
+
+  Future<void> signOut() {
+    return _client.auth.signOut();
+  }
+}

lib/providers/notifications_provider.dart

@@ -0,0 +1,97 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+
+import '../models/notification_item.dart';
+import 'profile_provider.dart';
+import 'supabase_provider.dart';
+
+final notificationsProvider = StreamProvider<List<NotificationItem>>((ref) {
+  final userId = ref.watch(currentUserIdProvider);
+  if (userId == null) {
+    return const Stream.empty();
+  }
+  final client = ref.watch(supabaseClientProvider);
+  return client
+      .from('notifications')
+      .stream(primaryKey: ['id'])
+      .eq('user_id', userId)
+      .order('created_at', ascending: false)
+      .map((rows) => rows.map(NotificationItem.fromMap).toList());
+});
+
+final unreadNotificationsCountProvider = Provider<int>((ref) {
+  final notificationsAsync = ref.watch(notificationsProvider);
+  return notificationsAsync.maybeWhen(
+    data: (items) => items.where((item) => item.isUnread).length,
+    orElse: () => 0,
+  );
+});
+
+final notificationsControllerProvider = Provider<NotificationsController>((
+  ref,
+) {
+  final client = ref.watch(supabaseClientProvider);
+  return NotificationsController(client);
+});
+
+class NotificationsController {
+  NotificationsController(this._client);
+
+  final SupabaseClient _client;
+
+  Future<void> createMentionNotifications({
+    required List<String> userIds,
+    required String actorId,
+    required int messageId,
+    String? ticketId,
+    String? taskId,
+  }) async {
+    if (userIds.isEmpty) return;
+    if ((ticketId == null || ticketId.isEmpty) &&
+        (taskId == null || taskId.isEmpty)) {
+      return;
+    }
+    final rows = userIds
+        .map(
+          (userId) => {
+            'user_id': userId,
+            'actor_id': actorId,
+            'ticket_id': ticketId,
+            'task_id': taskId,
+            'message_id': messageId,
+            'type': 'mention',
+          },
+        )
+        .toList();
+    await _client.from('notifications').insert(rows);
+  }
+
+  Future<void> markRead(String id) async {
+    await _client
+        .from('notifications')
+        .update({'read_at': DateTime.now().toUtc().toIso8601String()})
+        .eq('id', id);
+  }
+
+  Future<void> markReadForTicket(String ticketId) async {
+    final userId = _client.auth.currentUser?.id;
+    if (userId == null) return;
+    await _client
+        .from('notifications')
+        .update({'read_at': DateTime.now().toUtc().toIso8601String()})
+        .eq('ticket_id', ticketId)
+        .eq('user_id', userId)
+        .filter('read_at', 'is', null);
+  }
+
+  Future<void> markReadForTask(String taskId) async {
+    final userId = _client.auth.currentUser?.id;
+    if (userId == null) return;
+    await _client
+        .from('notifications')
+        .update({'read_at': DateTime.now().toUtc().toIso8601String()})
+        .eq('task_id', taskId)
+        .eq('user_id', userId)
+        .filter('read_at', 'is', null);
+  }
+}

lib/providers/profile_provider.dart

@@ -0,0 +1,45 @@
+import 'dart:async';
+
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../models/profile.dart';
+import 'auth_provider.dart';
+import 'supabase_provider.dart';
+
+final currentUserIdProvider = Provider<String?>((ref) {
+  final authState = ref.watch(authStateChangesProvider);
+  return authState.maybeWhen(
+    data: (state) => state.session?.user.id,
+    orElse: () => ref.watch(sessionProvider)?.user.id,
+  );
+});
+
+final currentProfileProvider = StreamProvider<Profile?>((ref) {
+  final userId = ref.watch(currentUserIdProvider);
+  if (userId == null) {
+    return const Stream.empty();
+  }
+  final client = ref.watch(supabaseClientProvider);
+  return client
+      .from('profiles')
+      .stream(primaryKey: ['id'])
+      .eq('id', userId)
+      .map((rows) => rows.isEmpty ? null : Profile.fromMap(rows.first));
+});
+
+final profilesProvider = StreamProvider<List<Profile>>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return client
+      .from('profiles')
+      .stream(primaryKey: ['id'])
+      .order('full_name')
+      .map((rows) => rows.map(Profile.fromMap).toList());
+});
+
+final isAdminProvider = Provider<bool>((ref) {
+  final profileAsync = ref.watch(currentProfileProvider);
+  return profileAsync.maybeWhen(
+    data: (profile) => profile?.role == 'admin',
+    orElse: () => false,
+  );
+});

lib/providers/supabase_provider.dart

@@ -0,0 +1,6 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+
+final supabaseClientProvider = Provider<SupabaseClient>((ref) {
+  return Supabase.instance.client;
+});

lib/providers/tasks_provider.dart

@@ -0,0 +1,235 @@
+import 'dart:async';
+
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+import '../models/task.dart';
+import '../models/task_assignment.dart';
+import 'profile_provider.dart';
+import 'supabase_provider.dart';
+import 'tickets_provider.dart';
+import 'user_offices_provider.dart';
+
+final tasksProvider = StreamProvider<List<Task>>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  final profileAsync = ref.watch(currentProfileProvider);
+  final ticketsAsync = ref.watch(ticketsProvider);
+  final assignmentsAsync = ref.watch(userOfficesProvider);
+
+  final profile = profileAsync.valueOrNull;
+  if (profile == null) {
+    return Stream.value(const <Task>[]);
+  }
+
+  final isGlobal =
+      profile.role == 'admin' ||
+      profile.role == 'dispatcher' ||
+      profile.role == 'it_staff';
+
+  if (isGlobal) {
+    return client
+        .from('tasks')
+        .stream(primaryKey: ['id'])
+        .order('queue_order', ascending: true)
+        .order('created_at')
+        .map((rows) => rows.map(Task.fromMap).toList());
+  }
+
+  final allowedTicketIds =
+      ticketsAsync.valueOrNull?.map((ticket) => ticket.id).toList() ??
+      <String>[];
+  final officeIds =
+      assignmentsAsync.valueOrNull
+          ?.where((assignment) => assignment.userId == profile.id)
+          .map((assignment) => assignment.officeId)
+          .toSet()
+          .toList() ??
+      <String>[];
+
+  if (allowedTicketIds.isEmpty && officeIds.isEmpty) {
+    return Stream.value(const <Task>[]);
+  }
+
+  return client
+      .from('tasks')
+      .stream(primaryKey: ['id'])
+      .order('queue_order', ascending: true)
+      .order('created_at')
+      .map(
+        (rows) => rows.map(Task.fromMap).where((task) {
+          final matchesTicket =
+              task.ticketId != null && allowedTicketIds.contains(task.ticketId);
+          final matchesOffice =
+              task.officeId != null && officeIds.contains(task.officeId);
+          return matchesTicket || matchesOffice;
+        }).toList(),
+      );
+});
+
+final taskAssignmentsProvider = StreamProvider<List<TaskAssignment>>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return client
+      .from('task_assignments')
+      .stream(primaryKey: ['task_id', 'user_id'])
+      .map((rows) => rows.map(TaskAssignment.fromMap).toList());
+});
+
+final taskAssignmentsControllerProvider = Provider<TaskAssignmentsController>((
+  ref,
+) {
+  final client = ref.watch(supabaseClientProvider);
+  return TaskAssignmentsController(client);
+});
+
+final tasksControllerProvider = Provider<TasksController>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return TasksController(client);
+});
+
+class TasksController {
+  TasksController(this._client);
+
+  final SupabaseClient _client;
+
+  Future<void> updateTaskStatus({
+    required String taskId,
+    required String status,
+  }) async {
+    await _client.from('tasks').update({'status': status}).eq('id', taskId);
+  }
+
+  Future<void> createTask({
+    required String title,
+    required String description,
+    required String officeId,
+  }) async {
+    final actorId = _client.auth.currentUser?.id;
+    final data = await _client
+        .from('tasks')
+        .insert({
+          'title': title,
+          'description': description,
+          'office_id': officeId,
+        })
+        .select('id')
+        .single();
+    final taskId = data['id'] as String?;
+    if (taskId == null) return;
+    unawaited(_notifyCreated(taskId: taskId, actorId: actorId));
+  }
+
+  Future<void> _notifyCreated({
+    required String taskId,
+    required String? actorId,
+  }) async {
+    try {
+      final recipients = await _fetchRoleUserIds(
+        roles: const ['dispatcher', 'it_staff'],
+        excludeUserId: actorId,
+      );
+      if (recipients.isEmpty) return;
+      final rows = recipients
+          .map(
+            (userId) => {
+              'user_id': userId,
+              'actor_id': actorId,
+              'task_id': taskId,
+              'type': 'created',
+            },
+          )
+          .toList();
+      await _client.from('notifications').insert(rows);
+    } catch (_) {
+      return;
+    }
+  }
+
+  Future<List<String>> _fetchRoleUserIds({
+    required List<String> roles,
+    required String? excludeUserId,
+  }) async {
+    try {
+      final data = await _client
+          .from('profiles')
+          .select('id, role')
+          .inFilter('role', roles);
+      final rows = data as List<dynamic>;
+      final ids = rows
+          .map((row) => row['id'] as String?)
+          .whereType<String>()
+          .where((id) => id.isNotEmpty && id != excludeUserId)
+          .toList();
+      return ids;
+    } catch (_) {
+      return [];
+    }
+  }
+}
+
+class TaskAssignmentsController {
+  TaskAssignmentsController(this._client);
+
+  final SupabaseClient _client;
+
+  Future<void> replaceAssignments({
+    required String taskId,
+    required String? ticketId,
+    required List<String> newUserIds,
+    required List<String> currentUserIds,
+  }) async {
+    final nextIds = newUserIds.toSet();
+    final currentIds = currentUserIds.toSet();
+    final toAdd = nextIds.difference(currentIds).toList();
+    final toRemove = currentIds.difference(nextIds).toList();
+
+    if (toAdd.isNotEmpty) {
+      final rows = toAdd
+          .map((userId) => {'task_id': taskId, 'user_id': userId})
+          .toList();
+      await _client.from('task_assignments').insert(rows);
+      await _notifyAssigned(taskId: taskId, ticketId: ticketId, userIds: toAdd);
+    }
+    if (toRemove.isNotEmpty) {
+      await _client
+          .from('task_assignments')
+          .delete()
+          .eq('task_id', taskId)
+          .inFilter('user_id', toRemove);
+    }
+  }
+
+  Future<void> _notifyAssigned({
+    required String taskId,
+    required String? ticketId,
+    required List<String> userIds,
+  }) async {
+    if (userIds.isEmpty) return;
+    try {
+      final actorId = _client.auth.currentUser?.id;
+      final rows = userIds
+          .map(
+            (userId) => {
+              'user_id': userId,
+              'actor_id': actorId,
+              'task_id': taskId,
+              'ticket_id': ticketId,
+              'type': 'assignment',
+            },
+          )
+          .toList();
+      await _client.from('notifications').insert(rows);
+    } catch (_) {
+      return;
+    }
+  }
+
+  Future<void> removeAssignment({
+    required String taskId,
+    required String userId,
+  }) async {
+    await _client
+        .from('task_assignments')
+        .delete()
+        .eq('task_id', taskId)
+        .eq('user_id', userId);
+  }
+}

lib/providers/tickets_provider.dart

@@ -0,0 +1,248 @@
+import 'dart:async';
+
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+
+import '../models/office.dart';
+import '../models/ticket.dart';
+import '../models/ticket_message.dart';
+import 'profile_provider.dart';
+import 'supabase_provider.dart';
+import 'user_offices_provider.dart';
+
+final officesProvider = StreamProvider<List<Office>>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return client
+      .from('offices')
+      .stream(primaryKey: ['id'])
+      .order('name')
+      .map((rows) => rows.map(Office.fromMap).toList());
+});
+
+final officesOnceProvider = FutureProvider<List<Office>>((ref) async {
+  final client = ref.watch(supabaseClientProvider);
+  final rows = await client.from('offices').select().order('name');
+  return (rows as List<dynamic>)
+      .map((row) => Office.fromMap(row as Map<String, dynamic>))
+      .toList();
+});
+
+final officesControllerProvider = Provider<OfficesController>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return OfficesController(client);
+});
+
+final ticketsProvider = StreamProvider<List<Ticket>>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  final profileAsync = ref.watch(currentProfileProvider);
+  final assignmentsAsync = ref.watch(userOfficesProvider);
+
+  final profile = profileAsync.valueOrNull;
+  if (profile == null) {
+    return Stream.value(const <Ticket>[]);
+  }
+
+  final isGlobal =
+      profile.role == 'admin' ||
+      profile.role == 'dispatcher' ||
+      profile.role == 'it_staff';
+
+  if (isGlobal) {
+    return client
+        .from('tickets')
+        .stream(primaryKey: ['id'])
+        .order('created_at', ascending: false)
+        .map((rows) => rows.map(Ticket.fromMap).toList());
+  }
+
+  final officeIds =
+      assignmentsAsync.valueOrNull
+          ?.where((assignment) => assignment.userId == profile.id)
+          .map((assignment) => assignment.officeId)
+          .toSet()
+          .toList() ??
+      <String>[];
+  if (officeIds.isEmpty) {
+    return Stream.value(const <Ticket>[]);
+  }
+
+  return client
+      .from('tickets')
+      .stream(primaryKey: ['id'])
+      .inFilter('office_id', officeIds)
+      .order('created_at', ascending: false)
+      .map((rows) => rows.map(Ticket.fromMap).toList());
+});
+
+final ticketMessagesProvider =
+    StreamProvider.family<List<TicketMessage>, String>((ref, ticketId) {
+      final client = ref.watch(supabaseClientProvider);
+      return client
+          .from('ticket_messages')
+          .stream(primaryKey: ['id'])
+          .eq('ticket_id', ticketId)
+          .order('created_at', ascending: false)
+          .map((rows) => rows.map(TicketMessage.fromMap).toList());
+    });
+
+final ticketMessagesAllProvider = StreamProvider<List<TicketMessage>>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return client
+      .from('ticket_messages')
+      .stream(primaryKey: ['id'])
+      .order('created_at', ascending: false)
+      .map((rows) => rows.map(TicketMessage.fromMap).toList());
+});
+
+final taskMessagesProvider = StreamProvider.family<List<TicketMessage>, String>(
+  (ref, taskId) {
+    final client = ref.watch(supabaseClientProvider);
+    return client
+        .from('ticket_messages')
+        .stream(primaryKey: ['id'])
+        .eq('task_id', taskId)
+        .order('created_at', ascending: false)
+        .map((rows) => rows.map(TicketMessage.fromMap).toList());
+  },
+);
+
+final ticketsControllerProvider = Provider<TicketsController>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return TicketsController(client);
+});
+
+class TicketsController {
+  TicketsController(this._client);
+
+  final SupabaseClient _client;
+
+  Future<void> createTicket({
+    required String subject,
+    required String description,
+    required String officeId,
+  }) async {
+    final actorId = _client.auth.currentUser?.id;
+    final data = await _client
+        .from('tickets')
+        .insert({
+          'subject': subject,
+          'description': description,
+          'office_id': officeId,
+          'creator_id': _client.auth.currentUser?.id,
+        })
+        .select('id')
+        .single();
+    final ticketId = data['id'] as String?;
+    if (ticketId == null) return;
+    unawaited(_notifyCreated(ticketId: ticketId, actorId: actorId));
+  }
+
+  Future<void> _notifyCreated({
+    required String ticketId,
+    required String? actorId,
+  }) async {
+    try {
+      final recipients = await _fetchRoleUserIds(
+        roles: const ['dispatcher', 'it_staff'],
+        excludeUserId: actorId,
+      );
+      if (recipients.isEmpty) return;
+      final rows = recipients
+          .map(
+            (userId) => {
+              'user_id': userId,
+              'actor_id': actorId,
+              'ticket_id': ticketId,
+              'type': 'created',
+            },
+          )
+          .toList();
+      await _client.from('notifications').insert(rows);
+    } catch (_) {
+      return;
+    }
+  }
+
+  Future<List<String>> _fetchRoleUserIds({
+    required List<String> roles,
+    required String? excludeUserId,
+  }) async {
+    try {
+      final data = await _client
+          .from('profiles')
+          .select('id, role')
+          .inFilter('role', roles);
+      final rows = data as List<dynamic>;
+      final ids = rows
+          .map((row) => row['id'] as String?)
+          .whereType<String>()
+          .where((id) => id.isNotEmpty && id != excludeUserId)
+          .toList();
+      return ids;
+    } catch (_) {
+      return [];
+    }
+  }
+
+  Future<TicketMessage> sendTicketMessage({
+    required String ticketId,
+    required String content,
+  }) async {
+    final data = await _client
+        .from('ticket_messages')
+        .insert({
+          'ticket_id': ticketId,
+          'content': content,
+          'sender_id': _client.auth.currentUser?.id,
+        })
+        .select()
+        .single();
+    return TicketMessage.fromMap(data);
+  }
+
+  Future<TicketMessage> sendTaskMessage({
+    required String taskId,
+    required String? ticketId,
+    required String content,
+  }) async {
+    final payload = <String, dynamic>{
+      'task_id': taskId,
+      'content': content,
+      'sender_id': _client.auth.currentUser?.id,
+    };
+    if (ticketId != null) {
+      payload['ticket_id'] = ticketId;
+    }
+    final data = await _client
+        .from('ticket_messages')
+        .insert(payload)
+        .select()
+        .single();
+    return TicketMessage.fromMap(data);
+  }
+
+  Future<void> updateTicketStatus({
+    required String ticketId,
+    required String status,
+  }) async {
+    await _client.from('tickets').update({'status': status}).eq('id', ticketId);
+  }
+}
+
+class OfficesController {
+  OfficesController(this._client);
+
+  final SupabaseClient _client;
+
+  Future<void> createOffice({required String name}) async {
+    await _client.from('offices').insert({'name': name});
+  }
+
+  Future<void> updateOffice({required String id, required String name}) async {
+    await _client.from('offices').update({'name': name}).eq('id', id);
+  }
+
+  Future<void> deleteOffice({required String id}) async {
+    await _client.from('offices').delete().eq('id', id);
+  }
+}

lib/providers/typing_provider.dart

@@ -0,0 +1,152 @@
+import 'dart:async';
+
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+
+import 'supabase_provider.dart';
+
+class TypingIndicatorState {
+  const TypingIndicatorState({
+    required this.userIds,
+    required this.channelStatus,
+    required this.lastPayload,
+  });
+
+  final Set<String> userIds;
+  final String channelStatus;
+  final Map<String, dynamic> lastPayload;
+
+  TypingIndicatorState copyWith({
+    Set<String>? userIds,
+    String? channelStatus,
+    Map<String, dynamic>? lastPayload,
+  }) {
+    return TypingIndicatorState(
+      userIds: userIds ?? this.userIds,
+      channelStatus: channelStatus ?? this.channelStatus,
+      lastPayload: lastPayload ?? this.lastPayload,
+    );
+  }
+}
+
+final typingIndicatorProvider = StateNotifierProvider.autoDispose
+    .family<TypingIndicatorController, TypingIndicatorState, String>((
+      ref,
+      ticketId,
+    ) {
+      final client = ref.watch(supabaseClientProvider);
+      final controller = TypingIndicatorController(client, ticketId);
+      ref.onDispose(controller.dispose);
+      return controller;
+    });
+
+class TypingIndicatorController extends StateNotifier<TypingIndicatorState> {
+  TypingIndicatorController(this._client, this._ticketId)
+    : super(
+        const TypingIndicatorState(
+          userIds: {},
+          channelStatus: 'init',
+          lastPayload: {},
+        ),
+      ) {
+    _initChannel();
+  }
+
+  final SupabaseClient _client;
+  final String _ticketId;
+  RealtimeChannel? _channel;
+  Timer? _typingTimer;
+  final Map<String, Timer> _remoteTimeouts = {};
+
+  void _initChannel() {
+    final channel = _client.channel('typing:$_ticketId');
+    channel.onBroadcast(
+      event: 'typing',
+      callback: (payload) {
+        final Map<String, dynamic> data = _extractPayload(payload);
+        final userId = data['user_id'] as String?;
+        final rawType = data['type']?.toString();
+        final currentUserId = _client.auth.currentUser?.id;
+        state = state.copyWith(lastPayload: data);
+        if (userId == null || userId == currentUserId) {
+          return;
+        }
+        if (rawType == 'stop') {
+          _clearRemoteTyping(userId);
+          return;
+        }
+        _markRemoteTyping(userId);
+      },
+    );
+    channel.subscribe((status, error) {
+      state = state.copyWith(channelStatus: status.name);
+    });
+    _channel = channel;
+  }
+
+  Map<String, dynamic> _extractPayload(dynamic payload) {
+    if (payload is Map<String, dynamic>) {
+      final inner = payload['payload'];
+      if (inner is Map<String, dynamic>) {
+        return inner;
+      }
+      return payload;
+    }
+    final dynamic inner = payload.payload;
+    if (inner is Map<String, dynamic>) {
+      return inner;
+    }
+    return <String, dynamic>{};
+  }
+
+  void userTyping() {
+    if (_client.auth.currentUser?.id == null) return;
+    _sendTypingEvent('start');
+    _typingTimer?.cancel();
+    _typingTimer = Timer(const Duration(milliseconds: 150), () {
+      _sendTypingEvent('stop');
+    });
+  }
+
+  void stopTyping() {
+    _typingTimer?.cancel();
+    _sendTypingEvent('stop');
+  }
+
+  void _markRemoteTyping(String userId) {
+    final updated = {...state.userIds, userId};
+    state = state.copyWith(userIds: updated);
+    _remoteTimeouts[userId]?.cancel();
+    _remoteTimeouts[userId] = Timer(const Duration(milliseconds: 400), () {
+      _clearRemoteTyping(userId);
+    });
+  }
+
+  void _clearRemoteTyping(String userId) {
+    final updated = {...state.userIds}..remove(userId);
+    state = state.copyWith(userIds: updated);
+    _remoteTimeouts[userId]?.cancel();
+    _remoteTimeouts.remove(userId);
+  }
+
+  void _sendTypingEvent(String type) {
+    final userId = _client.auth.currentUser?.id;
+    if (userId == null || _channel == null) return;
+    _channel!.sendBroadcastMessage(
+      event: 'typing',
+      payload: {'user_id': userId, 'type': type},
+    );
+  }
+
+  @override
+  void dispose() {
+    stopTyping();
+    _typingTimer?.cancel();
+    for (final timer in _remoteTimeouts.values) {
+      timer.cancel();
+    }
+    _remoteTimeouts.clear();
+    _channel?.unsubscribe();
+    super.dispose();
+  }
+}

lib/providers/user_offices_provider.dart

@@ -0,0 +1,46 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+
+import '../models/user_office.dart';
+import 'supabase_provider.dart';
+
+final userOfficesProvider = StreamProvider<List<UserOffice>>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return client
+      .from('user_offices')
+      .stream(primaryKey: ['user_id', 'office_id'])
+      .order('created_at')
+      .map((rows) => rows.map(UserOffice.fromMap).toList());
+});
+
+final userOfficesControllerProvider = Provider<UserOfficesController>((ref) {
+  final client = ref.watch(supabaseClientProvider);
+  return UserOfficesController(client);
+});
+
+class UserOfficesController {
+  UserOfficesController(this._client);
+
+  final SupabaseClient _client;
+
+  Future<void> assignUserOffice({
+    required String userId,
+    required String officeId,
+  }) async {
+    await _client.from('user_offices').insert({
+      'user_id': userId,
+      'office_id': officeId,
+    });
+  }
+
+  Future<void> removeUserOffice({
+    required String userId,
+    required String officeId,
+  }) async {
+    await _client
+        .from('user_offices')
+        .delete()
+        .eq('user_id', userId)
+        .eq('office_id', officeId);
+  }
+}

lib/routing/app_router.dart

@@ -0,0 +1,160 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+
+import '../providers/auth_provider.dart';
+import '../providers/profile_provider.dart';
+import '../screens/auth/login_screen.dart';
+import '../screens/auth/signup_screen.dart';
+import '../screens/admin/offices_screen.dart';
+import '../screens/admin/user_management_screen.dart';
+import '../screens/dashboard/dashboard_screen.dart';
+import '../screens/notifications/notifications_screen.dart';
+import '../screens/shared/under_development_screen.dart';
+import '../screens/tasks/task_detail_screen.dart';
+import '../screens/tasks/tasks_list_screen.dart';
+import '../screens/tickets/ticket_detail_screen.dart';
+import '../screens/tickets/tickets_list_screen.dart';
+import '../widgets/app_shell.dart';
+
+final appRouterProvider = Provider<GoRouter>((ref) {
+  final notifier = RouterNotifier(ref);
+  ref.onDispose(notifier.dispose);
+
+  return GoRouter(
+    initialLocation: '/dashboard',
+    refreshListenable: notifier,
+    redirect: (context, state) {
+      final authState = ref.read(authStateChangesProvider);
+      final session = authState.maybeWhen(
+        data: (state) => state.session,
+        orElse: () => ref.read(sessionProvider),
+      );
+      final isAuthRoute =
+          state.fullPath == '/login' || state.fullPath == '/signup';
+      final isSignedIn = session != null;
+      final profileAsync = ref.read(currentProfileProvider);
+      final isAdminRoute = state.matchedLocation.startsWith('/settings');
+      final isAdmin = profileAsync.maybeWhen(
+        data: (profile) => profile?.role == 'admin',
+        orElse: () => false,
+      );
+
+      if (!isSignedIn && !isAuthRoute) {
+        return '/login';
+      }
+      if (isSignedIn && isAuthRoute) {
+        return '/dashboard';
+      }
+      if (isAdminRoute && !isAdmin) {
+        return '/tickets';
+      }
+      return null;
+    },
+    routes: [
+      GoRoute(path: '/login', builder: (context, state) => const LoginScreen()),
+      GoRoute(
+        path: '/signup',
+        builder: (context, state) => const SignUpScreen(),
+      ),
+      ShellRoute(
+        builder: (context, state, child) => AppScaffold(child: child),
+        routes: [
+          GoRoute(
+            path: '/dashboard',
+            builder: (context, state) => const DashboardScreen(),
+          ),
+          GoRoute(
+            path: '/tickets',
+            builder: (context, state) => const TicketsListScreen(),
+            routes: [
+              GoRoute(
+                path: ':id',
+                builder: (context, state) => TicketDetailScreen(
+                  ticketId: state.pathParameters['id'] ?? '',
+                ),
+              ),
+            ],
+          ),
+          GoRoute(
+            path: '/tasks',
+            builder: (context, state) => const TasksListScreen(),
+            routes: [
+              GoRoute(
+                path: ':id',
+                builder: (context, state) =>
+                    TaskDetailScreen(taskId: state.pathParameters['id'] ?? ''),
+              ),
+            ],
+          ),
+          GoRoute(
+            path: '/events',
+            builder: (context, state) => const UnderDevelopmentScreen(
+              title: 'Events',
+              subtitle: 'Event monitoring is under development.',
+              icon: Icons.event,
+            ),
+          ),
+          GoRoute(
+            path: '/announcements',
+            builder: (context, state) => const UnderDevelopmentScreen(
+              title: 'Announcement',
+              subtitle: 'Operational broadcasts are coming soon.',
+              icon: Icons.campaign,
+            ),
+          ),
+          GoRoute(
+            path: '/workforce',
+            builder: (context, state) => const UnderDevelopmentScreen(
+              title: 'Workforce',
+              subtitle: 'Workforce management is in progress.',
+              icon: Icons.groups,
+            ),
+          ),
+          GoRoute(
+            path: '/reports',
+            builder: (context, state) => const UnderDevelopmentScreen(
+              title: 'Reports',
+              subtitle: 'Reporting automation is under development.',
+              icon: Icons.analytics,
+            ),
+          ),
+          GoRoute(
+            path: '/settings/users',
+            builder: (context, state) => const UserManagementScreen(),
+          ),
+          GoRoute(
+            path: '/settings/offices',
+            builder: (context, state) => const OfficesScreen(),
+          ),
+          GoRoute(
+            path: '/notifications',
+            builder: (context, state) => const NotificationsScreen(),
+          ),
+        ],
+      ),
+    ],
+  );
+});
+
+class RouterNotifier extends ChangeNotifier {
+  RouterNotifier(this.ref) {
+    _authSub = ref.listen(authStateChangesProvider, (previous, next) {
+      notifyListeners();
+    });
+    _profileSub = ref.listen(currentProfileProvider, (previous, next) {
+      notifyListeners();
+    });
+  }
+
+  final Ref ref;
+  late final ProviderSubscription _authSub;
+  late final ProviderSubscription _profileSub;
+
+  @override
+  void dispose() {
+    _authSub.close();
+    _profileSub.close();
+    super.dispose();
+  }
+}

lib/screens/admin/offices_screen.dart

@@ -0,0 +1,185 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+
+import '../../models/office.dart';
+import '../../providers/profile_provider.dart';
+import '../../providers/tickets_provider.dart';
+import '../../widgets/responsive_body.dart';
+
+class OfficesScreen extends ConsumerWidget {
+  const OfficesScreen({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isAdmin = ref.watch(isAdminProvider);
+    final officesAsync = ref.watch(officesProvider);
+
+    return Scaffold(
+      body: ResponsiveBody(
+        maxWidth: 800,
+        child: !isAdmin
+            ? const Center(child: Text('Admin access required.'))
+            : officesAsync.when(
+                data: (offices) {
+                  if (offices.isEmpty) {
+                    return const Center(child: Text('No offices found.'));
+                  }
+                  return Column(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: [
+                      Padding(
+                        padding: const EdgeInsets.only(top: 16, bottom: 8),
+                        child: Row(
+                          children: [
+                            Expanded(
+                              child: Text(
+                                'Office Management',
+                                style: Theme.of(context).textTheme.titleLarge
+                                    ?.copyWith(fontWeight: FontWeight.w700),
+                              ),
+                            ),
+                            TextButton.icon(
+                              onPressed: () => context.go('/settings/users'),
+                              icon: const Icon(Icons.group),
+                              label: const Text('User access'),
+                            ),
+                          ],
+                        ),
+                      ),
+                      Expanded(
+                        child: ListView.separated(
+                          padding: const EdgeInsets.only(bottom: 24),
+                          itemCount: offices.length,
+                          separatorBuilder: (_, index) =>
+                              const SizedBox(height: 12),
+                          itemBuilder: (context, index) {
+                            final office = offices[index];
+                            return ListTile(
+                              leading: const Icon(Icons.apartment_outlined),
+                              title: Text(office.name),
+                              trailing: Wrap(
+                                spacing: 8,
+                                children: [
+                                  IconButton(
+                                    tooltip: 'Edit',
+                                    icon: const Icon(Icons.edit),
+                                    onPressed: () => _showOfficeDialog(
+                                      context,
+                                      ref,
+                                      office: office,
+                                    ),
+                                  ),
+                                  IconButton(
+                                    tooltip: 'Delete',
+                                    icon: const Icon(Icons.delete),
+                                    onPressed: () =>
+                                        _confirmDelete(context, ref, office),
+                                  ),
+                                ],
+                              ),
+                            );
+                          },
+                        ),
+                      ),
+                    ],
+                  );
+                },
+                loading: () => const Center(child: CircularProgressIndicator()),
+                error: (error, _) =>
+                    Center(child: Text('Failed to load offices: $error')),
+              ),
+      ),
+      floatingActionButton: isAdmin
+          ? FloatingActionButton.extended(
+              onPressed: () => _showOfficeDialog(context, ref),
+              icon: const Icon(Icons.add),
+              label: const Text('New Office'),
+            )
+          : null,
+    );
+  }
+
+  Future<void> _showOfficeDialog(
+    BuildContext context,
+    WidgetRef ref, {
+    Office? office,
+  }) async {
+    final nameController = TextEditingController(text: office?.name ?? '');
+
+    await showDialog<void>(
+      context: context,
+      builder: (dialogContext) {
+        return AlertDialog(
+          title: Text(office == null ? 'Create Office' : 'Edit Office'),
+          content: TextField(
+            controller: nameController,
+            decoration: const InputDecoration(labelText: 'Office name'),
+          ),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.of(dialogContext).pop(),
+              child: const Text('Cancel'),
+            ),
+            FilledButton(
+              onPressed: () async {
+                final name = nameController.text.trim();
+                if (name.isEmpty) {
+                  ScaffoldMessenger.of(context).showSnackBar(
+                    const SnackBar(content: Text('Name is required.')),
+                  );
+                  return;
+                }
+                final controller = ref.read(officesControllerProvider);
+                if (office == null) {
+                  await controller.createOffice(name: name);
+                } else {
+                  await controller.updateOffice(id: office.id, name: name);
+                }
+                ref.invalidate(officesProvider);
+                if (context.mounted) {
+                  Navigator.of(dialogContext).pop();
+                }
+              },
+              child: Text(office == null ? 'Create' : 'Save'),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Future<void> _confirmDelete(
+    BuildContext context,
+    WidgetRef ref,
+    Office office,
+  ) async {
+    await showDialog<void>(
+      context: context,
+      builder: (dialogContext) {
+        return AlertDialog(
+          title: const Text('Delete Office'),
+          content: Text('Delete ${office.name}? This cannot be undone.'),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.of(dialogContext).pop(),
+              child: const Text('Cancel'),
+            ),
+            FilledButton(
+              onPressed: () async {
+                await ref
+                    .read(officesControllerProvider)
+                    .deleteOffice(id: office.id);
+                ref.invalidate(officesProvider);
+                if (context.mounted) {
+                  Navigator.of(dialogContext).pop();
+                }
+              },
+              child: const Text('Delete'),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

lib/screens/admin/user_management_screen.dart

@@ -0,0 +1,672 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../models/office.dart';
+import '../../models/profile.dart';
+import '../../models/ticket_message.dart';
+import '../../models/user_office.dart';
+import '../../providers/admin_user_provider.dart';
+import '../../providers/profile_provider.dart';
+import '../../providers/tickets_provider.dart';
+import '../../providers/user_offices_provider.dart';
+import '../../widgets/responsive_body.dart';
+
+class UserManagementScreen extends ConsumerStatefulWidget {
+  const UserManagementScreen({super.key});
+
+  @override
+  ConsumerState<UserManagementScreen> createState() =>
+      _UserManagementScreenState();
+}
+
+class _UserManagementScreenState extends ConsumerState<UserManagementScreen> {
+  static const List<String> _roles = [
+    'standard',
+    'dispatcher',
+    'it_staff',
+    'admin',
+  ];
+
+  final _fullNameController = TextEditingController();
+
+  String? _selectedUserId;
+  String? _selectedRole;
+  Set<String> _selectedOfficeIds = {};
+  AdminUserStatus? _selectedStatus;
+  bool _isSaving = false;
+  bool _isStatusLoading = false;
+  final Map<String, AdminUserStatus> _statusCache = {};
+  final Set<String> _statusLoading = {};
+  final Set<String> _statusErrors = {};
+  Set<String> _prefetchedUserIds = {};
+
+  @override
+  void dispose() {
+    _fullNameController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final isAdmin = ref.watch(isAdminProvider);
+    final profilesAsync = ref.watch(profilesProvider);
+    final officesAsync = ref.watch(officesProvider);
+    final assignmentsAsync = ref.watch(userOfficesProvider);
+    final messagesAsync = ref.watch(ticketMessagesAllProvider);
+
+    return Scaffold(
+      body: ResponsiveBody(
+        maxWidth: 1080,
+        child: !isAdmin
+            ? const Center(child: Text('Admin access required.'))
+            : _buildContent(
+                context,
+                profilesAsync,
+                officesAsync,
+                assignmentsAsync,
+                messagesAsync,
+              ),
+      ),
+    );
+  }
+
+  Widget _buildContent(
+    BuildContext context,
+    AsyncValue<List<Profile>> profilesAsync,
+    AsyncValue<List<Office>> officesAsync,
+    AsyncValue<List<UserOffice>> assignmentsAsync,
+    AsyncValue<List<TicketMessage>> messagesAsync,
+  ) {
+    if (profilesAsync.isLoading ||
+        officesAsync.isLoading ||
+        assignmentsAsync.isLoading ||
+        messagesAsync.isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (profilesAsync.hasError ||
+        officesAsync.hasError ||
+        assignmentsAsync.hasError ||
+        messagesAsync.hasError) {
+      final error =
+          profilesAsync.error ??
+          officesAsync.error ??
+          assignmentsAsync.error ??
+          messagesAsync.error ??
+          'Unknown error';
+      return Center(child: Text('Failed to load data: $error'));
+    }
+
+    final profiles = profilesAsync.valueOrNull ?? [];
+    final offices = officesAsync.valueOrNull ?? [];
+    final assignments = assignmentsAsync.valueOrNull ?? [];
+    final messages = messagesAsync.valueOrNull ?? [];
+
+    _prefetchStatuses(profiles);
+
+    final lastActiveByUser = <String, DateTime>{};
+    for (final message in messages) {
+      final senderId = message.senderId;
+      if (senderId == null) continue;
+      final current = lastActiveByUser[senderId];
+      if (current == null || message.createdAt.isAfter(current)) {
+        lastActiveByUser[senderId] = message.createdAt;
+      }
+    }
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          Text(
+            'User Management',
+            style: Theme.of(
+              context,
+            ).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700),
+          ),
+          const SizedBox(height: 16),
+          Expanded(
+            child: _buildUserTable(
+              context,
+              profiles,
+              offices,
+              assignments,
+              lastActiveByUser,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildUserTable(
+    BuildContext context,
+    List<Profile> profiles,
+    List<Office> offices,
+    List<UserOffice> assignments,
+    Map<String, DateTime> lastActiveByUser,
+  ) {
+    if (profiles.isEmpty) {
+      return const Center(child: Text('No users found.'));
+    }
+    final officeNameById = {
+      for (final office in offices) office.id: office.name,
+    };
+
+    final officeCountByUser = <String, int>{};
+    for (final assignment in assignments) {
+      officeCountByUser.update(
+        assignment.userId,
+        (value) => value + 1,
+        ifAbsent: () => 1,
+      );
+    }
+
+    return Material(
+      color: Theme.of(context).colorScheme.surface,
+      child: SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(minWidth: 720),
+          child: SingleChildScrollView(
+            child: DataTable(
+              headingRowHeight: 46,
+              dataRowMinHeight: 48,
+              dataRowMaxHeight: 64,
+              columnSpacing: 24,
+              horizontalMargin: 16,
+              dividerThickness: 1,
+              headingRowColor: MaterialStateProperty.resolveWith(
+                (states) => Theme.of(context).colorScheme.surfaceVariant,
+              ),
+              columns: const [
+                DataColumn(label: Text('User')),
+                DataColumn(label: Text('Email')),
+                DataColumn(label: Text('Role')),
+                DataColumn(label: Text('Offices')),
+                DataColumn(label: Text('Status')),
+                DataColumn(label: Text('Last active')),
+              ],
+              rows: profiles.asMap().entries.map((entry) {
+                final index = entry.key;
+                final profile = entry.value;
+                final label = profile.fullName.isEmpty
+                    ? profile.id
+                    : profile.fullName;
+                final status = _statusCache[profile.id];
+                final hasError = _statusErrors.contains(profile.id);
+                final isLoading = _statusLoading.contains(profile.id);
+                final email = hasError
+                    ? 'Unavailable'
+                    : (status?.email ?? (isLoading ? 'Loading...' : 'N/A'));
+                final statusLabel = hasError
+                    ? 'Unavailable'
+                    : (status == null
+                          ? (isLoading ? 'Loading...' : 'Unknown')
+                          : (status.isLocked ? 'Locked' : 'Active'));
+                final officeCount = officeCountByUser[profile.id] ?? 0;
+                final officeLabel = officeCount == 0 ? 'None' : '$officeCount';
+                final officeNames = assignments
+                    .where((assignment) => assignment.userId == profile.id)
+                    .map(
+                      (assignment) =>
+                          officeNameById[assignment.officeId] ??
+                          assignment.officeId,
+                    )
+                    .toList();
+                final officesText = officeNames.isEmpty
+                    ? 'No offices'
+                    : officeNames.join(', ');
+                final lastActive = _formatLastActive(
+                  lastActiveByUser[profile.id]?.toLocal(),
+                );
+
+                return DataRow.byIndex(
+                  index: index,
+                  onSelectChanged: (selected) {
+                    if (selected != true) return;
+                    _showUserDialog(context, profile, offices, assignments);
+                  },
+                  color: MaterialStateProperty.resolveWith((states) {
+                    if (states.contains(MaterialState.selected)) {
+                      return Theme.of(
+                        context,
+                      ).colorScheme.surfaceTint.withOpacity(0.12);
+                    }
+                    if (index.isEven) {
+                      return Theme.of(
+                        context,
+                      ).colorScheme.surface.withOpacity(0.6);
+                    }
+                    return Theme.of(context).colorScheme.surface;
+                  }),
+                  cells: [
+                    DataCell(Text(label)),
+                    DataCell(Text(email)),
+                    DataCell(Text(profile.role)),
+                    DataCell(
+                      Tooltip(message: officesText, child: Text(officeLabel)),
+                    ),
+                    DataCell(Text(statusLabel)),
+                    DataCell(Text(lastActive)),
+                  ],
+                );
+              }).toList(),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _ensureStatusLoaded(String userId) {
+    if (_statusCache.containsKey(userId) || _statusLoading.contains(userId)) {
+      return;
+    }
+    _statusLoading.add(userId);
+    _statusErrors.remove(userId);
+    ref
+        .read(adminUserControllerProvider)
+        .fetchStatus(userId)
+        .then((status) {
+          if (!mounted) return;
+          setState(() {
+            _statusCache[userId] = status;
+            _statusLoading.remove(userId);
+          });
+        })
+        .catchError((_) {
+          if (!mounted) return;
+          setState(() {
+            _statusLoading.remove(userId);
+            _statusErrors.add(userId);
+          });
+        });
+  }
+
+  void _prefetchStatuses(List<Profile> profiles) {
+    final ids = profiles.map((profile) => profile.id).toSet();
+    final missing = ids.difference(_prefetchedUserIds);
+    if (missing.isEmpty) return;
+    _prefetchedUserIds = ids;
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted) return;
+      for (final userId in missing) {
+        _ensureStatusLoaded(userId);
+      }
+    });
+  }
+
+  Future<void> _showUserDialog(
+    BuildContext context,
+    Profile profile,
+    List<Office> offices,
+    List<UserOffice> assignments,
+  ) async {
+    await _selectUser(profile);
+    final currentOfficeIds = assignments
+        .where((assignment) => assignment.userId == profile.id)
+        .map((assignment) => assignment.officeId)
+        .toSet();
+
+    if (!context.mounted) return;
+    await showDialog<void>(
+      context: context,
+      builder: (dialogContext) {
+        return StatefulBuilder(
+          builder: (context, setDialogState) {
+            return AlertDialog(
+              title: const Text('Update user'),
+              content: ConstrainedBox(
+                constraints: const BoxConstraints(maxWidth: 520),
+                child: SingleChildScrollView(
+                  child: _buildUserForm(
+                    context,
+                    profile,
+                    offices,
+                    currentOfficeIds,
+                    setDialogState,
+                  ),
+                ),
+              ),
+              actions: [
+                TextButton(
+                  onPressed: () => Navigator.of(dialogContext).pop(),
+                  child: const Text('Close'),
+                ),
+              ],
+            );
+          },
+        );
+      },
+    );
+  }
+
+  Widget _buildUserForm(
+    BuildContext context,
+    Profile profile,
+    List<Office> offices,
+    Set<String> currentOfficeIds,
+    StateSetter setDialogState,
+  ) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        TextFormField(
+          controller: _fullNameController,
+          decoration: const InputDecoration(labelText: 'Full name'),
+        ),
+        const SizedBox(height: 12),
+        DropdownButtonFormField<String>(
+          key: ValueKey('role_${_selectedUserId ?? 'none'}'),
+          initialValue: _selectedRole,
+          items: _roles
+              .map((role) => DropdownMenuItem(value: role, child: Text(role)))
+              .toList(),
+          onChanged: (value) => setDialogState(() => _selectedRole = value),
+          decoration: const InputDecoration(labelText: 'Role'),
+        ),
+        const SizedBox(height: 12),
+        _buildStatusRow(profile),
+        const SizedBox(height: 16),
+        Text('Offices', style: Theme.of(context).textTheme.titleSmall),
+        const SizedBox(height: 8),
+        if (offices.isEmpty) const Text('No offices available.'),
+        if (offices.isNotEmpty)
+          Column(
+            children: offices
+                .map(
+                  (office) => CheckboxListTile(
+                    value: _selectedOfficeIds.contains(office.id),
+                    onChanged: _isSaving
+                        ? null
+                        : (selected) {
+                            setDialogState(() {
+                              if (selected == true) {
+                                _selectedOfficeIds.add(office.id);
+                              } else {
+                                _selectedOfficeIds.remove(office.id);
+                              }
+                            });
+                          },
+                    title: Text(office.name),
+                    controlAffinity: ListTileControlAffinity.leading,
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                )
+                .toList(),
+          ),
+        const SizedBox(height: 16),
+        Row(
+          children: [
+            Expanded(
+              child: FilledButton(
+                onPressed: _isSaving
+                    ? null
+                    : () async {
+                        final saved = await _saveChanges(
+                          context,
+                          profile,
+                          currentOfficeIds,
+                          setDialogState,
+                        );
+                        if (saved && context.mounted) {
+                          Navigator.of(context).pop();
+                        }
+                      },
+                child: _isSaving
+                    ? const SizedBox(
+                        height: 18,
+                        width: 18,
+                        child: CircularProgressIndicator(strokeWidth: 2),
+                      )
+                    : const Text('Save changes'),
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget _buildStatusRow(Profile profile) {
+    final email = _selectedStatus?.email;
+    final isLocked = _selectedStatus?.isLocked ?? false;
+    final lockLabel = isLocked ? 'Unlock' : 'Lock';
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          'Email: ${email ?? 'Loading...'}',
+          style: Theme.of(context).textTheme.bodySmall,
+        ),
+        const SizedBox(height: 8),
+        Row(
+          children: [
+            OutlinedButton.icon(
+              onPressed: _isStatusLoading
+                  ? null
+                  : () => _showPasswordResetDialog(profile.id),
+              icon: const Icon(Icons.password),
+              label: const Text('Reset password'),
+            ),
+            const SizedBox(width: 12),
+            OutlinedButton.icon(
+              onPressed: _isStatusLoading
+                  ? null
+                  : () => _toggleLock(profile.id, !isLocked),
+              icon: Icon(isLocked ? Icons.lock_open : Icons.lock),
+              label: Text(lockLabel),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+
+  Future<void> _selectUser(Profile profile) async {
+    setState(() {
+      _selectedUserId = profile.id;
+      _selectedRole = profile.role;
+      _fullNameController.text = profile.fullName;
+      _selectedStatus = null;
+      _isStatusLoading = true;
+    });
+
+    final assignments = ref.read(userOfficesProvider).valueOrNull ?? [];
+    final officeIds = assignments
+        .where((assignment) => assignment.userId == profile.id)
+        .map((assignment) => assignment.officeId)
+        .toSet();
+    setState(() => _selectedOfficeIds = officeIds);
+
+    try {
+      final status = await ref
+          .read(adminUserControllerProvider)
+          .fetchStatus(profile.id);
+      if (mounted) {
+        setState(() {
+          _selectedStatus = status;
+          _statusCache[profile.id] = status;
+        });
+      }
+    } catch (_) {
+      if (mounted) {
+        setState(
+          () =>
+              _selectedStatus = AdminUserStatus(email: null, bannedUntil: null),
+        );
+      }
+    } finally {
+      if (mounted) {
+        setState(() => _isStatusLoading = false);
+      }
+    }
+  }
+
+  Future<bool> _saveChanges(
+    BuildContext context,
+    Profile profile,
+    Set<String> currentOfficeIds,
+    StateSetter setDialogState,
+  ) async {
+    final role = _selectedRole ?? profile.role;
+    final fullName = _fullNameController.text.trim();
+    if (fullName.isEmpty) {
+      ScaffoldMessenger.of(
+        context,
+      ).showSnackBar(const SnackBar(content: Text('Full name is required.')));
+      return false;
+    }
+
+    if (_selectedOfficeIds.isEmpty) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(content: Text('Select at least one office.')),
+      );
+      return false;
+    }
+
+    setDialogState(() => _isSaving = true);
+    try {
+      await ref
+          .read(adminUserControllerProvider)
+          .updateProfile(userId: profile.id, fullName: fullName, role: role);
+
+      final toAdd = _selectedOfficeIds.difference(currentOfficeIds);
+      final toRemove = currentOfficeIds.difference(_selectedOfficeIds);
+      final controller = ref.read(userOfficesControllerProvider);
+
+      for (final officeId in toAdd) {
+        await controller.assignUserOffice(
+          userId: profile.id,
+          officeId: officeId,
+        );
+      }
+
+      for (final officeId in toRemove) {
+        await controller.removeUserOffice(
+          userId: profile.id,
+          officeId: officeId,
+        );
+      }
+
+      ref.invalidate(profilesProvider);
+      ref.invalidate(userOfficesProvider);
+
+      if (!context.mounted) return true;
+      ScaffoldMessenger.of(
+        context,
+      ).showSnackBar(const SnackBar(content: Text('User updated.')));
+      return true;
+    } catch (error) {
+      if (!context.mounted) return false;
+      ScaffoldMessenger.of(
+        context,
+      ).showSnackBar(SnackBar(content: Text('Update failed: $error')));
+      return false;
+    } finally {
+      setDialogState(() => _isSaving = false);
+    }
+  }
+
+  Future<void> _showPasswordResetDialog(String userId) async {
+    final controller = TextEditingController();
+    final formKey = GlobalKey<FormState>();
+
+    await showDialog<void>(
+      context: context,
+      builder: (dialogContext) {
+        return AlertDialog(
+          title: const Text('Set temporary password'),
+          content: Form(
+            key: formKey,
+            child: TextFormField(
+              controller: controller,
+              decoration: const InputDecoration(labelText: 'New password'),
+              obscureText: true,
+              validator: (value) {
+                if (value == null || value.trim().length < 8) {
+                  return 'Use at least 8 characters.';
+                }
+                return null;
+              },
+            ),
+          ),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.of(dialogContext).pop(),
+              child: const Text('Cancel'),
+            ),
+            FilledButton(
+              onPressed: () async {
+                if (!formKey.currentState!.validate()) return;
+                try {
+                  await ref
+                      .read(adminUserControllerProvider)
+                      .setPassword(
+                        userId: userId,
+                        password: controller.text.trim(),
+                      );
+                  if (!dialogContext.mounted) return;
+                  Navigator.of(dialogContext).pop();
+                  if (!mounted) return;
+                  ScaffoldMessenger.of(context).showSnackBar(
+                    const SnackBar(content: Text('Password updated.')),
+                  );
+                } catch (error) {
+                  if (!mounted) return;
+                  ScaffoldMessenger.of(context).showSnackBar(
+                    SnackBar(content: Text('Reset failed: $error')),
+                  );
+                }
+              },
+              child: const Text('Update password'),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Future<void> _toggleLock(String userId, bool locked) async {
+    setState(() => _isStatusLoading = true);
+    try {
+      await ref
+          .read(adminUserControllerProvider)
+          .setLock(userId: userId, locked: locked);
+      final status = await ref
+          .read(adminUserControllerProvider)
+          .fetchStatus(userId);
+      if (!mounted) return;
+      setState(() => _selectedStatus = status);
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text(locked ? 'User locked.' : 'User unlocked.')),
+      );
+    } catch (error) {
+      if (!mounted) return;
+      ScaffoldMessenger.of(
+        context,
+      ).showSnackBar(SnackBar(content: Text('Lock update failed: $error')));
+    } finally {
+      if (mounted) {
+        setState(() => _isStatusLoading = false);
+      }
+    }
+  }
+
+  String _formatLastActive(DateTime? value) {
+    if (value == null) return 'N/A';
+    final now = DateTime.now();
+    final diff = now.difference(value);
+    if (diff.inMinutes < 1) return 'Just now';
+    if (diff.inHours < 1) return '${diff.inMinutes}m ago';
+    if (diff.inDays < 1) return '${diff.inHours}h ago';
+    if (diff.inDays < 7) return '${diff.inDays}d ago';
+    final month = value.month.toString().padLeft(2, '0');
+    final day = value.day.toString().padLeft(2, '0');
+    return '${value.year}-$month-$day';
+  }
+}

lib/screens/auth/login_screen.dart

@@ -0,0 +1,179 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:go_router/go_router.dart';
+
+import '../../providers/auth_provider.dart';
+import '../../widgets/responsive_body.dart';
+
+class LoginScreen extends ConsumerStatefulWidget {
+  const LoginScreen({super.key});
+
+  @override
+  ConsumerState<LoginScreen> createState() => _LoginScreenState();
+}
+
+class _LoginScreenState extends ConsumerState<LoginScreen> {
+  final _formKey = GlobalKey<FormState>();
+  final _emailController = TextEditingController();
+  final _passwordController = TextEditingController();
+
+  bool _isLoading = false;
+
+  @override
+  void dispose() {
+    _emailController.dispose();
+    _passwordController.dispose();
+    super.dispose();
+  }
+
+  Future<void> _handleEmailSignIn() async {
+    if (!_formKey.currentState!.validate()) return;
+    setState(() => _isLoading = true);
+
+    final auth = ref.read(authControllerProvider);
+    try {
+      final response = await auth.signInWithPassword(
+        email: _emailController.text.trim(),
+        password: _passwordController.text,
+      );
+      if (response.session != null && mounted) {
+        context.go('/tickets');
+      } else if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          const SnackBar(content: Text('Check your email to confirm sign-in.')),
+        );
+      }
+    } on Exception catch (error) {
+      if (mounted) {
+        ScaffoldMessenger.of(
+          context,
+        ).showSnackBar(SnackBar(content: Text('Sign in failed: $error')));
+      }
+    } finally {
+      if (mounted) {
+        setState(() => _isLoading = false);
+      }
+    }
+  }
+
+  Future<void> _handleOAuthSignIn({required bool google}) async {
+    setState(() => _isLoading = true);
+    final auth = ref.read(authControllerProvider);
+    final redirectTo = kIsWeb ? Uri.base.origin : null;
+
+    try {
+      if (google) {
+        await auth.signInWithGoogle(redirectTo: redirectTo);
+      } else {
+        await auth.signInWithMeta(redirectTo: redirectTo);
+      }
+    } on Exception catch (error) {
+      if (mounted) {
+        ScaffoldMessenger.of(
+          context,
+        ).showSnackBar(SnackBar(content: Text('OAuth failed: $error')));
+      }
+    } finally {
+      if (mounted) {
+        setState(() => _isLoading = false);
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Sign In')),
+      body: ResponsiveBody(
+        maxWidth: 480,
+        padding: const EdgeInsets.symmetric(vertical: 24),
+        child: Form(
+          key: _formKey,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Center(
+                child: Column(
+                  children: [
+                    Image.asset('assets/tasq_ico.png', height: 72, width: 72),
+                    const SizedBox(height: 12),
+                    Text(
+                      'TasQ',
+                      style: Theme.of(context).textTheme.headlineSmall,
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(height: 24),
+              TextFormField(
+                controller: _emailController,
+                decoration: const InputDecoration(labelText: 'Email'),
+                keyboardType: TextInputType.emailAddress,
+                textInputAction: TextInputAction.next,
+                validator: (value) {
+                  if (value == null || value.trim().isEmpty) {
+                    return 'Email is required.';
+                  }
+                  return null;
+                },
+              ),
+              const SizedBox(height: 12),
+              TextFormField(
+                controller: _passwordController,
+                decoration: const InputDecoration(labelText: 'Password'),
+                obscureText: true,
+                textInputAction: TextInputAction.done,
+                onFieldSubmitted: (_) {
+                  if (!_isLoading) {
+                    _handleEmailSignIn();
+                  }
+                },
+                validator: (value) {
+                  if (value == null || value.isEmpty) {
+                    return 'Password is required.';
+                  }
+                  return null;
+                },
+              ),
+              const SizedBox(height: 24),
+              FilledButton(
+                onPressed: _isLoading ? null : _handleEmailSignIn,
+                child: _isLoading
+                    ? const SizedBox(
+                        height: 18,
+                        width: 18,
+                        child: CircularProgressIndicator(strokeWidth: 2),
+                      )
+                    : const Text('Sign In'),
+              ),
+              const SizedBox(height: 12),
+              OutlinedButton.icon(
+                onPressed: _isLoading
+                    ? null
+                    : () => _handleOAuthSignIn(google: true),
+                icon: const FaIcon(FontAwesomeIcons.google, size: 18),
+                label: const Text('Continue with Google'),
+              ),
+              const SizedBox(height: 8),
+              OutlinedButton.icon(
+                onPressed: _isLoading
+                    ? null
+                    : () => _handleOAuthSignIn(google: false),
+                icon: const FaIcon(FontAwesomeIcons.facebook, size: 18),
+                label: const Text('Continue with Meta'),
+              ),
+              const SizedBox(height: 16),
+              TextButton(
+                onPressed: _isLoading ? null : () => context.go('/signup'),
+                child: const Text('Create account'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/screens/auth/signup_screen.dart

@@ -0,0 +1,275 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+
+import '../../providers/auth_provider.dart';
+import '../../providers/tickets_provider.dart';
+import '../../widgets/responsive_body.dart';
+
+class SignUpScreen extends ConsumerStatefulWidget {
+  const SignUpScreen({super.key});
+
+  @override
+  ConsumerState<SignUpScreen> createState() => _SignUpScreenState();
+}
+
+class _SignUpScreenState extends ConsumerState<SignUpScreen> {
+  final _formKey = GlobalKey<FormState>();
+  final _fullNameController = TextEditingController();
+  final _emailController = TextEditingController();
+  final _passwordController = TextEditingController();
+  final _confirmPasswordController = TextEditingController();
+
+  final Set<String> _selectedOfficeIds = {};
+  double _passwordStrength = 0.0;
+  String _passwordStrengthLabel = 'Very weak';
+  Color _passwordStrengthColor = Colors.red;
+
+  bool _isLoading = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _passwordController.addListener(_updatePasswordStrength);
+  }
+
+  @override
+  void dispose() {
+    _passwordController.removeListener(_updatePasswordStrength);
+    _fullNameController.dispose();
+    _emailController.dispose();
+    _passwordController.dispose();
+    _confirmPasswordController.dispose();
+    super.dispose();
+  }
+
+  Future<void> _handleSignUp() async {
+    if (!_formKey.currentState!.validate()) return;
+    if (_selectedOfficeIds.isEmpty) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(content: Text('Select at least one office.')),
+      );
+      return;
+    }
+    setState(() => _isLoading = true);
+
+    final auth = ref.read(authControllerProvider);
+    try {
+      await auth.signUp(
+        email: _emailController.text.trim(),
+        password: _passwordController.text,
+        fullName: _fullNameController.text.trim(),
+        officeIds: _selectedOfficeIds.toList(),
+      );
+      if (mounted) {
+        context.go('/login');
+      }
+    } on Exception catch (error) {
+      if (mounted) {
+        ScaffoldMessenger.of(
+          context,
+        ).showSnackBar(SnackBar(content: Text('Sign up failed: $error')));
+      }
+    } finally {
+      if (mounted) {
+        setState(() => _isLoading = false);
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final officesAsync = ref.watch(officesOnceProvider);
+    return Scaffold(
+      appBar: AppBar(title: const Text('Create Account')),
+      body: ResponsiveBody(
+        maxWidth: 480,
+        padding: const EdgeInsets.symmetric(vertical: 24),
+        child: Form(
+          key: _formKey,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Center(
+                child: Column(
+                  children: [
+                    Image.asset('assets/tasq_ico.png', height: 72, width: 72),
+                    const SizedBox(height: 12),
+                    Text(
+                      'TasQ',
+                      style: Theme.of(context).textTheme.headlineSmall,
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(height: 24),
+              TextFormField(
+                controller: _fullNameController,
+                decoration: const InputDecoration(labelText: 'Full name'),
+                textInputAction: TextInputAction.next,
+                validator: (value) {
+                  if (value == null || value.trim().isEmpty) {
+                    return 'Full name is required.';
+                  }
+                  return null;
+                },
+              ),
+              const SizedBox(height: 12),
+              TextFormField(
+                controller: _emailController,
+                decoration: const InputDecoration(labelText: 'Email'),
+                keyboardType: TextInputType.emailAddress,
+                textInputAction: TextInputAction.next,
+                validator: (value) {
+                  if (value == null || value.trim().isEmpty) {
+                    return 'Email is required.';
+                  }
+                  return null;
+                },
+              ),
+              const SizedBox(height: 12),
+              TextFormField(
+                controller: _passwordController,
+                decoration: const InputDecoration(labelText: 'Password'),
+                obscureText: true,
+                textInputAction: TextInputAction.next,
+                validator: (value) {
+                  if (value == null || value.isEmpty) {
+                    return 'Password is required.';
+                  }
+                  if (value.length < 6) {
+                    return 'Use at least 6 characters.';
+                  }
+                  return null;
+                },
+              ),
+              const SizedBox(height: 8),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    'Password strength: $_passwordStrengthLabel',
+                    style: Theme.of(context).textTheme.labelMedium,
+                  ),
+                  const SizedBox(height: 6),
+                  LinearProgressIndicator(
+                    value: _passwordStrength,
+                    minHeight: 8,
+                    borderRadius: BorderRadius.circular(8),
+                    color: _passwordStrengthColor,
+                    backgroundColor: Theme.of(
+                      context,
+                    ).colorScheme.surfaceContainerHighest,
+                  ),
+                ],
+              ),
+              const SizedBox(height: 12),
+              TextFormField(
+                controller: _confirmPasswordController,
+                decoration: const InputDecoration(
+                  labelText: 'Confirm password',
+                ),
+                obscureText: true,
+                textInputAction: TextInputAction.done,
+                onFieldSubmitted: (_) {
+                  if (!_isLoading) {
+                    _handleSignUp();
+                  }
+                },
+                validator: (value) {
+                  if (value == null || value.isEmpty) {
+                    return 'Confirm your password.';
+                  }
+                  if (value != _passwordController.text) {
+                    return 'Passwords do not match.';
+                  }
+                  return null;
+                },
+              ),
+              const SizedBox(height: 16),
+              Text('Offices', style: Theme.of(context).textTheme.titleSmall),
+              const SizedBox(height: 8),
+              officesAsync.when(
+                data: (offices) {
+                  if (offices.isEmpty) {
+                    return const Text('No offices available.');
+                  }
+                  return Column(
+                    children: offices
+                        .map(
+                          (office) => CheckboxListTile(
+                            value: _selectedOfficeIds.contains(office.id),
+                            onChanged: _isLoading
+                                ? null
+                                : (selected) {
+                                    setState(() {
+                                      if (selected == true) {
+                                        _selectedOfficeIds.add(office.id);
+                                      } else {
+                                        _selectedOfficeIds.remove(office.id);
+                                      }
+                                    });
+                                  },
+                            title: Text(office.name),
+                            controlAffinity: ListTileControlAffinity.leading,
+                            contentPadding: EdgeInsets.zero,
+                          ),
+                        )
+                        .toList(),
+                  );
+                },
+                loading: () => const LinearProgressIndicator(),
+                error: (error, _) => Text('Failed to load offices: $error'),
+              ),
+              const SizedBox(height: 24),
+              FilledButton(
+                onPressed: _isLoading ? null : _handleSignUp,
+                child: _isLoading
+                    ? const SizedBox(
+                        height: 18,
+                        width: 18,
+                        child: CircularProgressIndicator(strokeWidth: 2),
+                      )
+                    : const Text('Create Account'),
+              ),
+              const SizedBox(height: 12),
+              TextButton(
+                onPressed: _isLoading ? null : () => context.go('/login'),
+                child: const Text('Back to sign in'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _updatePasswordStrength() {
+    final text = _passwordController.text;
+    var score = 0;
+    if (text.length >= 8) score++;
+    if (text.length >= 12) score++;
+    if (RegExp(r'[A-Z]').hasMatch(text)) score++;
+    if (RegExp(r'[a-z]').hasMatch(text)) score++;
+    if (RegExp(r'\d').hasMatch(text)) score++;
+    if (RegExp(r'[!@#$%^&*(),.?":{}|<>\[\]\\/+=;_-]').hasMatch(text)) {
+      score++;
+    }
+
+    final normalized = (score / 6).clamp(0.0, 1.0);
+    final (label, color) = switch (normalized) {
+      <= 0.2 => ('Very weak', Colors.red),
+      <= 0.4 => ('Weak', Colors.deepOrange),
+      <= 0.6 => ('Fair', Colors.orange),
+      <= 0.8 => ('Strong', Colors.green),
+      _ => ('Excellent', Colors.teal),
+    };
+
+    setState(() {
+      _passwordStrength = normalized;
+      _passwordStrengthLabel = label;
+      _passwordStrengthColor = color;
+    });
+  }
+}

lib/screens/dashboard/dashboard_screen.dart

@@ -0,0 +1,637 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../models/profile.dart';
+import '../../models/task.dart';
+import '../../models/task_assignment.dart';
+import '../../models/ticket.dart';
+import '../../models/ticket_message.dart';
+import '../../providers/profile_provider.dart';
+import '../../providers/tasks_provider.dart';
+import '../../providers/tickets_provider.dart';
+import '../../widgets/responsive_body.dart';
+
+class DashboardMetrics {
+  DashboardMetrics({
+    required this.newTicketsToday,
+    required this.closedToday,
+    required this.openTickets,
+    required this.avgResponse,
+    required this.avgTriage,
+    required this.longestResponse,
+    required this.tasksCreatedToday,
+    required this.tasksCompletedToday,
+    required this.openTasks,
+    required this.staffRows,
+  });
+
+  final int newTicketsToday;
+  final int closedToday;
+  final int openTickets;
+
+  final Duration? avgResponse;
+  final Duration? avgTriage;
+  final Duration? longestResponse;
+
+  final int tasksCreatedToday;
+  final int tasksCompletedToday;
+  final int openTasks;
+
+  final List<StaffRowMetrics> staffRows;
+}
+
+class StaffRowMetrics {
+  StaffRowMetrics({
+    required this.userId,
+    required this.name,
+    required this.status,
+    required this.ticketsRespondedToday,
+    required this.tasksClosedToday,
+  });
+
+  final String userId;
+  final String name;
+  final String status;
+  final int ticketsRespondedToday;
+  final int tasksClosedToday;
+}
+
+final dashboardMetricsProvider = Provider<AsyncValue<DashboardMetrics>>((ref) {
+  final ticketsAsync = ref.watch(ticketsProvider);
+  final tasksAsync = ref.watch(tasksProvider);
+  final profilesAsync = ref.watch(profilesProvider);
+  final assignmentsAsync = ref.watch(taskAssignmentsProvider);
+  final messagesAsync = ref.watch(ticketMessagesAllProvider);
+
+  final asyncValues = [
+    ticketsAsync,
+    tasksAsync,
+    profilesAsync,
+    assignmentsAsync,
+    messagesAsync,
+  ];
+
+  if (asyncValues.any((value) => value.hasError)) {
+    final errorValue = asyncValues.firstWhere((value) => value.hasError);
+    final error = errorValue.error ?? 'Failed to load dashboard';
+    final stack = errorValue.stackTrace ?? StackTrace.current;
+    return AsyncError(error, stack);
+  }
+
+  if (asyncValues.any((value) => value.isLoading)) {
+    return const AsyncLoading();
+  }
+
+  final tickets = ticketsAsync.valueOrNull ?? const <Ticket>[];
+  final tasks = tasksAsync.valueOrNull ?? const <Task>[];
+  final profiles = profilesAsync.valueOrNull ?? const <Profile>[];
+  final assignments = assignmentsAsync.valueOrNull ?? const <TaskAssignment>[];
+  final messages = messagesAsync.valueOrNull ?? const <TicketMessage>[];
+
+  final now = DateTime.now();
+  final startOfDay = DateTime(now.year, now.month, now.day);
+
+  final staffProfiles = profiles
+      .where((profile) => profile.role == 'it_staff')
+      .toList();
+  final staffIds = profiles
+      .where(
+        (profile) =>
+            profile.role == 'admin' ||
+            profile.role == 'dispatcher' ||
+            profile.role == 'it_staff',
+      )
+      .map((profile) => profile.id)
+      .toSet();
+
+  bool isToday(DateTime value) => !value.isBefore(startOfDay);
+
+  final firstStaffMessageByTicket = <String, DateTime>{};
+  final lastStaffMessageByUser = <String, DateTime>{};
+  final respondedTicketsByUser = <String, Set<String>>{};
+  for (final message in messages) {
+    final ticketId = message.ticketId;
+    final senderId = message.senderId;
+    if (ticketId != null && senderId != null && staffIds.contains(senderId)) {
+      final current = firstStaffMessageByTicket[ticketId];
+      if (current == null || message.createdAt.isBefore(current)) {
+        firstStaffMessageByTicket[ticketId] = message.createdAt;
+      }
+      final last = lastStaffMessageByUser[senderId];
+      if (last == null || message.createdAt.isAfter(last)) {
+        lastStaffMessageByUser[senderId] = message.createdAt;
+      }
+      if (isToday(message.createdAt)) {
+        respondedTicketsByUser
+            .putIfAbsent(senderId, () => <String>{})
+            .add(ticketId);
+      }
+    }
+  }
+
+  DateTime? respondedAtForTicket(Ticket ticket) {
+    final staffMessageAt = firstStaffMessageByTicket[ticket.id];
+    if (staffMessageAt != null) {
+      return staffMessageAt;
+    }
+    if (ticket.promotedAt != null) {
+      return ticket.promotedAt;
+    }
+    return null;
+  }
+
+  Duration? responseDuration(Ticket ticket) {
+    final respondedAt = respondedAtForTicket(ticket);
+    if (respondedAt == null) {
+      return null;
+    }
+    final duration = respondedAt.difference(ticket.createdAt);
+    return duration.isNegative ? Duration.zero : duration;
+  }
+
+  Duration? triageDuration(Ticket ticket) {
+    final respondedAt = respondedAtForTicket(ticket);
+    if (respondedAt == null) {
+      return null;
+    }
+    final triageEnd = _earliestDate(ticket.promotedAt, ticket.closedAt);
+    if (triageEnd == null) {
+      return null;
+    }
+    final duration = triageEnd.difference(respondedAt);
+    return duration.isNegative ? Duration.zero : duration;
+  }
+
+  final ticketsToday = tickets.where((ticket) => isToday(ticket.createdAt));
+  final closedToday = tickets.where(
+    (ticket) => ticket.closedAt != null && isToday(ticket.closedAt!),
+  );
+  final openTickets = tickets.where((ticket) => ticket.status != 'closed');
+
+  final responseDurationsToday = ticketsToday
+      .map(responseDuration)
+      .whereType<Duration>()
+      .toList();
+  final triageDurationsToday = ticketsToday
+      .map(triageDuration)
+      .whereType<Duration>()
+      .toList();
+
+  final avgResponse = _averageDuration(responseDurationsToday);
+  final avgTriage = _averageDuration(triageDurationsToday);
+  final longestResponse = responseDurationsToday.isEmpty
+      ? null
+      : responseDurationsToday.reduce(
+          (a, b) => a.inSeconds >= b.inSeconds ? a : b,
+        );
+
+  final tasksCreatedToday = tasks.where((task) => isToday(task.createdAt));
+  final tasksCompletedToday = tasks.where(
+    (task) => task.completedAt != null && isToday(task.completedAt!),
+  );
+  final openTasks = tasks.where((task) => task.status != 'completed');
+
+  final taskById = {for (final task in tasks) task.id: task};
+  final staffOnTask = <String>{};
+  for (final assignment in assignments) {
+    final task = taskById[assignment.taskId];
+    if (task == null) {
+      continue;
+    }
+    if (task.status == 'in_progress') {
+      staffOnTask.add(assignment.userId);
+    }
+  }
+
+  final tasksClosedByUser = <String, Set<String>>{};
+  for (final assignment in assignments) {
+    final task = taskById[assignment.taskId];
+    if (task == null || task.completedAt == null) {
+      continue;
+    }
+    if (!isToday(task.completedAt!)) {
+      continue;
+    }
+    tasksClosedByUser
+        .putIfAbsent(assignment.userId, () => <String>{})
+        .add(task.id);
+  }
+
+  const triageWindow = Duration(minutes: 1);
+  final triageCutoff = now.subtract(triageWindow);
+
+  final staffRows = staffProfiles.map((staff) {
+    final lastMessage = lastStaffMessageByUser[staff.id];
+    final ticketsResponded = respondedTicketsByUser[staff.id]?.length ?? 0;
+    final tasksClosed = tasksClosedByUser[staff.id]?.length ?? 0;
+    final onTask = staffOnTask.contains(staff.id);
+    final inTriage = lastMessage != null && lastMessage.isAfter(triageCutoff);
+    final status = onTask
+        ? 'On task'
+        : inTriage
+        ? 'In triage'
+        : 'Vacant';
+
+    return StaffRowMetrics(
+      userId: staff.id,
+      name: staff.fullName.isNotEmpty ? staff.fullName : staff.id,
+      status: status,
+      ticketsRespondedToday: ticketsResponded,
+      tasksClosedToday: tasksClosed,
+    );
+  }).toList();
+
+  return AsyncData(
+    DashboardMetrics(
+      newTicketsToday: ticketsToday.length,
+      closedToday: closedToday.length,
+      openTickets: openTickets.length,
+      avgResponse: avgResponse,
+      avgTriage: avgTriage,
+      longestResponse: longestResponse,
+      tasksCreatedToday: tasksCreatedToday.length,
+      tasksCompletedToday: tasksCompletedToday.length,
+      openTasks: openTasks.length,
+      staffRows: staffRows,
+    ),
+  );
+});
+
+class DashboardScreen extends StatelessWidget {
+  const DashboardScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ResponsiveBody(
+      child: LayoutBuilder(
+        builder: (context, constraints) {
+          final isWide = constraints.maxWidth >= 980;
+          final metricsColumn = Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(top: 16, bottom: 8),
+                child: Align(
+                  alignment: Alignment.center,
+                  child: Text(
+                    'Dashboard',
+                    textAlign: TextAlign.center,
+                    style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                      fontWeight: FontWeight.w700,
+                    ),
+                  ),
+                ),
+              ),
+              const _DashboardStatusBanner(),
+              _sectionTitle(context, 'Core Daily KPIs'),
+              _cardGrid(context, [
+                _MetricCard(
+                  title: 'New tickets today',
+                  valueBuilder: (metrics) => metrics.newTicketsToday.toString(),
+                ),
+                _MetricCard(
+                  title: 'Closed today',
+                  valueBuilder: (metrics) => metrics.closedToday.toString(),
+                ),
+                _MetricCard(
+                  title: 'Open tickets',
+                  valueBuilder: (metrics) => metrics.openTickets.toString(),
+                ),
+              ]),
+              const SizedBox(height: 20),
+              _sectionTitle(context, 'TAT / Response'),
+              _cardGrid(context, [
+                _MetricCard(
+                  title: 'Avg response',
+                  valueBuilder: (metrics) =>
+                      _formatDuration(metrics.avgResponse),
+                ),
+                _MetricCard(
+                  title: 'Avg triage',
+                  valueBuilder: (metrics) => _formatDuration(metrics.avgTriage),
+                ),
+                _MetricCard(
+                  title: 'Longest response',
+                  valueBuilder: (metrics) =>
+                      _formatDuration(metrics.longestResponse),
+                ),
+              ]),
+              const SizedBox(height: 20),
+              _sectionTitle(context, 'Task Flow'),
+              _cardGrid(context, [
+                _MetricCard(
+                  title: 'Tasks created',
+                  valueBuilder: (metrics) =>
+                      metrics.tasksCreatedToday.toString(),
+                ),
+                _MetricCard(
+                  title: 'Tasks completed',
+                  valueBuilder: (metrics) =>
+                      metrics.tasksCompletedToday.toString(),
+                ),
+                _MetricCard(
+                  title: 'Open tasks',
+                  valueBuilder: (metrics) => metrics.openTasks.toString(),
+                ),
+              ]),
+            ],
+          );
+
+          final staffColumn = Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              const SizedBox(height: 16),
+              _sectionTitle(context, 'IT Staff Pulse'),
+              const _StaffTable(),
+            ],
+          );
+
+          if (isWide) {
+            return Center(
+              child: ConstrainedBox(
+                constraints: BoxConstraints(minHeight: constraints.maxHeight),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    ConstrainedBox(
+                      constraints: BoxConstraints(
+                        maxWidth: constraints.maxWidth * 0.6,
+                      ),
+                      child: metricsColumn,
+                    ),
+                    const SizedBox(width: 20),
+                    ConstrainedBox(
+                      constraints: BoxConstraints(
+                        maxWidth: constraints.maxWidth * 0.35,
+                      ),
+                      child: staffColumn,
+                    ),
+                  ],
+                ),
+              ),
+            );
+          }
+
+          return SingleChildScrollView(
+            padding: const EdgeInsets.only(bottom: 24),
+            child: Center(
+              child: ConstrainedBox(
+                constraints: BoxConstraints(minHeight: constraints.maxHeight),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    metricsColumn,
+                    const SizedBox(height: 12),
+                    staffColumn,
+                  ],
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _sectionTitle(BuildContext context, String title) {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 12),
+      child: Text(
+        title,
+        style: Theme.of(
+          context,
+        ).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w700),
+      ),
+    );
+  }
+
+  Widget _cardGrid(BuildContext context, List<Widget> cards) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final width = constraints.maxWidth;
+        final columns = width >= 900
+            ? 3
+            : width >= 620
+            ? 2
+            : 1;
+        final spacing = 12.0;
+        final cardWidth = (width - (columns - 1) * spacing) / columns;
+        return Wrap(
+          alignment: WrapAlignment.center,
+          runAlignment: WrapAlignment.center,
+          spacing: spacing,
+          runSpacing: spacing,
+          children: cards
+              .map((card) => SizedBox(width: cardWidth, child: card))
+              .toList(),
+        );
+      },
+    );
+  }
+}
+
+class _DashboardStatusBanner extends ConsumerWidget {
+  const _DashboardStatusBanner();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final metricsAsync = ref.watch(dashboardMetricsProvider);
+    return metricsAsync.when(
+      data: (_) => const SizedBox.shrink(),
+      loading: () => const Padding(
+        padding: EdgeInsets.only(bottom: 12),
+        child: LinearProgressIndicator(minHeight: 2),
+      ),
+      error: (error, _) => Padding(
+        padding: const EdgeInsets.only(bottom: 12),
+        child: Text(
+          'Dashboard data error: $error',
+          style: Theme.of(context).textTheme.bodySmall?.copyWith(
+            color: Theme.of(context).colorScheme.error,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _MetricCard extends ConsumerWidget {
+  const _MetricCard({required this.title, required this.valueBuilder});
+
+  final String title;
+  final String Function(DashboardMetrics metrics) valueBuilder;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final metricsAsync = ref.watch(dashboardMetricsProvider);
+    final value = metricsAsync.when(
+      data: (metrics) => valueBuilder(metrics),
+      loading: () => '—',
+      error: (error, _) => 'Error',
+    );
+
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surface,
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(color: Theme.of(context).colorScheme.outlineVariant),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            title,
+            style: Theme.of(
+              context,
+            ).textTheme.labelLarge?.copyWith(fontWeight: FontWeight.w600),
+          ),
+          const SizedBox(height: 10),
+          Text(
+            value,
+            style: Theme.of(
+              context,
+            ).textTheme.headlineSmall?.copyWith(fontWeight: FontWeight.w700),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _StaffTable extends StatelessWidget {
+  const _StaffTable();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surface,
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(color: Theme.of(context).colorScheme.outlineVariant),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: const [
+          _StaffTableHeader(),
+          SizedBox(height: 8),
+          _StaffTableBody(),
+        ],
+      ),
+    );
+  }
+}
+
+class _StaffTableHeader extends StatelessWidget {
+  const _StaffTableHeader();
+
+  @override
+  Widget build(BuildContext context) {
+    final style = Theme.of(
+      context,
+    ).textTheme.labelMedium?.copyWith(fontWeight: FontWeight.w700);
+    return Row(
+      children: [
+        Expanded(flex: 3, child: Text('IT Staff', style: style)),
+        Expanded(flex: 2, child: Text('Status', style: style)),
+        Expanded(flex: 2, child: Text('Tickets', style: style)),
+        Expanded(flex: 2, child: Text('Tasks', style: style)),
+      ],
+    );
+  }
+}
+
+class _StaffTableBody extends ConsumerWidget {
+  const _StaffTableBody();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final metricsAsync = ref.watch(dashboardMetricsProvider);
+    return metricsAsync.when(
+      data: (metrics) {
+        if (metrics.staffRows.isEmpty) {
+          return Text(
+            'No IT staff available.',
+            style: Theme.of(context).textTheme.bodySmall,
+          );
+        }
+        return Column(
+          children: metrics.staffRows
+              .map((row) => _StaffRow(row: row))
+              .toList(),
+        );
+      },
+      loading: () => const Text('Loading staff...'),
+      error: (error, _) => Text('Failed to load staff: $error'),
+    );
+  }
+}
+
+class _StaffRow extends StatelessWidget {
+  const _StaffRow({required this.row});
+
+  final StaffRowMetrics row;
+
+  @override
+  Widget build(BuildContext context) {
+    final valueStyle = Theme.of(context).textTheme.bodySmall;
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 6),
+      child: Row(
+        children: [
+          Expanded(flex: 3, child: Text(row.name, style: valueStyle)),
+          Expanded(flex: 2, child: Text(row.status, style: valueStyle)),
+          Expanded(
+            flex: 2,
+            child: Text(
+              row.ticketsRespondedToday.toString(),
+              style: valueStyle,
+            ),
+          ),
+          Expanded(
+            flex: 2,
+            child: Text(row.tasksClosedToday.toString(), style: valueStyle),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+Duration? _averageDuration(List<Duration> durations) {
+  if (durations.isEmpty) {
+    return null;
+  }
+  final totalSeconds = durations
+      .map((duration) => duration.inSeconds)
+      .reduce((a, b) => a + b);
+  return Duration(seconds: (totalSeconds / durations.length).round());
+}
+
+DateTime? _earliestDate(DateTime? first, DateTime? second) {
+  if (first == null) return second;
+  if (second == null) return first;
+  return first.isBefore(second) ? first : second;
+}
+
+String _formatDuration(Duration? duration) {
+  if (duration == null) {
+    return 'Pending';
+  }
+  if (duration.inSeconds < 60) {
+    return 'Less than a minute';
+  }
+  final hours = duration.inHours;
+  final minutes = duration.inMinutes.remainder(60);
+  if (hours > 0) {
+    return '${hours}h ${minutes}m';
+  }
+  return '${minutes}m';
+}

lib/screens/notifications/notifications_screen.dart

@@ -0,0 +1,147 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+
+import '../../providers/notifications_provider.dart';
+import '../../providers/profile_provider.dart';
+import '../../providers/tasks_provider.dart';
+import '../../providers/tickets_provider.dart';
+import '../../widgets/responsive_body.dart';
+
+class NotificationsScreen extends ConsumerWidget {
+  const NotificationsScreen({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final notificationsAsync = ref.watch(notificationsProvider);
+    final profilesAsync = ref.watch(profilesProvider);
+    final ticketsAsync = ref.watch(ticketsProvider);
+    final tasksAsync = ref.watch(tasksProvider);
+
+    final profileById = {
+      for (final profile in profilesAsync.valueOrNull ?? [])
+        profile.id: profile,
+    };
+    final ticketById = {
+      for (final ticket in ticketsAsync.valueOrNull ?? []) ticket.id: ticket,
+    };
+    final taskById = {
+      for (final task in tasksAsync.valueOrNull ?? []) task.id: task,
+    };
+
+    return ResponsiveBody(
+      child: notificationsAsync.when(
+        data: (items) {
+          if (items.isEmpty) {
+            return const Center(child: Text('No notifications yet.'));
+          }
+          return Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(top: 16, bottom: 8),
+                child: Text(
+                  'Notifications',
+                  style: Theme.of(
+                    context,
+                  ).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700),
+                ),
+              ),
+              Expanded(
+                child: ListView.separated(
+                  padding: const EdgeInsets.only(bottom: 24),
+                  itemCount: items.length,
+                  separatorBuilder: (context, index) =>
+                      const SizedBox(height: 12),
+                  itemBuilder: (context, index) {
+                    final item = items[index];
+                    final actorName = item.actorId == null
+                        ? 'System'
+                        : (profileById[item.actorId]?.fullName ??
+                              item.actorId!);
+                    final ticketSubject = item.ticketId == null
+                        ? 'Ticket'
+                        : (ticketById[item.ticketId]?.subject ??
+                              item.ticketId!);
+                    final taskTitle = item.taskId == null
+                        ? 'Task'
+                        : (taskById[item.taskId]?.title ?? item.taskId!);
+                    final subtitle = item.taskId != null
+                        ? taskTitle
+                        : ticketSubject;
+
+                    final title = _notificationTitle(item.type, actorName);
+                    final icon = _notificationIcon(item.type);
+
+                    return ListTile(
+                      leading: Icon(icon),
+                      title: Text(title),
+                      subtitle: Text(subtitle),
+                      trailing: item.isUnread
+                          ? const Icon(
+                              Icons.circle,
+                              size: 10,
+                              color: Colors.red,
+                            )
+                          : null,
+                      onTap: () async {
+                        final ticketId = item.ticketId;
+                        final taskId = item.taskId;
+                        if (ticketId != null) {
+                          await ref
+                              .read(notificationsControllerProvider)
+                              .markReadForTicket(ticketId);
+                        } else if (taskId != null) {
+                          await ref
+                              .read(notificationsControllerProvider)
+                              .markReadForTask(taskId);
+                        } else if (item.isUnread) {
+                          await ref
+                              .read(notificationsControllerProvider)
+                              .markRead(item.id);
+                        }
+                        if (!context.mounted) return;
+                        if (taskId != null) {
+                          context.go('/tasks/$taskId');
+                        } else if (ticketId != null) {
+                          context.go('/tickets/$ticketId');
+                        }
+                      },
+                    );
+                  },
+                ),
+              ),
+            ],
+          );
+        },
+        loading: () => const Center(child: CircularProgressIndicator()),
+        error: (error, _) =>
+            Center(child: Text('Failed to load notifications: $error')),
+      ),
+    );
+  }
+
+  String _notificationTitle(String type, String actorName) {
+    switch (type) {
+      case 'assignment':
+        return '$actorName assigned you';
+      case 'created':
+        return '$actorName created a new item';
+      case 'mention':
+      default:
+        return '$actorName mentioned you';
+    }
+  }
+
+  IconData _notificationIcon(String type) {
+    switch (type) {
+      case 'assignment':
+        return Icons.assignment_ind_outlined;
+      case 'created':
+        return Icons.campaign_outlined;
+      case 'mention':
+      default:
+        return Icons.alternate_email;
+    }
+  }
+}

lib/screens/shared/under_development_screen.dart

@@ -0,0 +1,84 @@
+import 'package:flutter/material.dart';
+
+import '../../widgets/responsive_body.dart';
+
+class UnderDevelopmentScreen extends StatelessWidget {
+  const UnderDevelopmentScreen({
+    super.key,
+    required this.title,
+    required this.subtitle,
+    required this.icon,
+  });
+
+  final String title;
+  final String subtitle;
+  final IconData icon;
+
+  @override
+  Widget build(BuildContext context) {
+    return ResponsiveBody(
+      maxWidth: 720,
+      padding: const EdgeInsets.symmetric(vertical: 32),
+      child: Center(
+        child: Card(
+          child: Padding(
+            padding: const EdgeInsets.all(32),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Container(
+                  width: 72,
+                  height: 72,
+                  decoration: BoxDecoration(
+                    color: Theme.of(
+                      context,
+                    ).colorScheme.primaryContainer.withValues(alpha: 0.7),
+                    borderRadius: BorderRadius.circular(20),
+                  ),
+                  child: Icon(
+                    icon,
+                    size: 36,
+                    color: Theme.of(context).colorScheme.primary,
+                  ),
+                ),
+                const SizedBox(height: 20),
+                Text(
+                  title,
+                  style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                    fontWeight: FontWeight.w700,
+                  ),
+                  textAlign: TextAlign.center,
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  subtitle,
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  ),
+                  textAlign: TextAlign.center,
+                ),
+                const SizedBox(height: 20),
+                Container(
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 16,
+                    vertical: 8,
+                  ),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(999),
+                    color: Theme.of(
+                      context,
+                    ).colorScheme.surfaceContainerHighest,
+                  ),
+                  child: Text(
+                    'Under development',
+                    style: Theme.of(context).textTheme.labelLarge,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/screens/tasks/task_detail_screen.dart

@@ -0,0 +1,822 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../models/profile.dart';
+import '../../models/task.dart';
+import '../../models/task_assignment.dart';
+import '../../models/ticket.dart';
+import '../../models/ticket_message.dart';
+import '../../providers/notifications_provider.dart';
+import '../../providers/profile_provider.dart';
+import '../../providers/tasks_provider.dart';
+import '../../providers/tickets_provider.dart';
+import '../../providers/typing_provider.dart';
+import '../../widgets/responsive_body.dart';
+import '../../widgets/task_assignment_section.dart';
+import '../../widgets/typing_dots.dart';
+
+class TaskDetailScreen extends ConsumerStatefulWidget {
+  const TaskDetailScreen({super.key, required this.taskId});
+
+  final String taskId;
+
+  @override
+  ConsumerState<TaskDetailScreen> createState() => _TaskDetailScreenState();
+}
+
+class _TaskDetailScreenState extends ConsumerState<TaskDetailScreen> {
+  final _messageController = TextEditingController();
+  static const List<String> _statusOptions = [
+    'queued',
+    'in_progress',
+    'completed',
+  ];
+  String? _mentionQuery;
+  int? _mentionStart;
+  List<Profile> _mentionResults = [];
+
+  @override
+  void initState() {
+    super.initState();
+    Future.microtask(
+      () => ref
+          .read(notificationsControllerProvider)
+          .markReadForTask(widget.taskId),
+    );
+  }
+
+  @override
+  void dispose() {
+    _messageController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final tasksAsync = ref.watch(tasksProvider);
+    final ticketsAsync = ref.watch(ticketsProvider);
+    final officesAsync = ref.watch(officesProvider);
+    final profileAsync = ref.watch(currentProfileProvider);
+    final assignmentsAsync = ref.watch(taskAssignmentsProvider);
+    final taskMessagesAsync = ref.watch(taskMessagesProvider(widget.taskId));
+    final profilesAsync = ref.watch(profilesProvider);
+
+    final task = _findTask(tasksAsync, widget.taskId);
+    if (task == null) {
+      return const ResponsiveBody(
+        child: Center(child: Text('Task not found.')),
+      );
+    }
+
+    final ticketId = task.ticketId;
+    final typingChannelId = task.id;
+    final ticket = ticketId == null
+        ? null
+        : _findTicket(ticketsAsync, ticketId);
+    final officeById = {
+      for (final office in officesAsync.valueOrNull ?? []) office.id: office,
+    };
+    final officeId = ticket?.officeId ?? task.officeId;
+    final officeName = officeId == null
+        ? 'Unassigned office'
+        : (officeById[officeId]?.name ?? officeId);
+    final description = ticket?.description ?? task.description;
+
+    final canAssign = profileAsync.maybeWhen(
+      data: (profile) => profile != null && _canAssignStaff(profile.role),
+      orElse: () => false,
+    );
+    final showAssign = canAssign && task.status != 'completed';
+    final assignments = assignmentsAsync.valueOrNull ?? <TaskAssignment>[];
+    final canUpdateStatus = _canUpdateStatus(
+      profileAsync.valueOrNull,
+      assignments,
+      task.id,
+    );
+    final typingState = ref.watch(typingIndicatorProvider(typingChannelId));
+    final canSendMessages = task.status != 'completed';
+
+    final messagesAsync = _mergeMessages(
+      taskMessagesAsync,
+      ticketId == null ? null : ref.watch(ticketMessagesProvider(ticketId)),
+    );
+
+    return ResponsiveBody(
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.only(top: 16, bottom: 8),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Align(
+                  alignment: Alignment.center,
+                  child: Text(
+                    task.title.isNotEmpty ? task.title : 'Task ${task.id}',
+                    textAlign: TextAlign.center,
+                    style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                      fontWeight: FontWeight.w700,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 6),
+                Align(
+                  alignment: Alignment.center,
+                  child: Text(
+                    _createdByLabel(profilesAsync, task, ticket),
+                    textAlign: TextAlign.center,
+                    style: Theme.of(context).textTheme.bodySmall,
+                  ),
+                ),
+                const SizedBox(height: 8),
+                Wrap(
+                  spacing: 12,
+                  runSpacing: 8,
+                  crossAxisAlignment: WrapCrossAlignment.center,
+                  children: [
+                    _buildStatusChip(context, task, canUpdateStatus),
+                    Text('Office: $officeName'),
+                  ],
+                ),
+                if (description.isNotEmpty) ...[
+                  const SizedBox(height: 12),
+                  Text(description),
+                ],
+                const SizedBox(height: 12),
+                _buildTatSection(task),
+                const SizedBox(height: 16),
+                TaskAssignmentSection(taskId: task.id, canAssign: showAssign),
+              ],
+            ),
+          ),
+          const Divider(height: 1),
+          Expanded(
+            child: messagesAsync.when(
+              data: (messages) => _buildMessages(
+                context,
+                messages,
+                profilesAsync.valueOrNull ?? [],
+              ),
+              loading: () => const Center(child: CircularProgressIndicator()),
+              error: (error, _) =>
+                  Center(child: Text('Failed to load messages: $error')),
+            ),
+          ),
+          SafeArea(
+            top: false,
+            child: Padding(
+              padding: const EdgeInsets.fromLTRB(0, 8, 0, 12),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  if (typingState.userIds.isNotEmpty)
+                    Padding(
+                      padding: const EdgeInsets.only(bottom: 6),
+                      child: Container(
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: 10,
+                          vertical: 6,
+                        ),
+                        decoration: BoxDecoration(
+                          color: Theme.of(
+                            context,
+                          ).colorScheme.surfaceContainerHighest,
+                          borderRadius: BorderRadius.circular(16),
+                        ),
+                        child: Row(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            Text(
+                              _typingLabel(typingState.userIds, profilesAsync),
+                              style: Theme.of(context).textTheme.labelSmall,
+                            ),
+                            const SizedBox(width: 8),
+                            TypingDots(
+                              size: 8,
+                              color: Theme.of(context).colorScheme.primary,
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
+                  if (_mentionQuery != null)
+                    Padding(
+                      padding: const EdgeInsets.only(bottom: 8),
+                      child: _buildMentionList(profilesAsync),
+                    ),
+                  if (!canSendMessages)
+                    Padding(
+                      padding: const EdgeInsets.only(bottom: 8),
+                      child: Text(
+                        'Messaging is disabled for completed tasks.',
+                        style: Theme.of(context).textTheme.labelMedium,
+                      ),
+                    ),
+                  Row(
+                    children: [
+                      Expanded(
+                        child: TextField(
+                          controller: _messageController,
+                          decoration: const InputDecoration(
+                            hintText: 'Message...',
+                          ),
+                          textInputAction: TextInputAction.send,
+                          enabled: canSendMessages,
+                          onChanged: (_) => _handleComposerChanged(
+                            profilesAsync.valueOrNull ?? [],
+                            ref.read(currentUserIdProvider),
+                            canSendMessages,
+                            typingChannelId,
+                          ),
+                          onSubmitted: (_) => _handleSendMessage(
+                            task,
+                            profilesAsync.valueOrNull ?? [],
+                            ref.read(currentUserIdProvider),
+                            canSendMessages,
+                            typingChannelId,
+                          ),
+                        ),
+                      ),
+                      const SizedBox(width: 12),
+                      IconButton(
+                        tooltip: 'Send',
+                        onPressed: canSendMessages
+                            ? () => _handleSendMessage(
+                                task,
+                                profilesAsync.valueOrNull ?? [],
+                                ref.read(currentUserIdProvider),
+                                canSendMessages,
+                                typingChannelId,
+                              )
+                            : null,
+                        icon: const Icon(Icons.send),
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  String _createdByLabel(
+    AsyncValue<List<Profile>> profilesAsync,
+    Task task,
+    Ticket? ticket,
+  ) {
+    final creatorId = task.creatorId ?? ticket?.creatorId;
+    if (creatorId == null || creatorId.isEmpty) {
+      return 'Created by: Unknown';
+    }
+    final profile = profilesAsync.valueOrNull
+        ?.where((item) => item.id == creatorId)
+        .firstOrNull;
+    final name = profile?.fullName.isNotEmpty == true
+        ? profile!.fullName
+        : creatorId;
+    return 'Created by: $name';
+  }
+
+  Widget _buildMessages(
+    BuildContext context,
+    List<TicketMessage> messages,
+    List<Profile> profiles,
+  ) {
+    if (messages.isEmpty) {
+      return const Center(child: Text('No messages yet.'));
+    }
+    final profileById = {for (final profile in profiles) profile.id: profile};
+    final currentUserId = ref.read(currentUserIdProvider);
+
+    return ListView.builder(
+      reverse: true,
+      padding: const EdgeInsets.fromLTRB(0, 16, 0, 72),
+      itemCount: messages.length,
+      itemBuilder: (context, index) {
+        final message = messages[index];
+        final isMe = currentUserId != null && message.senderId == currentUserId;
+        final senderName = message.senderId == null
+            ? 'System'
+            : profileById[message.senderId]?.fullName ?? message.senderId!;
+        final bubbleColor = isMe
+            ? Theme.of(context).colorScheme.primaryContainer
+            : Theme.of(context).colorScheme.surfaceContainerHighest;
+        final textColor = isMe
+            ? Theme.of(context).colorScheme.onPrimaryContainer
+            : Theme.of(context).colorScheme.onSurface;
+
+        return Align(
+          alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
+          child: Column(
+            crossAxisAlignment: isMe
+                ? CrossAxisAlignment.end
+                : CrossAxisAlignment.start,
+            children: [
+              if (!isMe)
+                Padding(
+                  padding: const EdgeInsets.only(bottom: 4),
+                  child: Text(
+                    senderName,
+                    style: Theme.of(context).textTheme.labelSmall,
+                  ),
+                ),
+              Container(
+                margin: const EdgeInsets.only(bottom: 12),
+                padding: const EdgeInsets.all(12),
+                constraints: const BoxConstraints(maxWidth: 520),
+                decoration: BoxDecoration(
+                  color: bubbleColor,
+                  borderRadius: BorderRadius.only(
+                    topLeft: const Radius.circular(16),
+                    topRight: const Radius.circular(16),
+                    bottomLeft: Radius.circular(isMe ? 16 : 4),
+                    bottomRight: Radius.circular(isMe ? 4 : 16),
+                  ),
+                ),
+                child: _buildMentionText(message.content, textColor, profiles),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _buildTatSection(Task task) {
+    final animateQueue = task.status == 'queued';
+    final animateExecution = task.startedAt != null && task.completedAt == null;
+
+    if (!animateQueue && !animateExecution) {
+      return _buildTatContent(task, DateTime.now());
+    }
+
+    return StreamBuilder<int>(
+      stream: Stream.periodic(const Duration(seconds: 1), (tick) => tick),
+      builder: (context, snapshot) {
+        return _buildTatContent(task, DateTime.now());
+      },
+    );
+  }
+
+  Widget _buildTatContent(Task task, DateTime now) {
+    final queueDuration = task.status == 'queued'
+        ? now.difference(task.createdAt)
+        : _safeDuration(task.startedAt?.difference(task.createdAt));
+    final executionDuration = task.status == 'queued'
+        ? null
+        : task.startedAt == null
+        ? null
+        : task.completedAt == null
+        ? now.difference(task.startedAt!)
+        : task.completedAt!.difference(task.startedAt!);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text('Queue duration: ${_formatDuration(queueDuration)}'),
+        const SizedBox(height: 8),
+        Text('Task execution time: ${_formatDuration(executionDuration)}'),
+      ],
+    );
+  }
+
+  Duration? _safeDuration(Duration? duration) {
+    if (duration == null) {
+      return null;
+    }
+    return duration.isNegative ? Duration.zero : duration;
+  }
+
+  String _formatDuration(Duration? duration) {
+    if (duration == null) {
+      return 'Pending';
+    }
+    if (duration.inSeconds < 60) {
+      return 'Less than a minute';
+    }
+    final hours = duration.inHours;
+    final minutes = duration.inMinutes.remainder(60);
+    if (hours > 0) {
+      return '${hours}h ${minutes}m';
+    }
+    return '${minutes}m';
+  }
+
+  Widget _buildMentionText(
+    String text,
+    Color baseColor,
+    List<Profile> profiles,
+  ) {
+    final mentionColor = Theme.of(context).colorScheme.primary;
+    final spans = _mentionSpans(text, baseColor, mentionColor, profiles);
+    return RichText(
+      text: TextSpan(
+        children: spans,
+        style: TextStyle(color: baseColor),
+      ),
+    );
+  }
+
+  List<TextSpan> _mentionSpans(
+    String text,
+    Color baseColor,
+    Color mentionColor,
+    List<Profile> profiles,
+  ) {
+    final mentionLabels = profiles
+        .map(
+          (profile) => profile.fullName.isEmpty ? profile.id : profile.fullName,
+        )
+        .where((label) => label.isNotEmpty)
+        .map(_escapeRegExp)
+        .toList();
+    final pattern = mentionLabels.isEmpty
+        ? r'@\S+'
+        : '@(?:${mentionLabels.join('|')})';
+    final matches = RegExp(pattern, caseSensitive: false).allMatches(text);
+    if (matches.isEmpty) {
+      return [
+        TextSpan(
+          text: text,
+          style: TextStyle(color: baseColor),
+        ),
+      ];
+    }
+
+    final spans = <TextSpan>[];
+    var lastIndex = 0;
+    for (final match in matches) {
+      if (match.start > lastIndex) {
+        spans.add(
+          TextSpan(
+            text: text.substring(lastIndex, match.start),
+            style: TextStyle(color: baseColor),
+          ),
+        );
+      }
+      spans.add(
+        TextSpan(
+          text: text.substring(match.start, match.end),
+          style: TextStyle(color: mentionColor, fontWeight: FontWeight.w700),
+        ),
+      );
+      lastIndex = match.end;
+    }
+    if (lastIndex < text.length) {
+      spans.add(
+        TextSpan(
+          text: text.substring(lastIndex),
+          style: TextStyle(color: baseColor),
+        ),
+      );
+    }
+    return spans;
+  }
+
+  String _escapeRegExp(String value) {
+    return value.replaceAllMapped(
+      RegExp(r'[\\^$.*+?()[\]{}|]'),
+      (match) => '\\${match[0]}',
+    );
+  }
+
+  AsyncValue<List<TicketMessage>> _mergeMessages(
+    AsyncValue<List<TicketMessage>> taskMessages,
+    AsyncValue<List<TicketMessage>>? ticketMessages,
+  ) {
+    if (ticketMessages == null) {
+      return taskMessages;
+    }
+    return taskMessages.when(
+      data: (taskData) => ticketMessages.when(
+        data: (ticketData) {
+          final byId = <int, TicketMessage>{
+            for (final message in taskData) message.id: message,
+            for (final message in ticketData) message.id: message,
+          };
+          final merged = byId.values.toList()
+            ..sort((a, b) => b.createdAt.compareTo(a.createdAt));
+          return AsyncValue.data(merged);
+        },
+        loading: () => const AsyncLoading<List<TicketMessage>>(),
+        error: (error, stackTrace) =>
+            AsyncError<List<TicketMessage>>(error, stackTrace),
+      ),
+      loading: () => const AsyncLoading<List<TicketMessage>>(),
+      error: (error, stackTrace) =>
+          AsyncError<List<TicketMessage>>(error, stackTrace),
+    );
+  }
+
+  Future<void> _handleSendMessage(
+    Task task,
+    List<Profile> profiles,
+    String? currentUserId,
+    bool canSendMessages,
+    String typingChannelId,
+  ) async {
+    if (!canSendMessages) return;
+    final content = _messageController.text.trim();
+    if (content.isEmpty) {
+      return;
+    }
+    ref.read(typingIndicatorProvider(typingChannelId).notifier).stopTyping();
+    final message = await ref
+        .read(ticketsControllerProvider)
+        .sendTaskMessage(
+          taskId: task.id,
+          ticketId: task.ticketId,
+          content: content,
+        );
+    final mentionUserIds = _extractMentionedUserIds(
+      content,
+      profiles,
+      currentUserId,
+    );
+    if (mentionUserIds.isNotEmpty && currentUserId != null) {
+      await ref
+          .read(notificationsControllerProvider)
+          .createMentionNotifications(
+            userIds: mentionUserIds,
+            actorId: currentUserId,
+            ticketId: task.ticketId,
+            taskId: task.id,
+            messageId: message.id,
+          );
+    }
+    ref.invalidate(taskMessagesProvider(task.id));
+    if (task.ticketId != null) {
+      ref.invalidate(ticketMessagesProvider(task.ticketId!));
+    }
+    if (mounted) {
+      _messageController.clear();
+      _clearMentions();
+    }
+  }
+
+  void _handleComposerChanged(
+    List<Profile> profiles,
+    String? currentUserId,
+    bool canSendMessages,
+    String typingChannelId,
+  ) {
+    if (!canSendMessages) {
+      ref.read(typingIndicatorProvider(typingChannelId).notifier).stopTyping();
+      _clearMentions();
+      return;
+    }
+    ref.read(typingIndicatorProvider(typingChannelId).notifier).userTyping();
+    final text = _messageController.text;
+    final cursor = _messageController.selection.baseOffset;
+    if (cursor < 0) {
+      _clearMentions();
+      return;
+    }
+    final textBeforeCursor = text.substring(0, cursor);
+    final atIndex = textBeforeCursor.lastIndexOf('@');
+    if (atIndex == -1) {
+      _clearMentions();
+      return;
+    }
+    if (atIndex > 0 && !_isWhitespace(textBeforeCursor[atIndex - 1])) {
+      _clearMentions();
+      return;
+    }
+    final query = textBeforeCursor.substring(atIndex + 1);
+    if (query.contains(RegExp(r'\s'))) {
+      _clearMentions();
+      return;
+    }
+    final normalizedQuery = query.toLowerCase();
+    final candidates = profiles.where((profile) {
+      if (profile.id == currentUserId) {
+        return false;
+      }
+      final label = profile.fullName.isEmpty ? profile.id : profile.fullName;
+      return label.toLowerCase().contains(normalizedQuery);
+    }).toList();
+    setState(() {
+      _mentionQuery = query;
+      _mentionStart = atIndex;
+      _mentionResults = candidates.take(6).toList();
+    });
+  }
+
+  void _clearMentions() {
+    if (_mentionQuery == null && _mentionResults.isEmpty) {
+      return;
+    }
+    setState(() {
+      _mentionQuery = null;
+      _mentionStart = null;
+      _mentionResults = [];
+    });
+  }
+
+  bool _isWhitespace(String char) {
+    return char.trim().isEmpty;
+  }
+
+  List<String> _extractMentionedUserIds(
+    String content,
+    List<Profile> profiles,
+    String? currentUserId,
+  ) {
+    final lower = content.toLowerCase();
+    final mentioned = <String>{};
+    for (final profile in profiles) {
+      if (profile.id == currentUserId) continue;
+      final label = profile.fullName.isEmpty ? profile.id : profile.fullName;
+      if (label.isEmpty) continue;
+      final token = '@${label.toLowerCase()}';
+      if (lower.contains(token)) {
+        mentioned.add(profile.id);
+      }
+    }
+    return mentioned.toList();
+  }
+
+  Widget _buildMentionList(AsyncValue<List<Profile>> profilesAsync) {
+    if (_mentionResults.isEmpty) {
+      return const SizedBox.shrink();
+    }
+
+    return Container(
+      constraints: const BoxConstraints(maxHeight: 200),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: ListView.separated(
+        shrinkWrap: true,
+        padding: const EdgeInsets.symmetric(vertical: 8),
+        itemCount: _mentionResults.length,
+        separatorBuilder: (context, index) => const SizedBox(height: 4),
+        itemBuilder: (context, index) {
+          final profile = _mentionResults[index];
+          final label = profile.fullName.isEmpty
+              ? profile.id
+              : profile.fullName;
+          return ListTile(
+            dense: true,
+            title: Text(label),
+            onTap: () => _insertMention(profile),
+          );
+        },
+      ),
+    );
+  }
+
+  void _insertMention(Profile profile) {
+    final start = _mentionStart;
+    if (start == null) {
+      _clearMentions();
+      return;
+    }
+    final text = _messageController.text;
+    final cursor = _messageController.selection.baseOffset;
+    final end = cursor < 0 ? text.length : cursor;
+    final label = profile.fullName.isEmpty ? profile.id : profile.fullName;
+    final mentionText = '@$label ';
+    final updated = text.replaceRange(start, end, mentionText);
+    final newCursor = start + mentionText.length;
+    _messageController.text = updated;
+    _messageController.selection = TextSelection.collapsed(offset: newCursor);
+    _clearMentions();
+  }
+
+  String _typingLabel(
+    Set<String> userIds,
+    AsyncValue<List<Profile>> profilesAsync,
+  ) {
+    final profileById = {
+      for (final profile in profilesAsync.valueOrNull ?? [])
+        profile.id: profile,
+    };
+    final names = userIds
+        .map((id) => profileById[id]?.fullName ?? id)
+        .where((name) => name.isNotEmpty)
+        .toList();
+    if (names.isEmpty) {
+      return 'Someone is typing...';
+    }
+    if (names.length == 1) {
+      return '${names.first} is typing...';
+    }
+    if (names.length == 2) {
+      return '${names[0]} and ${names[1]} are typing...';
+    }
+    return '${names[0]}, ${names[1]} and others are typing...';
+  }
+
+  Task? _findTask(AsyncValue<List<Task>> tasksAsync, String taskId) {
+    return tasksAsync.maybeWhen(
+      data: (tasks) => tasks.where((task) => task.id == taskId).firstOrNull,
+      orElse: () => null,
+    );
+  }
+
+  Ticket? _findTicket(AsyncValue<List<Ticket>> ticketsAsync, String ticketId) {
+    return ticketsAsync.maybeWhen(
+      data: (tickets) =>
+          tickets.where((ticket) => ticket.id == ticketId).firstOrNull,
+      orElse: () => null,
+    );
+  }
+
+  bool _canAssignStaff(String role) {
+    return role == 'admin' || role == 'dispatcher' || role == 'it_staff';
+  }
+
+  Widget _buildStatusChip(
+    BuildContext context,
+    Task task,
+    bool canUpdateStatus,
+  ) {
+    final chip = Chip(
+      label: Text(task.status.toUpperCase()),
+      backgroundColor: _statusColor(context, task.status),
+      labelStyle: TextStyle(
+        color: _statusTextColor(context, task.status),
+        fontWeight: FontWeight.w600,
+      ),
+    );
+
+    if (!canUpdateStatus) {
+      return chip;
+    }
+
+    return PopupMenuButton<String>(
+      onSelected: (value) async {
+        await ref
+            .read(tasksControllerProvider)
+            .updateTaskStatus(taskId: task.id, status: value);
+        ref.invalidate(tasksProvider);
+      },
+      itemBuilder: (context) => _statusOptions
+          .map(
+            (status) => PopupMenuItem(
+              value: status,
+              child: Text(_statusMenuLabel(status)),
+            ),
+          )
+          .toList(),
+      child: chip,
+    );
+  }
+
+  String _statusMenuLabel(String status) {
+    return switch (status) {
+      'queued' => 'Queued',
+      'in_progress' => 'In progress',
+      'completed' => 'Completed',
+      _ => status,
+    };
+  }
+
+  Color _statusColor(BuildContext context, String status) {
+    return switch (status) {
+      'queued' => Colors.blueGrey.shade200,
+      'in_progress' => Colors.blue.shade300,
+      'completed' => Colors.green.shade300,
+      _ => Theme.of(context).colorScheme.surfaceContainerHighest,
+    };
+  }
+
+  Color _statusTextColor(BuildContext context, String status) {
+    return switch (status) {
+      'queued' => Colors.blueGrey.shade900,
+      'in_progress' => Colors.blue.shade900,
+      'completed' => Colors.green.shade900,
+      _ => Theme.of(context).colorScheme.onSurfaceVariant,
+    };
+  }
+
+  bool _canUpdateStatus(
+    Profile? profile,
+    List<TaskAssignment> assignments,
+    String taskId,
+  ) {
+    if (profile == null) {
+      return false;
+    }
+    final isGlobal =
+        profile.role == 'admin' ||
+        profile.role == 'dispatcher' ||
+        profile.role == 'it_staff';
+    if (isGlobal) {
+      return true;
+    }
+    return assignments.any(
+      (assignment) =>
+          assignment.taskId == taskId && assignment.userId == profile.id,
+    );
+  }
+}
+
+extension _FirstOrNull<T> on Iterable<T> {
+  T? get firstOrNull => isEmpty ? null : first;
+}

lib/screens/tasks/tasks_list_screen.dart

@@ -0,0 +1,319 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+
+import '../../models/notification_item.dart';
+import '../../models/task.dart';
+import '../../providers/notifications_provider.dart';
+import '../../providers/profile_provider.dart';
+import '../../providers/tasks_provider.dart';
+import '../../providers/tickets_provider.dart';
+import '../../providers/typing_provider.dart';
+import '../../widgets/responsive_body.dart';
+import '../../widgets/typing_dots.dart';
+
+class TasksListScreen extends ConsumerWidget {
+  const TasksListScreen({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final tasksAsync = ref.watch(tasksProvider);
+    final ticketsAsync = ref.watch(ticketsProvider);
+    final officesAsync = ref.watch(officesProvider);
+    final profileAsync = ref.watch(currentProfileProvider);
+    final notificationsAsync = ref.watch(notificationsProvider);
+
+    final canCreate = profileAsync.maybeWhen(
+      data: (profile) =>
+          profile != null &&
+          (profile.role == 'admin' ||
+              profile.role == 'dispatcher' ||
+              profile.role == 'it_staff'),
+      orElse: () => false,
+    );
+
+    final ticketById = {
+      for (final ticket in ticketsAsync.valueOrNull ?? []) ticket.id: ticket,
+    };
+    final officeById = {
+      for (final office in officesAsync.valueOrNull ?? []) office.id: office,
+    };
+
+    return Scaffold(
+      body: ResponsiveBody(
+        child: tasksAsync.when(
+          data: (tasks) {
+            if (tasks.isEmpty) {
+              return const Center(child: Text('No tasks yet.'));
+            }
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                Padding(
+                  padding: const EdgeInsets.only(top: 16, bottom: 8),
+                  child: Align(
+                    alignment: Alignment.center,
+                    child: Text(
+                      'Tasks',
+                      textAlign: TextAlign.center,
+                      style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                        fontWeight: FontWeight.w700,
+                      ),
+                    ),
+                  ),
+                ),
+                Expanded(
+                  child: ListView.separated(
+                    padding: const EdgeInsets.only(bottom: 24),
+                    itemCount: tasks.length,
+                    separatorBuilder: (context, index) =>
+                        const SizedBox(height: 12),
+                    itemBuilder: (context, index) {
+                      final task = tasks[index];
+                      final ticketId = task.ticketId;
+                      final ticket = ticketId == null
+                          ? null
+                          : ticketById[ticketId];
+                      final officeId = ticket?.officeId ?? task.officeId;
+                      final officeName = officeId == null
+                          ? 'Unassigned office'
+                          : (officeById[officeId]?.name ?? officeId);
+                      final subtitle = _buildSubtitle(officeName, task.status);
+                      final hasMention = _hasTaskMention(
+                        notificationsAsync,
+                        task,
+                      );
+                      final typingChannelId = task.id;
+                      final typingState = ref.watch(
+                        typingIndicatorProvider(typingChannelId),
+                      );
+                      final showTyping = typingState.userIds.isNotEmpty;
+
+                      return ListTile(
+                        leading: _buildQueueBadge(context, task),
+                        title: Text(
+                          task.title.isNotEmpty
+                              ? task.title
+                              : (ticket?.subject ?? 'Task ${task.id}'),
+                        ),
+                        subtitle: Text(subtitle),
+                        trailing: Row(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            _buildStatusChip(context, task.status),
+                            if (showTyping) ...[
+                              const SizedBox(width: 6),
+                              TypingDots(
+                                size: 6,
+                                color: Theme.of(context).colorScheme.primary,
+                              ),
+                            ],
+                            if (hasMention)
+                              const Padding(
+                                padding: EdgeInsets.only(left: 8),
+                                child: Icon(
+                                  Icons.circle,
+                                  size: 10,
+                                  color: Colors.red,
+                                ),
+                              ),
+                          ],
+                        ),
+                        onTap: () => context.go('/tasks/${task.id}'),
+                      );
+                    },
+                  ),
+                ),
+              ],
+            );
+          },
+          loading: () => const Center(child: CircularProgressIndicator()),
+          error: (error, _) =>
+              Center(child: Text('Failed to load tasks: $error')),
+        ),
+      ),
+      floatingActionButton: canCreate
+          ? FloatingActionButton.extended(
+              onPressed: () => _showCreateTaskDialog(context, ref),
+              icon: const Icon(Icons.add),
+              label: const Text('New Task'),
+            )
+          : null,
+    );
+  }
+
+  Future<void> _showCreateTaskDialog(
+    BuildContext context,
+    WidgetRef ref,
+  ) async {
+    final titleController = TextEditingController();
+    final descriptionController = TextEditingController();
+    String? selectedOfficeId;
+
+    await showDialog<void>(
+      context: context,
+      builder: (dialogContext) {
+        return StatefulBuilder(
+          builder: (context, setState) {
+            final officesAsync = ref.watch(officesProvider);
+            return AlertDialog(
+              title: const Text('Create Task'),
+              content: SizedBox(
+                width: 360,
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    TextField(
+                      controller: titleController,
+                      decoration: const InputDecoration(
+                        labelText: 'Task title',
+                      ),
+                    ),
+                    const SizedBox(height: 12),
+                    TextField(
+                      controller: descriptionController,
+                      decoration: const InputDecoration(
+                        labelText: 'Description',
+                      ),
+                      maxLines: 3,
+                    ),
+                    const SizedBox(height: 12),
+                    officesAsync.when(
+                      data: (offices) {
+                        if (offices.isEmpty) {
+                          return const Text('No offices available.');
+                        }
+                        selectedOfficeId ??= offices.first.id;
+                        return DropdownButtonFormField<String>(
+                          initialValue: selectedOfficeId,
+                          decoration: const InputDecoration(
+                            labelText: 'Office',
+                          ),
+                          items: offices
+                              .map(
+                                (office) => DropdownMenuItem(
+                                  value: office.id,
+                                  child: Text(office.name),
+                                ),
+                              )
+                              .toList(),
+                          onChanged: (value) =>
+                              setState(() => selectedOfficeId = value),
+                        );
+                      },
+                      loading: () => const Align(
+                        alignment: Alignment.centerLeft,
+                        child: CircularProgressIndicator(),
+                      ),
+                      error: (error, _) =>
+                          Text('Failed to load offices: $error'),
+                    ),
+                  ],
+                ),
+              ),
+              actions: [
+                TextButton(
+                  onPressed: () => Navigator.of(dialogContext).pop(),
+                  child: const Text('Cancel'),
+                ),
+                FilledButton(
+                  onPressed: () async {
+                    final title = titleController.text.trim();
+                    final description = descriptionController.text.trim();
+                    final officeId = selectedOfficeId;
+                    if (title.isEmpty || officeId == null) {
+                      return;
+                    }
+                    await ref
+                        .read(tasksControllerProvider)
+                        .createTask(
+                          title: title,
+                          description: description,
+                          officeId: officeId,
+                        );
+                    if (context.mounted) {
+                      Navigator.of(dialogContext).pop();
+                    }
+                  },
+                  child: const Text('Create'),
+                ),
+              ],
+            );
+          },
+        );
+      },
+    );
+  }
+
+  bool _hasTaskMention(
+    AsyncValue<List<NotificationItem>> notificationsAsync,
+    Task task,
+  ) {
+    return notificationsAsync.maybeWhen(
+      data: (items) => items.any(
+        (item) =>
+            item.isUnread &&
+            (item.taskId == task.id || item.ticketId == task.ticketId),
+      ),
+      orElse: () => false,
+    );
+  }
+
+  Widget _buildQueueBadge(BuildContext context, Task task) {
+    final queueOrder = task.queueOrder;
+    final isQueued = task.status == 'queued';
+    if (!isQueued || queueOrder == null) {
+      return const Icon(Icons.fact_check_outlined);
+    }
+    return Container(
+      width: 40,
+      height: 40,
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.primaryContainer,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Text(
+        '#$queueOrder',
+        style: Theme.of(context).textTheme.labelMedium?.copyWith(
+          fontWeight: FontWeight.w700,
+          color: Theme.of(context).colorScheme.onPrimaryContainer,
+        ),
+      ),
+    );
+  }
+
+  String _buildSubtitle(String officeName, String status) {
+    final statusLabel = status.toUpperCase();
+    return '$officeName · $statusLabel';
+  }
+
+  Widget _buildStatusChip(BuildContext context, String status) {
+    return Chip(
+      label: Text(status.toUpperCase()),
+      backgroundColor: _statusColor(context, status),
+      labelStyle: TextStyle(
+        color: _statusTextColor(context, status),
+        fontWeight: FontWeight.w600,
+      ),
+    );
+  }
+
+  Color _statusColor(BuildContext context, String status) {
+    return switch (status) {
+      'queued' => Colors.blueGrey.shade200,
+      'in_progress' => Colors.blue.shade300,
+      'completed' => Colors.green.shade300,
+      _ => Theme.of(context).colorScheme.surfaceContainerHighest,
+    };
+  }
+
+  Color _statusTextColor(BuildContext context, String status) {
+    return switch (status) {
+      'queued' => Colors.blueGrey.shade900,
+      'in_progress' => Colors.blue.shade900,
+      'completed' => Colors.green.shade900,
+      _ => Theme.of(context).colorScheme.onSurfaceVariant,
+    };
+  }
+}

lib/screens/tickets/ticket_detail_screen.dart

@@ -0,0 +1,859 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+
+import '../../models/office.dart';
+import '../../models/profile.dart';
+import '../../models/task.dart';
+import '../../models/ticket.dart';
+import '../../models/ticket_message.dart';
+import '../../providers/notifications_provider.dart';
+import '../../providers/profile_provider.dart';
+import '../../providers/tasks_provider.dart';
+import '../../providers/tickets_provider.dart';
+import '../../providers/typing_provider.dart';
+import '../../widgets/responsive_body.dart';
+import '../../widgets/task_assignment_section.dart';
+import '../../widgets/typing_dots.dart';
+
+class TicketDetailScreen extends ConsumerStatefulWidget {
+  const TicketDetailScreen({super.key, required this.ticketId});
+
+  final String ticketId;
+
+  @override
+  ConsumerState<TicketDetailScreen> createState() => _TicketDetailScreenState();
+}
+
+class _TicketDetailScreenState extends ConsumerState<TicketDetailScreen> {
+  final _messageController = TextEditingController();
+  static const List<String> _statusOptions = ['pending', 'promoted', 'closed'];
+  String? _mentionQuery;
+  int? _mentionStart;
+  List<Profile> _mentionResults = [];
+
+  @override
+  void initState() {
+    super.initState();
+    Future.microtask(
+      () => ref
+          .read(notificationsControllerProvider)
+          .markReadForTicket(widget.ticketId),
+    );
+  }
+
+  @override
+  void dispose() {
+    _messageController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final ticket = _findTicket(ref, widget.ticketId);
+    final messagesAsync = ref.watch(ticketMessagesProvider(widget.ticketId));
+    final profilesAsync = ref.watch(profilesProvider);
+    final officesAsync = ref.watch(officesProvider);
+    final currentProfileAsync = ref.watch(currentProfileProvider);
+    final tasksAsync = ref.watch(tasksProvider);
+    final typingState = ref.watch(typingIndicatorProvider(widget.ticketId));
+    final canPromote = currentProfileAsync.maybeWhen(
+      data: (profile) => profile != null && _canPromote(profile.role),
+      orElse: () => false,
+    );
+    final canSendMessages = ticket != null && ticket.status != 'closed';
+    final canAssign = currentProfileAsync.maybeWhen(
+      data: (profile) => profile != null && _canAssignStaff(profile.role),
+      orElse: () => false,
+    );
+    final showAssign = canAssign && ticket?.status != 'closed';
+    final taskForTicket = ticket == null
+        ? null
+        : _findTaskForTicket(tasksAsync, ticket.id);
+    final hasStaffMessage = _hasStaffMessage(
+      messagesAsync.valueOrNull ?? const [],
+      profilesAsync.valueOrNull ?? const [],
+    );
+    final effectiveRespondedAt = ticket?.promotedAt != null && !hasStaffMessage
+        ? ticket!.promotedAt
+        : ticket?.respondedAt;
+
+    return ResponsiveBody(
+      child: Column(
+        children: [
+          if (ticket != null)
+            Padding(
+              padding: const EdgeInsets.symmetric(vertical: 16),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Align(
+                    alignment: Alignment.center,
+                    child: Text(
+                      ticket.subject,
+                      textAlign: TextAlign.center,
+                      style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                        fontWeight: FontWeight.w700,
+                      ),
+                    ),
+                  ),
+                  const SizedBox(height: 6),
+                  Align(
+                    alignment: Alignment.center,
+                    child: Text(
+                      _filedByLabel(profilesAsync, ticket),
+                      textAlign: TextAlign.center,
+                      style: Theme.of(context).textTheme.bodySmall,
+                    ),
+                  ),
+                  const SizedBox(height: 8),
+                  Wrap(
+                    spacing: 12,
+                    runSpacing: 8,
+                    crossAxisAlignment: WrapCrossAlignment.center,
+                    children: [
+                      _buildStatusChip(context, ref, ticket, canPromote),
+                      Text('Office: ${_officeLabel(officesAsync, ticket)}'),
+                    ],
+                  ),
+                  const SizedBox(height: 12),
+                  Text(ticket.description),
+                  const SizedBox(height: 12),
+                  _buildTatRow(context, ticket, effectiveRespondedAt),
+                  if (taskForTicket != null) ...[
+                    const SizedBox(height: 16),
+                    Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Expanded(
+                          child: TaskAssignmentSection(
+                            taskId: taskForTicket.id,
+                            canAssign: showAssign,
+                          ),
+                        ),
+                        const SizedBox(width: 8),
+                        IconButton(
+                          tooltip: 'Open task',
+                          onPressed: () =>
+                              context.go('/tasks/${taskForTicket.id}'),
+                          icon: const Icon(Icons.open_in_new),
+                        ),
+                      ],
+                    ),
+                  ],
+                ],
+              ),
+            ),
+          const Divider(height: 1),
+          Expanded(
+            child: messagesAsync.when(
+              data: (messages) {
+                if (messages.isEmpty) {
+                  return const Center(child: Text('No messages yet.'));
+                }
+                final profileById = {
+                  for (final profile in profilesAsync.valueOrNull ?? [])
+                    profile.id: profile,
+                };
+                return ListView.builder(
+                  reverse: true,
+                  padding: const EdgeInsets.fromLTRB(0, 16, 0, 72),
+                  itemCount: messages.length,
+                  itemBuilder: (context, index) {
+                    final message = messages[index];
+                    final currentUserId =
+                        Supabase.instance.client.auth.currentUser?.id;
+                    final isMe =
+                        currentUserId != null &&
+                        message.senderId == currentUserId;
+                    final senderName = message.senderId == null
+                        ? 'System'
+                        : profileById[message.senderId]?.fullName ??
+                              message.senderId!;
+                    final bubbleColor = isMe
+                        ? Theme.of(context).colorScheme.primaryContainer
+                        : Theme.of(context).colorScheme.surfaceContainerHighest;
+                    final textColor = isMe
+                        ? Theme.of(context).colorScheme.onPrimaryContainer
+                        : Theme.of(context).colorScheme.onSurface;
+
+                    return Align(
+                      alignment: isMe
+                          ? Alignment.centerRight
+                          : Alignment.centerLeft,
+                      child: Column(
+                        crossAxisAlignment: isMe
+                            ? CrossAxisAlignment.end
+                            : CrossAxisAlignment.start,
+                        children: [
+                          if (!isMe)
+                            Padding(
+                              padding: const EdgeInsets.only(bottom: 4),
+                              child: Text(
+                                senderName,
+                                style: Theme.of(context).textTheme.labelSmall,
+                              ),
+                            ),
+                          Container(
+                            margin: const EdgeInsets.only(bottom: 12),
+                            padding: const EdgeInsets.all(12),
+                            constraints: const BoxConstraints(maxWidth: 520),
+                            decoration: BoxDecoration(
+                              color: bubbleColor,
+                              borderRadius: BorderRadius.only(
+                                topLeft: const Radius.circular(16),
+                                topRight: const Radius.circular(16),
+                                bottomLeft: Radius.circular(isMe ? 16 : 4),
+                                bottomRight: Radius.circular(isMe ? 4 : 16),
+                              ),
+                            ),
+                            child: _buildMentionText(
+                              message.content,
+                              textColor,
+                              profilesAsync.valueOrNull ?? [],
+                            ),
+                          ),
+                        ],
+                      ),
+                    );
+                  },
+                );
+              },
+              loading: () => const Center(child: CircularProgressIndicator()),
+              error: (error, _) =>
+                  Center(child: Text('Failed to load messages: $error')),
+            ),
+          ),
+          SafeArea(
+            top: false,
+            child: Padding(
+              padding: const EdgeInsets.fromLTRB(0, 8, 0, 12),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  if (typingState.userIds.isNotEmpty)
+                    Padding(
+                      padding: const EdgeInsets.only(bottom: 6),
+                      child: Container(
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: 10,
+                          vertical: 6,
+                        ),
+                        decoration: BoxDecoration(
+                          color: Theme.of(
+                            context,
+                          ).colorScheme.surfaceContainerHighest,
+                          borderRadius: BorderRadius.circular(16),
+                        ),
+                        child: Row(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            Text(
+                              _typingLabel(typingState.userIds, profilesAsync),
+                              style: Theme.of(context).textTheme.labelSmall,
+                            ),
+                            const SizedBox(width: 8),
+                            TypingDots(
+                              size: 8,
+                              color: Theme.of(context).colorScheme.primary,
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
+                  if (_mentionQuery != null)
+                    Padding(
+                      padding: const EdgeInsets.only(bottom: 8),
+                      child: _buildMentionList(profilesAsync),
+                    ),
+                  if (!canSendMessages)
+                    Padding(
+                      padding: const EdgeInsets.only(bottom: 8),
+                      child: Text(
+                        'Messaging is disabled for closed tickets.',
+                        style: Theme.of(context).textTheme.labelMedium,
+                      ),
+                    ),
+                  Row(
+                    children: [
+                      Expanded(
+                        child: TextField(
+                          controller: _messageController,
+                          decoration: const InputDecoration(
+                            hintText: 'Message...',
+                          ),
+                          enabled: canSendMessages,
+                          textInputAction: TextInputAction.send,
+                          onChanged: canSendMessages
+                              ? (_) => _handleComposerChanged(
+                                  profilesAsync.valueOrNull ?? [],
+                                  Supabase.instance.client.auth.currentUser?.id,
+                                  canSendMessages,
+                                )
+                              : null,
+                          onSubmitted: canSendMessages
+                              ? (_) => _handleSendMessage(
+                                  ref,
+                                  profilesAsync.valueOrNull ?? [],
+                                  Supabase.instance.client.auth.currentUser?.id,
+                                  canSendMessages,
+                                )
+                              : null,
+                        ),
+                      ),
+                      const SizedBox(width: 12),
+                      IconButton(
+                        tooltip: 'Send',
+                        onPressed: canSendMessages
+                            ? () => _handleSendMessage(
+                                ref,
+                                profilesAsync.valueOrNull ?? [],
+                                Supabase.instance.client.auth.currentUser?.id,
+                                canSendMessages,
+                              )
+                            : null,
+                        icon: const Icon(Icons.send),
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  String _filedByLabel(AsyncValue<List<Profile>> profilesAsync, Ticket ticket) {
+    final creatorId = ticket.creatorId;
+    if (creatorId == null || creatorId.isEmpty) {
+      return 'Filed by: Unknown';
+    }
+    final profile = profilesAsync.valueOrNull
+        ?.where((item) => item.id == creatorId)
+        .firstOrNull;
+    final name = profile?.fullName.isNotEmpty == true
+        ? profile!.fullName
+        : creatorId;
+    return 'Filed by: $name';
+  }
+
+  Ticket? _findTicket(WidgetRef ref, String ticketId) {
+    final ticketsAsync = ref.watch(ticketsProvider);
+    return ticketsAsync.maybeWhen(
+      data: (tickets) =>
+          tickets.where((ticket) => ticket.id == ticketId).firstOrNull,
+      orElse: () => null,
+    );
+  }
+
+  bool _hasStaffMessage(List<TicketMessage> messages, List<Profile> profiles) {
+    if (messages.isEmpty || profiles.isEmpty) {
+      return false;
+    }
+    final staffIds = profiles
+        .where(
+          (profile) =>
+              profile.role == 'admin' ||
+              profile.role == 'dispatcher' ||
+              profile.role == 'it_staff',
+        )
+        .map((profile) => profile.id)
+        .toSet();
+    if (staffIds.isEmpty) {
+      return false;
+    }
+    return messages.any(
+      (message) =>
+          message.senderId != null && staffIds.contains(message.senderId!),
+    );
+  }
+
+  Task? _findTaskForTicket(AsyncValue<List<Task>> tasksAsync, String ticketId) {
+    return tasksAsync.maybeWhen(
+      data: (tasks) =>
+          tasks.where((task) => task.ticketId == ticketId).firstOrNull,
+      orElse: () => null,
+    );
+  }
+
+  Future<void> _handleSendMessage(
+    WidgetRef ref,
+    List<Profile> profiles,
+    String? currentUserId,
+    bool canSendMessages,
+  ) async {
+    if (!canSendMessages) return;
+    final content = _messageController.text.trim();
+    if (content.isEmpty) return;
+    ref.read(typingIndicatorProvider(widget.ticketId).notifier).stopTyping();
+    final message = await ref
+        .read(ticketsControllerProvider)
+        .sendTicketMessage(ticketId: widget.ticketId, content: content);
+    final mentionUserIds = _extractMentionedUserIds(
+      content,
+      profiles,
+      currentUserId,
+    );
+    if (mentionUserIds.isNotEmpty && currentUserId != null) {
+      await ref
+          .read(notificationsControllerProvider)
+          .createMentionNotifications(
+            userIds: mentionUserIds,
+            actorId: currentUserId,
+            ticketId: widget.ticketId,
+            messageId: message.id,
+          );
+    }
+    ref.invalidate(ticketMessagesProvider(widget.ticketId));
+    if (mounted) {
+      _messageController.clear();
+      _clearMentions();
+    }
+  }
+
+  List<String> _extractMentionedUserIds(
+    String content,
+    List<Profile> profiles,
+    String? currentUserId,
+  ) {
+    final lower = content.toLowerCase();
+    final mentioned = <String>{};
+    for (final profile in profiles) {
+      if (profile.id == currentUserId) continue;
+      final label = profile.fullName.isEmpty ? profile.id : profile.fullName;
+      if (label.isEmpty) continue;
+      final token = '@${label.toLowerCase()}';
+      if (lower.contains(token)) {
+        mentioned.add(profile.id);
+      }
+    }
+    return mentioned.toList();
+  }
+
+  void _handleComposerChanged(
+    List<Profile> profiles,
+    String? currentUserId,
+    bool canSendMessages,
+  ) {
+    if (!canSendMessages) {
+      ref.read(typingIndicatorProvider(widget.ticketId).notifier).stopTyping();
+      _clearMentions();
+      return;
+    }
+    ref.read(typingIndicatorProvider(widget.ticketId).notifier).userTyping();
+    final text = _messageController.text;
+    final cursor = _messageController.selection.baseOffset;
+    if (cursor < 0) {
+      _clearMentions();
+      return;
+    }
+    final textBeforeCursor = text.substring(0, cursor);
+    final atIndex = textBeforeCursor.lastIndexOf('@');
+    if (atIndex == -1) {
+      _clearMentions();
+      return;
+    }
+    if (atIndex > 0 && !_isWhitespace(textBeforeCursor[atIndex - 1])) {
+      _clearMentions();
+      return;
+    }
+    final query = textBeforeCursor.substring(atIndex + 1);
+    if (query.contains(RegExp(r'\s'))) {
+      _clearMentions();
+      return;
+    }
+    final normalizedQuery = query.toLowerCase();
+    final candidates = profiles.where((profile) {
+      if (profile.id == currentUserId) {
+        return false;
+      }
+      final label = profile.fullName.isEmpty ? profile.id : profile.fullName;
+      return label.toLowerCase().contains(normalizedQuery);
+    }).toList();
+    setState(() {
+      _mentionQuery = query;
+      _mentionStart = atIndex;
+      _mentionResults = candidates.take(6).toList();
+    });
+  }
+
+  void _clearMentions() {
+    if (_mentionQuery == null && _mentionResults.isEmpty) {
+      return;
+    }
+    setState(() {
+      _mentionQuery = null;
+      _mentionStart = null;
+      _mentionResults = [];
+    });
+  }
+
+  bool _isWhitespace(String char) {
+    return char.trim().isEmpty;
+  }
+
+  String _typingLabel(
+    Set<String> userIds,
+    AsyncValue<List<Profile>> profilesAsync,
+  ) {
+    final profileById = {
+      for (final profile in profilesAsync.valueOrNull ?? [])
+        profile.id: profile,
+    };
+    final names = userIds
+        .map((id) => profileById[id]?.fullName ?? id)
+        .where((name) => name.isNotEmpty)
+        .toList();
+    if (names.isEmpty) {
+      return 'Someone is typing...';
+    }
+    if (names.length == 1) {
+      return '${names.first} is typing...';
+    }
+    if (names.length == 2) {
+      return '${names[0]} and ${names[1]} are typing...';
+    }
+    return '${names[0]}, ${names[1]} and others are typing...';
+  }
+
+  Widget _buildMentionList(AsyncValue<List<Profile>> profilesAsync) {
+    if (_mentionResults.isEmpty) {
+      return const SizedBox.shrink();
+    }
+
+    return Container(
+      constraints: const BoxConstraints(maxHeight: 200),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: ListView.separated(
+        shrinkWrap: true,
+        padding: const EdgeInsets.symmetric(vertical: 8),
+        itemCount: _mentionResults.length,
+        separatorBuilder: (context, index) => const SizedBox(height: 4),
+        itemBuilder: (context, index) {
+          final profile = _mentionResults[index];
+          final label = profile.fullName.isEmpty
+              ? profile.id
+              : profile.fullName;
+          return ListTile(
+            dense: true,
+            title: Text(label),
+            onTap: () => _insertMention(profile),
+          );
+        },
+      ),
+    );
+  }
+
+  void _insertMention(Profile profile) {
+    final start = _mentionStart;
+    if (start == null) {
+      _clearMentions();
+      return;
+    }
+    final text = _messageController.text;
+    final cursor = _messageController.selection.baseOffset;
+    final end = cursor < 0 ? text.length : cursor;
+    final label = profile.fullName.isEmpty ? profile.id : profile.fullName;
+    final mentionText = '@$label ';
+    final updated = text.replaceRange(start, end, mentionText);
+    final newCursor = start + mentionText.length;
+    _messageController.text = updated;
+    _messageController.selection = TextSelection.collapsed(offset: newCursor);
+    _clearMentions();
+  }
+
+  Widget _buildTatRow(
+    BuildContext context,
+    Ticket ticket,
+    DateTime? respondedAtOverride,
+  ) {
+    final respondedAt = respondedAtOverride ?? ticket.respondedAt;
+    final responseDuration = respondedAt?.difference(ticket.createdAt);
+    final triageEnd = _earliestDate(ticket.promotedAt, ticket.closedAt);
+    final triageStart = respondedAt;
+    final triageDuration = triageStart == null || triageEnd == null
+        ? null
+        : triageEnd.difference(triageStart);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          'Response time: ${responseDuration == null ? 'Pending' : _formatDuration(responseDuration)}',
+        ),
+        const SizedBox(height: 8),
+        Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Expanded(
+              child: Text(
+                'Triage duration: ${triageDuration == null ? 'Pending' : _formatDuration(triageDuration)}',
+              ),
+            ),
+            IconButton(
+              tooltip: 'View timeline',
+              onPressed: () => _showTimelineDialog(context, ticket),
+              icon: const Icon(Icons.access_time),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget _buildMentionText(
+    String text,
+    Color baseColor,
+    List<Profile> profiles,
+  ) {
+    final mentionColor = Theme.of(context).colorScheme.primary;
+    final spans = _mentionSpans(text, baseColor, mentionColor, profiles);
+    return RichText(
+      text: TextSpan(
+        children: spans,
+        style: TextStyle(color: baseColor),
+      ),
+    );
+  }
+
+  List<TextSpan> _mentionSpans(
+    String text,
+    Color baseColor,
+    Color mentionColor,
+    List<Profile> profiles,
+  ) {
+    final mentionLabels = profiles
+        .map(
+          (profile) => profile.fullName.isEmpty ? profile.id : profile.fullName,
+        )
+        .where((label) => label.isNotEmpty)
+        .map(_escapeRegExp)
+        .toList();
+    final pattern = mentionLabels.isEmpty
+        ? r'@\S+'
+        : '@(?:${mentionLabels.join('|')})';
+    final matches = RegExp(pattern, caseSensitive: false).allMatches(text);
+    if (matches.isEmpty) {
+      return [
+        TextSpan(
+          text: text,
+          style: TextStyle(color: baseColor),
+        ),
+      ];
+    }
+
+    final spans = <TextSpan>[];
+    var lastIndex = 0;
+    for (final match in matches) {
+      if (match.start > lastIndex) {
+        spans.add(
+          TextSpan(
+            text: text.substring(lastIndex, match.start),
+            style: TextStyle(color: baseColor),
+          ),
+        );
+      }
+      spans.add(
+        TextSpan(
+          text: text.substring(match.start, match.end),
+          style: TextStyle(color: mentionColor, fontWeight: FontWeight.w700),
+        ),
+      );
+      lastIndex = match.end;
+    }
+    if (lastIndex < text.length) {
+      spans.add(
+        TextSpan(
+          text: text.substring(lastIndex),
+          style: TextStyle(color: baseColor),
+        ),
+      );
+    }
+    return spans;
+  }
+
+  String _escapeRegExp(String value) {
+    return value.replaceAllMapped(
+      RegExp(r'[\\^$.*+?()[\]{}|]'),
+      (match) => '\\${match[0]}',
+    );
+  }
+
+  DateTime? _earliestDate(DateTime? first, DateTime? second) {
+    if (first == null) return second;
+    if (second == null) return first;
+    return first.isBefore(second) ? first : second;
+  }
+
+  String _officeLabel(AsyncValue<List<Office>> officesAsync, Ticket ticket) {
+    final offices = officesAsync.valueOrNull ?? [];
+    final office = offices
+        .where((item) => item.id == ticket.officeId)
+        .firstOrNull;
+    return office?.name ?? ticket.officeId;
+  }
+
+  String _formatDate(DateTime value) {
+    final local = value.toLocal();
+    final monthNames = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
+    final month = monthNames[local.month - 1];
+    final day = local.day.toString().padLeft(2, '0');
+    final year = local.year.toString();
+    final hour24 = local.hour;
+    final hour12 = hour24 % 12 == 0 ? 12 : hour24 % 12;
+    final minute = local.minute.toString().padLeft(2, '0');
+    final ampm = hour24 >= 12 ? 'PM' : 'AM';
+    return '$month $day, $year $hour12:$minute $ampm';
+  }
+
+  Future<void> _showTimelineDialog(BuildContext context, Ticket ticket) async {
+    await showDialog<void>(
+      context: context,
+      builder: (dialogContext) {
+        return AlertDialog(
+          title: const Text('Ticket Timeline'),
+          content: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              _timelineRow('Created', ticket.createdAt),
+              _timelineRow('Responded', ticket.respondedAt),
+              _timelineRow('Promoted', ticket.promotedAt),
+              _timelineRow('Closed', ticket.closedAt),
+            ],
+          ),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.of(dialogContext).pop(),
+              child: const Text('Close'),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _timelineRow(String label, DateTime? value) {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 8),
+      child: Text('$label: ${value == null ? '—' : _formatDate(value)}'),
+    );
+  }
+
+  String _formatDuration(Duration duration) {
+    if (duration.inSeconds < 60) {
+      return 'Less than a minute';
+    }
+    final hours = duration.inHours;
+    final minutes = duration.inMinutes.remainder(60);
+    if (hours > 0) {
+      return '${hours}h ${minutes}m';
+    }
+    return '${minutes}m';
+  }
+
+  Widget _buildStatusChip(
+    BuildContext context,
+    WidgetRef ref,
+    Ticket ticket,
+    bool canPromote,
+  ) {
+    final isLocked = ticket.status == 'promoted' || ticket.status == 'closed';
+    final chip = Chip(
+      label: Text(_statusLabel(ticket.status)),
+      backgroundColor: _statusColor(context, ticket.status),
+      labelStyle: TextStyle(
+        color: _statusTextColor(context, ticket.status),
+        fontWeight: FontWeight.w600,
+      ),
+    );
+
+    if (isLocked) {
+      return chip;
+    }
+
+    final availableStatuses = canPromote
+        ? _statusOptions
+        : _statusOptions.where((status) => status != 'promoted').toList();
+
+    return PopupMenuButton<String>(
+      onSelected: (value) async {
+        await ref
+            .read(ticketsControllerProvider)
+            .updateTicketStatus(ticketId: ticket.id, status: value);
+        ref.invalidate(ticketsProvider);
+      },
+      itemBuilder: (context) => availableStatuses
+          .map(
+            (status) => PopupMenuItem(
+              value: status,
+              child: Text(_statusMenuLabel(status)),
+            ),
+          )
+          .toList(),
+      child: chip,
+    );
+  }
+
+  String _statusLabel(String status) {
+    return status.toUpperCase();
+  }
+
+  String _statusMenuLabel(String status) {
+    return switch (status) {
+      'pending' => 'Pending',
+      'promoted' => 'Promote to Task',
+      'closed' => 'Close',
+      _ => status,
+    };
+  }
+
+  bool _canPromote(String role) {
+    return role == 'admin' || role == 'dispatcher' || role == 'it_staff';
+  }
+
+  bool _canAssignStaff(String role) {
+    return role == 'admin' || role == 'dispatcher' || role == 'it_staff';
+  }
+
+  Color _statusColor(BuildContext context, String status) {
+    return switch (status) {
+      'pending' => Colors.amber.shade300,
+      'promoted' => Colors.blue.shade300,
+      'closed' => Colors.green.shade300,
+      _ => Theme.of(context).colorScheme.surfaceContainerHighest,
+    };
+  }
+
+  Color _statusTextColor(BuildContext context, String status) {
+    return switch (status) {
+      'pending' => Colors.brown.shade900,
+      'promoted' => Colors.blue.shade900,
+      'closed' => Colors.green.shade900,
+      _ => Theme.of(context).colorScheme.onSurfaceVariant,
+    };
+  }
+}
+
+extension _FirstOrNull<T> on Iterable<T> {
+  T? get firstOrNull => isEmpty ? null : first;
+}

lib/screens/tickets/tickets_list_screen.dart

@@ -0,0 +1,268 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+
+import '../../models/office.dart';
+import '../../models/notification_item.dart';
+import '../../providers/notifications_provider.dart';
+import '../../providers/tickets_provider.dart';
+import '../../providers/typing_provider.dart';
+import '../../widgets/responsive_body.dart';
+import '../../widgets/typing_dots.dart';
+
+class TicketsListScreen extends ConsumerWidget {
+  const TicketsListScreen({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final ticketsAsync = ref.watch(ticketsProvider);
+    final officesAsync = ref.watch(officesProvider);
+    final notificationsAsync = ref.watch(notificationsProvider);
+
+    return Scaffold(
+      body: ResponsiveBody(
+        child: ticketsAsync.when(
+          data: (tickets) {
+            if (tickets.isEmpty) {
+              return const Center(child: Text('No tickets yet.'));
+            }
+            final officeById = {
+              for (final office in officesAsync.valueOrNull ?? [])
+                office.id: office,
+            };
+            final unreadByTicketId = _unreadByTicketId(notificationsAsync);
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                Padding(
+                  padding: const EdgeInsets.only(top: 16, bottom: 8),
+                  child: Align(
+                    alignment: Alignment.center,
+                    child: Text(
+                      'Tickets',
+                      textAlign: TextAlign.center,
+                      style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                        fontWeight: FontWeight.w700,
+                      ),
+                    ),
+                  ),
+                ),
+                Expanded(
+                  child: ListView.separated(
+                    padding: const EdgeInsets.only(bottom: 24),
+                    itemCount: tickets.length,
+                    separatorBuilder: (context, index) =>
+                        const SizedBox(height: 12),
+                    itemBuilder: (context, index) {
+                      final ticket = tickets[index];
+                      final officeName =
+                          officeById[ticket.officeId]?.name ?? ticket.officeId;
+                      final hasMention = unreadByTicketId[ticket.id] == true;
+                      final typingState = ref.watch(
+                        typingIndicatorProvider(ticket.id),
+                      );
+                      final showTyping = typingState.userIds.isNotEmpty;
+                      return ListTile(
+                        leading: const Icon(Icons.confirmation_number_outlined),
+                        title: Text(ticket.subject),
+                        subtitle: Text(officeName),
+                        trailing: Row(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            _buildStatusChip(context, ticket.status),
+                            if (showTyping) ...[
+                              const SizedBox(width: 6),
+                              TypingDots(
+                                size: 6,
+                                color: Theme.of(context).colorScheme.primary,
+                              ),
+                            ],
+                            if (hasMention)
+                              const Padding(
+                                padding: EdgeInsets.only(left: 8),
+                                child: Icon(
+                                  Icons.circle,
+                                  size: 10,
+                                  color: Colors.red,
+                                ),
+                              ),
+                          ],
+                        ),
+                        onTap: () => context.go('/tickets/${ticket.id}'),
+                      );
+                    },
+                  ),
+                ),
+              ],
+            );
+          },
+          loading: () => const Center(child: CircularProgressIndicator()),
+          error: (error, _) =>
+              Center(child: Text('Failed to load tickets: $error')),
+        ),
+      ),
+      floatingActionButton: FloatingActionButton.extended(
+        onPressed: () => _showCreateTicketDialog(context, ref),
+        icon: const Icon(Icons.add),
+        label: const Text('New Ticket'),
+      ),
+    );
+  }
+
+  Future<void> _showCreateTicketDialog(
+    BuildContext context,
+    WidgetRef ref,
+  ) async {
+    final subjectController = TextEditingController();
+    final descriptionController = TextEditingController();
+    Office? selectedOffice;
+
+    await showDialog<void>(
+      context: context,
+      builder: (dialogContext) {
+        return StatefulBuilder(
+          builder: (context, setState) {
+            return AlertDialog(
+              title: const Text('Create Ticket'),
+              content: Consumer(
+                builder: (context, ref, child) {
+                  final officesAsync = ref.watch(officesProvider);
+                  return SizedBox(
+                    width: 360,
+                    child: Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        TextField(
+                          controller: subjectController,
+                          decoration: const InputDecoration(
+                            labelText: 'Subject',
+                          ),
+                        ),
+                        const SizedBox(height: 12),
+                        TextField(
+                          controller: descriptionController,
+                          decoration: const InputDecoration(
+                            labelText: 'Description',
+                          ),
+                          maxLines: 3,
+                        ),
+                        const SizedBox(height: 12),
+                        officesAsync.when(
+                          data: (offices) {
+                            if (offices.isEmpty) {
+                              return const Text('No offices assigned.');
+                            }
+                            selectedOffice ??= offices.first;
+                            return DropdownButtonFormField<Office>(
+                              key: ValueKey(selectedOffice?.id),
+                              initialValue: selectedOffice,
+                              items: offices
+                                  .map(
+                                    (office) => DropdownMenuItem(
+                                      value: office,
+                                      child: Text(office.name),
+                                    ),
+                                  )
+                                  .toList(),
+                              onChanged: (value) =>
+                                  setState(() => selectedOffice = value),
+                              decoration: const InputDecoration(
+                                labelText: 'Office',
+                              ),
+                            );
+                          },
+                          loading: () => const LinearProgressIndicator(),
+                          error: (error, _) =>
+                              Text('Failed to load offices: $error'),
+                        ),
+                      ],
+                    ),
+                  );
+                },
+              ),
+              actions: [
+                TextButton(
+                  onPressed: () => Navigator.of(dialogContext).pop(),
+                  child: const Text('Cancel'),
+                ),
+                FilledButton(
+                  onPressed: () async {
+                    final subject = subjectController.text.trim();
+                    final description = descriptionController.text.trim();
+                    if (subject.isEmpty ||
+                        description.isEmpty ||
+                        selectedOffice == null) {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        const SnackBar(content: Text('Fill out all fields.')),
+                      );
+                      return;
+                    }
+                    await ref
+                        .read(ticketsControllerProvider)
+                        .createTicket(
+                          subject: subject,
+                          description: description,
+                          officeId: selectedOffice!.id,
+                        );
+                    ref.invalidate(ticketsProvider);
+                    if (context.mounted) {
+                      Navigator.of(dialogContext).pop();
+                    }
+                  },
+                  child: const Text('Create'),
+                ),
+              ],
+            );
+          },
+        );
+      },
+    );
+  }
+
+  Map<String, bool> _unreadByTicketId(
+    AsyncValue<List<NotificationItem>> notificationsAsync,
+  ) {
+    return notificationsAsync.maybeWhen(
+      data: (items) {
+        final map = <String, bool>{};
+        for (final item in items) {
+          if (item.ticketId == null) continue;
+          if (item.isUnread) {
+            map[item.ticketId!] = true;
+          }
+        }
+        return map;
+      },
+      orElse: () => <String, bool>{},
+    );
+  }
+
+  Widget _buildStatusChip(BuildContext context, String status) {
+    return Chip(
+      label: Text(status.toUpperCase()),
+      backgroundColor: _statusColor(context, status),
+      labelStyle: TextStyle(
+        color: _statusTextColor(context, status),
+        fontWeight: FontWeight.w600,
+      ),
+    );
+  }
+
+  Color _statusColor(BuildContext context, String status) {
+    return switch (status) {
+      'pending' => Colors.amber.shade300,
+      'promoted' => Colors.blue.shade300,
+      'closed' => Colors.green.shade300,
+      _ => Theme.of(context).colorScheme.surfaceContainerHighest,
+    };
+  }
+
+  Color _statusTextColor(BuildContext context, String status) {
+    return switch (status) {
+      'pending' => Colors.brown.shade900,
+      'promoted' => Colors.blue.shade900,
+      'closed' => Colors.green.shade900,
+      _ => Theme.of(context).colorScheme.onSurfaceVariant,
+    };
+  }
+}

lib/theme/app_theme.dart

@@ -0,0 +1,188 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class AppTheme {
+  static ThemeData light() {
+    final base = ThemeData(
+      colorScheme: ColorScheme.fromSeed(
+        seedColor: const Color(0xFF0C4A6E),
+        brightness: Brightness.light,
+      ),
+      useMaterial3: true,
+    );
+
+    final textTheme = GoogleFonts.spaceGroteskTextTheme(base.textTheme);
+
+    return base.copyWith(
+      textTheme: textTheme,
+      scaffoldBackgroundColor: const Color(0xFFF6F8FA),
+      appBarTheme: AppBarTheme(
+        backgroundColor: base.colorScheme.surface,
+        foregroundColor: base.colorScheme.onSurface,
+        elevation: 0,
+        centerTitle: false,
+        titleTextStyle: textTheme.titleLarge?.copyWith(
+          fontWeight: FontWeight.w700,
+          letterSpacing: 0.2,
+        ),
+      ),
+      cardTheme: CardThemeData(
+        color: base.colorScheme.surface,
+        elevation: 0.6,
+        margin: EdgeInsets.zero,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(16),
+          side: BorderSide(color: base.colorScheme.outlineVariant),
+        ),
+      ),
+      dividerTheme: DividerThemeData(
+        color: base.colorScheme.outlineVariant,
+        thickness: 1,
+      ),
+      inputDecorationTheme: InputDecorationTheme(
+        filled: true,
+        fillColor: base.colorScheme.surface,
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide(color: base.colorScheme.outlineVariant),
+        ),
+        enabledBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide(color: base.colorScheme.outlineVariant),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide(color: base.colorScheme.primary, width: 1.5),
+        ),
+      ),
+      filledButtonTheme: FilledButtonThemeData(
+        style: FilledButton.styleFrom(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
+        ),
+      ),
+      outlinedButtonTheme: OutlinedButtonThemeData(
+        style: OutlinedButton.styleFrom(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+          side: BorderSide(color: base.colorScheme.outline),
+          padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
+        ),
+      ),
+      navigationRailTheme: NavigationRailThemeData(
+        backgroundColor: base.colorScheme.surface,
+        selectedIconTheme: IconThemeData(color: base.colorScheme.primary),
+        selectedLabelTextStyle: textTheme.labelLarge?.copyWith(
+          fontWeight: FontWeight.w600,
+        ),
+        unselectedIconTheme: IconThemeData(color: base.colorScheme.onSurface),
+      ),
+      navigationBarTheme: NavigationBarThemeData(
+        backgroundColor: base.colorScheme.surface,
+        indicatorColor: base.colorScheme.primaryContainer,
+        labelTextStyle: WidgetStateProperty.all(
+          textTheme.labelMedium?.copyWith(fontWeight: FontWeight.w600),
+        ),
+      ),
+      listTileTheme: ListTileThemeData(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+        tileColor: base.colorScheme.surface,
+      ),
+    );
+  }
+
+  static ThemeData dark() {
+    final base = ThemeData(
+      colorScheme: ColorScheme.fromSeed(
+        seedColor: const Color(0xFF38BDF8),
+        brightness: Brightness.dark,
+      ),
+      useMaterial3: true,
+    );
+
+    final textTheme = GoogleFonts.spaceGroteskTextTheme(base.textTheme);
+
+    return base.copyWith(
+      textTheme: textTheme,
+      scaffoldBackgroundColor: const Color(0xFF0B111A),
+      appBarTheme: AppBarTheme(
+        backgroundColor: base.colorScheme.surface,
+        foregroundColor: base.colorScheme.onSurface,
+        elevation: 0,
+        centerTitle: false,
+        titleTextStyle: textTheme.titleLarge?.copyWith(
+          fontWeight: FontWeight.w700,
+          letterSpacing: 0.2,
+        ),
+      ),
+      cardTheme: CardThemeData(
+        color: const Color(0xFF121A24),
+        elevation: 0,
+        margin: EdgeInsets.zero,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(16),
+          side: BorderSide(color: base.colorScheme.outlineVariant),
+        ),
+      ),
+      dividerTheme: DividerThemeData(
+        color: base.colorScheme.outlineVariant,
+        thickness: 1,
+      ),
+      inputDecorationTheme: InputDecorationTheme(
+        filled: true,
+        fillColor: const Color(0xFF121A24),
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide(color: base.colorScheme.outlineVariant),
+        ),
+        enabledBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide(color: base.colorScheme.outlineVariant),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide(color: base.colorScheme.primary, width: 1.5),
+        ),
+      ),
+      filledButtonTheme: FilledButtonThemeData(
+        style: FilledButton.styleFrom(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
+        ),
+      ),
+      outlinedButtonTheme: OutlinedButtonThemeData(
+        style: OutlinedButton.styleFrom(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+          side: BorderSide(color: base.colorScheme.outline),
+          padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
+        ),
+      ),
+      navigationRailTheme: NavigationRailThemeData(
+        backgroundColor: base.colorScheme.surface,
+        selectedIconTheme: IconThemeData(color: base.colorScheme.primary),
+        selectedLabelTextStyle: textTheme.labelLarge?.copyWith(
+          fontWeight: FontWeight.w600,
+        ),
+        unselectedIconTheme: IconThemeData(color: base.colorScheme.onSurface),
+      ),
+      navigationBarTheme: NavigationBarThemeData(
+        backgroundColor: base.colorScheme.surface,
+        indicatorColor: base.colorScheme.primaryContainer,
+        labelTextStyle: WidgetStateProperty.all(
+          textTheme.labelMedium?.copyWith(fontWeight: FontWeight.w600),
+        ),
+      ),
+      listTileTheme: ListTileThemeData(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+        tileColor: const Color(0xFF121A24),
+      ),
+    );
+  }
+}

lib/widgets/app_shell.dart

@@ -0,0 +1,470 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+
+import '../providers/auth_provider.dart';
+import '../providers/notifications_provider.dart';
+import '../providers/profile_provider.dart';
+
+class AppScaffold extends ConsumerWidget {
+  const AppScaffold({super.key, required this.child});
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final profileAsync = ref.watch(currentProfileProvider);
+    final role = profileAsync.maybeWhen(
+      data: (profile) => profile?.role ?? 'standard',
+      orElse: () => 'standard',
+    );
+    final displayName = profileAsync.maybeWhen(
+      data: (profile) {
+        final name = profile?.fullName.trim() ?? '';
+        return name.isNotEmpty ? name : 'User';
+      },
+      orElse: () => 'User',
+    );
+
+    final isStandard = role == 'standard';
+    final location = GoRouterState.of(context).uri.toString();
+    final sections = _buildSections(role);
+
+    final width = MediaQuery.of(context).size.width;
+    final showRail = !isStandard && width >= 860;
+    final isExtended = !isStandard && width >= 1120;
+    final showDrawer = !isStandard && !showRail;
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Row(
+          children: [
+            const Icon(Icons.memory),
+            const SizedBox(width: 8),
+            Text('TasQ'),
+          ],
+        ),
+        actions: [
+          if (isStandard)
+            PopupMenuButton<int>(
+              tooltip: 'Account',
+              onSelected: (value) {
+                if (value == 0) {
+                  ref.read(authControllerProvider).signOut();
+                }
+              },
+              itemBuilder: (context) => const [
+                PopupMenuItem(value: 0, child: Text('Sign out')),
+              ],
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 12),
+                child: Row(
+                  children: [
+                    const Icon(Icons.account_circle),
+                    const SizedBox(width: 8),
+                    Text(displayName),
+                    const SizedBox(width: 4),
+                    const Icon(Icons.expand_more),
+                  ],
+                ),
+              ),
+            )
+          else
+            IconButton(
+              tooltip: 'Sign out',
+              onPressed: () => ref.read(authControllerProvider).signOut(),
+              icon: const Icon(Icons.logout),
+            ),
+          const _NotificationBell(),
+        ],
+      ),
+      drawer: showDrawer
+          ? Drawer(
+              child: AppSideNav(
+                sections: sections,
+                location: location,
+                extended: true,
+                displayName: displayName,
+                onLogout: () => ref.read(authControllerProvider).signOut(),
+              ),
+            )
+          : null,
+      bottomNavigationBar: isStandard
+          ? AppBottomNav(location: location, items: _standardNavItems())
+          : null,
+      body: Row(
+        children: [
+          if (showRail)
+            AppSideNav(
+              sections: sections,
+              location: location,
+              extended: isExtended,
+              displayName: displayName,
+              onLogout: () => ref.read(authControllerProvider).signOut(),
+            ),
+          Expanded(child: _ShellBackground(child: child)),
+        ],
+      ),
+    );
+  }
+}
+
+class AppSideNav extends StatelessWidget {
+  const AppSideNav({
+    super.key,
+    required this.sections,
+    required this.location,
+    required this.extended,
+    required this.displayName,
+    required this.onLogout,
+  });
+
+  final List<NavSection> sections;
+  final String location;
+  final bool extended;
+  final String displayName;
+  final VoidCallback onLogout;
+
+  @override
+  Widget build(BuildContext context) {
+    final width = extended ? 240.0 : 72.0;
+    return Container(
+      width: width,
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surface,
+        border: Border(
+          right: BorderSide(
+            color: Theme.of(context).colorScheme.outlineVariant,
+          ),
+        ),
+      ),
+      child: ListView(
+        padding: const EdgeInsets.symmetric(vertical: 12),
+        children: [
+          Padding(
+            padding: EdgeInsets.symmetric(
+              horizontal: extended ? 16 : 12,
+              vertical: 8,
+            ),
+            child: Row(
+              children: [
+                Image.asset(
+                  'assets/tasq_ico.png',
+                  width: 28,
+                  height: 28,
+                  fit: BoxFit.contain,
+                ),
+                if (extended) ...[
+                  const SizedBox(width: 12),
+                  Expanded(
+                    child: Text(
+                      displayName,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: Theme.of(context).textTheme.titleSmall?.copyWith(
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                  ),
+                ],
+              ],
+            ),
+          ),
+          const SizedBox(height: 4),
+          for (final section in sections) ...[
+            if (section.label != null && extended)
+              Padding(
+                padding: const EdgeInsets.fromLTRB(16, 12, 16, 8),
+                child: Text(
+                  section.label!,
+                  style: Theme.of(context).textTheme.labelMedium?.copyWith(
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                    letterSpacing: 0.4,
+                  ),
+                ),
+              ),
+            for (final item in section.items)
+              _NavTile(
+                item: item,
+                selected: _isSelected(location, item.route),
+                extended: extended,
+                onLogout: onLogout,
+              ),
+          ],
+        ],
+      ),
+    );
+  }
+}
+
+class AppBottomNav extends StatelessWidget {
+  const AppBottomNav({super.key, required this.location, required this.items});
+
+  final String location;
+  final List<NavItem> items;
+
+  @override
+  Widget build(BuildContext context) {
+    final index = _currentIndex(location, items);
+    return NavigationBar(
+      selectedIndex: index,
+      onDestinationSelected: (value) {
+        final target = items[value].route;
+        if (target.isNotEmpty) {
+          context.go(target);
+        }
+      },
+      destinations: [
+        for (final item in items)
+          NavigationDestination(
+            icon: Icon(item.icon),
+            selectedIcon: Icon(item.selectedIcon ?? item.icon),
+            label: item.label,
+          ),
+      ],
+    );
+  }
+}
+
+class _NavTile extends StatelessWidget {
+  const _NavTile({
+    required this.item,
+    required this.selected,
+    required this.extended,
+    required this.onLogout,
+  });
+
+  final NavItem item;
+  final bool selected;
+  final bool extended;
+  final VoidCallback onLogout;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final iconColor = selected ? colorScheme.primary : colorScheme.onSurface;
+    final background = selected
+        ? colorScheme.primaryContainer.withValues(alpha: 0.6)
+        : Colors.transparent;
+
+    final content = Container(
+      margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      decoration: BoxDecoration(
+        color: background,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: ListTile(
+        leading: Icon(item.icon, color: iconColor),
+        title: extended ? Text(item.label) : null,
+        onTap: () => item.onTap(context, onLogout: onLogout),
+        dense: true,
+        visualDensity: VisualDensity.compact,
+      ),
+    );
+
+    if (extended) {
+      return content;
+    }
+
+    return Tooltip(message: item.label, child: content);
+  }
+}
+
+class _NotificationBell extends ConsumerWidget {
+  const _NotificationBell();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final unreadCount = ref.watch(unreadNotificationsCountProvider);
+    return IconButton(
+      tooltip: 'Notifications',
+      onPressed: () => context.go('/notifications'),
+      icon: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          const Icon(Icons.notifications),
+          if (unreadCount > 0)
+            const Positioned(
+              right: -2,
+              top: -2,
+              child: Icon(Icons.circle, size: 10, color: Colors.red),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class _ShellBackground extends StatelessWidget {
+  const _ShellBackground({required this.child});
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+          colors: [
+            Theme.of(context).colorScheme.surface,
+            Theme.of(context).colorScheme.surfaceContainerLowest,
+          ],
+        ),
+      ),
+      child: child,
+    );
+  }
+}
+
+class NavItem {
+  NavItem({
+    required this.label,
+    required this.route,
+    required this.icon,
+    this.selectedIcon,
+    this.isLogout = false,
+  });
+
+  final String label;
+  final String route;
+  final IconData icon;
+  final IconData? selectedIcon;
+  final bool isLogout;
+
+  void onTap(BuildContext context, {VoidCallback? onLogout}) {
+    if (isLogout) {
+      onLogout?.call();
+      return;
+    }
+    if (route.isNotEmpty) {
+      context.go(route);
+    }
+  }
+}
+
+class NavSection {
+  NavSection({this.label, required this.items});
+
+  final String? label;
+  final List<NavItem> items;
+}
+
+List<NavSection> _buildSections(String role) {
+  final mainItems = [
+    NavItem(
+      label: 'Dashboard',
+      route: '/dashboard',
+      icon: Icons.grid_view,
+      selectedIcon: Icons.grid_view_rounded,
+    ),
+    NavItem(
+      label: 'Tickets',
+      route: '/tickets',
+      icon: Icons.support_agent_outlined,
+      selectedIcon: Icons.support_agent,
+    ),
+    NavItem(
+      label: 'Tasks',
+      route: '/tasks',
+      icon: Icons.task_outlined,
+      selectedIcon: Icons.task,
+    ),
+    NavItem(
+      label: 'Events',
+      route: '/events',
+      icon: Icons.event_outlined,
+      selectedIcon: Icons.event,
+    ),
+    NavItem(
+      label: 'Announcement',
+      route: '/announcements',
+      icon: Icons.campaign_outlined,
+      selectedIcon: Icons.campaign,
+    ),
+    NavItem(
+      label: 'Workforce',
+      route: '/workforce',
+      icon: Icons.groups_outlined,
+      selectedIcon: Icons.groups,
+    ),
+    NavItem(
+      label: 'Reports',
+      route: '/reports',
+      icon: Icons.analytics_outlined,
+      selectedIcon: Icons.analytics,
+    ),
+  ];
+
+  if (role == 'admin') {
+    return [
+      NavSection(label: 'Operations', items: mainItems),
+      NavSection(
+        label: 'Settings',
+        items: [
+          NavItem(
+            label: 'User Management',
+            route: '/settings/users',
+            icon: Icons.admin_panel_settings_outlined,
+            selectedIcon: Icons.admin_panel_settings,
+          ),
+          NavItem(
+            label: 'Office Management',
+            route: '/settings/offices',
+            icon: Icons.apartment_outlined,
+            selectedIcon: Icons.apartment,
+          ),
+          NavItem(
+            label: 'Logout',
+            route: '',
+            icon: Icons.logout,
+            isLogout: true,
+          ),
+        ],
+      ),
+    ];
+  }
+
+  return [NavSection(label: 'Operations', items: mainItems)];
+}
+
+List<NavItem> _standardNavItems() {
+  return [
+    NavItem(
+      label: 'Dashboard',
+      route: '/dashboard',
+      icon: Icons.grid_view,
+      selectedIcon: Icons.grid_view_rounded,
+    ),
+    NavItem(
+      label: 'Tickets',
+      route: '/tickets',
+      icon: Icons.support_agent_outlined,
+      selectedIcon: Icons.support_agent,
+    ),
+    NavItem(
+      label: 'Tasks',
+      route: '/tasks',
+      icon: Icons.task_outlined,
+      selectedIcon: Icons.task,
+    ),
+    NavItem(
+      label: 'Events',
+      route: '/events',
+      icon: Icons.event_outlined,
+      selectedIcon: Icons.event,
+    ),
+  ];
+}
+
+bool _isSelected(String location, String route) {
+  if (route.isEmpty) return false;
+  if (location == route) return true;
+  return location.startsWith('$route/');
+}
+
+int _currentIndex(String location, List<NavItem> items) {
+  final index = items.indexWhere((item) => _isSelected(location, item.route));
+  return index == -1 ? 0 : index;
+}

lib/widgets/responsive_body.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/widgets.dart';
+
+class ResponsiveBody extends StatelessWidget {
+  const ResponsiveBody({
+    super.key,
+    required this.child,
+    this.maxWidth = 960,
+    this.padding = EdgeInsets.zero,
+  });
+
+  final Widget child;
+  final double maxWidth;
+  final EdgeInsetsGeometry padding;
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final width = constraints.maxWidth;
+        final horizontalPadding = switch (width) {
+          >= 1200 => 96.0,
+          >= 900 => 64.0,
+          >= 600 => 32.0,
+          _ => 16.0,
+        };
+
+        return Padding(
+          padding: padding.add(
+            EdgeInsets.symmetric(horizontal: horizontalPadding),
+          ),
+          child: Align(
+            alignment: Alignment.topCenter,
+            child: ConstrainedBox(
+              constraints: BoxConstraints(maxWidth: maxWidth),
+              child: SizedBox(
+                width: double.infinity,
+                height: constraints.maxHeight,
+                child: child,
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

lib/widgets/task_assignment_section.dart

@@ -0,0 +1,233 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../models/profile.dart';
+import '../providers/profile_provider.dart';
+import '../providers/tasks_provider.dart';
+
+class TaskAssignmentSection extends ConsumerWidget {
+  const TaskAssignmentSection({
+    super.key,
+    required this.taskId,
+    required this.canAssign,
+  });
+
+  final String taskId;
+  final bool canAssign;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final profilesAsync = ref.watch(profilesProvider);
+    final tasksAsync = ref.watch(tasksProvider);
+    final assignmentsAsync = ref.watch(taskAssignmentsProvider);
+
+    final profiles = profilesAsync.valueOrNull ?? <Profile>[];
+    final tasks = tasksAsync.valueOrNull ?? [];
+    final taskTicketId = tasks
+        .where((task) => task.id == taskId)
+        .map((task) => task.ticketId)
+        .firstOrNull;
+    final assignments = assignmentsAsync.valueOrNull ?? [];
+
+    final itStaff =
+        profiles.where((profile) => profile.role == 'it_staff').toList()
+          ..sort((a, b) => a.fullName.compareTo(b.fullName));
+
+    final assignedForTask = assignments
+        .where((assignment) => assignment.taskId == taskId)
+        .toList();
+    final assignedIds = assignedForTask.map((a) => a.userId).toSet();
+
+    final activeTaskIds = tasks
+        .where(
+          (task) => task.status == 'queued' || task.status == 'in_progress',
+        )
+        .map((task) => task.id)
+        .toSet();
+
+    final activeAssignmentsByUser = <String, Set<String>>{};
+    for (final assignment in assignments) {
+      if (!activeTaskIds.contains(assignment.taskId)) {
+        continue;
+      }
+      activeAssignmentsByUser
+          .putIfAbsent(assignment.userId, () => <String>{})
+          .add(assignment.taskId);
+    }
+
+    bool isVacant(String userId) {
+      final active = activeAssignmentsByUser[userId];
+      if (active == null || active.isEmpty) {
+        return true;
+      }
+      return active.length == 1 && active.contains(taskId);
+    }
+
+    final eligibleStaff = itStaff
+        .where(
+          (profile) => isVacant(profile.id) || assignedIds.contains(profile.id),
+        )
+        .toList();
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            Text(
+              'Assigned IT Staff',
+              style: Theme.of(
+                context,
+              ).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w700),
+            ),
+            const Spacer(),
+            if (canAssign)
+              TextButton.icon(
+                onPressed: () => _showAssignmentDialog(
+                  context,
+                  ref,
+                  eligibleStaff,
+                  assignedIds,
+                  taskTicketId,
+                ),
+                icon: const Icon(Icons.group_add),
+                label: const Text('Assign'),
+              ),
+          ],
+        ),
+        const SizedBox(height: 8),
+        if (assignedForTask.isEmpty)
+          Text(
+            'No IT staff assigned.',
+            style: Theme.of(context).textTheme.bodyMedium,
+          )
+        else
+          Wrap(
+            spacing: 8,
+            runSpacing: 6,
+            children: assignedForTask.map((assignment) {
+              final profile = profiles
+                  .where((item) => item.id == assignment.userId)
+                  .firstOrNull;
+              final label = profile?.fullName.isNotEmpty == true
+                  ? profile!.fullName
+                  : assignment.userId;
+              return InputChip(
+                label: Text(label),
+                onDeleted: canAssign
+                    ? () => ref
+                          .read(taskAssignmentsControllerProvider)
+                          .removeAssignment(
+                            taskId: taskId,
+                            userId: assignment.userId,
+                          )
+                    : null,
+              );
+            }).toList(),
+          ),
+      ],
+    );
+  }
+
+  Future<void> _showAssignmentDialog(
+    BuildContext context,
+    WidgetRef ref,
+    List<Profile> eligibleStaff,
+    Set<String> assignedIds,
+    String? taskTicketId,
+  ) async {
+    if (eligibleStaff.isEmpty && assignedIds.isEmpty) {
+      await showDialog<void>(
+        context: context,
+        builder: (dialogContext) {
+          return AlertDialog(
+            title: const Text('Assign IT Staff'),
+            content: const Text('No vacant IT staff available.'),
+            actions: [
+              TextButton(
+                onPressed: () => Navigator.of(dialogContext).pop(),
+                child: const Text('Close'),
+              ),
+            ],
+          );
+        },
+      );
+      return;
+    }
+
+    final selection = assignedIds.toSet();
+    await showDialog<void>(
+      context: context,
+      builder: (dialogContext) {
+        return StatefulBuilder(
+          builder: (context, setState) {
+            return AlertDialog(
+              title: const Text('Assign IT Staff'),
+              contentPadding: const EdgeInsets.fromLTRB(24, 20, 24, 12),
+              content: SizedBox(
+                width: 360,
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 12),
+                  child: ListView.builder(
+                    shrinkWrap: true,
+                    itemCount: eligibleStaff.length,
+                    itemBuilder: (context, index) {
+                      final staff = eligibleStaff[index];
+                      final name = staff.fullName.isNotEmpty
+                          ? staff.fullName
+                          : staff.id;
+                      final selected = selection.contains(staff.id);
+                      return CheckboxListTile(
+                        value: selected,
+                        title: Text(name),
+                        contentPadding: const EdgeInsets.symmetric(
+                          horizontal: 12,
+                          vertical: 2,
+                        ),
+                        onChanged: (value) {
+                          setState(() {
+                            if (value == true) {
+                              selection.add(staff.id);
+                            } else {
+                              selection.remove(staff.id);
+                            }
+                          });
+                        },
+                      );
+                    },
+                  ),
+                ),
+              ),
+              actions: [
+                TextButton(
+                  onPressed: () => Navigator.of(dialogContext).pop(),
+                  child: const Text('Cancel'),
+                ),
+                FilledButton(
+                  onPressed: () async {
+                    await ref
+                        .read(taskAssignmentsControllerProvider)
+                        .replaceAssignments(
+                          taskId: taskId,
+                          ticketId: taskTicketId,
+                          newUserIds: selection.toList(),
+                          currentUserIds: assignedIds.toList(),
+                        );
+                    if (context.mounted) {
+                      Navigator.of(dialogContext).pop();
+                    }
+                  },
+                  child: const Text('Save'),
+                ),
+              ],
+            );
+          },
+        );
+      },
+    );
+  }
+}
+
+extension _FirstOrNull<T> on Iterable<T> {
+  T? get firstOrNull => isEmpty ? null : first;
+}

lib/widgets/typing_dots.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+
+class TypingDots extends StatefulWidget {
+  const TypingDots({super.key, this.size = 6, this.color, this.spacing = 4});
+
+  final double size;
+  final double spacing;
+  final Color? color;
+
+  @override
+  State<TypingDots> createState() => _TypingDotsState();
+}
+
+class _TypingDotsState extends State<TypingDots>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 1200),
+    )..repeat();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  double _opacity(double t, double offset) {
+    final phase = (t + offset) % 1.0;
+    final distance = (phase - 0.5).abs();
+    final ramp = 1.0 - (distance / 0.5);
+    return 0.3 + 0.7 * ramp.clamp(0.0, 1.0);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final color =
+        widget.color ?? Theme.of(context).colorScheme.onSurfaceVariant;
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, child) {
+        final t = _controller.value;
+        return Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            _dot(color, _opacity(t, 0.0)),
+            SizedBox(width: widget.spacing),
+            _dot(color, _opacity(t, 0.2)),
+            SizedBox(width: widget.spacing),
+            _dot(color, _opacity(t, 0.4)),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _dot(Color color, double opacity) {
+    return Opacity(
+      opacity: opacity,
+      child: Container(
+        width: widget.size,
+        height: widget.size,
+        decoration: BoxDecoration(color: color, shape: BoxShape.circle),
+      ),
+    );
+  }
+}