From b1aa3bc0c7cd2ea676fe32f5df055020b7ef4836 Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Tue, 28 Jul 2026 22:00:02 +0000
Subject: [PATCH] Allow attaching a photo when adding a meter reading

---
 frontend/src/pages/Readings.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/pages/Readings.tsx b/frontend/src/pages/Readings.tsx
index 27b39c9..10c1a19 100644
--- a/frontend/src/pages/Readings.tsx
+++ b/frontend/src/pages/Readings.tsx
@@ -15,6 +15,7 @@ export default function Readings() {
   const [value, setValue] = useState('')
   const [date, setDate] = useState(new Date().toISOString().slice(0, 10))
   const [notes, setNotes] = useState('')
+  const [photo, setPhoto] = useState<File | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [info, setInfo] = useState<string | null>(null)
   const [saving, setSaving] = useState(false)
@@ -43,8 +44,10 @@ export default function Readings() {
     setInfo(null)
     try {
       const r = await api.createReading({ meter_id: Number(meterId), reading_value: parseFloat(value), reading_date: date, notes: notes || undefined })
+      if (photo) await api.uploadReadingPhoto(r.id, photo)
       setValue('')
       setNotes('')
+      setPhoto(null)
       if (r.warning) setInfo(r.warning)
       loadReadings()
       loadMeters()
@@ -101,6 +104,10 @@ export default function Readings() {
               <label>Notes</label>
               <input type="text" value={notes} onChange={e => setNotes(e.target.value)} placeholder="optional" />
             </div>
+            <div className="field" style={{ marginBottom: 0 }}>
+              <label>Photo</label>
+              <input type="file" accept="image/*" onChange={e => setPhoto(e.target.files?.[0] || null)} style={{ fontSize: 11 }} />
+            </div>
             <button className="btn btn-primary" onClick={submit} disabled={saving} style={{ marginBottom: 1 }}>
               {saving ? 'Saving…' : 'Add reading'}
             </button>