From 79663f47ce7ca2fe745ebcdc9b0674abb73da186 Mon Sep 17 00:00:00 2001
From: soulqan <soultan.agnar@gmail.com>
Date: Mon, 8 Jun 2026 13:08:51 +0700
Subject: [PATCH] Fix: status, dan refactor dan build error

---
 src/components/manage/ManageBin.tsx           |  55 ++++---
 src/lib/services/binService.ts                |  32 ++++
 src/lib/services/deriveNotificationService.ts |  71 +++++----
 src/pages/api/auth/[...nextauth].ts           |  10 +-
 src/pages/api/change-password.ts              |   7 +-
 src/pages/api/profile.ts                      |   6 +-
 src/pages/history/index.tsx                   |   5 -
 src/pages/profile/index.tsx                   |  17 +-
 src/types/database.ts                         |   9 +-
 src/views/dashboard/index.tsx                 |  61 ++-----
 src/views/history/index.tsx                   | 150 ------------------
 src/views/manage/index.tsx                    |  35 ++--
 src/views/monitoring/ActionView.tsx           |  18 ++-
 src/views/monitoring/index.tsx                |  33 ++--
 14 files changed, 216 insertions(+), 293 deletions(-)
 create mode 100644 src/lib/services/binService.ts
 delete mode 100644 src/pages/history/index.tsx
 delete mode 100644 src/views/history/index.tsx

