add transaction page

lib/api.dart

@@ -345,6 +345,10 @@ class Price {
     value = json["value"];
     currency = json["currency"];
   }
+
+  String format() {
+    return "${value.toStringAsFixed(2)} $currency";
+  }
 }
 
 class Transaction {

lib/pages/transaction.dart

@@ -2,18 +2,49 @@ import 'package:cdb_ui/api.dart';
 import 'package:cdb_ui/pages/consume.dart';
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
+import 'package:qr_bar_code/qr/qr.dart';
 
 class TransactionPage extends StatelessWidget {
-  late Transaction transaction;
+  final Transaction transaction;
 
-  TransactionPage(this.transaction);
+  const TransactionPage(this.transaction, {super.key});
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       body: Column(
         children: [
-          // todo : transaction properties
+          Text("UUID: ${transaction.uuid}"),
+          QRCode(
+            data: transaction.uuid,
+            size: 22,
+            semanticsLabel: "Transaction UUID",
+          ),
+
+          Text("${transaction.item} - ${transaction.variant}"),
+
+          Text("Added: ${tsFormat(transaction.timestamp)}"),
+
+          if (transaction.expired) const Text("Transaction is Expired!"),
+
+          IconText(Icons.money, transaction.price.format(),
+              color: Colors.green),
+
+          IconText(Icons.store, transaction.origin!, color: Colors.blue),
+
+          IconText(Icons.location_city, transaction.location!),
+
+          if (transaction.note != null) Text(transaction.note!),
+
+          if (transaction.consumed != null) ...[
+            const Divider(),
+            Text("Consumed on: ${tsFormat(transaction.consumed!.timestamp)}"),
+            IconText(Icons.store, transaction.consumed!.destination,
+                color: Colors.blue),
+            IconText(Icons.money, transaction.consumed!.price.format(),
+                color: Colors.green),
+          ]
+
           // todo : chart with price history
         ],
       ),