Spaces:
Sleeping
Sleeping
| import { useEffect, useState } from "react"; | |
| import { Database, RefreshCw } from "lucide-react"; | |
| import { getVehicles } from "../services/api"; | |
| export default function VehicleTable() { | |
| const [vehicles, setVehicles] = useState([]); | |
| const [loading, setLoading] = useState(false); | |
| const [error, setError] = useState(""); | |
| async function fetchVehicles() { | |
| setLoading(true); | |
| setError(""); | |
| try { | |
| const res = await getVehicles(); | |
| if (res.success) { | |
| setVehicles(res.data || []); | |
| } else { | |
| setError(res.message || "Gagal memuat data"); | |
| } | |
| } catch { | |
| setError("Backend belum aktif atau endpoint tidak tersedia."); | |
| } finally { | |
| setLoading(false); | |
| } | |
| } | |
| useEffect(() => { | |
| fetchVehicles(); | |
| }, []); | |
| return ( | |
| <div className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden"> | |
| <div className="p-4 border-b border-slate-100 flex items-center justify-between"> | |
| <div className="flex items-center gap-2"> | |
| <Database className="w-4 h-4 text-blue-600" /> | |
| <h3 className="font-semibold text-slate-800 text-sm">Database Kendaraan</h3> | |
| </div> | |
| <button | |
| onClick={fetchVehicles} | |
| disabled={loading} | |
| className="text-slate-400 hover:text-blue-600 transition-colors cursor-pointer disabled:opacity-50" | |
| > | |
| <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} /> | |
| </button> | |
| </div> | |
| {error && ( | |
| <div className="px-4 py-3 text-sm text-red-600 bg-red-50"> | |
| {error} | |
| </div> | |
| )} | |
| {loading ? ( | |
| <div className="px-4 py-8 text-center text-sm text-slate-400"> | |
| Memuat data... | |
| </div> | |
| ) : vehicles.length === 0 ? ( | |
| <div className="px-4 py-8 text-center text-sm text-slate-400"> | |
| Belum ada data kendaraan. | |
| </div> | |
| ) : ( | |
| <div className="overflow-x-auto"> | |
| <table className="w-full text-sm"> | |
| <thead> | |
| <tr className="bg-slate-50 text-slate-500"> | |
| <th className="px-4 py-2.5 text-left font-medium">No</th> | |
| <th className="px-4 py-2.5 text-left font-medium">Plat</th> | |
| <th className="px-4 py-2.5 text-left font-medium">Pemilik</th> | |
| <th className="px-4 py-2.5 text-left font-medium">Jenis</th> | |
| <th className="px-4 py-2.5 text-left font-medium">Keterangan</th> | |
| </tr> | |
| </thead> | |
| <tbody className="divide-y divide-slate-100"> | |
| {vehicles.map((v, i) => ( | |
| <tr key={i} className="hover:bg-slate-50 transition-colors"> | |
| <td className="px-4 py-2.5 text-slate-400">{i + 1}</td> | |
| <td className="px-4 py-2.5 font-mono font-medium text-slate-800"> | |
| {v.plat} | |
| </td> | |
| <td className="px-4 py-2.5 text-slate-700">{v.nama_pemilik}</td> | |
| <td className="px-4 py-2.5 text-slate-600">{v.jenis_kendaraan}</td> | |
| <td className="px-4 py-2.5 text-slate-500">{v.keterangan}</td> | |
| </tr> | |
| ))} | |
| </tbody> | |
| </table> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |