Refactor receipt handling by removing status options from the server-side logic and simplifying the default status to "New". Update the receipt form to eliminate the status selection, enhancing user experience by focusing on essential fields. Improve image upload handling with WebP conversion support in both receipt creation and editing components.

src/lib/convert-image-to-webp.ts

@@ -0,0 +1,43 @@
+/**
+ * Converts an image File to WebP and returns a new File.
+ * Used so receipt uploads are stored only as WebP.
+ */
+export function convertImageToWebP(file: File, quality = 0.85): Promise<File> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      const canvas = document.createElement("canvas");
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        reject(new Error("Could not get canvas context"));
+        return;
+      }
+      ctx.drawImage(img, 0, 0);
+      canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            reject(new Error("Failed to encode WebP"));
+            return;
+          }
+          const baseName = file.name.replace(/\.[^.]+$/i, "") || "image";
+          const webpFile = new File([blob], `${baseName}.webp`, {
+            type: "image/webp",
+            lastModified: Date.now(),
+          });
+          resolve(webpFile);
+        },
+        "image/webp",
+        quality
+      );
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to load image"));
+    };
+    img.src = url;
+  });
+}