feat: implement core event ticketing navigation, detailed event pages, checkout flow, and QR code integration.

package-lock.json

@@ -11,6 +11,7 @@
         "lucide-react": "^0.475.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-qr-code": "^2.0.21",
         "react-router-dom": "^7.15.1"
       },
       "devDependencies": {
@@ -2898,7 +2899,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -3269,6 +3269,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3351,6 +3363,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3493,6 +3514,17 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3503,6 +3535,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/qr.js": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+      "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==",
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "19.2.6",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz",
@@ -3524,6 +3562,25 @@
         "react": "^19.2.6"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-qr-code": {
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.21.tgz",
+      "integrity": "sha512-xaywjo0eaF4S3LOz6ns5eoPbM2E+q9HYl4VATYpxK4bBniOhQ9noY2RJ9G4SnZFhUwzx63FUT6KdHzfKgUwyuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "qr.js": "0.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-qr-code": "^2.0.21",
     "react-router-dom": "^7.15.1"
   },
   "devDependencies": {

src/App.tsx

@@ -5,6 +5,8 @@ import Footer from './components/Footer';
 import Home from './pages/Home';
 import AllEvents from './pages/AllEvents';
 import EventDetail from './pages/EventDetail';
+import Checkout from './pages/Checkout';
+import Payment from './pages/Payment';
 
 function ScrollToTop() {
   const { pathname } = useLocation();
@@ -28,6 +30,8 @@ function App() {
             <Route path="/" element={<Home />} />
             <Route path="/events" element={<AllEvents />} />
             <Route path="/event/:id" element={<EventDetail />} />
+            <Route path="/checkout" element={<Checkout />} />
+            <Route path="/payment" element={<Payment />} />
           </Routes>
         </main>
 

src/components/Hero.tsx

@@ -5,15 +5,15 @@ import { Search } from "lucide-react";
 const SLIDES = [
   {
     id: 1,
-    videoId: "Fpn1imb9qZg",
+    videoUrl: "https://videos.pexels.com/video-files/3253245/3253245-uhd_2560_1440_25fps.mp4",
   },
   {
     id: 2,
-    videoId: "PN7Pv23FrWg",
+    videoUrl: "https://videos.pexels.com/video-files/2086119/2086119-uhd_2560_1440_24fps.mp4",
   },
   {
     id: 3,
-    videoId: "YsJqKjD2sXE",
+    videoUrl: "https://videos.pexels.com/video-files/3163534/3163534-uhd_2560_1440_30fps.mp4",
   },
 ];
 
@@ -71,16 +71,18 @@ export default function Hero() {
             <div className="bg-white p-4 md:p-6 brutal-border shadow-[12px_12px_0_0_#000] lg:shadow-[16px_16px_0_0_#000] rotate-2 hover:rotate-0 transition-transform duration-500 max-w-2xl mx-auto xl:ml-auto">
               <div className="relative w-full aspect-video bg-black brutal-border overflow-hidden">
                 {SLIDES.map((slide, idx) => (
-                  <iframe
+                  <video
                     key={`video-${slide.id}`}
-                    src={`https://www.youtube.com/embed/${slide.videoId}?autoplay=1&mute=1&controls=0&loop=1&playlist=${slide.videoId}&modestbranding=1&playsinline=1&rel=0&showinfo=0&disablekb=1`}
+                    src={slide.videoUrl}
-                    className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[150%] h-[150%] max-w-none pointer-events-none transition-opacity duration-700 ease-in-out ${
+                    className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full object-cover max-w-none pointer-events-none transition-opacity duration-700 ease-in-out ${
                       currentSlide === idx
                         ? "opacity-100 z-10"
                         : "opacity-0 z-0"
                     }`}
-                    allow="autoplay; encrypted-media; fullscreen"
+                    autoPlay
-                    frameBorder="0"
+                    muted
+                    loop
+                    playsInline
                   />
                 ))}
                 <div className="absolute inset-0 bg-blue-900 mix-blend-multiply opacity-20 pointer-events-none z-20"></div>

src/pages/Checkout.tsx

@@ -0,0 +1,178 @@
+import { useState } from 'react';
+import { useLocation, useNavigate, Link } from 'react-router-dom';
+import { ArrowLeft } from 'lucide-react';
+
+export default function Checkout() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const ticketState = location.state;
+
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    address: ''
+  });
+
+  // If no ticket state, redirect back to events
+  if (!ticketState) {
+    return (
+      <div className="bg-brutal-bg min-h-screen flex items-center justify-center p-4">
+        <div className="bg-white p-8 brutal-border text-center">
+          <h2 className="text-2xl font-black mb-4 uppercase">No Ticket Selected</h2>
+          <Link to="/events" className="px-6 py-3 bg-brutal-yellow brutal-border font-black uppercase text-sm inline-block hover:shadow-[4px_4px_0_0_#000] transition-all">
+            Back to Events
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // Construct the payload structure requested by the user
+    const payload = {
+      name: formData.name,
+      email: formData.email,
+      phone: formData.phone,
+      address: formData.address,
+      location_id: "98adc52b-966d-39db-809a-55902ee7228f", // hardcoded mock as requested
+      payment_channel_id: "d48a46b6-3a18-3763-951d-66b7fdb284ae", // hardcoded mock
+      properties: {},
+      products: [
+        {
+          id: ticketState.ticketId,
+          name: ticketState.ticketName,
+          price: ticketState.basePrice,
+          insurance: ticketState.hasInsurance,
+          insurance_price: ticketState.insurancePrice
+        }
+      ],
+      totalPrice: ticketState.totalPrice
+    };
+
+    // Navigate to payment page with this payload
+    navigate('/payment', { state: { checkoutPayload: payload } });
+  };
+
+  return (
+    <div className="bg-brutal-bg min-h-screen pt-24 pb-20">
+      <div className="max-w-[800px] mx-auto px-4 sm:px-6 lg:px-8">
+        <Link 
+          to={`/event/${ticketState.eventId || '1'}`} 
+          className="inline-flex items-center gap-2 mb-6 text-black font-black uppercase hover:-translate-x-1 transition-transform text-sm"
+        >
+          <ArrowLeft className="w-5 h-5 stroke-[3]" />
+          Back to Ticket
+        </Link>
+
+        <h1 className="text-4xl md:text-5xl font-display font-black uppercase mb-8 brutal-text-shadow tracking-tight">
+          Checkout
+        </h1>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div className="md:col-span-2">
+            <form onSubmit={handleSubmit} className="bg-white p-6 md:p-8 brutal-border shadow-[8px_8px_0_0_#000] space-y-6">
+              <h2 className="text-2xl font-black uppercase border-b-4 border-black pb-2 mb-6 inline-block">Personal Data</h2>
+              
+              <div className="space-y-2">
+                <label className="block text-sm font-black uppercase">Full Name</label>
+                <input 
+                  type="text" 
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  required
+                  className="w-full h-12 px-4 brutal-border bg-brutal-bg focus:bg-white outline-none focus:ring-2 focus:ring-black transition-colors font-bold text-sm"
+                  placeholder="John Doe"
+                />
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                <div className="space-y-2">
+                  <label className="block text-sm font-black uppercase">Email</label>
+                  <input 
+                    type="email" 
+                    name="email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
+                    className="w-full h-12 px-4 brutal-border bg-brutal-bg focus:bg-white outline-none focus:ring-2 focus:ring-black transition-colors font-bold text-sm"
+                    placeholder="john@example.com"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="block text-sm font-black uppercase">Phone Number</label>
+                  <input 
+                    type="tel" 
+                    name="phone"
+                    value={formData.phone}
+                    onChange={handleChange}
+                    required
+                    className="w-full h-12 px-4 brutal-border bg-brutal-bg focus:bg-white outline-none focus:ring-2 focus:ring-black transition-colors font-bold text-sm"
+                    placeholder="08123456789"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label className="block text-sm font-black uppercase">Address</label>
+                <textarea 
+                  name="address"
+                  value={formData.address}
+                  onChange={handleChange}
+                  required
+                  rows={4}
+                  className="w-full p-4 brutal-border bg-brutal-bg focus:bg-white outline-none focus:ring-2 focus:ring-black transition-colors font-bold text-sm resize-none"
+                  placeholder="Your full address..."
+                />
+              </div>
+              
+              <button 
+                type="submit" 
+                className="w-full py-4 bg-brutal-blue text-white font-black uppercase text-lg hover:bg-blue-600 transition-colors brutal-border mt-8 hover:shadow-[4px_4px_0_0_#000]"
+              >
+                Proceed to Payment
+              </button>
+            </form>
+          </div>
+
+          <div className="md:col-span-1">
+            <div className="bg-brutal-yellow p-6 brutal-border shadow-[8px_8px_0_0_#000] sticky top-24">
+              <h3 className="text-xl font-black uppercase mb-4 border-b-2 border-black pb-2">Order Summary</h3>
+              
+              <div className="space-y-4 mb-6">
+                <div>
+                  <p className="text-xs font-bold text-gray-800 uppercase mb-1">Ticket</p>
+                  <p className="font-black text-sm">{ticketState.ticketName}</p>
+                  <p className="font-bold text-sm">IDR {ticketState.basePrice.toLocaleString('id-ID')}</p>
+                </div>
+                
+                {ticketState.hasInsurance && (
+                  <div>
+                    <p className="text-xs font-bold text-gray-800 uppercase mb-1">Addon</p>
+                    <p className="font-black text-sm">Insurance</p>
+                    <p className="font-bold text-sm">IDR {ticketState.insurancePrice.toLocaleString('id-ID')}</p>
+                  </div>
+                )}
+              </div>
+
+              <div className="border-t-4 border-black pt-4">
+                <p className="text-xs font-bold text-gray-800 uppercase mb-1">Total Payment</p>
+                <p className="text-2xl font-display font-black text-black tracking-tight">
+                  IDR {ticketState.totalPrice.toLocaleString('id-ID')}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/EventDetail.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, Link, useNavigate } from 'react-router-dom';
 import { ArrowLeft, MapPin, Calendar, Info, FileText, Ticket as TicketIcon } from 'lucide-react';
 
 const MOCK_EVENT_DETAIL = {
@@ -20,26 +20,25 @@ const MOCK_EVENT_DETAIL = {
   tickets: [
     {
       id: 't1',
-      name: 'PRESALE INCLUDE INSURANCE',
+      name: 'PRESALE',
-      benefits: 'Include: Jersey Peserta + Insurance + Finisher Medal + Best Finisher + Waterstation + Refreshment + Tiket Konser UTOPIA Harga Sudah Termasuk Pajak',
-      category: 'PELARI',
-      validDate: '24 Mei 2026',
-      price: 'IDR 155.000',
-    },
-    {
-      id: 't2',
-      name: 'PRESALE NON INSURANCE',
       benefits: 'Include: Jersey Peserta + Finisher Medal + Best Finisher + Waterstation + Refreshment + Tiket Konser UTOPIA Harga Sudah Termasuk Pajak',
       category: 'PELARI',
       validDate: '24 Mei 2026',
-      price: 'IDR 135.000',
+      basePrice: 135000,
+      insurancePrice: 20000,
     }
   ]
 };
 
 export default function EventDetail() {
   const { id } = useParams();
+  const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState<'info' | 'desc' | 'ticket'>('ticket');
+  const [insuranceSelections, setInsuranceSelections] = useState<Record<string, boolean>>({});
+
+  const toggleInsurance = (ticketId: string) => {
+    setInsuranceSelections(prev => ({ ...prev, [ticketId]: !prev[ticketId] }));
+  };
 
   // Dalam aplikasi nyata, Anda akan fetch data berdasarkan `id`
   const event = MOCK_EVENT_DETAIL;
@@ -164,7 +163,11 @@ export default function EventDetail() {
             {/* TICKET TAB */}
             {activeTab === 'ticket' && (
               <div className="animate-in fade-in duration-300 space-y-6">
-                {event.tickets.map((ticket) => (
+                {event.tickets.map((ticket) => {
+                  const hasInsurance = insuranceSelections[ticket.id] || false;
+                  const totalPrice = ticket.basePrice + (hasInsurance && ticket.insurancePrice ? ticket.insurancePrice : 0);
+                  
+                  return (
                   <div key={ticket.id} className="bg-white brutal-border p-5 relative group hover:-translate-y-1 hover:shadow-[6px_6px_0_0_#000] transition-all">
                     <h4 className="text-lg font-black text-black uppercase mb-2">
                       {ticket.name}
@@ -182,16 +185,51 @@ export default function EventDetail() {
                       </span>
                     </div>
 
-                    <div className="border-t-2 border-dashed border-gray-300 pt-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 mt-4">
+                    <div className="border-t-2 border-dashed border-gray-300 pt-4 mt-4">
-                      <div className="text-xl font-display font-black text-black">
+                      {ticket.insurancePrice && (
-                        {ticket.price}
+                        <div 
+                          className="mb-4 flex items-center gap-3 bg-brutal-yellow/30 p-3 brutal-border cursor-pointer hover:bg-brutal-yellow/50 transition-colors" 
+                          onClick={() => toggleInsurance(ticket.id)}
+                        >
+                          <input 
+                            type="checkbox" 
+                            id={`insurance-${ticket.id}`}
+                            checked={hasInsurance}
+                            onChange={() => {}}
+                            className="w-5 h-5 accent-black brutal-border cursor-pointer"
+                          />
+                          <label htmlFor={`insurance-${ticket.id}`} className="text-sm font-bold cursor-pointer select-none text-black">
+                            Tambah Asuransi (+ IDR {(ticket.insurancePrice).toLocaleString('id-ID')})
+                          </label>
+                        </div>
+                      )}
+                      
+                      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                        <div className="text-xl font-display font-black text-black">
+                          IDR {totalPrice.toLocaleString('id-ID')}
+                        </div>
+                        <button 
+                          className="px-6 py-3 bg-brutal-blue text-white font-black text-sm uppercase brutal-btn shrink-0"
+                          onClick={() => {
+                            navigate('/checkout', {
+                              state: {
+                                eventId: id,
+                                ticketId: ticket.id,
+                                ticketName: ticket.name,
+                                basePrice: ticket.basePrice,
+                                hasInsurance: hasInsurance,
+                                insurancePrice: hasInsurance ? ticket.insurancePrice : 0,
+                                totalPrice: totalPrice
+                              }
+                            });
+                          }}
+                        >
+                          Buy Ticket
+                        </button>
                       </div>
-                      <button className="px-6 py-3 bg-brutal-blue text-white font-black text-sm uppercase brutal-btn shrink-0">
-                        Buy Ticket
-                      </button>
                     </div>
                   </div>
-                ))}
+                )})}
               </div>
             )}
 

src/pages/Payment.tsx

@@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import QRCode from 'react-qr-code';
+import { ArrowLeft, CheckCircle2 } from 'lucide-react';
+
+export default function Payment() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const checkoutPayload = location.state?.checkoutPayload;
+  const [transactionId, setTransactionId] = useState('');
+  const [isPaid, setIsPaid] = useState(false);
+
+  useEffect(() => {
+    // Generate a mock Xendit Transaction ID when component mounts
+    if (checkoutPayload && !transactionId) {
+      const randomStr = Math.random().toString(36).substring(2, 10).toUpperCase();
+      setTransactionId(`XND-QRIS-${randomStr}`);
+    }
+  }, [checkoutPayload, transactionId]);
+
+  if (!checkoutPayload) {
+    return (
+      <div className="bg-brutal-bg min-h-screen flex items-center justify-center p-4">
+        <div className="bg-white p-8 brutal-border text-center">
+          <p className="font-black text-xl uppercase">Invalid Payment Session</p>
+          <button onClick={() => navigate('/events')} className="mt-4 px-6 py-3 bg-brutal-yellow brutal-border font-black uppercase text-sm inline-block hover:shadow-[4px_4px_0_0_#000] transition-all">
+            Back to Events
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const handleSimulatePayment = () => {
+    setIsPaid(true);
+    setTimeout(() => {
+      navigate('/events');
+    }, 4000);
+  };
+
+  if (isPaid) {
+    return (
+      <div className="bg-brutal-bg min-h-screen flex items-center justify-center p-4">
+        <div className="bg-white p-12 brutal-border shadow-[12px_12px_0_0_#000] text-center max-w-md w-full animate-in fade-in zoom-in duration-300">
+          <div className="w-20 h-20 bg-brutal-pink brutal-border rounded-full flex items-center justify-center mx-auto mb-6">
+            <CheckCircle2 className="w-10 h-10 text-white stroke-[3]" />
+          </div>
+          <h2 className="text-3xl font-display font-black uppercase mb-4 tracking-tight">Payment Success!</h2>
+          <p className="text-sm font-bold text-gray-600 mb-6">Your ticket has been booked successfully. Redirecting...</p>
+          <div className="p-4 bg-brutal-bg brutal-border">
+            <p className="text-xs uppercase font-bold text-gray-500 mb-1">Transaction ID</p>
+            <p className="font-black font-mono">{transactionId}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-brutal-bg min-h-screen pt-24 pb-20">
+      <div className="max-w-[600px] mx-auto px-4">
+        
+        <button 
+          onClick={() => navigate(-1)}
+          className="inline-flex items-center gap-2 mb-6 text-black font-black uppercase hover:-translate-x-1 transition-transform text-sm"
+        >
+          <ArrowLeft className="w-5 h-5 stroke-[3]" />
+          Back to Checkout
+        </button>
+
+        <div className="bg-white brutal-border shadow-[12px_12px_0_0_#000] overflow-hidden">
+          {/* Header Xendit Mock */}
+          <div className="bg-[#121212] text-white p-6 flex justify-between items-center">
+            <div>
+              <p className="text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">Merchant</p>
+              <h2 className="text-xl font-black tracking-tight">SMART TICKET INC.</h2>
+            </div>
+            <div className="text-right">
+              <span className="px-3 py-1 bg-brutal-blue text-white text-xs font-black uppercase brutal-border border-white">QRIS</span>
+            </div>
+          </div>
+
+          <div className="p-8">
+            <div className="text-center mb-8">
+              <p className="text-sm font-bold text-gray-500 uppercase mb-2">Total Amount</p>
+              <h1 className="text-4xl md:text-5xl font-display font-black tracking-tighter">
+                IDR {checkoutPayload.totalPrice.toLocaleString('id-ID')}
+              </h1>
+              <p className="text-xs font-mono font-bold mt-3 text-gray-400">TRX ID: {transactionId}</p>
+            </div>
+
+            <div className="flex justify-center mb-8">
+              <div className="p-4 bg-white brutal-border shadow-[8px_8px_0_0_#000]">
+                {transactionId ? (
+                  <QRCode 
+                    value={transactionId} 
+                    size={200}
+                    level="H"
+                  />
+                ) : (
+                  <div className="w-[200px] h-[200px] bg-gray-100 flex items-center justify-center font-bold text-gray-400">Loading QR...</div>
+                )}
+              </div>
+            </div>
+
+            <div className="bg-brutal-bg p-4 brutal-border mb-8">
+              <h3 className="font-black uppercase text-sm mb-2">How to pay:</h3>
+              <ol className="list-decimal list-inside text-sm font-bold text-gray-700 space-y-2">
+                <li>Open your payment app (Gopay, OVO, BCA, dll).</li>
+                <li>Scan the QR Code above.</li>
+                <li>Check the details and amount.</li>
+                <li>Enter your PIN to confirm payment.</li>
+              </ol>
+            </div>
+
+            <button 
+              onClick={handleSimulatePayment}
+              className="w-full py-4 bg-brutal-pink text-black font-black uppercase text-lg hover:bg-pink-400 transition-colors brutal-border hover:shadow-[4px_4px_0_0_#000]"
+            >
+              I Have Paid
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}