6 maret 2026

frontend/app/history/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
 import { useRouter } from "next/navigation";
-import { ArrowLeft, Calendar, Clock, MapPin, AlertCircle, CheckCircle, XCircle } from "lucide-react";
+import { ArrowLeft, Calendar, Clock, MapPin, AlertCircle, CheckCircle, XCircle, Key } from "lucide-react";
 
 interface Booking {
   booking_id: string;
@@ -15,6 +15,7 @@ interface Booking {
   end_time: string;
   purpose: string;
   status: string;
+  redeem_code: string;
   created_at: string;
 }
 
@@ -45,7 +46,6 @@ export default function HistoryPage() {
     }
   };
 
-  // Fungsi untuk memformat tanggal agar enak dibaca (Contoh: 10 Feb 2026, 08:00)
   const formatDate = (isoString: string) => {
     const date = new Date(isoString);
     return date.toLocaleDateString("id-ID", {
@@ -54,23 +54,21 @@ export default function HistoryPage() {
     });
   };
 
-  // Fungsi menentukan warna status
   const getStatusBadge = (status: string) => {
     switch (status) {
       case "Approved":
         return <span className="flex items-center gap-1 bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-bold"><CheckCircle size={14}/> Disetujui</span>;
       case "Rejected":
         return <span className="flex items-center gap-1 bg-red-100 text-red-700 px-3 py-1 rounded-full text-xs font-bold"><XCircle size={14}/> Ditolak</span>;
-      default: // Pending
+      default: 
         return <span className="flex items-center gap-1 bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-xs font-bold"><AlertCircle size={14}/> Menunggu</span>;
     }
   };
 
-  if (loading) return <div className="p-10 text-center">Memuat riwayat...</div>;
+  if (loading) return <div className="p-10 text-center font-bold text-gray-500">Memuat riwayat...</div>;
 
   return (
     <div className="min-h-screen bg-gray-50">
-      {/* Navbar Header */}
       <nav className="bg-white shadow-sm px-6 py-4 sticky top-0 z-10">
         <div className="max-w-4xl mx-auto flex items-center gap-4">
           <button 
@@ -96,6 +94,7 @@ export default function HistoryPage() {
           <div className="space-y-4">
             {bookings.map((item) => (
               <div key={item.booking_id} className="bg-white p-5 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition">
+                
                 <div className="flex justify-between items-start mb-4">
                   <div>
                     <h3 className="text-lg font-bold text-gray-800">{item.room.name}</h3>
@@ -127,6 +126,24 @@ export default function HistoryPage() {
                   <p className="text-xs text-gray-400">Keperluan:</p>
                   <p className="text-sm text-gray-800 font-medium">{item.purpose}</p>
                 </div>
+
+                {item.status === "Approved" && item.redeem_code && (
+                  <div className="mt-4 bg-indigo-50 border border-indigo-200 rounded-lg p-4">
+                    <div className="flex items-center gap-2 text-indigo-800 mb-2">
+                      <Key size={16} />
+                      <p className="text-sm font-bold">Kode Akses Ruangan</p>
+                    </div>
+                    <div className="bg-white border border-indigo-100 rounded text-center py-2 shadow-inner">
+                      <p className="text-2xl font-mono font-bold text-indigo-700 tracking-[0.2em]">
+                        {item.redeem_code}
+                      </p>
+                    </div>
+                    <p className="text-xs text-indigo-500 mt-2 text-center">
+                      *Masukkan kode ini pada layar ruangan.
+                    </p>
+                  </div>
+                )}
+
               </div>
             ))}
           </div>