feat: Enhance ticket purchasing and management with QR code support

- Update PurchaseTicketDialog.vue to display a ticket QR code after successful purchase and manage its visibility.
- Refactor useTicketPurchase composable to include ticket QR code generation and state management.
- Introduce QR code functionality in MyTickets.vue for displaying ticket QR codes, allowing users to toggle visibility.
- Improve user experience by providing clear feedback on ticket purchase status and QR code availability.

src/components/events/PurchaseTicketDialog.vue

@@ -40,7 +40,10 @@ const {
   purchaseTicketForEvent,
   handleOpenLightningWallet,
   resetPaymentState,
-  cleanup
+  cleanup,
+  ticketQRCode,
+  purchasedTicketId,
+  showTicketQR
 } = useTicketPurchase()
 
 async function handlePurchase() {
@@ -179,7 +182,7 @@ onUnmounted(() => {
       </div>
 
       <!-- Payment QR Code and Status -->
-      <div v-else class="py-4 flex flex-col items-center gap-4">
+      <div v-else-if="paymentHash && !showTicketQR" class="py-4 flex flex-col items-center gap-4">
         <div class="text-center space-y-2">
           <h3 class="text-lg font-semibold">Payment Required</h3>
           <p v-if="isPayingWithWallet" class="text-sm text-muted-foreground">
@@ -190,7 +193,7 @@ onUnmounted(() => {
           </p>
         </div>
 
-        <div v-if="!isPayingWithWallet" class="bg-muted/50 rounded-lg p-4">
+        <div v-if="!isPayingWithWallet && qrCode" class="bg-muted/50 rounded-lg p-4">
           <img :src="qrCode" alt="Lightning payment QR code" class="w-64 h-64 mx-auto" />
         </div>
 
@@ -213,6 +216,32 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
+
+      <!-- Ticket QR Code (After Successful Purchase) -->
+      <div v-else-if="showTicketQR && ticketQRCode" class="py-4 flex flex-col items-center gap-4">
+        <div class="text-center space-y-2">
+          <h3 class="text-lg font-semibold text-green-600">Ticket Purchased Successfully!</h3>
+          <p class="text-sm text-muted-foreground">
+            Your ticket has been purchased. Here's your ticket QR code:
+          </p>
+        </div>
+
+        <div class="bg-muted/50 rounded-lg p-4">
+          <div class="flex flex-col items-center space-y-3">
+            <img :src="ticketQRCode" alt="Ticket QR code" class="w-48 h-48 border rounded-lg" />
+            <div class="text-center">
+              <p class="text-xs text-muted-foreground">Ticket ID</p>
+              <p class="text-xs font-mono">{{ purchasedTicketId }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="space-y-3 w-full">
+          <Button variant="outline" @click="handleClose" class="w-full">
+            Close
+          </Button>
+        </div>
+      </div>
     </DialogContent>
   </Dialog>
 </template>