UI Enhancements in Finance Module – Payment Request & Expense Screens

lib/helpers/widgets/expense/expense_main_components.dart

@@ -343,7 +343,21 @@ class ExpenseList extends StatelessWidget {
                     children: [
                       MyText.bodySmall(formattedDate, fontWeight: 500),
                       const Spacer(),
-                      MyText.bodySmall(expense.status.name, fontWeight: 500),
+                      Container(
+                        padding: const EdgeInsets.symmetric(
+                            horizontal: 8, vertical: 4),
+                        decoration: BoxDecoration(
+                          color: Color(int.parse(
+                                  '0xff${expense.status.color.substring(1)}'))
+                              .withOpacity(0.5),
+                          borderRadius: BorderRadius.circular(5),
+                        ),
+                        child: MyText.bodySmall(
+                          expense.status.name,
+                          color: Colors.white,
+                          fontWeight: 500,
+                        ),
+                      ),
                     ],
                   ),
                 ],

lib/view/finance/payment_request_screen.dart

@@ -383,7 +383,8 @@ class _PaymentRequestMainScreenState extends State<PaymentRequestMainScreen>
                         const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                     decoration: BoxDecoration(
                       color: Color(int.parse(
-                          '0xff${item.expenseStatus.color.substring(1)}')),
+                              '0xff${item.expenseStatus.color.substring(1)}'))
+                          .withOpacity(0.5),
                       borderRadius: BorderRadius.circular(5),
                     ),
                     child: MyText.bodySmall(