ok

src/pages/InputDataPage.js

@@ -1,16 +1,8 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { useParams, Link, useLocation } from 'react-router-dom';
 import CameraModal from './CameraModal';
+import { fetchEntries } from '../api';
 
-// --- MOCK API LOGIC ---
-const fetchEntries = async (dataTypeId) => {
-  console.log(`Fetching entries for data_type_id: ${dataTypeId}`);
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve([]);
-    }, 500);
-  });
-};
 
 // Icons
 const BackIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" /></svg>);
@@ -44,6 +36,7 @@ export default function InputDataPage() {
         setLoadingEntries(true);
         try {
             const data = await fetchEntries(data_type_id);
+            console.log(data)
             setEntries(data);
         } catch (error) {
             console.error("Error fetch entries:", error);
@@ -135,6 +128,7 @@ export default function InputDataPage() {
     const renderField = (key, value) => {
         let type = "text";
         let options = [];
+
         if (typeof expectation[key] === "object" && expectation[key] !== null) {
             type = expectation[key].type;
             options = expectation[key].options || [];
@@ -142,12 +136,60 @@ export default function InputDataPage() {
             type = expectation[key] || "text";
         }
 
-        if (type === "date") return <input type="date" value={value} onChange={(e) => updateField(key, e.target.value)} className="mt-1 block w-full border border-gray-300 rounded-md p-1" />;
-        if (type === "selection") return <select value={value} onChange={(e) => updateField(key, e.target.value)} className="mt-1 block w-full border border-gray-300 rounded-md p-1">{options.map((opt, idx) => (<option key={idx} value={opt}>{opt}</option>))}</select>;
-        if (type === "number") return <input type="number" value={value} onChange={(e) => updateField(key, e.target.value)} className="mt-1 block w-full border border-gray-300 rounded-md p-1" />;
-        return <input type="text" value={value} onChange={(e) => updateField(key, e.target.value)} className="mt-1 block w-full border border-gray-300 rounded-md p-1" />;
+        const commonClass = "mt-1 block w-full border border-gray-300 rounded-md p-1";
+
+        if (type === "date") {
+            return (
+                <input
+                    type="date"
+                    value={value || ""}
+                    placeholder="Pilih tanggal"
+                    onChange={(e) => updateField(key, e.target.value)}
+                    className={commonClass}
+                />
+            );
+        }
+
+        if (type === "selection") {
+            return (
+                <select
+                    value={value || ""}
+                    onChange={(e) => updateField(key, e.target.value)}
+                    className={commonClass}
+                >
+                    <option disabled value="">-- Pilih salah satu --</option>
+                    {(options || []).map((opt, idx) => (
+                        <option key={idx} value={opt}>{opt}</option>
+                    ))}
+                </select>
+            );
+        }
+
+        if (type === "number") {
+            return (
+                <input
+                    type="number"
+                    value={value || ""}
+                    placeholder="Masukkan angka"
+                    onChange={(e) => updateField(key, e.target.value)}
+                    className={commonClass}
+                />
+            );
+        }
+
+        // Default: text input
+        return (
+            <input
+                type="text"
+                value={value || ""}
+                placeholder="Masukkan teks"
+                onChange={(e) => updateField(key, e.target.value)}
+                className={commonClass}
+            />
+        );
     };
 
+
     const toggleDelete = () => {
         const newResults = [...uploadResults];
         if (newResults[resultIndex]) {