feat: update UI theme and improve subscription data fetching and display logic

lib/screens/branches_screen.dart

@@ -3,8 +3,6 @@ import 'package:flutter/material.dart';
 import 'package:geolocator/geolocator.dart';
 import 'package:url_launcher/url_launcher.dart';
 import '../services/odoo_service.dart';
-import '../theme/app_theme.dart';
-
 class BranchesScreen extends StatefulWidget {
   const BranchesScreen({super.key});
 
@@ -153,6 +151,9 @@ class _BranchesScreenState extends State<BranchesScreen> {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+
     return _isLoading
         ? const Center(child: CircularProgressIndicator())
         : RefreshIndicator(
@@ -163,17 +164,17 @@ class _BranchesScreenState extends State<BranchesScreen> {
                 if (_locationDenied)
                   Container(
                     width: double.infinity,
-                    color: AppTheme.surfaceContainerLow,
+                    color: colorScheme.surfaceContainerLow,
                     padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                     child: Row(
                       children: [
-                        const Icon(Icons.location_off, size: 16, color: AppTheme.onSurfaceVariant),
+                        Icon(Icons.location_off, size: 16, color: colorScheme.onSurfaceVariant),
                         const SizedBox(width: 8),
                         Expanded(
                           child: Text(
                             'Location not available. Showing branches alphabetically.',
-                            style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                            style: theme.textTheme.bodySmall?.copyWith(
-                                  color: AppTheme.onSurfaceVariant,
+                                  color: colorScheme.onSurfaceVariant,
                                 ),
                           ),
                         ),
@@ -183,16 +184,16 @@ class _BranchesScreenState extends State<BranchesScreen> {
                 else if (_userPosition != null)
                   Container(
                     width: double.infinity,
-                    color: AppTheme.surfaceContainerLow,
+                    color: colorScheme.surfaceContainerLow,
                     padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                     child: Row(
                       children: [
-                        const Icon(Icons.my_location, size: 16, color: AppTheme.secondary),
+                        Icon(Icons.my_location, size: 16, color: colorScheme.secondary),
                         const SizedBox(width: 8),
                         Text(
                           'Sorted by distance from your location',
-                          style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                          style: theme.textTheme.bodySmall?.copyWith(
-                                color: AppTheme.onSurfaceVariant,
+                                color: colorScheme.onSurfaceVariant,
                               ),
                         ),
                       ],
@@ -233,9 +234,16 @@ class _BranchesScreenState extends State<BranchesScreen> {
 
                             return Container(
                               margin: const EdgeInsets.only(bottom: 12),
-                              decoration: const BoxDecoration(
+                              decoration: BoxDecoration(
-                                color: AppTheme.surfaceContainerLow,
+                                color: colorScheme.surfaceContainerLow,
-                                borderRadius: BorderRadius.zero,
+                                borderRadius: BorderRadius.circular(16),
+                                boxShadow: [
+                                  BoxShadow(
+                                    color: Colors.black.withValues(alpha: 0.03),
+                                    blurRadius: 8,
+                                    offset: const Offset(0, 3),
+                                  ),
+                                ],
                               ),
                               child: ListTile(
                                 contentPadding: const EdgeInsets.all(16),
@@ -244,70 +252,67 @@ class _BranchesScreenState extends State<BranchesScreen> {
                                 leading: Container(
                                   padding: const EdgeInsets.all(12),
                                   decoration: BoxDecoration(
-                                    color: AppTheme.secondaryContainer
+                                    color: colorScheme.secondaryContainer,
-                                        .withValues(alpha: 0.2),
+                                    borderRadius: BorderRadius.circular(12),
-                                    shape: BoxShape.rectangle,
                                   ),
-                                  child: const Icon(Icons.storefront,
+                                  child: Icon(Icons.storefront,
-                                      color: AppTheme.secondary),
+                                      color: colorScheme.secondary),
                                 ),
-                                title: Row(
+                                title: Text(
-                                  children: [
-                                    Expanded(
-                                      child: Text(
                                   branch['name'] ?? 'Mapan Branch',
-                                        style: Theme.of(context)
+                                  style: theme
                                       .textTheme
-                                            .titleMedium,
+                                      .titleMedium
-                                      ),
-                                    ),
-                                    if (distanceLabel.isNotEmpty)
-                                      Container(
-                                        margin: const EdgeInsets.only(left: 8),
-                                        padding: const EdgeInsets.symmetric(
-                                            horizontal: 8, vertical: 3),
-                                        decoration: const BoxDecoration(
-                                          color: AppTheme.secondaryContainer,
-                                        ),
-                                        child: Text(
-                                          distanceLabel,
-                                          style: Theme.of(context)
-                                              .textTheme
-                                              .labelLarge
                                       ?.copyWith(
-                                                color: AppTheme.onSecondaryContainer,
+                                        fontFamily: 'serif',
-                                                fontSize: 11,
                                         fontWeight: FontWeight.bold,
                                       ),
                                 ),
+                                subtitle: Padding(
+                                  padding: const EdgeInsets.only(top: 6.0),
+                                  child: Column(
+                                    crossAxisAlignment: CrossAxisAlignment.start,
+                                    children: [
+                                      if (distanceLabel.isNotEmpty) ...[
+                                        Row(
+                                          children: [
+                                            Icon(
+                                              Icons.near_me_rounded,
+                                              size: 14,
+                                              color: colorScheme.primary,
+                                            ),
+                                            const SizedBox(width: 4),
+                                            Text(
+                                              '$distanceLabel away',
+                                              style: theme.textTheme.bodyMedium?.copyWith(
+                                                    color: colorScheme.primary,
+                                                    fontWeight: FontWeight.bold,
+                                                  ),
                                             ),
                                           ],
                                         ),
-                                subtitle: Padding(
+                                        const SizedBox(height: 6),
-                                  padding: const EdgeInsets.only(top: 8.0),
+                                      ],
-                                  child: Column(
-                                    crossAxisAlignment: CrossAxisAlignment.start,
-                                    children: [
                                       Text(
                                         addressParts.isEmpty
                                             ? 'No address specified'
                                             : addressParts,
-                                        style: Theme.of(context).textTheme.bodyMedium,
+                                        style: theme.textTheme.bodyMedium,
                                       ),
                                       if (phone.isNotEmpty) ...[
                                         const SizedBox(height: 4),
                                         Row(
                                           children: [
-                                            const Icon(Icons.phone,
+                                            Icon(Icons.phone,
                                                 size: 14,
-                                                color: AppTheme.onSurfaceVariant),
+                                                color: colorScheme.onSurfaceVariant),
                                             const SizedBox(width: 4),
                                             Text(phone,
-                                                style: Theme.of(context)
+                                                style: theme
                                                     .textTheme
                                                     .bodySmall
                                                     ?.copyWith(
-                                                        color: AppTheme.onSurfaceVariant)),
+                                                        color: colorScheme.onSurfaceVariant)),
                                           ],
                                         ),
                                       ]
@@ -316,13 +321,13 @@ class _BranchesScreenState extends State<BranchesScreen> {
                                 ),
                                 trailing: phone.isNotEmpty
                                     ? IconButton(
-                                        icon: const Icon(Icons.chat_bubble,
+                                        icon: Icon(Icons.chat_bubble,
-                                            color: AppTheme.onSurface),
+                                            color: colorScheme.onSurface),
                                         onPressed: () => _launchWhatsApp(phone),
                                         tooltip: 'Chat on WhatsApp',
                                       )
-                                    : const Icon(Icons.chevron_right,
+                                    : Icon(Icons.chevron_right,
-                                        color: AppTheme.onSurfaceVariant),
+                                        color: colorScheme.onSurfaceVariant),
                               ),
                             );
                           },

lib/screens/loyalty_dashboard.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import '../services/odoo_service.dart';
-import '../theme/app_theme.dart';
 import '../widgets/carousel_widget.dart';
 import '../widgets/promo_card_widget.dart';
 import '../widgets/subscription_list_widget.dart';
@@ -37,14 +36,14 @@ class _LoyaltyDashboardState extends State<LoyaltyDashboard> {
         OdooService().getCmsContent(),
       ]);
 
-      final cards = results[0] as List<dynamic>;
+      final rawCards = results[0] as List<dynamic>;
-      final subs = results[1] as List<dynamic>;
+      final rawSubs = results[1] as List<dynamic>;
       final cms = results[2] as Map<String, dynamic>;
 
       if (mounted) {
         setState(() {
-          _loyaltyCards = cards;
+          _loyaltyCards = rawCards;
-          _subscriptions = subs;
+          _subscriptions = rawSubs;
           _carouselSlides = (cms['carousel'] as List<dynamic>?) ?? [];
           _promos = (cms['promos'] as List<dynamic>?) ?? [];
           _isLoading = false;
@@ -112,18 +111,34 @@ class _LoyaltyCardTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
     final programName = (card['program_id']?[1] as String? ?? '').toLowerCase();
-    String tier = 'Member';
+    String tier = 'MEMBER';
-    if (programName.contains('silver')) tier = 'Silver Member';
+    if (programName.contains('silver')) tier = 'SILVER MEMBER';
-    if (programName.contains('gold')) tier = 'Gold Member';
+    if (programName.contains('gold')) tier = 'GOLD MEMBER';
-    if (programName.contains('platinum')) tier = 'Platinum Member';
+    if (programName.contains('platinum')) tier = 'PLATINUM MEMBER';
+
+    final onPrimary = colorScheme.onPrimary;
+    final accentColor = colorScheme.secondary;
 
     return Container(
-      margin: const EdgeInsets.fromLTRB(16, 16, 16, 0),
+      margin: const EdgeInsets.fromLTRB(16, 16, 16, 8),
       padding: const EdgeInsets.all(24),
-      decoration: const BoxDecoration(
+      decoration: BoxDecoration(
-        color: AppTheme.surfaceContainerHighest,
+        color: colorScheme.primary,
-        borderRadius: BorderRadius.zero,
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(
+          color: accentColor.withValues(alpha: 0.5),
+          width: 1.5,
+        ),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.12),
+            blurRadius: 16,
+            offset: const Offset(0, 6),
+          ),
+        ],
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -134,43 +149,94 @@ class _LoyaltyCardTile extends StatelessWidget {
               Expanded(
                 child: Text(
                   '${card['program_id']?[1] ?? 'Loyalty Program'}',
-                  style: Theme.of(context).textTheme.titleLarge,
+                  style: theme.textTheme.titleLarge?.copyWith(
+                        color: onPrimary,
+                        fontFamily: 'serif',
+                      ),
                   softWrap: true,
                 ),
               ),
               const SizedBox(width: 12),
               Container(
                 padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
-                decoration: const BoxDecoration(
+                decoration: BoxDecoration(
-                  color: AppTheme.secondaryContainer,
+                  color: accentColor,
-                  borderRadius: BorderRadius.zero,
+                  borderRadius: BorderRadius.circular(20),
                 ),
                 child: Text(
                   tier,
-                  style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                  style: theme.textTheme.labelLarge?.copyWith(
-                        color: AppTheme.onSecondaryContainer,
+                        color: colorScheme.primary.computeLuminance() > 0.5 ? Colors.black : Colors.white,
                         fontWeight: FontWeight.bold,
+                        fontSize: 9,
+                        letterSpacing: 0.8,
                       ),
                 ),
               ),
             ],
           ),
-          const SizedBox(height: 20),
+          const SizedBox(height: 24),
-          Text('Membership Code', style: Theme.of(context).textTheme.bodyMedium),
+          Text(
+            'MEMBERSHIP CODE',
+            style: theme.textTheme.bodySmall?.copyWith(
+                  color: onPrimary.withValues(alpha: 0.7),
+                  fontWeight: FontWeight.bold,
+                  fontSize: 10,
+                  letterSpacing: 1.0,
+                ),
+          ),
           const SizedBox(height: 4),
-          Text('${card['code'] ?? 'N/A'}',
+          Text(
-              style: Theme.of(context).textTheme.titleMedium),
+            '${card['code'] ?? 'N/A'}',
-          const SizedBox(height: 16),
+            style: theme.textTheme.titleMedium?.copyWith(
+                  color: onPrimary,
+                  fontFamily: 'monospace',
+                  fontSize: 16,
+                  fontWeight: FontWeight.bold,
+                ),
+          ),
+          const SizedBox(height: 20),
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             crossAxisAlignment: CrossAxisAlignment.end,
             children: [
-              Text('Available Points',
+              Column(
-                  style: Theme.of(context).textTheme.bodyMedium),
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    'AVAILABLE POINTS',
+                    style: theme.textTheme.bodySmall?.copyWith(
+                          color: onPrimary.withValues(alpha: 0.7),
+                          fontWeight: FontWeight.bold,
+                          fontSize: 10,
+                          letterSpacing: 1.0,
+                        ),
+                  ),
+                  const SizedBox(height: 4),
+                  Row(
+                    children: [
+                      Icon(
+                        Icons.restaurant_rounded,
+                        color: accentColor,
+                        size: 16,
+                      ),
+                      const SizedBox(width: 6),
+                      Text(
+                        'Dine & Save',
+                        style: theme.textTheme.bodyMedium?.copyWith(
+                              color: onPrimary.withValues(alpha: 0.9),
+                              fontStyle: FontStyle.italic,
+                            ),
+                      ),
+                    ],
+                  ),
+                ],
+              ),
               Text(
                 '${card['points'] ?? 0}',
-                style: Theme.of(context).textTheme.displayMedium?.copyWith(
+                style: theme.textTheme.displayLarge?.copyWith(
-                      color: AppTheme.primary,
+                      color: accentColor,
+                      fontWeight: FontWeight.bold,
                     ),
               ),
             ],

lib/screens/main_shell.dart

@@ -5,7 +5,6 @@ import 'package:shared_preferences/shared_preferences.dart';
 import '../services/odoo_service.dart';
 import '../services/notification_service.dart';
 import '../services/theme_manager.dart';
-import '../theme/app_theme.dart';
 import 'notifications_screen.dart';
 import 'loyalty_dashboard.dart';
 import 'branches_screen.dart';
@@ -186,16 +185,29 @@ class _MainShellState extends State<MainShell> {
               const SizedBox(width: 4),
             ],
           ),
-          body: IndexedStack(
+          body: Container(
+            decoration: BoxDecoration(
+              gradient: LinearGradient(
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
+                colors: [
+                  colorScheme.surfaceContainerLowest,
+                  colorScheme.surface,
+                  const Color(0xFFF3EAD3), // Warm traditional restaurant sand/cream
+                ],
+              ),
+            ),
+            child: IndexedStack(
               index: _currentIndex,
               children: _pages,
             ),
+          ),
           bottomNavigationBar: NavigationBar(
             selectedIndex: _currentIndex,
             onDestinationSelected: (index) {
               setState(() => _currentIndex = index);
             },
-            backgroundColor: AppTheme.surfaceContainerLowest,
+            backgroundColor: colorScheme.surfaceContainerLowest,
             indicatorColor: colorScheme.primary,
             destinations: List.generate(4, (i) {
               return NavigationDestination(

lib/services/odoo_service.dart

@@ -48,9 +48,18 @@ class OdooService {
         [
           ['partner_id', '=', partnerId],
           ['program_id.program_type', '=', 'loyalty'],
+          ['program_id.active', '=', true],
         ],
       ],
-      'kwargs': {'fields': ['points', 'program_id', 'code']}
+      'kwargs': {
+        'fields': [
+          'points',
+          'program_id',
+          'code',
+          'subscription_start_date',
+          'subscription_end_date',
+        ]
+      }
     }) as List<dynamic>;
   }
 
@@ -65,10 +74,12 @@ class OdooService {
         [
           ['partner_id', '=', partnerId],
           ['program_id.program_type', '=', 'subscription'],
+          ['program_id.active', '=', true],
         ],
       ],
       'kwargs': {
         'fields': [
+          'points',
           'program_id',
           'code',
           'subscription_start_date',

lib/theme/app_theme.dart

@@ -2,26 +2,26 @@ import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 
 class AppTheme {
-  // Editorial Organicism Tokens
+  // Warm Traditional Family Restaurant Brand Colors
-  static const Color primary = Color(0xFFFFEF00);
+  static const Color primary = Color(0xFF8A1C14); // Rich Brick/Crimson Red
-  static const Color primaryContainer = Color(0xFFFFEF00);
+  static const Color primaryContainer = Color(0xFF8A1C14);
-  static const Color secondary = Color(0xFF705900);
+  static const Color secondary = Color(0xFFB58428); // Warm Gold/Honey Amber
-  static const Color secondaryContainer = Color(0xFFFACD34);
+  static const Color secondaryContainer = Color(0xFFF3DCA2);
-  static const Color onPrimaryContainer = Color(0xFF5F5800);
+  static const Color onPrimaryContainer = Colors.white;
-  static const Color onSecondaryContainer = Color(0xFF584500);
+  static const Color onSecondaryContainer = Color(0xFF5A3E00);
 
-  // Surface Hierarchy
+  // Warm Ivory & Earthy Surface Hierarchy
-  static const Color surface = Color(0xFFF7F7F4);
+  static const Color surface = Color(0xFFFAF6EE); // Warm paper ivory background
-  static const Color surfaceContainer = Color(0xFFE8E8E5);
+  static const Color surfaceContainer = Color(0xFFF2EAD8); // Soft cream
-  static const Color surfaceContainerLow = Color(0xFFF0F1EE);
+  static const Color surfaceContainerLow = Color(0xFFF7F1E3); // Milky cream
-  static const Color surfaceContainerLowest = Colors.white;
+  static const Color surfaceContainerLowest = Color(0xFFFCFAF6); // Softest ivory/white
-  static const Color surfaceContainerHighest = Color(0xFFDCDDDA);
+  static const Color surfaceContainerHighest = Color(0xFFE5D5BA); // Warm toasted sand
 
   // Text & On-Colors
-  static const Color onSurface = Color(0xFF2D2F2D);
+  static const Color onSurface = Color(0xFF2E251B); // Earthy dark brown instead of charcoal
-  static const Color onSurfaceVariant = Color(0xFF5A5C5A);
+  static const Color onSurfaceVariant = Color(0xFF635647); // Subdued warm wood tone
-  static const Color onPrimary = Color(0xFFFFF59B);
+  static const Color onPrimary = Colors.white;
-  static const Color outlineVariant = Color(0xFFACADAB);
+  static const Color outlineVariant = Color(0xFFD3C5B1); // Soft sandy divider
 
   static ThemeData get lightTheme => getTheme();
 
@@ -31,8 +31,8 @@ class AppTheme {
     final sColor = secondaryColor ?? secondary;
 
     // Dynamically compute readable contrast text colors
-    final onPrimaryColor = pColor.computeLuminance() > 0.5 ? Colors.black : Colors.white;
+    final onPrimaryColor = pColor.computeLuminance() > 0.5 ? Color(0xFF2E251B) : Colors.white;
-    final onSecondaryColor = sColor.computeLuminance() > 0.5 ? Colors.black : Colors.white;
+    final onSecondaryColor = sColor.computeLuminance() > 0.5 ? Color(0xFF2E251B) : Colors.white;
 
     return ThemeData(
       useMaterial3: true,
@@ -41,7 +41,7 @@ class AppTheme {
         primary: pColor,
         primaryContainer: pColor,
         secondary: sColor,
-        secondaryContainer: sColor,
+        secondaryContainer: sColor.withValues(alpha: 0.15),
         onSecondaryContainer: onSecondaryColor,
         surface: surface,
         onSurface: onSurface,
@@ -50,75 +50,91 @@ class AppTheme {
         error: const Color(0xFFB02500),
       ),
       textTheme: baseTheme.textTheme.copyWith(
-        displayLarge: GoogleFonts.epilogue(
+        displayLarge: GoogleFonts.lora(
           color: onSurface,
           fontWeight: FontWeight.bold,
-          letterSpacing: -0.02,
+          letterSpacing: -0.01,
         ),
-        displayMedium: GoogleFonts.epilogue(
+        displayMedium: GoogleFonts.lora(
           color: onSurface,
           fontWeight: FontWeight.bold,
-          letterSpacing: -0.02,
+          letterSpacing: -0.01,
         ),
-        displaySmall: GoogleFonts.epilogue(
+        displaySmall: GoogleFonts.lora(
           color: onSurface,
           fontWeight: FontWeight.bold,
-          letterSpacing: -0.02,
+          letterSpacing: -0.01,
         ),
-        headlineMedium: GoogleFonts.epilogue(
+        headlineMedium: GoogleFonts.lora(
           color: onSurface,
           fontWeight: FontWeight.bold,
-          letterSpacing: -0.02,
+          letterSpacing: -0.01,
         ),
-        titleLarge: GoogleFonts.epilogue(
+        titleLarge: GoogleFonts.lora(
           color: onSurface,
           fontWeight: FontWeight.bold,
         ),
-        titleMedium: GoogleFonts.epilogue(
+        titleMedium: GoogleFonts.lora(
           color: onSurface,
           fontWeight: FontWeight.bold,
         ),
-        titleSmall: GoogleFonts.epilogue(
+        titleSmall: GoogleFonts.lora(
           color: onSurface,
           fontWeight: FontWeight.w600,
         ),
-        bodyLarge: GoogleFonts.manrope(color: onSurface),
+        bodyLarge: GoogleFonts.manrope(
-        bodyMedium: GoogleFonts.manrope(color: onSurfaceVariant),
+          color: onSurface,
-        bodySmall: GoogleFonts.manrope(color: onSurfaceVariant),
+          letterSpacing: 0.1,
-        labelLarge: GoogleFonts.manrope(color: onSurfaceVariant),
+        ),
+        bodyMedium: GoogleFonts.manrope(
+          color: onSurfaceVariant,
+          letterSpacing: 0.1,
+        ),
+        bodySmall: GoogleFonts.manrope(
+          color: onSurfaceVariant,
+          letterSpacing: 0.1,
+        ),
+        labelLarge: GoogleFonts.manrope(
+          color: onSurfaceVariant,
+          fontWeight: FontWeight.w600,
+        ),
       ),
       elevatedButtonTheme: ElevatedButtonThemeData(
         style: ElevatedButton.styleFrom(
-          shape: const RoundedRectangleBorder(
+          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.zero,
+            borderRadius: BorderRadius.circular(28), // Elegant pill buttons
           ),
           foregroundColor: onPrimaryColor,
           backgroundColor: pColor,
-          elevation: 0,
+          elevation: 2,
-          side: const BorderSide(color: Colors.red, width: 2),
+          shadowColor: pColor.withValues(alpha: 0.2),
+          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
         ),
       ),
-      cardTheme: const CardThemeData(
+      cardTheme: CardThemeData(
         color: surfaceContainerLow,
-        elevation: 0, 
+        elevation: 1,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
+        shadowColor: Colors.black.withValues(alpha: 0.05),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(16), // Softer warm card corners
+        ),
         margin: EdgeInsets.zero,
       ),
       inputDecorationTheme: InputDecorationTheme(
         filled: true,
-        fillColor: surfaceContainer, // Spec: surfaceContainer with 0px radius
+        fillColor: surfaceContainer,
-        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
+        contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
-        border: const OutlineInputBorder(
+        border: OutlineInputBorder(
           borderSide: BorderSide.none,
-          borderRadius: BorderRadius.zero,
+          borderRadius: BorderRadius.circular(12),
         ),
-        enabledBorder: const OutlineInputBorder(
+        enabledBorder: OutlineInputBorder(
           borderSide: BorderSide.none,
-          borderRadius: BorderRadius.zero,
+          borderRadius: BorderRadius.circular(12),
         ),
         focusedBorder: OutlineInputBorder(
-          borderSide: BorderSide(color: pColor.withValues(alpha: 0.5), width: 2),
+          borderSide: BorderSide(color: pColor.withValues(alpha: 0.5), width: 1.5),
-          borderRadius: BorderRadius.zero,
+          borderRadius: BorderRadius.circular(12),
         ),
         labelStyle: const TextStyle(color: onSurfaceVariant),
         hintStyle: GoogleFonts.manrope(color: onSurfaceVariant),
@@ -128,11 +144,12 @@ class AppTheme {
         foregroundColor: onSurface,
         elevation: 0,
         surfaceTintColor: Colors.transparent,
-        titleTextStyle: GoogleFonts.epilogue(
+        centerTitle: true,
+        titleTextStyle: GoogleFonts.lora(
           color: onSurface,
-          fontSize: 20,
+          fontSize: 21,
           fontWeight: FontWeight.bold,
-          letterSpacing: -0.02,
+          letterSpacing: -0.01,
         ),
       ),
     );

lib/widgets/carousel_widget.dart

@@ -2,7 +2,6 @@ import 'dart:convert';
 import 'dart:typed_data';
 import 'package:flutter/material.dart';
 import 'package:smooth_page_indicator/smooth_page_indicator.dart';
-import '../theme/app_theme.dart';
 import '../screens/carousel_detail_screen.dart';
 
 /// Auto-scrolling carousel widget that shows slides from CMS.
@@ -55,6 +54,8 @@ class _CarouselWidgetState extends State<CarouselWidget> {
   @override
   Widget build(BuildContext context) {
     if (widget.slides.isEmpty) return const SizedBox.shrink();
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
 
     return Column(
       children: [
@@ -83,8 +84,8 @@ class _CarouselWidgetState extends State<CarouselWidget> {
                 dotHeight: 6,
                 dotWidth: 6,
                 expansionFactor: 3,
-                dotColor: AppTheme.surfaceContainer,
+                dotColor: colorScheme.surfaceContainer,
-                activeDotColor: AppTheme.secondary,
+                activeDotColor: colorScheme.secondary,
               ),
             ),
           ),
@@ -99,6 +100,8 @@ class _SlideImage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
     final base64Img = slide['image'] as String?;
     final externalUrl = slide['image_url'] as String?;
 
@@ -110,7 +113,7 @@ class _SlideImage extends StatelessWidget {
         final Uint8List bytes = base64Decode(base64Img);
         image = Image.memory(bytes, fit: BoxFit.cover, width: double.infinity);
       } catch (_) {
-        image = _placeholder();
+        image = _placeholder(colorScheme);
       }
     } else if (externalUrl != null && externalUrl.isNotEmpty) {
       // External URL image
@@ -118,28 +121,41 @@ class _SlideImage extends StatelessWidget {
         externalUrl,
         fit: BoxFit.cover,
         width: double.infinity,
-        errorBuilder: (_, __, ___) => _placeholder(),
+        errorBuilder: (_, __, ___) => _placeholder(colorScheme),
         loadingBuilder: (ctx, child, progress) {
           if (progress == null) return child;
           return const Center(child: CircularProgressIndicator());
         },
       );
     } else {
-      image = _placeholder();
+      image = _placeholder(colorScheme);
     }
 
     return Container(
-      margin: const EdgeInsets.symmetric(horizontal: 16),
+      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
-      decoration: const BoxDecoration(color: AppTheme.surfaceContainerLow),
+      decoration: BoxDecoration(
-      child: ClipRect(child: image),
+        color: colorScheme.surfaceContainerLow,
+        borderRadius: BorderRadius.circular(16),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.05),
+            blurRadius: 10,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(16),
+        child: image,
+      ),
     );
   }
 
-  Widget _placeholder() {
+  Widget _placeholder(ColorScheme colorScheme) {
     return Container(
-      color: AppTheme.surfaceContainer,
+      color: colorScheme.surfaceContainer,
-      child: const Center(
+      child: Center(
-        child: Icon(Icons.image_rounded, size: 48, color: AppTheme.outlineVariant),
+        child: Icon(Icons.image_rounded, size: 48, color: colorScheme.outline),
       ),
     );
   }

lib/widgets/promo_card_widget.dart

@@ -1,7 +1,6 @@
 import 'dart:convert';
 import 'dart:typed_data';
 import 'package:flutter/material.dart';
-import '../theme/app_theme.dart';
 import '../screens/promo_detail_screen.dart';
 
 /// Horizontal scrollable row of promo highlight cards.
@@ -48,6 +47,8 @@ class _PromoCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
     final base64Img = promo['image_128'] as String?;
     final title = promo['name'] as String? ?? '';
 
@@ -58,10 +59,10 @@ class _PromoCard extends StatelessWidget {
         imageWidget = Image.memory(bytes, fit: BoxFit.cover,
             width: double.infinity, height: 110);
       } catch (_) {
-        imageWidget = _imagePlaceholder();
+        imageWidget = _imagePlaceholder(colorScheme);
       }
     } else {
-      imageWidget = _imagePlaceholder();
+      imageWidget = _imagePlaceholder(colorScheme);
     }
 
     return GestureDetector(
@@ -73,9 +74,21 @@ class _PromoCard extends StatelessWidget {
       },
       child: Container(
         width: 140,
-        margin: const EdgeInsets.only(right: 12),
+        margin: const EdgeInsets.only(right: 12, bottom: 6),
-        decoration: const BoxDecoration(
+        decoration: BoxDecoration(
-          color: AppTheme.surfaceContainerLow,
+          color: colorScheme.surfaceContainerLowest,
+          borderRadius: BorderRadius.circular(16),
+          border: Border.all(
+            color: colorScheme.outline.withValues(alpha: 0.3),
+            width: 1,
+          ),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black.withValues(alpha: 0.03),
+              blurRadius: 6,
+              offset: const Offset(0, 3),
+            ),
+          ],
         ),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
@@ -83,15 +96,19 @@ class _PromoCard extends StatelessWidget {
             SizedBox(
               height: 110,
               width: double.infinity,
-              child: ClipRect(child: imageWidget),
+              child: ClipRRect(
+                borderRadius: const BorderRadius.vertical(top: Radius.circular(15)),
+                child: imageWidget,
+              ),
             ),
             Padding(
               padding: const EdgeInsets.all(8.0),
               child: Text(
                 title,
-                style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                style: theme.textTheme.labelLarge?.copyWith(
-                  color: AppTheme.onSurface,
+                  color: colorScheme.onSurface,
                   fontWeight: FontWeight.bold,
+                  fontSize: 11,
                 ),
                 maxLines: 2,
                 overflow: TextOverflow.ellipsis,
@@ -103,11 +120,11 @@ class _PromoCard extends StatelessWidget {
     );
   }
 
-  Widget _imagePlaceholder() {
+  Widget _imagePlaceholder(ColorScheme colorScheme) {
     return Container(
-      color: AppTheme.surfaceContainer,
+      color: colorScheme.surfaceContainer,
-      child: const Center(
+      child: Center(
-        child: Icon(Icons.local_offer_rounded, size: 32, color: AppTheme.outlineVariant),
+        child: Icon(Icons.local_offer_rounded, size: 32, color: colorScheme.outline),
       ),
     );
   }

lib/widgets/subscription_list_widget.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
-import '../theme/app_theme.dart';
 
-/// Compact "My Subscriptions" list — displayed on the home tab below the loyalty card.
+/// "My Subscriptions" list displayed on the home tab below the loyalty card.
-/// Each row shows the subscription name, active/expired badge, validity period, and card code.
+/// Renders each subscription as a beautiful standalone ticket card visually distinct
+/// from the points-based loyalty card.
 class SubscriptionListWidget extends StatelessWidget {
   final List<dynamic> subscriptions;
 
@@ -12,48 +12,39 @@ class SubscriptionListWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     if (subscriptions.isEmpty) return const SizedBox.shrink();
 
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Padding(
-          padding: const EdgeInsets.fromLTRB(16, 20, 16, 10),
+          padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
           child: Text(
             'MY SUBSCRIPTIONS',
-            style: Theme.of(context).textTheme.labelLarge?.copyWith(
+            style: theme.textTheme.labelLarge?.copyWith(
-                  color: AppTheme.onSurfaceVariant,
+                  color: colorScheme.onSurfaceVariant,
                   letterSpacing: 1.2,
                   fontSize: 11,
+                  fontWeight: FontWeight.bold,
                 ),
           ),
         ),
-        Container(
+        ...subscriptions.map((sub) => _SubscriptionCard(sub: sub)),
-          margin: const EdgeInsets.symmetric(horizontal: 16),
-          decoration: const BoxDecoration(
-            color: AppTheme.surfaceContainerLow,
-          ),
-          child: Column(
-            children: List.generate(subscriptions.length, (index) {
-              final sub = subscriptions[index];
-              final isLast = index == subscriptions.length - 1;
-              return _SubscriptionTile(sub: sub, isLast: isLast);
-            }),
-          ),
-        ),
       ],
     );
   }
 }
 
-class _SubscriptionTile extends StatelessWidget {
+class _SubscriptionCard extends StatelessWidget {
   final dynamic sub;
-  final bool isLast;
 
-  const _SubscriptionTile({required this.sub, required this.isLast});
+  const _SubscriptionCard({required this.sub});
 
   /// Determine active/expired status from subscription_end_date.
   bool _isActive() {
     final endRaw = sub['subscription_end_date'];
-    if (endRaw == null || endRaw == false) return true; // no end date = no expiry
+    if (endRaw == null || endRaw == false) return true; // no end date = active
     try {
       final endDate = DateTime.parse(endRaw.toString());
       return endDate.isAfter(DateTime.now());
@@ -85,6 +76,9 @@ class _SubscriptionTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+
     final programName = sub['program_id'] is List
         ? (sub['program_id'][1] as String? ?? 'Subscription')
         : 'Subscription';
@@ -93,88 +87,53 @@ class _SubscriptionTile extends StatelessWidget {
     final endDate = _formatDate(sub['subscription_end_date']);
     final active = _isActive();
 
-    return Container(
+    return Padding(
-      decoration: BoxDecoration(
+      padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
-        border: isLast
+      child: PhysicalShape(
-            ? null
+        clipper: TicketClipper(),
-            : const Border(
+        color: colorScheme.surfaceContainerLowest,
-                bottom: BorderSide(
+        elevation: 3,
-                  color: AppTheme.surfaceContainer,
+        shadowColor: Colors.black.withValues(alpha: 0.15),
-                  width: 1,
+        child: Container(
-                ),
+          padding: const EdgeInsets.all(20),
-              ),
-      ),
-      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: [
-          // Icon
-          Container(
-            padding: const EdgeInsets.all(10),
-            decoration: BoxDecoration(
-              color: active
-                  ? AppTheme.secondaryContainer.withValues(alpha: 0.35)
-                  : AppTheme.surfaceContainer,
-              shape: BoxShape.rectangle,
-            ),
-            child: Icon(
-              Icons.verified_rounded,
-              size: 22,
-              color: active ? AppTheme.secondary : AppTheme.outlineVariant,
-            ),
-          ),
-
-          const SizedBox(width: 14),
-
-          // Name + dates
-          Expanded(
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-                Text(
+              // Top Section: Title & Status
-                  programName,
+              Row(
-                  style: Theme.of(context).textTheme.titleSmall?.copyWith(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                        fontWeight: FontWeight.bold,
+                children: [
-                        color: AppTheme.onSurface,
+                  Row(
+                    children: [
+                      Icon(
+                        Icons.local_activity_rounded, // Distinct ticket pass icon
+                        size: 18,
+                        color: active ? colorScheme.primary : colorScheme.outline,
                       ),
-                ),
-                const SizedBox(height: 3),
-                Text(
-                  '$startDate → $endDate',
-                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
-                        color: AppTheme.onSurfaceVariant,
-                      ),
-                ),
-                if (code.isNotEmpty) ...[
-                  const SizedBox(height: 2),
-                  Text(
-                    code,
-                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
-                          color: AppTheme.outlineVariant,
-                          fontFamily: 'monospace',
-                          fontSize: 11,
-                        ),
-                  ),
-                ],
-              ],
-            ),
-          ),
-
                       const SizedBox(width: 8),
-
+                      Text(
-          // Active / Expired badge
+                        'SUBSCRIPTION PASS', // Distinct title
+                        style: theme.textTheme.labelLarge?.copyWith(
+                              color: active ? colorScheme.primary : colorScheme.outline,
+                              fontWeight: FontWeight.bold,
+                              fontSize: 10,
+                              letterSpacing: 1.2,
+                            ),
+                      ),
+                    ],
+                  ),
                   Container(
-            padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 4),
+                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                     decoration: BoxDecoration(
                       color: active
-                  ? const Color(0xFF1B5E20).withValues(alpha: 0.12)
+                          ? const Color(0xFF1B5E20).withValues(alpha: 0.10)
-                  : const Color(0xFFB02500).withValues(alpha: 0.10),
+                          : const Color(0xFFB02500).withValues(alpha: 0.08),
-              borderRadius: BorderRadius.circular(4),
+                      borderRadius: BorderRadius.circular(20),
                     ),
                     child: Text(
                       active ? 'ACTIVE' : 'EXPIRED',
                       style: TextStyle(
-                fontSize: 10,
+                        fontSize: 9,
                         fontWeight: FontWeight.bold,
                         letterSpacing: 0.8,
                         color: active
@@ -185,6 +144,188 @@ class _SubscriptionTile extends StatelessWidget {
                   ),
                 ],
               ),
+              const SizedBox(height: 18),
+              // Dashed Separator
+              CustomPaint(
+                size: const Size(double.infinity, 1),
+                painter: DashedLinePainter(
+                  color: colorScheme.outline.withValues(alpha: 0.25),
+                ),
+              ),
+              const SizedBox(height: 18),
+              // Bottom Section: Details
+              Text(
+                programName,
+                style: theme.textTheme.titleMedium?.copyWith(
+                      fontWeight: FontWeight.bold,
+                      color: colorScheme.onSurface,
+                      fontFamily: 'serif',
+                    ),
+              ),
+              const SizedBox(height: 12),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        'Pass Code', // Distinct field label
+                        style: theme.textTheme.bodySmall?.copyWith(
+                              color: colorScheme.onSurfaceVariant,
+                              fontSize: 10,
+                            ),
+                      ),
+                      const SizedBox(height: 2),
+                      Text(
+                        code.isNotEmpty ? code : 'N/A',
+                        style: theme.textTheme.bodyMedium?.copyWith(
+                              fontFamily: 'monospace',
+                              fontWeight: FontWeight.bold,
+                              color: colorScheme.onSurface,
+                            ),
+                      ),
+                    ],
+                  ),
+                  if (sub['points'] != null)
+                    Column(
+                      crossAxisAlignment: CrossAxisAlignment.end,
+                      children: [
+                        Text(
+                          'Claim Balance',
+                          style: theme.textTheme.bodySmall?.copyWith(
+                                color: colorScheme.onSurfaceVariant,
+                                fontSize: 10,
+                              ),
+                        ),
+                        const SizedBox(height: 2),
+                        Text(
+                          '${(sub['points'] as num).toDouble() % 1 == 0 ? (sub['points'] as num).toInt() : sub['points']} Claims',
+                          style: theme.textTheme.bodyMedium?.copyWith(
+                                color: colorScheme.primary,
+                                fontWeight: FontWeight.bold,
+                              ),
+                        ),
+                      ],
+                    ),
+                ],
+              ),
+              if (sub['subscription_start_date'] != null && sub['subscription_start_date'] != false) ...[
+                const SizedBox(height: 12),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          'Valid From',
+                          style: theme.textTheme.bodySmall?.copyWith(
+                                color: colorScheme.onSurfaceVariant,
+                                fontSize: 10,
+                              ),
+                        ),
+                        const SizedBox(height: 2),
+                        Text(
+                          startDate,
+                          style: theme.textTheme.bodyMedium?.copyWith(
+                                color: colorScheme.onSurface,
+                                fontWeight: FontWeight.w600,
+                              ),
+                        ),
+                      ],
+                    ),
+                    Column(
+                      crossAxisAlignment: CrossAxisAlignment.end,
+                      children: [
+                        Text(
+                          'Expires On',
+                          style: theme.textTheme.bodySmall?.copyWith(
+                                color: colorScheme.onSurfaceVariant,
+                                fontSize: 10,
+                              ),
+                        ),
+                        const SizedBox(height: 2),
+                        Text(
+                          endDate,
+                          style: theme.textTheme.bodyMedium?.copyWith(
+                                color: colorScheme.onSurface,
+                                fontWeight: FontWeight.w600,
+                              ),
+                        ),
+                      ],
+                    ),
+                  ],
+                ),
+              ],
+            ],
+          ),
+        ),
+      ),
     );
   }
 }
+
+/// Custom Clipper for a ticket-like appearance with side notches.
+class TicketClipper extends CustomClipper<Path> {
+  @override
+  Path getClip(Size size) {
+    final path = Path();
+    path.lineTo(0, 0);
+    path.lineTo(size.width, 0);
+    
+    // Right side notch at height 49 (approx. center of vertical separator space)
+    const double notchY = 49.0;
+    const double notchRadius = 8.0;
+    path.lineTo(size.width, notchY - notchRadius);
+    path.arcToPoint(
+      Offset(size.width, notchY + notchRadius),
+      radius: const Radius.circular(notchRadius),
+      clockwise: false,
+    );
+    path.lineTo(size.width, size.height);
+    path.lineTo(0, size.height);
+    
+    // Left side notch
+    path.lineTo(0, notchY + notchRadius);
+    path.arcToPoint(
+      const Offset(0, notchY - notchRadius),
+      radius: const Radius.circular(notchRadius),
+      clockwise: false,
+    );
+    path.close();
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
+}
+
+/// Painter to draw a clean dashed divider line.
+class DashedLinePainter extends CustomPainter {
+  final Color color;
+
+  DashedLinePainter({required this.color});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    double dashWidth = 5.0;
+    double dashSpace = 4.0;
+    double startX = 0.0;
+    final paint = Paint()
+      ..color = color
+      ..strokeWidth = 1.0;
+
+    while (startX < size.width) {
+      canvas.drawLine(
+        Offset(startX, 0),
+        Offset(startX + dashWidth, 0),
+        paint,
+      );
+      startX += dashWidth + dashSpace;
+    }
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}