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

// assets/js/pages/admin/modals/CreateItemModal.js

const CreateItemModal = ({ state, handlers }) => {
  const {
    showCreateItemModal,
    setShowCreateItemModal,
    photoPreview,
    loading,
    categories,
  } = state;
  const { handleCreateItem, handlePhotoChange } = handlers;

  return (
    <Modal
      isOpen={showCreateItemModal}
      onClose={() => {
        setShowCreateItemModal(false);
        state.setPhotoPreview(null);
      }}
      title="➕ Tambah Barang Baru"
      size="large"
    >
      <form onSubmit={handleCreateItem} className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Nama Barang *
            </label>
            <input
              type="text"
              name="name"
              required
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              placeholder="Contoh: Dompet Kulit Coklat"
            />
          </div>

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Kategori *
            </label>
            <select
              name="category_id"
              required
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
            >
              <option value="">Pilih Kategori</option>

              {/* UBAH BAGIAN INI */}
              {categories && categories.length > 0 ? (
                categories.map((cat) => (
                  <option key={cat.id} value={cat.id}>
                    {cat.name}
                  </option>
                ))
              ) : (
                <option disabled>Memuat kategori...</option>
              )}
            </select>
          </div>
        </div>

        <div>
          <label className="block font-semibold mb-2 text-slate-300">
            Foto Barang
          </label>
          <input
            type="file"
            name="photo"
            accept="image/*"
            onChange={handlePhotoChange}
            className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700 focus:outline-none"
          />
          {photoPreview && (
            <img
              src={photoPreview}
              alt="Preview"
              className="mt-3 w-full h-48 object-cover rounded-xl border-2 border-blue-500"
            />
          )}
        </div>

        <div>
          <label className="block font-semibold mb-2 text-slate-300">
            Lokasi Ditemukan *
          </label>
          <input
            type="text"
            name="location"
            required
            className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
            placeholder="Contoh: Perpustakaan Lantai 2"
          />
        </div>

        <div>
          <label className="block font-semibold mb-2 text-slate-300">
            Deskripsi Umum *
          </label>
          <textarea
            name="description"
            required
            rows="3"
            className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
            placeholder="Deskripsi umum barang..."
          />
        </div>

        <div>
          <label className="block font-semibold mb-2 text-slate-300">
            Ciri Khusus Rahasia * 🔒
          </label>
          <textarea
            name="secret_details"
            required
            rows="3"
            className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
            placeholder="Ciri khusus untuk verifikasi klaim..."
          />
          <p className="text-xs text-yellow-400 mt-1">
            ⚠️ Info ini RAHASIA untuk verifikasi klaim
          </p>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Tanggal Ditemukan *
            </label>
            <input
              type="date"
              name="date_found"
              required
              max={new Date().toISOString().split("T")[0]}
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
            />
          </div>

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Kontak Pelapor *
            </label>
            <input
              type="text"
              name="reporter_contact"
              required
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              placeholder="08123456789"
            />
          </div>
        </div>

        <div>
          <label className="block font-semibold mb-2 text-slate-300">
            Nama Pelapor *
          </label>
          <input
            type="text"
            name="reporter_name"
            required
            className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
            placeholder="Nama lengkap pelapor"
          />
        </div>

        <button
          type="submit"
          disabled={loading}
          className="w-full px-4 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl hover:from-green-700 hover:to-green-800 transition font-semibold shadow-lg disabled:from-slate-600 disabled:to-slate-700"
        >
          {loading ? "⏳ Menyimpan..." : "✅ Simpan Barang"}
        </button>
      </form>
    </Modal>
  );
};