Phase 3.1 WIP: Riverpod migration (client_app Auth + ChatOpening)

- Add phase3.1 requirement and implementation plan docs
- Add Riverpod dependencies to both client_app and mitra_app
- Wrap both app roots with ProviderScope
- Migrate client_app AuthBloc → AuthNotifier (@riverpod annotation)
- Migrate client_app ChatOpeningBloc → chatPricingProvider (FutureProvider)
- Update router to use Riverpod-based auth state for redirects
- Update all auth screens (display name, register, OTP, force register)
- Update home screen and pricing bottom sheet
- Add android:usesCleartextTraffic for dev HTTP access on both apps
- mitra_app prepared with ProviderScope + ApiClient provider (blocs next)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

client_app/lib/features/auth/screens/otp_screen.dart

@@ -1,17 +1,28 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import '../../../core/auth/auth_bloc.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../../core/auth/auth_notifier.dart';
 
-class OtpScreen extends StatefulWidget {
+class OtpScreen extends ConsumerStatefulWidget {
   final String phone;
   const OtpScreen({super.key, required this.phone});
 
   @override
-  State<OtpScreen> createState() => _OtpScreenState();
+  ConsumerState<OtpScreen> createState() => _OtpScreenState();
 }
 
-class _OtpScreenState extends State<OtpScreen> {
+class _OtpScreenState extends ConsumerState<OtpScreen> {
   final _otpController = TextEditingController();
+  String? _verificationId;
+
+  @override
+  void initState() {
+    super.initState();
+    // Capture verification ID from current state
+    final data = ref.read(authProvider).valueOrNull;
+    if (data is AuthOtpSentData) {
+      _verificationId = data.verificationId;
+    }
+  }
 
   @override
   void dispose() {
@@ -21,46 +32,51 @@ class _OtpScreenState extends State<OtpScreen> {
 
   @override
   Widget build(BuildContext context) {
-    return BlocListener<AuthBloc, AuthState>(
-      listener: (context, state) {
-        if (state is AuthError) {
-          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(state.message)));
-        }
-      },
-      child: Scaffold(
-        appBar: AppBar(title: const Text('Masukkan OTP')),
-        body: Padding(
-          padding: const EdgeInsets.all(24),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: [
-              Text('Kode OTP telah dikirim ke ${widget.phone}'),
-              const SizedBox(height: 24),
-              TextField(
-                controller: _otpController,
-                decoration: const InputDecoration(
-                  labelText: 'Kode OTP',
-                  border: OutlineInputBorder(),
-                ),
-                keyboardType: TextInputType.number,
-                maxLength: 6,
+    final authState = ref.watch(authProvider);
+    final isLoading = authState is AsyncLoading;
+
+    // Update verification ID if state changes
+    final data = authState.valueOrNull;
+    if (data is AuthOtpSentData) {
+      _verificationId = data.verificationId;
+    }
+
+    ref.listen(authProvider, (prev, next) {
+      if (next is AsyncError) {
+        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(next.error.toString())));
+      }
+    });
+
+    return Scaffold(
+      appBar: AppBar(title: const Text('Masukkan OTP')),
+      body: Padding(
+        padding: const EdgeInsets.all(24),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Text('Kode OTP telah dikirim ke ${widget.phone}'),
+            const SizedBox(height: 24),
+            TextField(
+              controller: _otpController,
+              decoration: const InputDecoration(
+                labelText: 'Kode OTP',
+                border: OutlineInputBorder(),
               ),
-              const SizedBox(height: 12),
-              BlocBuilder<AuthBloc, AuthState>(
-                builder: (context, state) => ElevatedButton(
-                  onPressed: state is AuthLoading ? null : () {
-                    final otp = _otpController.text.trim();
-                    if (otp.length != 6) return;
-                    final verificationId = (state is AuthOtpSent) ? state.verificationId : '';
-                    context.read<AuthBloc>().add(OtpVerified(verificationId, otp));
-                  },
-                  child: state is AuthLoading
-                      ? const CircularProgressIndicator()
-                      : const Text('Verifikasi'),
-                ),
-              ),
-            ],
-          ),
+              keyboardType: TextInputType.number,
+              maxLength: 6,
+            ),
+            const SizedBox(height: 12),
+            ElevatedButton(
+              onPressed: isLoading ? null : () {
+                final otp = _otpController.text.trim();
+                if (otp.length != 6 || _verificationId == null) return;
+                ref.read(authProvider.notifier).verifyOtp(_verificationId!, otp);
+              },
+              child: isLoading
+                  ? const CircularProgressIndicator()
+                  : const Text('Verifikasi'),
+            ),
+          ],
         ),
       ),
     );