Payment stripe

package.json

@@ -52,6 +52,7 @@
     "lucide-react": "^0.525.0",
     "next": "15.4.3",
     "next-themes": "^0.4.6",
+    "qrcode": "^1.5.4",
     "react": "19.1.0",
     "react-day-picker": "^9.8.1",
     "react-dom": "19.1.0",
@@ -64,6 +65,7 @@
     "recharts": "^2.15.4",
     "rehype-raw": "^7.0.0",
     "sonner": "^2.0.6",
+    "stripe": "^19.1.0",
     "tailwind-merge": "^3.3.1",
     "use-debounce": "^10.0.5",
     "zod": "^4.0.14"
@@ -73,6 +75,7 @@
     "@tailwindcss/postcss": "^4",
     "@types/leaflet": "^1.9.20",
     "@types/node": "^20",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-resizable": "^3.0.8",

src/app/(home-app)/_components/Topbar.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link'
 import {useAuth} from '@/providers/AuthProvider'
-import {Ticket, ShieldCheck} from 'lucide-react'
+import {Ticket, ShieldCheck, Receipt} from 'lucide-react'
 import {Button} from '@/components/ui/button'
 import {
     DropdownMenu,
@@ -37,6 +37,14 @@ export default function Topbar() {
                     <ModeToggle/>
                     {isAuthenticated ? (
                         <>
+                            <Link href={`/orders`} className="hidden lg:inline-flex">
+                                <Button variant="ghost"
+                                        className="flex items-center gap-2 text-primary/80 hover:text-primary text-md">
+                                    <Receipt className="size-4 mr-1"/>
+                                    My Orders
+                                </Button>
+                            </Link>
+
                             <Link href={`/manage/organization`} className="hidden lg:inline-flex">
                                 <Button variant="ghost"
                                         className="flex items-center gap-2 text-primary/80 hover:text-primary text-md">
@@ -80,6 +88,12 @@ export default function Topbar() {
                                     {/*    </div>*/}
                                     {/*)}*/}
                                     <DropdownMenuSeparator/>
+                                    <DropdownMenuItem asChild>
+                                        <Link href="/orders" className="flex items-center gap-2">
+                                            <Receipt className="size-4"/>
+                                            My Orders
+                                        </Link>
+                                    </DropdownMenuItem>
                                     {userIsAdmin && (
                                         <>
                                             <DropdownMenuItem asChild>

src/components/ApiQRCodeModal.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Download, Copy, CheckCircle, QrCode } from 'lucide-react';
+import { ApiTicket } from '@/types/order';
+import Image from 'next/image';
+
+interface ApiQRCodeModalProps {
+    ticket: ApiTicket | null;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const ApiQRCodeModal = ({ ticket, isOpen, onClose }: ApiQRCodeModalProps) => {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopyTicketId = async () => {
+        if (ticket) {
+            await navigator.clipboard.writeText(ticket.ticket_id);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    };
+
+    const handleDownloadQR = () => {
+        if (ticket && ticket.qr_code) {
+            try {
+                // Create a data URL from the base64 encoded QR code
+                const qrDataUrl = `data:image/png;base64,${ticket.qr_code}`;
+
+                // Create a temporary link and download the image
+                const link = document.createElement('a');
+                link.download = `ticket-${ticket.ticket_id.slice(-8)}-qr.png`;
+                link.href = qrDataUrl;
+                link.click();
+            } catch (error) {
+                console.error('Error downloading QR code:', error);
+            }
+        }
+    };
+
+    if (!ticket) return null;
+
+    // Create data URL for the QR code image
+    const qrCodeUrl = ticket.qr_code ? `data:image/png;base64,${ticket.qr_code}` : null;
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onClose}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                        <QrCode className="h-5 w-5" />
+                        <span>Ticket QR Code</span>
+                    </DialogTitle>
+                </DialogHeader>
+
+                <div className="space-y-6">
+                    {/* Ticket Info */}
+                    <div className="text-center space-y-2">
+                        <h3 className="font-semibold text-lg">Seat {ticket.seat_label}</h3>
+                        <p className="text-muted-foreground">{ticket.tier_name} Tier</p>
+                        <div className="flex justify-center items-center gap-2 text-sm">
+                            <div 
+                                className="w-3 h-3 rounded-full border"
+                                style={{ backgroundColor: ticket.colour.toLowerCase() }}
+                            ></div>
+                            <span>{ticket.colour}</span>
+                        </div>
+                        <div className="text-sm">
+                            Price: ${ticket.price_at_purchase.toFixed(2)}
+                        </div>
+                    </div>
+
+                    {/* QR Code */}
+                    <div className="flex justify-center">
+                        {qrCodeUrl ? (
+                            <div className="p-4 bg-white rounded-lg border">
+                                <Image 
+                                    src={qrCodeUrl} 
+                                    alt="Ticket QR Code" 
+                                    width={192}
+                                    height={192}
+                                    className="w-48 h-48"
+                                />
+                            </div>
+                        ) : (
+                            <div className="w-48 h-48 bg-gray-100 rounded-lg flex items-center justify-center">
+                                <span className="text-gray-500">QR Code not available</span>
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Ticket ID */}
+                    <div className="space-y-2">
+                        <label className="text-sm font-medium">Ticket ID</label>
+                        <div className="flex items-center gap-2">
+                            <code className="flex-1 p-2 bg-muted rounded text-sm font-mono">
+                                {ticket.ticket_id}
+                            </code>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={handleCopyTicketId}
+                                className="flex items-center gap-1"
+                            >
+                                {copied ? (
+                                    <>
+                                        <CheckCircle className="h-4 w-4" />
+                                        Copied
+                                    </>
+                                ) : (
+                                    <>
+                                        <Copy className="h-4 w-4" />
+                                        Copy
+                                    </>
+                                )}
+                            </Button>
+                        </div>
+                    </div>
+
+                    {/* Status Info */}
+                    <div className="p-3 bg-muted rounded-lg">
+                        <div className="flex items-center justify-between text-sm">
+                            <span>Status:</span>
+                            <span className={`font-medium ${ticket.checked_in ? 'text-blue-600' : 'text-green-600'}`}>
+                                {ticket.checked_in ? 'Used' : 'Valid'}
+                            </span>
+                        </div>
+                        <div className="flex items-center justify-between text-sm mt-1">
+                            <span>Issued:</span>
+                            <span>{new Date(ticket.issued_at).toLocaleDateString()}</span>
+                        </div>
+                        {ticket.checked_in && ticket.checked_in_time !== "0001-01-01T00:00:00Z" && (
+                            <div className="flex items-center justify-between text-sm mt-1">
+                                <span>Checked in:</span>
+                                <span>{new Date(ticket.checked_in_time).toLocaleString()}</span>
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Actions */}
+                    <div className="flex gap-2">
+                        <Button
+                            variant="outline"
+                            onClick={handleDownloadQR}
+                            disabled={!qrCodeUrl}
+                            className="flex-1"
+                        >
+                            <Download className="h-4 w-4 mr-2" />
+                            Download QR
+                        </Button>
+                        <Button
+                            onClick={onClose}
+                            className="flex-1"
+                        >
+                            Close
+                        </Button>
+                    </div>
+
+                    {/* Instructions */}
+                    <div className="text-xs text-muted-foreground text-center space-y-1">
+                        <p>Present this QR code at the event entrance</p>
+                        <p>Keep this ticket until after the event</p>
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+};

src/components/OrderDebugView.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ChevronDown, ChevronUp, Code } from 'lucide-react';
+
+// Use a safer approach with explicit type casting
+interface OrderDebugViewProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  order: any; // Using any here is justified for a debugging component
+  orderId: string;
+}
+
+export const OrderDebugView = ({ order, orderId }: OrderDebugViewProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  if (!order) {
+    return (
+      <Card className="mt-6 border-dashed border-gray-300">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm flex items-center justify-between">
+            <div className="flex items-center">
+              <Code className="h-4 w-4 mr-2" />
+              <span>Order Data</span>
+            </div>
+            <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">No Data</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pt-0 text-sm">
+          <p>No order data available for ID: {orderId}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="mt-6 border-dashed border-gray-300">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm flex items-center justify-between">
+          <div className="flex items-center">
+            <Code className="h-4 w-4 mr-2" />
+            <span>Order Data</span>
+          </div>
+          <Button 
+            variant="ghost" 
+            size="sm" 
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="h-6 px-2"
+          >
+            {isExpanded ? (
+              <ChevronUp className="h-4 w-4 mr-1" />
+            ) : (
+              <ChevronDown className="h-4 w-4 mr-1" />
+            )}
+            {isExpanded ? 'Hide' : 'Show'} Details
+          </Button>
+        </CardTitle>
+      </CardHeader>
+      {isExpanded && (
+        <CardContent className="pt-0">
+          <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-md overflow-auto max-h-96">
+            <pre className="text-xs whitespace-pre-wrap break-words">
+              {JSON.stringify(order, null, 2)}
+            </pre>
+          </div>
+        </CardContent>
+      )}
+      <CardContent className="pt-0 pb-3">
+        <div className="grid grid-cols-2 gap-2 text-sm">
+          <div>
+            <span className="font-medium">Order ID:</span>
+            <div className="font-mono text-xs truncate">{String(order.OrderID || orderId)}</div>
+          </div>
+          <div>
+            <span className="font-medium">Status:</span>
+            <div className={`text-xs ${getStatusColor(order.Status)}`}>
+              {order.Status ? String(order.Status) : 'Unknown'}
+            </div>
+          </div>
+          <div>
+            <span className="font-medium">User:</span>
+            <div className="text-xs truncate">{order.UserID ? String(order.UserID) : 'N/A'}</div>
+          </div>
+          <div>
+            <span className="font-medium">Amount:</span>
+            <div className="text-xs">
+              {typeof order.Price === 'number' 
+                ? `$${order.Price.toFixed(2)}` 
+                : 'N/A'}
+            </div>
+          </div>
+          <div>
+            <span className="font-medium">Event:</span>
+            <div className="text-xs truncate">{order.EventID ? String(order.EventID) : 'N/A'}</div>
+          </div>
+          <div>
+            <span className="font-medium">Session:</span>
+            <div className="text-xs truncate">{order.SessionID ? String(order.SessionID) : 'N/A'}</div>
+          </div>
+          {order.CreatedAt && typeof order.CreatedAt === 'string' && (
+            <div>
+              <span className="font-medium">Created:</span>
+              <div className="text-xs">
+                {new Date(order.CreatedAt).toLocaleString()}
+              </div>
+            </div>
+          )}
+          {order.SeatIDs && (
+            <div className="col-span-2">
+              <span className="font-medium">Seats:</span>
+              <div className="text-xs">
+                {Array.isArray(order.SeatIDs) ? 
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  order.SeatIDs.map((seat: any) => String(seat)).join(', ') : 
+                  'N/A'}
+              </div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+// Helper function to get color based on status
+function getStatusColor(status: unknown): string {
+  if (!status || typeof status !== 'string') return 'text-gray-500';
+
+  switch(status.toLowerCase()) {
+    case 'completed': 
+      return 'text-white';
+    case 'pending':
+      return 'text-amber-500';
+    case 'cancelled':
+      return 'text-red-500';
+    case 'expired':
+      return 'text-gray-500';
+    default:
+      return 'text-gray-500';
+  }
+}