Basdat/web/js/pages/admin/modals/ClaimDetailModalAdmin.js

// assets/js/pages/admin/modals/ClaimDetailModalAdmin.js

const ClaimDetailModalAdmin = ({ isOpen, onClose, claim }) => (
  <Modal isOpen={isOpen} onClose={onClose} title="Detail Klaim" size="large">
    {claim && (
      <div>
        {/* Header Info */}
        <div className="bg-blue-500/10 border-2 border-blue-500/30 p-4 rounded-xl mb-6">
          <h3 className="text-xl font-bold text-white mb-2">
            {claim.item_name}
          </h3>
          <div className="grid grid-cols-2 gap-3 text-sm text-slate-300">
            <div>
              <strong className="text-blue-400">Pengklaim:</strong>{" "}
              {claim.user_name}
            </div>
            <div>
              <strong className="text-blue-400">Kontak:</strong> {claim.contact}
            </div>
            <div>
              <strong className="text-blue-400">Status:</strong>{" "}
              <span
                className={`px-3 py-1 rounded-full text-xs font-semibold ${Helpers.getStatusBadgeClass(
                  claim.status
                )}`}
              >
                {claim.status}
              </span>
            </div>
            <div>
              <strong className="text-blue-400">Tanggal:</strong>{" "}
              {Helpers.formatDateTime(claim.created_at)}
            </div>
          </div>
        </div>

        {/* Comparison Section */}
        <div className="grid grid-cols-2 gap-6 mb-6">
          <div className="bg-yellow-500/10 p-4 rounded-xl border border-yellow-500/30">
            <h4 className="font-semibold mb-3 text-yellow-400 flex items-center gap-2">
              <span>🔒</span>
              Deskripsi Rahasia Barang
            </h4>
            <p className="text-sm text-slate-300 font-medium">
              {claim.item_secret_details || "Tidak ada ciri khusus rahasia"}
            </p>
            <div className="mt-3 pt-3 border-t border-yellow-500/30">
              <span className="text-xs text-slate-500 uppercase">
                Deskripsi Umum:
              </span>
              <p className="text-xs text-slate-400 mt-1">
                {claim.item_description}
              </p>
            </div>
          </div>

          <div className="bg-blue-500/10 p-4 rounded-xl border border-blue-500/30">
            <h4 className="font-semibold mb-3 text-blue-400 flex items-center gap-2">
              <span>💬</span>
              Deskripsi dari Pengklaim
            </h4>
            <p className="text-sm text-slate-300">{claim.description}</p>
          </div>
        </div>

        {/* Match Percentage */}
        {claim.match_percentage && (
          <div
            className={`p-6 rounded-xl text-center mb-6 ${
              claim.match_percentage >= 70
                ? "bg-green-500/10 border-2 border-green-500/30"
                : "bg-yellow-500/10 border-2 border-yellow-500/30"
            }`}
          >
            <strong className="text-slate-300">Similarity Match:</strong>
            <div
              className={`text-5xl font-bold mt-2 ${
                claim.match_percentage >= 70
                  ? "text-green-400"
                  : "text-yellow-400"
              }`}
            >
              {claim.match_percentage}%
            </div>
          </div>
        )}

        {/* Verification Info */}
        {claim.verified_at && (
          <div className="bg-slate-900/50 p-4 rounded-xl border border-slate-700 mb-6">
            <strong className="text-slate-300 block mb-2">
              Informasi Verifikasi:
            </strong>
            <div className="space-y-1 text-sm text-slate-400">
              <div>
                ✅ Diverifikasi: {Helpers.formatDateTime(claim.verified_at)}
              </div>
              {claim.verified_by_name && (
                <div>👤 Oleh: {claim.verified_by_name}</div>
              )}
              {claim.notes && (
                <div className="mt-2 pt-2 border-t border-slate-700">
                  <strong className="text-slate-300">Catatan:</strong>
                  <p className="text-slate-400 mt-1">{claim.notes}</p>
                </div>
              )}
            </div>
          </div>
        )}

        {/* Case Closed Info */}
        {claim.berita_acara_no && (
          <div className="bg-green-500/10 border-2 border-green-500/30 p-4 rounded-xl">
            <div className="flex items-center gap-2 mb-3">
              <span className="text-3xl">📋</span>
              <strong className="text-green-400 text-lg">Case Closed</strong>
            </div>
            <div className="space-y-2 text-sm text-slate-300">
              <div>
                No. BA:{" "}
                <strong className="text-white text-lg">
                  {claim.berita_acara_no}
                </strong>
              </div>
              {claim.case_closed_at && (
                <div>
                  Ditutup: {Helpers.formatDateTime(claim.case_closed_at)}
                </div>
              )}
              {claim.case_closed_by_name && (
                <div>Oleh: {claim.case_closed_by_name}</div>
              )}
              {claim.case_closed_notes && (
                <div className="mt-2 pt-2 border-t border-green-500/30">
                  <strong>Catatan:</strong>
                  <p className="text-slate-400 mt-1">
                    {claim.case_closed_notes}
                  </p>
                </div>
              )}
            </div>
            {claim.bukti_serah_terima && (
              <a
                href={claim.bukti_serah_terima}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-block mt-3 px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition shadow-lg"
              >
                📄 Lihat Bukti Serah Terima
              </a>
            )}
          </div>
        )}

        {/* Proof Image */}
        {claim.proof_url && (
          <div className="mt-6">
            <strong className="text-slate-300 block mb-2">
              Bukti Pendukung:
            </strong>
            <img
              src={claim.proof_url}
              alt="Bukti Klaim"
              className="w-full h-64 object-cover rounded-xl border-2 border-slate-600"
            />
          </div>
        )}
      </div>
    )}
  </Modal>
);