diff --git a/src/components/manage/ManageBin.tsx b/src/components/manage/ManageBin.tsx
index 4d909c5..8d0ca6c 100644
--- a/src/components/manage/ManageBin.tsx
+++ b/src/components/manage/ManageBin.tsx
@@ -15,6 +15,7 @@ interface ManageBinProps {
 }
 
 export default function ManageBin({ isOpen, onClose, editData }: ManageBinProps) {
+  // FIX: Menambahkan distance ke dalam nilai awal state
   const [formData, setFormData] = useState<BinData>({
     id: "",
     gedung: "",
@@ -22,7 +23,8 @@ export default function ManageBin({ isOpen, onClose, editData }: ManageBinProps)
     ruang: "",
     capacity: 0,
     level: 0,
-    status: 'on'
+    status: 'on',
+    distance: 0 
   });
   const [error, setError] = useState<string | null>(null);
 
@@ -31,7 +33,7 @@ export default function ManageBin({ isOpen, onClose, editData }: ManageBinProps)
     if (editData) {
       setFormData(editData);
     } else {
-      // Reset form untuk create baru
+      // FIX: Menambahkan distance saat reset form untuk create baru
       setFormData({
         id: "",
         gedung: "",
@@ -39,7 +41,8 @@ export default function ManageBin({ isOpen, onClose, editData }: ManageBinProps)
         ruang: "",
         capacity: 0,
         level: 0,
-        status: 'on'
+        status: 'on',
+        distance: 0
       });
     }
     setError(null);
@@ -50,7 +53,6 @@ export default function ManageBin({ isOpen, onClose, editData }: ManageBinProps)
     setError(null);
     
     try {
-      // Validasi ID wajib untuk create bin baru
       if (!editData && !formData.id.trim()) {
         setError('ID Bin wajib diisi');
         return;
@@ -150,8 +152,8 @@ export default function ManageBin({ isOpen, onClose, editData }: ManageBinProps)
             </div>
           </div>
 
-          {/* Capacity dan Level */}
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {/* Capacity, Level, dan Distance */}
+          <div className="space-y-4">
             <div className="space-y-1">
               <label className="text-sm font-semibold text-gray-700 ml-1">Kapasitas (L)</label>
               <input 
@@ -163,16 +165,33 @@ export default function ManageBin({ isOpen, onClose, editData }: ManageBinProps)
                 required
               />
             </div>
-            <div className="space-y-1">
-              <label className="text-sm font-semibold text-emerald-600 ml-1">Level Isi (%)</label>
-              <input 
-                type="number" max="100" min="0"
-                className="w-full px-4 py-3 bg-gray-50 border border-emerald-100 rounded-xl text-sm font-bold focus:ring-2 focus:ring-emerald-500 outline-none"
-                placeholder="0-100"
-                value={formData.level}
-                onChange={(e) => setFormData({...formData, level: Number(e.target.value)})}
-                required
-              />
+            
+            {/* Grid Baru untuk Level dan Distance */}
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div className="space-y-1">
+                <label className="text-sm font-semibold text-emerald-600 ml-1">Level Isi (%)</label>
+                <input 
+                  type="number" max="100" min="0"
+                  className="w-full px-4 py-3 bg-gray-50 border border-emerald-100 rounded-xl text-sm font-bold focus:ring-2 focus:ring-emerald-500 outline-none"
+                  placeholder="0-100"
+                  value={formData.level}
+                  onChange={(e) => setFormData({...formData, level: Number(e.target.value)})}
+                  required
+                />
+              </div>
+              
+              {/* KOLOM BARU: Input untuk Distance */}
+              <div className="space-y-1">
+                <label className="text-sm font-semibold text-blue-600 ml-1">Jarak Sensor (cm)</label>
+                <input 
+                  type="number" min="0"
+                  className="w-full px-4 py-3 bg-gray-50 border border-blue-100 rounded-xl text-sm font-bold focus:ring-2 focus:ring-emerald-500 outline-none"
+                  placeholder="Contoh: 13"
+                  value={formData.distance}
+                  onChange={(e) => setFormData({...formData, distance: e.target.value ? Number(e.target.value) : 0})}
+                  required
+                />
+              </div>
             </div>
           </div>
 
@@ -182,7 +201,7 @@ export default function ManageBin({ isOpen, onClose, editData }: ManageBinProps)
             <select 
               className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl text-sm font-bold focus:ring-2 focus:ring-emerald-500 outline-none transition-all"
               value={formData.status}
-              onChange={(e) => setFormData({...formData, status: e.target.value as 'on' | 'off'})}
+              onChange={(e) => e.target.value && setFormData({...formData, status: e.target.value as 'on' | 'off'})}
             >
               <option value="on">ON (Active)</option>
               <option value="off">OFF (Inactive)</option>
@@ -205,4 +224,4 @@ export default function ManageBin({ isOpen, onClose, editData }: ManageBinProps)
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/lib/services/binService.ts b/src/lib/services/binService.ts
new file mode 100644
index 0000000..99ecfc8
--- /dev/null
+++ b/src/lib/services/binService.ts
@@ -0,0 +1,32 @@
+import { Bin } from '@/types/database';
+
+export const binService = {
+  /**
+   * Mengoreksi status ON/OFF berdasarkan detak jantung (heartbeat) IoT.
+   * Jika tidak ada kiriman data baru lebih dari 8 detik, paksa status jadi 'off'.
+   */
+  enforceHeartbeat(bin: Bin): Bin {
+    let isOnline = bin.status === 'on';
+
+    if (bin.lastUpdate) {
+      // Ekstrak waktu milidetik (aman untuk Timestamp Firestore maupun Date)
+      const lastUpdateMs = typeof bin.lastUpdate === 'object' && bin.lastUpdate && 'toMillis' in bin.lastUpdate
+        ? (bin.lastUpdate as any).toMillis()
+        : new Date(bin.lastUpdate as any).getTime();
+
+      const batasToleransi = 8 * 1000; // Jeda ketat 8 detik untuk interval IoT 5 detik
+      const waktuMaksimalUpdate = Date.now() - batasToleransi;
+
+      if (lastUpdateMs < waktuMaksimalUpdate) {
+        isOnline = false;
+      }
+    } else {
+      isOnline = false; // Jika tidak ada timestamp, otomatis anggap offline
+    }
+
+    return {
+      ...bin,
+      status: isOnline ? ('on' as const) : ('off' as const),
+    };
+  }
+};
\ No newline at end of file
diff --git a/src/lib/services/deriveNotificationService.ts b/src/lib/services/deriveNotificationService.ts
index a50ce49..a29336e 100644
--- a/src/lib/services/deriveNotificationService.ts
+++ b/src/lib/services/deriveNotificationService.ts
@@ -2,6 +2,7 @@ import { db } from '@/lib/firebase';
 import { collection, onSnapshot } from 'firebase/firestore';
 import { Bin } from '@/types/database';
 import { notificationReadService } from './notificationReadService';
+import { binService } from './binService'; // ✅ 1. IMPORT BINSERVICE DI SINI
 
 export interface DerivedNotification {
   id: string;
@@ -20,26 +21,27 @@ export interface DerivedNotification {
 }
 
 export const deriveNotificationService = {
-  // Subscribe to bins and derive notifications (ONLY FULL BINS - level >= 90)
+  // Subscribe to bins and derive notifications (ONLY FULL BINS - level >= 90 & status === 'on')
   subscribeToDerivedNotifications(
     callback: (notifications: DerivedNotification[]) => void
   ) {
     const unsubscribe = onSnapshot(collection(db, 'bins'), (snapshot) => {
-      const bins = snapshot.docs.map((doc) => ({
-        id: doc.id,
-        ...doc.data(),
-      })) as Bin[];
+      // ✅ 2. Bungkus dengan binService.enforceHeartbeat saat map data mentah
+      const bins = snapshot.docs.map((doc) => {
+        const rawBin = { id: doc.id, ...doc.data() } as Bin;
+        return binService.enforceHeartbeat(rawBin);
+      });
 
-      // Derive notifications from FULL bins only (level >= 90)
+      // Derive notifications dari tempat sampah yang PENUH DAN AKTIF saja
       const derivedNotifications = bins
-        .filter((bin) => bin.level >= 90) // Only full bins
+        .filter((bin) => bin.status === 'on' && bin.level >= 90) // ✅ Tambah cek status aktif
         .map((bin) => {
-          // Generate location dari gedung, lantai, ruang
           const location = `${bin.gedung} - ${bin.lantai} - ${bin.ruang}`;
           
-          // Convert lastUpdate ke Date jika ada, jika tidak gunakan waktu saat ini
           const timestamp = bin.lastUpdate 
-            ? (bin.lastUpdate.toDate ? bin.lastUpdate.toDate() : new Date(bin.lastUpdate))
+            ? (typeof bin.lastUpdate === 'object' && 'toDate' in bin.lastUpdate
+                ? (bin.lastUpdate as any).toDate()
+                : new Date(bin.lastUpdate as any))
             : new Date();
 
           return {
@@ -53,12 +55,12 @@ export const deriveNotificationService = {
             description: `${location} penuh (level ${bin.level}) - segera kosongkan`,
             level: bin.level,
             capacity: bin.capacity,
-            status: 'baru' as const, // All are new/unread
-            type: 'error' as const, // All are error (full)
+            status: 'baru' as const, 
+            type: 'error' as const, 
             timestamp: timestamp,
           } as DerivedNotification;
         })
-        .sort((a, b) => b.level - a.level); // Sort by level descending
+        .sort((a, b) => b.level - a.level);
 
       callback(derivedNotifications);
     });
@@ -66,7 +68,7 @@ export const deriveNotificationService = {
     return unsubscribe;
   },
 
-  // Get derived notification counts (ONLY FULL BINS - level >= 90) - Real-time with read status
+  // Get derived notification counts (ONLY FULL BINS) - Real-time dengan status baca
   subscribeToNotificationCounts(
     callback: (counts: { semua: number; baru: number; dibaca: number }) => void
   ) {
@@ -75,10 +77,11 @@ export const deriveNotificationService = {
 
     // Subscribe to bins
     const unsubscribeBins = onSnapshot(collection(db, 'bins'), (snapshot) => {
-      binsData = snapshot.docs.map((doc) => ({
-        id: doc.id,
-        ...doc.data(),
-      })) as Bin[];
+      // ✅ 3. Bungkus dengan binService.enforceHeartbeat di sini juga
+      binsData = snapshot.docs.map((doc) => {
+        const rawBin = { id: doc.id, ...doc.data() } as Bin;
+        return binService.enforceHeartbeat(rawBin);
+      });
 
       updateCounts();
     });
@@ -93,22 +96,20 @@ export const deriveNotificationService = {
     });
 
     const updateCounts = () => {
-      // Get only FULL bins (level >= 90)
-      const fullBins = binsData.filter((b) => b.level >= 90);
+      // ✅ 4. Filter counter hanya menghitung bin yang aktif 'on' dan penuh >= 90
+      const fullBins = binsData.filter((b) => b.status === 'on' && b.level >= 90);
       const fullBinIds = new Set(fullBins.map((b) => b.id));
 
-      // Clean up read notifications for bins that are no longer full
       notificationReadService.cleanupReadNotificationsForNonFullBins(
         fullBinIds
       );
 
-      // Only count read IDs that are still full bins
       const validReadIds = readIds.filter((id) => fullBinIds.has(id));
 
       callback({
         semua: fullBins.length,
-        baru: fullBins.length - validReadIds.length, // Full bins minus read ones
-        dibaca: validReadIds.length, // Only read notifications that are still full
+        baru: fullBins.length - validReadIds.length, 
+        dibaca: validReadIds.length, 
       });
     };
 
@@ -128,10 +129,11 @@ export const deriveNotificationService = {
 
     // Subscribe to bins
     const unsubscribeBins = onSnapshot(collection(db, 'bins'), (snapshot) => {
-      binsData = snapshot.docs.map((doc) => ({
-        id: doc.id,
-        ...doc.data(),
-      })) as Bin[];
+      // ✅ 5. Bungkus dengan binService.enforceHeartbeat di sini juga
+      binsData = snapshot.docs.map((doc) => {
+        const rawBin = { id: doc.id, ...doc.data() } as Bin;
+        return binService.enforceHeartbeat(rawBin);
+      });
 
       updateNotifications();
     });
@@ -143,24 +145,23 @@ export const deriveNotificationService = {
     });
 
     const updateNotifications = () => {
-      // Get only FULL bins (level >= 90)
-      const fullBins = binsData.filter((bin) => bin.level >= 90);
+      // ✅ 6. Filter daftar halaman notifikasi: Hanya ambil bin yang aktif dan penuh
+      const fullBins = binsData.filter((bin) => bin.status === 'on' && bin.level >= 90);
       const fullBinIds = new Set(fullBins.map((b) => b.id));
 
-      // Clean up read notifications for bins that are no longer full
       notificationReadService.cleanupReadNotificationsForNonFullBins(
         fullBinIds
       );
 
-      // Derive notifications from FULL bins only (level >= 90)
       const derivedNotifications = fullBins
         .map((bin) => {
           const location = `${bin.gedung} - ${bin.lantai} - ${bin.ruang}`;
           const isRead = readIds.includes(bin.id);
           
-          // Convert lastUpdate ke Date jika ada, jika tidak gunakan waktu saat ini
           const timestamp = bin.lastUpdate 
-            ? (bin.lastUpdate.toDate ? bin.lastUpdate.toDate() : new Date(bin.lastUpdate))
+            ? (typeof bin.lastUpdate === 'object' && 'toDate' in bin.lastUpdate
+                ? (bin.lastUpdate as any).toDate()
+                : new Date(bin.lastUpdate as any))
             : new Date();
 
           return {
@@ -193,4 +194,4 @@ export const deriveNotificationService = {
       unsubscribeRead();
     };
   },
-};
+};
\ No newline at end of file
diff --git a/src/pages/api/auth/[...nextauth].ts b/src/pages/api/auth/[...nextauth].ts
index 6d6e2d0..c8b1afd 100644
--- a/src/pages/api/auth/[...nextauth].ts
+++ b/src/pages/api/auth/[...nextauth].ts
@@ -1,4 +1,4 @@
-import NextAuth from "next-auth";
+import NextAuth, { NextAuthOptions } from "next-auth"; // ✅ Tambah import NextAuthOptions
 import CredentialsProvider from "next-auth/providers/credentials";
 import GoogleProvider from "next-auth/providers/google";
 import type { DefaultSession } from "next-auth";
@@ -20,7 +20,8 @@ declare module "next-auth" {
   }
 }
 
-export default NextAuth({
+// ✅ 1. Ekstrak konfigurasi ke variabel bernama authOptions dan berikan keyword 'export'
+export const authOptions: NextAuthOptions = {
   providers: [
     CredentialsProvider({
       name: "Credentials",
@@ -145,4 +146,7 @@ export default NextAuth({
       return session;
     },
   },
-});
+};
+
+// ✅ 2. Jalankan fungsi NextAuth menggunakan objek konfigurasi di atas
+export default NextAuth(authOptions);
\ No newline at end of file
diff --git a/src/pages/api/change-password.ts b/src/pages/api/change-password.ts
index 4920bbe..2a34b32 100644
--- a/src/pages/api/change-password.ts
+++ b/src/pages/api/change-password.ts
@@ -1,11 +1,12 @@
-import type { NextApiRequest, NextApiResponse } from "next";
+import { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
 import { db } from "@/lib/firebase";
 import { doc, getDoc, updateDoc, collection, query, where, getDocs, type DocumentReference, type DocumentData } from "firebase/firestore";
 import bcrypt from "bcryptjs";
+import { authOptions } from "./auth/[...nextauth]";// FIX: Diubah menjadi default import (tanpa kurung kurawal)
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res);
+  const session = await getServerSession(req, res, authOptions);
 
   if (!session || !session.user?.email) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -72,4 +73,4 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     console.error("Change password error:", error);
     return res.status(500).json({ message: "Gagal mengubah password" });
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/api/profile.ts b/src/pages/api/profile.ts
index 0a28f14..8a85243 100644
--- a/src/pages/api/profile.ts
+++ b/src/pages/api/profile.ts
@@ -2,9 +2,11 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
 import { db } from "@/lib/firebase";
 import { doc, getDoc, setDoc, serverTimestamp, collection, query, where, getDocs, type DocumentReference, type DocumentData } from "firebase/firestore";
+import { authOptions } from "./auth/[...nextauth]"; // 1. TAMBAHKAN IMPORT AUTHOPTIONS DI SINI
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res);
+  // 2. MASUKKAN authOptions sebagai argumen ketiga
+  const session = await getServerSession(req, res, authOptions);
 
   if (!session || !session.user?.email) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -81,4 +83,4 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
   res.setHeader("Allow", ["GET", "PUT"]);
   res.status(405).end(`Method ${req.method} Not Allowed`);
-}
+}
\ No newline at end of file
diff --git a/src/pages/history/index.tsx b/src/pages/history/index.tsx
deleted file mode 100644
index 46cc3c2..0000000
--- a/src/pages/history/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import HistoryView from '@/views/history/index';
-
-export default function HistoryPage() {
-  return <HistoryView />;
-}
\ No newline at end of file
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 76e6d0c..293c03a 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -42,7 +42,8 @@ export default function ProfilePage() {
     }
   };
 
-  const profileData = profile || session?.user;
+  // FIX: Lakukan casting ke ProfileShape agar TypeScript mengizinkan pembacaan properti .phone
+  const profileData = (profile || session?.user) as ProfileShape | undefined;
 
   return (
     <div className="p-3 sm:p-6">
@@ -57,12 +58,20 @@ export default function ProfilePage() {
               {profileData?.image ? (
                 <img src={profileData.image} alt="avatar" className="w-20 h-20 rounded-full object-cover sm:h-24 sm:w-24" />
               ) : (
-                <div className="w-20 h-20 rounded-full bg-emerald-100 flex items-center justify-center text-2xl font-bold text-emerald-600 sm:h-24 sm:w-24 sm:text-3xl">{(profileData?.name || "").split(" ").map((n:string)=>n[0]).slice(0,2).join("")}</div>
+                <div className="w-20 h-20 rounded-full bg-emerald-100 flex items-center justify-center text-2xl font-bold text-emerald-600 sm:h-24 sm:w-24 sm:text-3xl">
+                  {(profileData?.name || "")
+                    .split(" ")
+                    .filter(Boolean) // Menghindari substring kosong jika ada double space
+                    .map((n: string) => n[0])
+                    .slice(0, 2)
+                    .join("")
+                    .toUpperCase()} {/* Ditambah toUpperCase agar inisial huruf kapital bagus */}
+                </div>
               )}
               <div>
                 <h2 className="text-xl font-bold text-gray-800 sm:text-2xl">{profileData?.name}</h2>
                 <p className="text-xs text-gray-500 mt-0.5 sm:mt-1 sm:text-sm">{profileData?.email}</p>
-                {profileData?.phone && <p className="text-xs text-gray-500 sm:text-sm">Telepon: {profileData.phone}</p>}
+                {profileData?.phone && <p className="text-xs text-gray-500 sm:text-sm mt-1">Telepon: {profileData.phone}</p>}
               </div>
             </div>
 
@@ -82,4 +91,4 @@ export default function ProfilePage() {
       <ChangePasswordModal open={passwordOpen} onClose={() => setPasswordOpen(false)} />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/types/database.ts b/src/types/database.ts
index 0d9774e..76c391e 100644
--- a/src/types/database.ts
+++ b/src/types/database.ts
@@ -5,9 +5,10 @@ export interface Bin {
   gedung: string;
   lantai: string;
   ruang: string;
-  capacity: string | number;
-  level: number;
-  status: 'on' | 'off';
+  capacity: number;          // Diubah ke number sesuai di gambar (100)
+  distance: number;          // BARU: Ditambahkan sesuai di gambar (13)
+  level: number;             // Berwujud angka (46)
+  status: 'on' | 'off';      // Berwujud string ("on")
   lastUpdate?: Timestamp | Date | string | number | null;
 }
 
@@ -19,4 +20,4 @@ export interface TrashHistory {
   levelCaptured: number;
   status: 'Approved' | 'Rejected';
   timestamp: Timestamp | Date | string | number;
-}
+}
\ No newline at end of file
diff --git a/src/views/dashboard/index.tsx b/src/views/dashboard/index.tsx
index 118f119..50babb4 100644
--- a/src/views/dashboard/index.tsx
+++ b/src/views/dashboard/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useEffect } from 'react';
 import PageContainer from '@/components/layout/PageContainer'; 
 import PageHeader from '@/components/layout/PageHeader'; 
@@ -8,16 +10,24 @@ import { FiTrash2, FiCheckCircle, FiAlertTriangle, FiXCircle, FiWifiOff } from '
 import { formatDurationInHours, getPickupPriorityRanking } from '@/lib/services/historyAnalyticsService';
 import { subscribeHistoryRecords } from '@/lib/services/historyService';
 import type { HistoryRecord } from '@/lib/services/historyService';
+import type { Bin } from '@/types/database'; // ✅ Gunakan tipe data Bin murni dari database
+import { binService } from '@/lib/services/binService'; // ✅ 1. IMPORT SERVICE SINKRONISASI DI SINI
 
 export default function DashboardView() {
-  const [bins, setBins] = useState<Array<{ id: string; gedung?: string; lantai?: string | number; ruang?: string; level?: number; status?: string; capacity?: number; location?: string }>>([])
+  // FIX: Ubah tipe data state menjadi Bin[] agar aman dari Type Error TypeScript
+  const [bins, setBins] = useState<Bin[]>([]);
   const [loading, setLoading] = useState(true);
   const [historyRecords, setHistoryRecords] = useState<HistoryRecord[]>([]);
 
   useEffect(() => {
     const q = query(collection(db, "bins"));
     const unsubscribe = onSnapshot(q, (snapshot) => {
-      const binsData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+      // ✅ 2. KOREKSI STATUS DI PINTU GERBANG FIRESTORE (Jika > 8 detik mati, paksa status 'off')
+      const binsData = snapshot.docs.map(doc => {
+        const rawBin = { id: doc.id, ...doc.data() } as Bin;
+        return binService.enforceHeartbeat(rawBin);
+      });
+      
       setBins(binsData);
       setLoading(false);
     });
@@ -29,13 +39,13 @@ export default function DashboardView() {
     return () => unsub();
   }, []);
 
+  // LOGIKA HITUNG STATISTIK - Otomatis Akurat karena status bins sudah diproses binService
   const stats = {
     total: bins.length,
-    // Update pengecekan menggunakan b.level
     empty: bins.filter(b => b.status === 'on' && (b.level ?? 0) < 20).length,
     nearlyFull: bins.filter(b => b.status === 'on' && (b.level ?? 0) >= 70 && (b.level ?? 0) < 90).length,
     full: bins.filter(b => b.status === 'on' && (b.level ?? 0) >= 90).length,
-    offline: bins.filter(b => b.status === 'off').length,
+    offline: bins.filter(b => b.status === 'off').length, // Otomatis bertambah jika alat mati suri
   };
 
   if (loading) return (
@@ -73,38 +83,7 @@ export default function DashboardView() {
         </div>
       )}
 
-      {/* 3. Monitoring Real-time */}
-      {/* <div className="space-y-4">
-        <div className="flex flex-col">
-          <h2 className="text-xl font-black text-gray-800">Monitoring Real-time</h2>
-          <p className="text-xs text-gray-400">
-            {searchQuery ? `Hasil pencarian untuk "${searchQuery}"` : "Tempat sampah yang memerlukan perhatian"}
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {filteredBins.length > 0 ? (
-            filteredBins.map((bin) => (
-              <BinCard
-                key={bin.id}
-                id={bin.id}
-                gedung={bin.gedung || ''}
-                lantai={String(bin.lantai || '')}
-                ruang={bin.ruang || ''}
-                level={bin.level || 0}
-                status={bin.status === 'on' ? 'on' : 'off'}
-                capacity={bin.capacity || 0}
-              />
-            ))
-          ) : (
-            <div className="col-span-full py-20 text-center text-gray-400 italic text-sm border border-dashed border-gray-200 rounded-3xl">
-              Data tidak ditemukan...
-            </div>
-          )}
-        </div>
-      </div> */}
-
-      {/* 4. Prioritas Pengambilan - Leaderboard */}
+      {/* 3. Prioritas Pengambilan - Leaderboard */}
       <div className="mt-4 sm:mt-8">
         <div className="mb-2 flex flex-col gap-0.5 sm:mb-4 sm:flex-row sm:items-end sm:justify-between sm:gap-1">
           <h2 className="text-base font-black text-gray-800 sm:text-lg">Prioritas Pengambilan</h2>
@@ -113,6 +92,7 @@ export default function DashboardView() {
 
         <div className="grid grid-cols-2 gap-2 sm:gap-4 lg:grid-cols-1">
           {(() => {
+            // Algoritma ranking otomatis menggunakan data bins yang statusnya sudah valid
             const ranking = getPickupPriorityRanking(bins, historyRecords).slice(0, 10);
 
             if (!ranking || ranking.length === 0) return (
@@ -150,13 +130,6 @@ export default function DashboardView() {
                     </div>
                   </div>
 
-                  {/* Reason
-                  {r.reason && (
-                    <div className="text-xs text-gray-600 mt-2 italic">
-                      {r.reason}
-                    </div>
-                  )} */}
-
                   {/* Full Age */}
                   {r.fullAgeMinutes != null && (
                     <div className="text-xs text-orange-600 font-semibold mt-1">
@@ -182,4 +155,4 @@ export default function DashboardView() {
       </div>
     </PageContainer>
   );
-}
+}
\ No newline at end of file
diff --git a/src/views/history/index.tsx b/src/views/history/index.tsx
deleted file mode 100644
index 6d90110..0000000
--- a/src/views/history/index.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { FiBarChart2, FiMapPin, FiList } from 'react-icons/fi';
-import TrendChart from '@/components/history/TrendChart';
-import { subscribeBinsToHistoryHourly, subscribeHistoryRecords, type HistoryRecord } from '@/lib/services/historyService';
-import {
-  FULL_THRESHOLD,
-  LOCATION_OPTIONS,
-  formatDateInput,
-  getChartData,
-  getChartPoints,
-  getFilteredRecords,
-  getPeakHour,
-  getTopFullLocations,
-  shortenId,
-} from '@/lib/services/historyAnalyticsService';
-
-export default function HistoryView() {
-  const [historyRecords, setHistoryRecords] = useState<HistoryRecord[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [selectedLocation, setSelectedLocation] = useState('Semua Tempat Sampah');
-  const [startDate, setStartDate] = useState(() => formatDateInput(new Date(Date.now() - 6 * 24 * 60 * 60 * 1000)));
-  const [endDate, setEndDate] = useState(() => formatDateInput(new Date()));
-
-  useEffect(() => {
-    const unsubscribe = subscribeBinsToHistoryHourly();
-    return () => unsubscribe();
-  }, []);
-
-  useEffect(() => {
-    const unsubscribe = subscribeHistoryRecords(
-      (data) => {
-        setHistoryRecords(data);
-        setLoading(false);
-      },
-      (error) => {
-        console.error('Firestore Error:', error);
-        setLoading(false);
-      }
-    );
-
-    return () => unsubscribe();
-  }, []);
-
-  const filteredRecords = useMemo(
-    () => getFilteredRecords(historyRecords, selectedLocation, startDate, endDate),
-    [historyRecords, selectedLocation, startDate, endDate]
-  );
-
-  const chartData = useMemo(() => getChartData(filteredRecords, startDate, endDate), [filteredRecords, startDate, endDate]);
-  const chartPoints = useMemo(() => getChartPoints(chartData), [chartData]);
-  const latestRecord = filteredRecords.length > 0 ? filteredRecords[filteredRecords.length - 1] : null;
-  const peakHour = useMemo(() => getPeakHour(filteredRecords), [filteredRecords]);
-  const topFullLocations = useMemo(() => getTopFullLocations(filteredRecords), [filteredRecords]);
-
-  if (loading) return <div className="py-8 text-center text-gray-500">Memuat log riwayat sampah...</div>;
-
-  return (
-    <div className="space-y-3 py-1 sm:space-y-6 sm:py-2">
-      <h1 className="text-xl font-bold text-gray-800 sm:text-2xl">Analitik Bin</h1>
-
-      <section className="flex flex-col gap-2 sm:gap-4 lg:flex-row lg:flex-wrap">
-        <select
-          value={selectedLocation}
-          onChange={(e) => setSelectedLocation(e.target.value)}
-          className="w-full rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-[11px] text-gray-700 outline-none transition focus:border-emerald-400 sm:py-2.5 sm:text-sm lg:min-w-[280px]"
-        >
-          {LOCATION_OPTIONS.map((loc) => (
-            <option key={loc} value={loc}>
-              {loc}
-            </option>
-          ))}
-        </select>
-
-        <div className="flex flex-wrap items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2 text-[11px] text-gray-600 sm:text-xs">
-          <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="bg-transparent outline-none" />
-          <span>sampai</span>
-          <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="bg-transparent outline-none" />
-        </div>
-      </section>
-
-      <section className="grid grid-cols-2 gap-2 sm:gap-4 xl:grid-cols-3">
-        <article className="rounded-2xl border border-gray-200 bg-white p-4 sm:p-7">
-          <div className="mb-4 flex items-center justify-between sm:mb-8">
-            <p className="font-semibold text-gray-700">Rata-rata Kapasitas</p>
-            <FiBarChart2 className="text-emerald-500" size={28} />
-          </div>
-          <p className="text-3xl font-bold text-gray-900 sm:text-5xl">{chartData.length > 0 ? chartData[chartData.length - 1].avg : 0}%</p>
-          <p className="mt-1.5 text-xs text-gray-600 sm:mt-2 sm:text-sm">Berdasarkan data filter terakhir</p>
-        </article>
-
-        <article className="rounded-2xl border border-gray-200 bg-white p-4 sm:p-7">
-          <div className="mb-4 flex items-center justify-between sm:mb-8">
-            <p className="font-semibold text-gray-700">Total Aktivitas</p>
-            <FiList className="text-blue-500" size={28} />
-          </div>
-          <p className="text-3xl font-bold text-gray-900 sm:text-5xl">{filteredRecords.length}</p>
-          <p className="mt-1.5 text-xs text-gray-600 sm:mt-2 sm:text-sm">Jumlah log yang tercatat</p>
-        </article>
-
-        <article className="col-span-2 rounded-2xl border border-gray-200 bg-white p-4 xl:col-span-1 sm:p-7">
-          <div className="mb-4 flex items-center justify-between sm:mb-8">
-            <p className="font-semibold text-gray-700">Log Terbaru</p>
-            <FiMapPin className="text-amber-500" size={28} />
-          </div>
-          <p className="text-xl font-bold text-gray-900 sm:text-2xl">{latestRecord ? latestRecord.location : '-'}</p>
-          <p className="mt-1.5 text-xs text-gray-600 sm:mt-2 sm:text-sm">{latestRecord ? `BIN: ${shortenId(latestRecord.binId)}` : 'BIN: -'}</p>
-        </article>
-      </section>
-
-      <section className="grid grid-cols-1 gap-2 sm:gap-4 lg:grid-cols-2">
-        <article className="rounded-2xl border border-gray-200 bg-white p-4 sm:p-7">
-          <p className="font-semibold text-gray-700">Jam Sibuk</p>
-          <p className="mt-2 text-2xl font-bold text-gray-900 sm:mt-3 sm:text-3xl">{peakHour ? peakHour.label : '-'}</p>
-          <p className="mt-1.5 text-xs text-gray-600 sm:mt-2 sm:text-sm">{peakHour ? `${peakHour.count} log pada jam ini` : 'Belum ada data log'}</p>
-        </article>
-
-        <article className="rounded-2xl border border-gray-200 bg-white p-4 sm:p-7">
-          <p className="font-semibold text-gray-700">Top Lokasi Sering Penuh</p>
-          {topFullLocations.length > 0 ? (
-            <div className="mt-4 space-y-3">
-              {topFullLocations.map((item, index) => (
-                <div key={item.location} className="flex items-center justify-between rounded-xl bg-amber-50 px-3 py-2.5 sm:px-4 sm:py-3">
-                  <p className="text-xs font-medium text-gray-800 sm:text-sm">
-                    {index + 1}. {item.location}
-                  </p>
-                  <p className="text-xs font-bold text-amber-700 sm:text-sm">{item.count}x</p>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <p className="mt-2 text-xs text-gray-600 sm:mt-3 sm:text-sm">Belum ada lokasi dengan kapasitas {FULL_THRESHOLD}% ke atas.</p>
-          )}
-        </article>
-      </section>
-
-      <section className="rounded-2xl border border-gray-200 bg-white p-4 sm:p-7">
-        <h2 className="mb-3 text-lg font-bold text-gray-800 sm:mb-6 sm:text-2xl">Tren Kapasitas Sampah</h2>
-        <TrendChart chartData={chartData} chartPoints={chartPoints} />
-      </section>
-
-      <section className="rounded-2xl border border-emerald-100 bg-emerald-50 p-3 text-emerald-800 sm:p-6">
-        <h3 className="mb-2 text-base font-bold sm:text-lg">Tentang Dashboard Analitik</h3>
-        <p className="text-xs leading-relaxed sm:text-sm">
-          Dashboard ini menampilkan analisis real-time pengisian sampah di seluruh lokasi. Gunakan filter <strong>lokasi</strong> dan <strong>tanggal</strong> untuk melihat metrik spesifik. 
-          Pantau <strong>Jam Sibuk</strong> untuk mengetahui periode puncak pengumpulan, dan <strong>Top Lokasi Sering Penuh</strong> untuk prioritas pengangkutan. Grafik tren membantu merencanakan jadwal maintenance yang lebih efisien.
-        </p>
-      </section>
-    </div>
-  );
-}
diff --git a/src/views/manage/index.tsx b/src/views/manage/index.tsx
index 66ebcf8..172b458 100644
--- a/src/views/manage/index.tsx
+++ b/src/views/manage/index.tsx
@@ -1,11 +1,14 @@
+'use client';
+
 import { useState, useEffect } from 'react';
 import PageContainer from '@/components/layout/PageContainer'; 
-import PageHeader from '@/components/layout/PageHeader'; // Import PageHeader
+import PageHeader from '@/components/layout/PageHeader'; 
 import { db } from '@/lib/firebase';
 import { collection, onSnapshot, query, deleteDoc, doc } from 'firebase/firestore';
 import { useSearch } from '@/context/SearchContext';
 import { FiPlus, FiEdit2, FiTrash2 } from 'react-icons/fi';
 import ManageBin, { BinData } from '@/components/manage/ManageBin';
+import { binService } from '@/lib/services/binService'; // ✅ 1. IMPORT SERVICE JANTUNG DI SINI
 
 export default function ManageView() {
   const [bins, setBins] = useState<BinData[]>([]);
@@ -17,10 +20,17 @@ export default function ManageView() {
   useEffect(() => {
     const q = query(collection(db, "bins"));
     const unsubscribe = onSnapshot(q, (snapshot) => {
-      const binsData = snapshot.docs.map(doc => ({ 
-        firestoreId: doc.id, 
-        ...doc.data() 
-      } as BinData));
+      // ✅ 2. BUNGKUS DENGAN ENFORCEHEARTBEAT DI PINTU GERBANG FIRESTORE
+      const binsData = snapshot.docs.map(doc => {
+        const rawBin = { firestoreId: doc.id, ...doc.data() } as any;
+        const processedBin = binService.enforceHeartbeat(rawBin);
+        
+        return {
+          ...processedBin,
+          firestoreId: doc.id // Pastikan ID dokumen Firestore tetap menempel untuk keperluan Delete/Edit
+        } as BinData;
+      });
+      
       setBins(binsData);
       setLoading(false);
     });
@@ -33,6 +43,7 @@ export default function ManageView() {
     }
   };
 
+  // LOGIKA FILTER PENCARIAN - Tetap Asli
   const filteredBins = bins.filter((bin) => {
     const searchTarget = `${bin.ruang} ${bin.lantai} ${bin.gedung} ${bin.id}`.toLowerCase();
     return searchTarget.includes(searchQuery.toLowerCase());
@@ -48,7 +59,7 @@ export default function ManageView() {
 
   return (
     <PageContainer>
-      {/* Header Section menggunakan PageHeader */}
+      {/* Header Section */}
       <div className="flex flex-col gap-2.5 md:flex-row md:items-center md:justify-between sm:gap-3">
         <PageHeader 
           title="Manage Bin" 
@@ -62,7 +73,7 @@ export default function ManageView() {
         </button>
       </div>
 
-      {/* Table Section */}
+      {/* Table Section (Desktop) */}
       <div className="hidden overflow-hidden rounded-[32px] border border-gray-100 bg-white shadow-sm sm:block">
         <div className="overflow-x-auto">
           <table className="w-full border-collapse">
@@ -82,7 +93,8 @@ export default function ManageView() {
             <tbody className="divide-y divide-gray-50">
               {filteredBins.map((bin) => {
                 const level = bin.level || 0;
-                const isOnline = bin.status === 'on';
+                // Status ini otomatis akurat (menjadi false jika IoT mati lebih dari 8 detik)
+                const isOnline = bin.status === 'on'; 
 
                 return (
                   <tr key={bin.firestoreId} className="hover:bg-gray-50/40 transition-colors">
@@ -107,7 +119,7 @@ export default function ManageView() {
                       <span className={`px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest border ${
                         isOnline ? 'border-emerald-200 text-emerald-500 bg-emerald-50' : 'border-red-200 text-red-500 bg-red-50'
                       }`}>
-                        {bin.status || 'OFF'}
+                        {isOnline ? 'ON' : 'OFF'}
                       </span>
                     </td>
 
@@ -130,6 +142,7 @@ export default function ManageView() {
         </div>
       </div>
 
+      {/* Card Section (Mobile) */}
       <div className="space-y-2 sm:hidden">
         {filteredBins.length === 0 ? (
           <div className="rounded-3xl border border-dashed border-gray-200 bg-white p-8 text-center text-gray-400 italic">
@@ -151,7 +164,7 @@ export default function ManageView() {
                   <span className={`rounded-lg px-2 py-0.5 text-[9px] font-black uppercase tracking-widest border sm:px-2.5 sm:py-1 sm:text-[10px] ${
                     isOnline ? 'border-emerald-200 text-emerald-500 bg-emerald-50' : 'border-red-200 text-red-500 bg-red-50'
                   }`}>
-                    {bin.status || 'OFF'}
+                    {isOnline ? 'ON' : 'OFF'}
                   </span>
                 </div>
 
@@ -198,4 +211,4 @@ export default function ManageView() {
       />
     </PageContainer>
   );
-}
+}
\ No newline at end of file
diff --git a/src/views/monitoring/ActionView.tsx b/src/views/monitoring/ActionView.tsx
index f47ce93..3daa3c1 100644
--- a/src/views/monitoring/ActionView.tsx
+++ b/src/views/monitoring/ActionView.tsx
@@ -26,6 +26,7 @@ import {
   FiBarChart2 
 } from 'react-icons/fi';
 import { useRouter } from 'next/router';
+import { binService } from '@/lib/services/binService'; // ✅ 1. IMPORT BINSERVICE DI SINI
 
 export default function ActionView({ id }: { id: string }) {
   const router = useRouter();
@@ -57,7 +58,10 @@ export default function ActionView({ id }: { id: string }) {
     if (!id) return;
     const unsubscribe = onSnapshot(doc(db, "bins", id), (docSnap) => {
       if (docSnap.exists()) {
-        setBinData({ id: docSnap.id, ...docSnap.data() } as Bin);
+        const rawBin = { id: docSnap.id, ...docSnap.data() } as Bin;
+        
+        // ✅ 2. SINKRONISASI STATUS DI SINI (Memastikan status 'on'/'off' jujur dalam hitungan detik)
+        setBinData(binService.enforceHeartbeat(rawBin));
       }
     });
     return () => unsubscribe();
@@ -107,7 +111,7 @@ export default function ActionView({ id }: { id: string }) {
         location: `${binData.gedung} - ${binData.lantai} (${binData.ruang})`,
         levelCaptured: currentLevel,
         status: 'Approved',
-        timestamp: serverTimestamp()
+        timestamp: serverTimestamp() as any
       };
 
       await addDoc(collection(db, "history"), historyData);
@@ -175,8 +179,14 @@ export default function ActionView({ id }: { id: string }) {
               <p className="text-[9px] font-bold text-emerald-600 uppercase tracking-widest mb-2 flex items-center gap-2 sm:text-[10px]">
                 <FiBarChart2 /> Real-time
               </p>
-              <p className={`font-black text-lg tracking-tighter sm:text-2xl ${binData && binData.level < 20 ? 'text-emerald-500' : 'text-orange-500'}`}>
+              {/* Tambahan visual dinamis jika alat offline secara mendadak */}
+              <p className={`font-black text-lg tracking-tighter sm:text-2xl ${
+                binData?.status === 'off' 
+                  ? 'text-gray-400 line-through' 
+                  : (binData && binData.level < 20 ? 'text-emerald-500' : 'text-orange-500')
+              }`}>
                 {binData ? `${binData.level}%` : '--%'}
+                {binData?.status === 'off' && <span className="text-[10px] block font-medium tracking-normal text-red-500 mt-0.5">⚠️ Perangkat Offline</span>}
               </p>
             </div>
           </div>
@@ -232,4 +242,4 @@ export default function ActionView({ id }: { id: string }) {
       </div>
     </PageContainer>
   );
-}
+}
\ No newline at end of file
diff --git a/src/views/monitoring/index.tsx b/src/views/monitoring/index.tsx
index 30e5d0d..f982cad 100644
--- a/src/views/monitoring/index.tsx
+++ b/src/views/monitoring/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useEffect } from 'react';
 import PageContainer from '@/components/layout/PageContainer'; 
 import PageHeader from '@/components/layout/PageHeader'; 
@@ -7,9 +9,11 @@ import { useSearch } from '@/context/SearchContext';
 import BinCard from '@/components/dashboard/BinCard';
 import { FiFilter, FiInfo } from 'react-icons/fi';
 import type { Bin } from '@/types/database';
+import { binService } from '@/lib/services/binService'; // ✅ 1. IMPORT SERVICE SINKRONISASI DI SINI
 
 export default function MonitoringView() {
-  const [bins, setBins] = useState<Bin[]>([]);
+  // Intersection Type agar menampung properti firestoreId secara legal
+  const [bins, setBins] = useState<(Bin & { firestoreId: string })[]>([]);
   const [loading, setLoading] = useState(true);
   const { searchQuery } = useSearch(); 
   
@@ -18,17 +22,25 @@ export default function MonitoringView() {
   useEffect(() => {
     const q = query(collection(db, "bins"));
     const unsubscribe = onSnapshot(q, (snapshot) => {
-      const binsData = snapshot.docs.map(doc => ({ 
-        firestoreId: doc.id, 
-        ...doc.data() 
-      }));
+      const binsData = snapshot.docs.map(doc => {
+        const rawBin = { firestoreId: doc.id, ...doc.data() } as Bin & { firestoreId: string };
+        
+        // ✅ 2. KOREKSI STATUS DI SINI (Jika > 8 detik tak kirim data, status otomatis dibalik jadi 'off')
+        const processedBin = binService.enforceHeartbeat(rawBin);
+        
+        return {
+          ...processedBin,
+          firestoreId: doc.id // Pastikan ID dokumen Firestore tetap menempel
+        };
+      });
+      
       setBins(binsData);
       setLoading(false);
     });
     return () => unsubscribe();
   }, []);
 
-  // LOGIKA FILTER GABUNGAN (Search + Dropdown)
+  // LOGIKA FILTER GABUNGAN (Search + Dropdown) - 100% TETAP ASLI TANPA PERUBAHAN
   const filteredBins = bins.filter((bin) => {
     // 1. Filter Search (Menggunakan variabel baru: gedung, lantai, ruang)
     const searchTarget = `${bin.gedung || ''} ${bin.lantai || ''} ${bin.ruang || ''} ${bin.id || ''}`.toLowerCase();
@@ -42,7 +54,7 @@ export default function MonitoringView() {
     else if (statusFilter === "Hampir Penuh") matchesStatus = bin.status === 'on' && currentLevel >= 70 && currentLevel < 90;
     else if (statusFilter === "Terisi") matchesStatus = bin.status === 'on' && currentLevel > 0 && currentLevel < 70;
     else if (statusFilter === "Kosong") matchesStatus = bin.status === 'on' && currentLevel <= 0;
-    else if (statusFilter === "Offline") matchesStatus = bin.status === 'off';
+    else if (statusFilter === "Offline") matchesStatus = bin.status === 'off'; // Otomatis sinkron dengan binService
 
     return matchesSearch && matchesStatus;
   });
@@ -96,14 +108,15 @@ export default function MonitoringView() {
         <div className="grid grid-cols-2 gap-2 sm:grid-cols-2 sm:gap-4 xl:grid-cols-3">
           {filteredBins.map((bin) => (
             <BinCard
-              key={bin.firestoreId}
+              key={bin.firestoreId} 
               id={bin.id}
               gedung={bin.gedung}
               lantai={bin.lantai}
               ruang={bin.ruang}
               level={bin.level}
-              status={bin.status}
+              status={bin.status} // Otomatis akurat terkirim ke komponen UI kartu
               capacity={bin.capacity}
+              distance={bin.distance}
             />
           ))}
         </div>
@@ -114,4 +127,4 @@ export default function MonitoringView() {
       )}
     </PageContainer>
   );
-}
+}
\ No newline at end of file