add table for data history and remove x count of data readings on panel iot

components/IotPanelPage.tsx

@@ -308,13 +308,7 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
               className="rounded-lg border border-slate-300 bg-white px-2 py-1.5 text-sm text-slate-700 focus:ring-2 focus:ring-red-500 focus:border-red-500"
             />
           </span>
-          <span className="text-xs">
-            {summary
-              ? `${summary.count} pembacaan`
-              : dates.length === 0
-                ? 'Belum ada tanggal dengan data IoT'
-                : 'Tidak ada pembacaan pada tanggal ini'}
-          </span>
+
         </div>
       )}
 
@@ -561,6 +555,41 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
             </div>
           ))}
 
+      {selectedFlockId != null && dayRows.length > 0 && (
+        <article className={cardClass}>
+          <h2 className="mb-3 font-semibold text-slate-800">
+            <i className="fa-solid fa-table mr-2 text-slate-400" />
+            Data Histori Panel IoT · {formatDateId(selectedDate)}
+          </h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-sm">
+              <thead className="bg-slate-50 text-slate-600">
+                <tr>
+                  <th className="px-4 py-3 text-left font-semibold">Waktu</th>
+                  <th className="px-4 py-3 text-right font-semibold">Suhu Rata-rata</th>
+                  <th className="px-4 py-3 text-right font-semibold">Experience Suhu</th>
+                  <th className="px-4 py-3 text-right font-semibold">Kelembapan</th>
+                  <th className="px-4 py-3 text-right font-semibold">Angin</th>
+                  <th className="px-4 py-3 text-right font-semibold">Air Total</th>
+                </tr>
+              </thead>
+              <tbody>
+                {dayRows.map((row) => (
+                  <tr key={row.id} className="border-t border-slate-100">
+                    <td className="px-4 py-2">{formatTime(row.timestamp)}</td>
+                    <td className="px-4 py-2 text-right">{formatNumber(row.average_temperature)} °C</td>
+                    <td className="px-4 py-2 text-right">{formatNumber(row.experience_temperature)} °C</td>
+                    <td className="px-4 py-2 text-right">{formatNumber(row.humidity)} %</td>
+                    <td className="px-4 py-2 text-right">{formatNumber(row.wind_speed)} m/s</td>
+                    <td className="px-4 py-2 text-right">{formatNumber(row.water_total)} L</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </article>
+      )}
+
       {selectedChartKey &&
         (() => {
           const chart = SECONDARY_CHARTS.find((item) => item.key === selectedChartKey)!;