payment on hold

app/components/Drop.tsx

@@ -15,6 +15,8 @@ interface DropData {
   created_at: string
   start_time: string | null
   is_upcoming?: boolean
+  sales_fill?: number // Only confirmed sales
+  pending_fill?: number // Items on hold (pending orders)
 }
 
 interface User {
@@ -59,10 +61,17 @@ export default function Drop() {
       const response = await fetch('/api/drops/active')
       if (response.ok) {
         const data = await response.json()
-        setDrop(data)
+        // Handle both null response and actual drop data
+        setDrop(data) // data can be null if no active drop
+      } else {
+        // If response is not ok, log the error
+        const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
+        console.error('Error fetching active drop:', errorData)
+        setDrop(null)
       }
     } catch (error) {
       console.error('Error fetching active drop:', error)
+      setDrop(null)
     } finally {
       setLoading(false)
     }
@@ -285,6 +294,16 @@ export default function Drop() {
               {drop.unit} of {drop.size}
               {drop.unit} reserved
             </div>
+            {(() => {
+              const pendingFill = Number(drop.pending_fill) || 0;
+              console.log(`pending fill:${pendingFill}`)
+              return pendingFill > 0 && (
+                <div className="meta" style={{ fontSize: '12px', color: 'var(--muted)', marginTop: '4px' }}>
+                  {drop.unit === 'kg' ? pendingFill.toFixed(2) : Math.round(pendingFill)}
+                  {drop.unit} on hold (10 min checkout window)
+                </div>
+              )
+            })()}
           </>
         )}