add error handling on saving bill

pages/booking/[uuid]/bill.tsx

@@ -107,6 +107,8 @@ export default function BillPage({
     booking.bill?.rate || MILAGE_RATES.EXTERN_LTE_200
   )
   const [status, setStatus] = useState(booking.bill?.status)
+  const [storingInProgress, setStoringInProgress] = useState(false)
+  const [storingError, setStoringError] = useState(null)
   const milage =
     (0 < milageStart && milageStart < milageEnd && milageEnd - milageStart) || 0
   const total =
@@ -118,16 +120,25 @@ export default function BillPage({
 
   const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
-    const bill = await saveBill(booking, {
-      milageStart,
-      milageEnd,
-      milage,
-      rate,
-      status,
-    })
+    setStoringInProgress(true)
+    setStoringError(null)
 
-    booking.bill = bill
-    setBooking(booking)
+    try {
+      const bill = await saveBill(booking, {
+        milageStart,
+        milageEnd,
+        milage,
+        rate,
+        status,
+      })
+
+      booking.bill = bill
+      setBooking(booking)
+    } catch (error) {
+      setStoringError(error.toString())
+      console.error('Failed to store booking', error)
+    }
+    setStoringInProgress(false)
   }
 
   return (
@@ -235,7 +246,14 @@ export default function BillPage({
 
             <Input label="Summe" name="milage" readOnly value={total} />
           </div>
-          <button type="submit" className="btn btn-blue">
+          {storingError && (
+            <div className="error-message flex-grow">{storingError}</div>
+          )}
+          <button
+            type="submit"
+            className="btn btn-blue"
+            disabled={storingInProgress}
+          >
             Rechnung {booking.bill?._id ? 'Updaten' : 'Erstellen'}
           </button>
         </form>