Untitled

Oke! Berikut versi TailwindCSS dari komponen PropertyManager dan EditPropertyModal. Ini sudah rapi, responsif, dan bisa langsung kamu pakai di project React dengan Tailwind terpasang.

1. PropertyManager.jsx (dengan Tailwind)

import React, { useState } from 'react';
import EditPropertyModal from './EditPropertyModal';

const dummyProperties = [
  {
    id: 'prop01',
    name: 'Jl. Sudirman',
    price: 300,
    rent: 50,
    owner: null,
    mortgaged: false,
    group: 'Merah',
  },
  {
    id: 'prop02',
    name: 'Jl. Diponegoro',
    price: 250,
    rent: 40,
    owner: 'Ana',
    mortgaged: false,
    group: 'Merah',
  },
];

export default function PropertyManager() {
  const [properties, setProperties] = useState(dummyProperties);
  const [selectedProperty, setSelectedProperty] = useState(null);

  const handleSave = (updatedProperty) => {
    const updatedList = properties.map((p) =>
      p.id === updatedProperty.id ? updatedProperty : p
    );
    setProperties(updatedList);
    setSelectedProperty(null);
  };

  return (
    <div className="p-6">
      <h2 className="text-2xl font-bold mb-4">Kelola Harga Properti</h2>
      <div className="overflow-x-auto">
        <table className="min-w-full bg-white border rounded-md shadow">
          <thead>
            <tr className="bg-gray-100 text-left">
              <th className="p-3 border">Nama</th>
              <th className="p-3 border">Harga</th>
              <th className="p-3 border">Sewa</th>
              <th className="p-3 border">Pemilik</th>
              <th className="p-3 border">Gadai</th>
              <th className="p-3 border">Opsi</th>
            </tr>
          </thead>
          <tbody>
            {properties.map((prop) => (
              <tr key={prop.id} className="hover:bg-gray-50">
                <td className="p-3 border">{prop.name}</td>
                <td className="p-3 border">${prop.price}</td>
                <td className="p-3 border">${prop.rent}</td>
                <td className="p-3 border">{prop.owner || '-'}</td>
                <td className="p-3 border">{prop.mortgaged ? 'Ya' : 'Tidak'}</td>
                <td className="p-3 border">
                  <button
                    className="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600"
                    onClick={() => setSelectedProperty(prop)}
                  >
                    Edit
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {selectedProperty && (
        <EditPropertyModal
          property={selectedProperty}
          onSave={handleSave}
          onClose={() => setSelectedProperty(null)}
        />
      )}
    </div>
  );
}

2. EditPropertyModal.jsx (dengan Tailwind)

import React, { useState } from 'react';

export default function EditPropertyModal({ property, onSave, onClose }) {
  const [formData, setFormData] = useState({ ...property });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: name === 'price' || name === 'rent' ? parseInt(value) : value,
    }));
  };

  const handleCheckbox = (e) => {
    setFormData((prev) => ({
      ...prev,
      mortgaged: e.target.checked,
    }));
  };

  const handleSubmit = () => {
    onSave(formData);
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
      <div className="bg-white p-6 rounded-md shadow-lg w-full max-w-md">
        <h3 className="text-xl font-semibold mb-4">
          Edit Properti: {property.name}
        </h3>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium">Harga Beli</label>
            <input
              type="number"
              name="price"
              value={formData.price}
              onChange={handleChange}
              className="w-full px-3 py-2 border rounded mt-1"
            />
          </div>

          <div>
            <label className="block text-sm font-medium">Harga Sewa</label>
            <input
              type="number"
              name="rent"
              value={formData.rent}
              onChange={handleChange}
              className="w-full px-3 py-2 border rounded mt-1"
            />
          </div>

          <div>
            <label className="block text-sm font-medium">Pemilik</label>
            <input
              type="text"
              name="owner"
              value={formData.owner || ''}
              onChange={handleChange}
              className="w-full px-3 py-2 border rounded mt-1"
              placeholder="Kosongkan jika belum dimiliki"
            />
          </div>

          <div className="flex items-center space-x-2">
            <input
              type="checkbox"
              checked={formData.mortgaged}
              onChange={handleCheckbox}
              id="mortgaged"
            />
            <label htmlFor="mortgaged" className="text-sm">Properti Digadaikan</label>
          </div>
        </div>

        <div className="mt-6 flex justify-end space-x-3">
          <button
            className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
            onClick={onClose}
          >
            Batal
          </button>
          <button
            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
            onClick={handleSubmit}
          >
            Simpan
          </button>
        </div>
      </div>
    </div>
  );
}

3. Hasil:
	•	Tampilan modern dan clean
	•	Modal edit properti muncul di tengah layar
	•	Bisa ubah harga, sewa, pemilik, dan status gadai
	•	Tinggal hubungkan ke Firebase atau backend

Mau aku bantu lanjutkan:
	•	Tambah dropdown daftar pemain untuk owner
	•	Sinkronisasi ke Firestore
	•	Atau styling untuk mode gelap?

Silakan pilih!