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;
+  });
+}

src/routes/receipts/+page.server.ts

@@ -4,7 +4,6 @@ import type { StackqReceipt } from "$lib/types/receipts";
 
 const COLLECTION = "Stackq_Receipts";
 
-const STATUS_OPTIONS = ["New", "Data Entered", "Reviewed", "Consolidated"] as const;
 const TYPE_OPTIONS = ["Purchase", "Gas"] as const;
 
 export const load: PageServerLoad = async ({ locals }) => {
@@ -28,13 +27,12 @@ export const actions: Actions = {
     if (!user?.id) return fail(401, { error: "You must be logged in to create a receipt." });
 
     const form = await request.formData();
-    const Status = (form.get("Status") as string)?.trim() || "New";
     const Type = (form.get("Type") as string)?.trim() || "Purchase";
     const imageFile = form.get("Image") as File | null;
     const hasImage = imageFile && imageFile.size > 0;
 
     const body: Record<string, unknown> = {
-      Status: STATUS_OPTIONS.includes(Status as (typeof STATUS_OPTIONS)[number]) ? Status : "New",
+      Status: "New",
       Type: TYPE_OPTIONS.includes(Type as (typeof TYPE_OPTIONS)[number]) ? Type : "Purchase",
       User: user.id,
     };
@@ -47,7 +45,7 @@ export const actions: Actions = {
         err && typeof err === "object" && "message" in err
           ? String((err as { message: string }).message)
           : "Failed to create receipt.";
-      return fail(500, { error: message, Status, Type });
+      return fail(500, { error: message, Type });
     }
 
     return { success: true };

src/routes/receipts/+page.svelte

@@ -127,7 +127,6 @@
       action="/receipts?/create"
       submitLabel="Create"
       error={form?.error}
-      defaultStatus={form?.Status ?? "New"}
       defaultType={form?.Type ?? "Purchase"}
       onSuccess={onReceiptCreateSuccess}
     />

src/routes/receipts/ReceiptForm.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button";
-  import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
+  import { convertImageToWebP } from "$lib/convert-image-to-webp";
   import { enhance } from "$app/forms";
 
-  const STATUS_OPTIONS = ["New", "Data Entered", "Reviewed", "Consolidated"] as const;
   const TYPE_OPTIONS = ["Purchase", "Gas"] as const;
 
   let {
@@ -12,28 +11,44 @@
     submitLabel,
     error,
     onSuccess,
-    defaultStatus = "New",
     defaultType = "Purchase",
   }: {
     action: string;
     submitLabel: string;
     error?: string | null;
     onSuccess?: () => void;
-    defaultStatus?: string;
     defaultType?: string;
   } = $props();
 
   let imageInputEl = $state<HTMLInputElement | null>(null);
   let imageFileName = $state<string | null>(null);
+  let imageConverting = $state(false);
 
   function openScanReceipt() {
     imageInputEl?.click();
   }
 
-  function onImageChange(e: Event) {
+  async function onImageChange(e: Event) {
     const input = e.currentTarget as HTMLInputElement;
     const file = input.files?.[0];
-    imageFileName = file ? file.name : null;
+    if (!file || !file.type.startsWith("image/")) {
+      imageFileName = null;
+      return;
+    }
+    imageConverting = true;
+    imageFileName = null;
+    try {
+      const webpFile = await convertImageToWebP(file);
+      const dt = new DataTransfer();
+      dt.items.add(webpFile);
+      input.files = dt.files;
+      imageFileName = webpFile.name;
+    } catch {
+      imageFileName = file.name + " (conversion failed)";
+      input.value = "";
+    } finally {
+      imageConverting = false;
+    }
   }
 </script>
 
@@ -49,19 +64,6 @@
   }}
   class="flex flex-col gap-4"
 >
-  <div class="space-y-2">
-    <Label for="Status">Status</Label>
-    <select
-      id="Status"
-      name="Status"
-      class="border-input bg-background flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs"
-    >
-      {#each STATUS_OPTIONS as o}
-        <option value={o} selected={defaultStatus === o}>{o}</option>
-      {/each}
-    </select>
-  </div>
-
   <div class="space-y-2">
     <Label for="Type">Type</Label>
     <select
@@ -96,10 +98,12 @@
         onchange={onImageChange}
         class="hidden"
       />
-      {#if imageFileName}
+      {#if imageConverting}
+        <p class="text-muted-foreground text-xs">Converting to WebP…</p>
+      {:else if imageFileName}
         <p class="text-muted-foreground text-xs">Selected: {imageFileName}</p>
       {:else}
-        <p class="text-muted-foreground text-xs">Optional. Use “Scan receipt” to take a photo or pick an image.</p>
+        <p class="text-muted-foreground text-xs">Optional. Images are converted to WebP before upload.</p>
       {/if}
     </div>
   </div>

src/routes/receipts/[id]/+page.svelte

@@ -4,6 +4,7 @@
   import * as Collapsible from "$lib/components/ui/collapsible";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
+  import { convertImageToWebP } from "$lib/convert-image-to-webp";
   import { POCKETBASE_BASE_URL } from "$lib/pocketbase";
   import { enhance } from "$app/forms";
   import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
@@ -135,11 +136,23 @@
   function openReplaceImage() {
     imageInputEl?.click();
   }
-  function onImageChange() {
+  async function onImageChange() {
     const input = imageInputEl;
     const file = input?.files?.[0] ?? null;
-    selectedImageFile = file;
-    imageFileName = file ? file.name : null;
+    if (!file || !file.type.startsWith("image/")) {
+      selectedImageFile = null;
+      imageFileName = null;
+      return;
+    }
+    try {
+      const webpFile = await convertImageToWebP(file);
+      selectedImageFile = webpFile;
+      imageFileName = webpFile.name;
+    } catch {
+      selectedImageFile = null;
+      imageFileName = null;
+      if (input) input.value = "";
+    }
   }
   function imageLoadError() {
     imageError = true;